@carefirst/library 7.1.2 → 7.2.1
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
|
/**
|
|
@@ -440,7 +440,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
440
440
|
* %white%
|
|
441
441
|
* %loading%
|
|
442
442
|
* %loadingText='TEXT'%
|
|
443
|
-
* %primaryColorSpinner%
|
|
444
443
|
* >TEXT</cf-btn>
|
|
445
444
|
*/
|
|
446
445
|
class ButtonComponent {
|
|
@@ -458,7 +457,6 @@ class ButtonComponent {
|
|
|
458
457
|
emojiEnd;
|
|
459
458
|
loading;
|
|
460
459
|
loadingText;
|
|
461
|
-
primaryColorSpinner;
|
|
462
460
|
customColor;
|
|
463
461
|
get parentEvents() {
|
|
464
462
|
if (this.disabled) {
|
|
@@ -480,7 +478,6 @@ class ButtonComponent {
|
|
|
480
478
|
inputEmojiStart = undefined;
|
|
481
479
|
inputEmojiEnd = undefined;
|
|
482
480
|
inputLoading = false;
|
|
483
|
-
inputPrimaryColorSpinner = false;
|
|
484
481
|
inputCustomColor = '';
|
|
485
482
|
/**----------------------------------------------------------------
|
|
486
483
|
* @name ngOnChanges
|
|
@@ -515,8 +512,6 @@ class ButtonComponent {
|
|
|
515
512
|
this.inputEmojiEnd = validateStringValue(changes, 'emojiEnd', emojisC.slice(), this.inputEmojiEnd);
|
|
516
513
|
//--- Loading
|
|
517
514
|
this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
|
|
518
|
-
//--- Primary Color Spinner
|
|
519
|
-
this.inputPrimaryColorSpinner = checkTruthAttribute(changes, 'primaryColorSpinner', this.inputPrimaryColorSpinner);
|
|
520
515
|
//--- Custom color
|
|
521
516
|
if (changes['customColor']?.currentValue)
|
|
522
517
|
this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
|
|
@@ -537,13 +532,13 @@ class ButtonComponent {
|
|
|
537
532
|
return '';
|
|
538
533
|
}
|
|
539
534
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
540
|
-
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",
|
|
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"] }] });
|
|
541
536
|
}
|
|
542
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
543
538
|
type: Component,
|
|
544
539
|
args: [{ selector: 'cf-btn', standalone: false, host: {
|
|
545
540
|
'[style.pointer-events]': 'parentEvents',
|
|
546
|
-
}, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor
|
|
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"] }]
|
|
547
542
|
}], propDecorators: { type: [{
|
|
548
543
|
type: Input
|
|
549
544
|
}], disabled: [{
|
|
@@ -572,8 +567,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
572
567
|
type: Input
|
|
573
568
|
}], loadingText: [{
|
|
574
569
|
type: Input
|
|
575
|
-
}], primaryColorSpinner: [{
|
|
576
|
-
type: Input
|
|
577
570
|
}], customColor: [{
|
|
578
571
|
type: Input
|
|
579
572
|
}] } });
|
|
@@ -1025,11 +1018,11 @@ class FormInputComponent {
|
|
|
1025
1018
|
this.inputType = this.inputType === 'password' ? 'text' : 'password';
|
|
1026
1019
|
}
|
|
1027
1020
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1028
|
-
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"] }] });
|
|
1029
1022
|
}
|
|
1030
1023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1031
1024
|
type: Component,
|
|
1032
|
-
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"] }]
|
|
1033
1026
|
}], propDecorators: { label: [{
|
|
1034
1027
|
type: Input
|
|
1035
1028
|
}], min: [{
|
|
@@ -1112,7 +1105,7 @@ class AlertComponent {
|
|
|
1112
1105
|
this.popover?.dismiss();
|
|
1113
1106
|
}
|
|
1114
1107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AlertComponent, isStandalone: false, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-popover #popover cssClass=\"care-first-alert\" backdropDismiss=\"false\">\n <ng-template #popoverContent>\n <div class=\"popover-wrapper\">\n <ng-content></ng-content>\n <h4>{{ data?.heading }}</h4>\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium\">{{ data?.message }}</p>\n <cf-spacer default=\"24\"></cf-spacer>\n @if (data?.input) {\n <form [formGroup]=\"alertForm\">\n <cf-form-input\n [placeholder]=\"data?.input?.placeholder\"\n [control]=\"alertForm.controls.inputTextControl\"\n [customErrorMessage]=\"customError\"\n (valueChange)=\"customError = ''\"></cf-form-input>\n </form>\n <cf-spacer default=\"24\"></cf-spacer>\n }\n\n <div style=\"display: grid; gap: 12px\">\n <cf-btn type=\"primary\" fontSize=\"large\" [disabled]=\"data?.input?.validators && alertForm.invalid\" (click)=\"handleAlert(true)\">{{\n data?.buttonTrue || 'Okay'\n }}</cf-btn>\n @if (data && data.buttonFalse !== null) {\n <cf-btn fontSize=\"large\" type=\"tertiary\" alert (click)=\"handleAlert(false)\">{{ data.buttonFalse || 'Cancel' }}</cf-btn>\n }\n </div>\n </div>\n </ng-template>\n</ion-popover>\n", styles: [".care-first-alert::part(content){top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:100%;max-width:358px;border-radius:16px;text-align:center!important;justify-content:center!important}@media(min-width:768px){.care-first-alert::part(content){max-width:420px}}.care-first-alert .popover-wrapper{width:100%;padding:48px 24px 24px}\n"], dependencies: [{ kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "cf-btn", inputs: ["type", "disabled", "alert", "action", "white", "snug", "accent", "fontSize", "iconStart", "iconEnd", "emojiStart", "emojiEnd", "loading", "loadingText", "
|
|
1108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AlertComponent, isStandalone: false, selector: "cf-alert", inputs: { data: "data" }, outputs: { alertEvent: "alertEvent" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-popover #popover cssClass=\"care-first-alert\" backdropDismiss=\"false\">\n <ng-template #popoverContent>\n <div class=\"popover-wrapper\">\n <ng-content></ng-content>\n <h4>{{ data?.heading }}</h4>\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium\">{{ data?.message }}</p>\n <cf-spacer default=\"24\"></cf-spacer>\n @if (data?.input) {\n <form [formGroup]=\"alertForm\">\n <cf-form-input\n [placeholder]=\"data?.input?.placeholder\"\n [control]=\"alertForm.controls.inputTextControl\"\n [customErrorMessage]=\"customError\"\n (valueChange)=\"customError = ''\"></cf-form-input>\n </form>\n <cf-spacer default=\"24\"></cf-spacer>\n }\n\n <div style=\"display: grid; gap: 12px\">\n <cf-btn type=\"primary\" fontSize=\"large\" [disabled]=\"data?.input?.validators && alertForm.invalid\" (click)=\"handleAlert(true)\">{{\n data?.buttonTrue || 'Okay'\n }}</cf-btn>\n @if (data && data.buttonFalse !== null) {\n <cf-btn fontSize=\"large\" type=\"tertiary\" alert (click)=\"handleAlert(false)\">{{ data.buttonFalse || 'Cancel' }}</cf-btn>\n }\n </div>\n </div>\n </ng-template>\n</ion-popover>\n", styles: [".care-first-alert::part(content){top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:100%;max-width:358px;border-radius:16px;text-align:center!important;justify-content:center!important}@media(min-width:768px){.care-first-alert::part(content){max-width:420px}}.care-first-alert .popover-wrapper{width:100%;padding:48px 24px 24px}\n"], dependencies: [{ kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: FormInputComponent, selector: "cf-form-input", inputs: ["label", "min", "max", "labelPlacement", "placeholder", "inputmode", "autoCapitalize", "type", "noClearButton", "control", "textCenter", "maxLength", "greyBackground", "customErrorMessage", "value"], outputs: ["valueChange"] }] });
|
|
1116
1109
|
}
|
|
1117
1110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1118
1111
|
type: Component,
|
|
@@ -1432,11 +1425,11 @@ class FormInputCurrencyComponent {
|
|
|
1432
1425
|
}
|
|
1433
1426
|
}
|
|
1434
1427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1435
|
-
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"] }] });
|
|
1436
1429
|
}
|
|
1437
1430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputCurrencyComponent, decorators: [{
|
|
1438
1431
|
type: Component,
|
|
1439
|
-
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" }]
|
|
1440
1433
|
}], propDecorators: { currencyTextInput: [{
|
|
1441
1434
|
type: ViewChild,
|
|
1442
1435
|
args: ['currencyTextInput']
|
|
@@ -1500,11 +1493,11 @@ class FormInputSearchComponent {
|
|
|
1500
1493
|
validateStringValue(changes, 'autoCapitalize', inputsC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1501
1494
|
}
|
|
1502
1495
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1503
|
-
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"] }] });
|
|
1504
1497
|
}
|
|
1505
1498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSearchComponent, decorators: [{
|
|
1506
1499
|
type: Component,
|
|
1507
|
-
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"] }]
|
|
1508
1501
|
}], propDecorators: { label: [{
|
|
1509
1502
|
type: Input
|
|
1510
1503
|
}], labelPlacement: [{
|
|
@@ -1579,11 +1572,11 @@ class FormInputSelectComponent {
|
|
|
1579
1572
|
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) ?? 'floating';
|
|
1580
1573
|
}
|
|
1581
1574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1582
|
-
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"] }] });
|
|
1583
1576
|
}
|
|
1584
1577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputSelectComponent, decorators: [{
|
|
1585
1578
|
type: Component,
|
|
1586
|
-
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"] }]
|
|
1587
1580
|
}], propDecorators: { label: [{
|
|
1588
1581
|
type: Input
|
|
1589
1582
|
}], options: [{
|
|
@@ -1686,11 +1679,11 @@ class FormInputStringDateComponent {
|
|
|
1686
1679
|
}
|
|
1687
1680
|
}
|
|
1688
1681
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputStringDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1689
|
-
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"] }] });
|
|
1690
1683
|
}
|
|
1691
1684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputStringDateComponent, decorators: [{
|
|
1692
1685
|
type: Component,
|
|
1693
|
-
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" }]
|
|
1694
1687
|
}], propDecorators: { dateTextInput: [{
|
|
1695
1688
|
type: ViewChild,
|
|
1696
1689
|
args: ['dateTextInput']
|
|
@@ -1758,11 +1751,11 @@ class FormInputTextAreaComponent {
|
|
|
1758
1751
|
validateStringValue(changes, 'autoCapitalize', inputTextAreaC.autoCapitalize.slice(), this.inputAutoCapitalize) ?? 'none';
|
|
1759
1752
|
}
|
|
1760
1753
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
-
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"] }] });
|
|
1762
1755
|
}
|
|
1763
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormInputTextAreaComponent, decorators: [{
|
|
1764
1757
|
type: Component,
|
|
1765
|
-
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"] }]
|
|
1766
1759
|
}], propDecorators: { label: [{
|
|
1767
1760
|
type: Input
|
|
1768
1761
|
}], labelPlacement: [{
|
|
@@ -1944,7 +1937,7 @@ class NotificationComponent {
|
|
|
1944
1937
|
}
|
|
1945
1938
|
}
|
|
1946
1939
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1947
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationComponent, isStandalone: false, selector: "cf-notification", inputs: { data: "data" }, outputs: { dataChange: "dataChange", buttonClick: "buttonClick", closeClick: "closeClick", autoClose: "autoClose" }, usesOnChanges: true, ngImport: i0, template: "@if (data) {\n <div>\n <cf-spacer mobile=\"16\" desktop=\"24\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\">\n <div id=\"notification-container\" [ngClass]=\"data.status\">\n <ion-grid>\n <ion-row>\n <ion-col class=\"ion-align-self-center ion-text-start\">\n <p class=\"body-medium bold\">{{ data.heading }}</p>\n </ion-col>\n <ion-col size=\"auto\">\n @if (data.buttons && data.buttons.closeButton) {\n <cf-icon\n style=\"cursor: pointer\"\n icon=\"close\"\n (click)=\"closeClick.emit(data.buttons.identifier); data = undefined\"\n [height]=\"10\"\n [iconColor]=\"data.status\">\n </cf-icon>\n }\n </ion-col>\n @if (data.message) {\n <ion-col size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n }\n @if (data.buttons && data.buttons.actionButton?.buttonHeading) {\n <ion-col>\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.buttons.actionButton?.buttonHeading }}</p>\n </ion-col>\n }\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n @if (data.buttons && data.buttons.actionButton) {\n <ion-col size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.buttons.identifier); data = undefined\">\n {{ data.buttons.actionButton.buttonText }}\n </cf-btn>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n}\n", styles: ["#notification-container{border-radius:2rem;text-align:start;padding:2.4rem;margin-inline:auto;max-width:64rem}#notification-container.success{background-color:var(--cf-app-system-color-success-25)}#notification-container.warning{background-color:var(--cf-app-system-color-warning-25)}#notification-container.error{background-color:var(--cf-app-system-color-error-25)}#notification-container.accent{background-color:var(--cf-app-color-accent-50)}\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.IonRow, selector: "ion-row" }, { 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", "
|
|
1940
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationComponent, isStandalone: false, selector: "cf-notification", inputs: { data: "data" }, outputs: { dataChange: "dataChange", buttonClick: "buttonClick", closeClick: "closeClick", autoClose: "autoClose" }, usesOnChanges: true, ngImport: i0, template: "@if (data) {\n <div>\n <cf-spacer mobile=\"16\" desktop=\"24\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\">\n <div id=\"notification-container\" [ngClass]=\"data.status\">\n <ion-grid>\n <ion-row>\n <ion-col class=\"ion-align-self-center ion-text-start\">\n <p class=\"body-medium bold\">{{ data.heading }}</p>\n </ion-col>\n <ion-col size=\"auto\">\n @if (data.buttons && data.buttons.closeButton) {\n <cf-icon\n style=\"cursor: pointer\"\n icon=\"close\"\n (click)=\"closeClick.emit(data.buttons.identifier); data = undefined\"\n [height]=\"10\"\n [iconColor]=\"data.status\">\n </cf-icon>\n }\n </ion-col>\n @if (data.message) {\n <ion-col size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n }\n @if (data.buttons && data.buttons.actionButton?.buttonHeading) {\n <ion-col>\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.buttons.actionButton?.buttonHeading }}</p>\n </ion-col>\n }\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n @if (data.buttons && data.buttons.actionButton) {\n <ion-col size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.buttons.identifier); data = undefined\">\n {{ data.buttons.actionButton.buttonText }}\n </cf-btn>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n}\n", styles: ["#notification-container{border-radius:2rem;text-align:start;padding:2.4rem;margin-inline:auto;max-width:64rem}#notification-container.success{background-color:var(--cf-app-system-color-success-25)}#notification-container.warning{background-color:var(--cf-app-system-color-warning-25)}#notification-container.error{background-color:var(--cf-app-system-color-error-25)}#notification-container.accent{background-color:var(--cf-app-color-accent-50)}\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.IonRow, selector: "ion-row" }, { 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: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }] });
|
|
1948
1941
|
}
|
|
1949
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
1950
1943
|
type: Component,
|
|
@@ -2090,13 +2083,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
2090
2083
|
}] } });
|
|
2091
2084
|
|
|
2092
2085
|
class VerificationCodeComponent {
|
|
2093
|
-
valueToVerify;
|
|
2094
|
-
status;
|
|
2095
|
-
|
|
2096
|
-
removeResendText = false;
|
|
2086
|
+
valueToVerify = input.required(...(ngDevMode ? [{ debugName: "valueToVerify" }] : []));
|
|
2087
|
+
status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
2088
|
+
supportContact = input.required(...(ngDevMode ? [{ debugName: "supportContact" }] : []));
|
|
2097
2089
|
commsSentCount = model(0, ...(ngDevMode ? [{ debugName: "commsSentCount" }] : []));
|
|
2098
|
-
outcome =
|
|
2099
|
-
resendClickEvent =
|
|
2090
|
+
outcome = output();
|
|
2091
|
+
resendClickEvent = output();
|
|
2100
2092
|
myInput1;
|
|
2101
2093
|
myInput2;
|
|
2102
2094
|
myInput3;
|
|
@@ -2105,13 +2097,17 @@ class VerificationCodeComponent {
|
|
|
2105
2097
|
//--- HTML variables
|
|
2106
2098
|
validationCodeError = false;
|
|
2107
2099
|
verificationCodeInputArr = [null, null, null, null, null];
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
commsInputCountExceeded = false;
|
|
2100
|
+
codeInputCount = 0;
|
|
2101
|
+
codeInputCountExceeded = false;
|
|
2111
2102
|
validationCode;
|
|
2103
|
+
platform = 'mobile';
|
|
2112
2104
|
statusSub$;
|
|
2105
|
+
get codeInputDisabled() {
|
|
2106
|
+
return this.codeInputCountExceeded || this.status().value === 'resend' || this.status().value === 'disabled';
|
|
2107
|
+
}
|
|
2108
|
+
devicePlatformService = inject(Platform);
|
|
2113
2109
|
/**----------------------------------------------------------------
|
|
2114
|
-
* @name
|
|
2110
|
+
* @name ionViewDidEnter
|
|
2115
2111
|
* @description Update various values on component initialization
|
|
2116
2112
|
* @returns {void}
|
|
2117
2113
|
*/
|
|
@@ -2140,17 +2136,25 @@ class VerificationCodeComponent {
|
|
|
2140
2136
|
});
|
|
2141
2137
|
}
|
|
2142
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
|
+
}
|
|
2143
2147
|
/**----------------------------------------------------------------
|
|
2144
2148
|
* @name resendVerificationCode
|
|
2145
2149
|
* @description Resend a verification code
|
|
2146
2150
|
* @returns {void}
|
|
2147
2151
|
*/
|
|
2148
2152
|
resendVerificationCode() {
|
|
2149
|
-
this.
|
|
2150
|
-
this.
|
|
2153
|
+
this.codeInputCount = 0;
|
|
2154
|
+
this.codeInputCountExceeded = false;
|
|
2151
2155
|
this.validationCodeError = false;
|
|
2152
2156
|
this.commsSentCount.update((curr) => ++curr);
|
|
2153
|
-
this.status.next('initial');
|
|
2157
|
+
this.status().next('initial');
|
|
2154
2158
|
this.resendClickEvent.emit(true);
|
|
2155
2159
|
}
|
|
2156
2160
|
/**----------------------------------------------------------------
|
|
@@ -2173,8 +2177,8 @@ class VerificationCodeComponent {
|
|
|
2173
2177
|
if (this.verificationCodeInputArr.every((val) => val !== null)) {
|
|
2174
2178
|
this.validationCode = this.verificationCodeInputArr.join('');
|
|
2175
2179
|
this.outcome.emit(this.validationCode);
|
|
2176
|
-
this.
|
|
2177
|
-
this.
|
|
2180
|
+
this.codeInputCount++;
|
|
2181
|
+
this.codeInputCountExceeded = this.codeInputCount >= 3;
|
|
2178
2182
|
}
|
|
2179
2183
|
}
|
|
2180
2184
|
/**----------------------------------------------------------------
|
|
@@ -2249,26 +2253,14 @@ class VerificationCodeComponent {
|
|
|
2249
2253
|
this.statusSub$?.unsubscribe();
|
|
2250
2254
|
}
|
|
2251
2255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2252
|
-
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"] }] });
|
|
2253
2257
|
}
|
|
2254
2258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: VerificationCodeComponent, decorators: [{
|
|
2255
2259
|
type: Component,
|
|
2256
|
-
args: [{ selector: 'cf-verification-code', standalone: false, template: "
|
|
2257
|
-
}], propDecorators: { valueToVerify: [{
|
|
2258
|
-
type: Input
|
|
2259
|
-
}], status: [{
|
|
2260
|
-
type: Input
|
|
2261
|
-
}], userFeedbackMessages: [{
|
|
2262
|
-
type: Input
|
|
2263
|
-
}], removeResendText: [{
|
|
2264
|
-
type: Input
|
|
2265
|
-
}], commsSentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commsSentCount", required: false }] }, { type: i0.Output, args: ["commsSentCountChange"] }], outcome: [{
|
|
2266
|
-
type: Output
|
|
2267
|
-
}], resendClickEvent: [{
|
|
2268
|
-
type: Output
|
|
2269
|
-
}], 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: [{
|
|
2270
2262
|
type: ViewChild,
|
|
2271
|
-
args: [
|
|
2263
|
+
args: ['input1']
|
|
2272
2264
|
}], myInput2: [{
|
|
2273
2265
|
type: ViewChild,
|
|
2274
2266
|
args: ['input2']
|
|
@@ -2413,7 +2405,7 @@ var input_interface = /*#__PURE__*/Object.freeze({
|
|
|
2413
2405
|
* @description All available statuses for the verification code component
|
|
2414
2406
|
*/
|
|
2415
2407
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2416
|
-
const cfCodeInputVerificationStatusesC = ['initial', 'invalid', '
|
|
2408
|
+
const cfCodeInputVerificationStatusesC = ['initial', 'invalid', 'resend', 'processing', 'disabled'];
|
|
2417
2409
|
|
|
2418
2410
|
var verificationCode_interface = /*#__PURE__*/Object.freeze({
|
|
2419
2411
|
__proto__: null
|