@carefirst/library 5.4.2 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -434,11 +434,11 @@ class ButtonComponent {
|
|
|
434
434
|
return '';
|
|
435
435
|
}
|
|
436
436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "this.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 (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n</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));width:100%;max-width:420px;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;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:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;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:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{font-size:1rem}.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-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)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--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:.2rem 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:.2rem solid var(--cf-app-system-color-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:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.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:.2rem solid var(--cf-app-background-light)}.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)}.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: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "this.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 (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n</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));width:100%;max-width:420px;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;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:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;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:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{--padding-start: 1.6rem;--padding-end: 1.6rem;font-size:1rem}.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-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)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--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:.2rem 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:.2rem solid var(--cf-app-system-color-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:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.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:.2rem solid var(--cf-app-background-light)}.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)}.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: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
|
|
438
438
|
}
|
|
439
439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
440
440
|
type: Component,
|
|
441
|
-
args: [{ selector: 'cf-btn', standalone: false, 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 (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n</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));width:100%;max-width:420px;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;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:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;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:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{font-size:1rem}.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-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)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--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:.2rem 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:.2rem solid var(--cf-app-system-color-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:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.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:.2rem solid var(--cf-app-background-light)}.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)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
|
|
441
|
+
args: [{ selector: 'cf-btn', standalone: false, 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 (loadingText && inputLoading) {\n <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n</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));width:100%;max-width:420px;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;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:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;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:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{--padding-start: 1.6rem;--padding-end: 1.6rem;font-size:1rem}.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-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)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--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:.2rem 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:.2rem solid var(--cf-app-system-color-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:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.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:.2rem solid var(--cf-app-background-light)}.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)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
|
|
442
442
|
}], propDecorators: { type: [{
|
|
443
443
|
type: Input
|
|
444
444
|
}], disabled: [{
|
|
@@ -808,11 +808,11 @@ class FormValidationComponent {
|
|
|
808
808
|
}
|
|
809
809
|
}
|
|
810
810
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
811
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormValidationComponent, isStandalone: false, selector: "cf-form-validation", inputs: { control: "control", customErrorMessage: "customErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "@if (customErrorMessage) {\n <div class=\"form-valid-feedback\">\n <p class=\"body-medium\">{{ customErrorMessage }}</p>\n </div>\n} @else {\n @if (control?.dirty && control?.errors) {\n <div class=\"form-valid-feedback\">\n @for (error of this.control?.errors | keyvalue; track error.
|
|
811
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormValidationComponent, isStandalone: false, selector: "cf-form-validation", inputs: { control: "control", customErrorMessage: "customErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "@if (customErrorMessage) {\n <div class=\"form-valid-feedback\">\n <p class=\"body-medium\">{{ customErrorMessage }}</p>\n </div>\n} @else {\n @if (control?.dirty && control?.errors) {\n <div class=\"form-valid-feedback\">\n @for (error of this.control?.errors | keyvalue; track error.value) {\n <div>\n @if (error.key === 'email') {\n <p class=\"body-medium\">*Invalid email format</p>\n }\n @if (error.key === 'minlength') {\n <p class=\"body-medium\">*Length required: {{ error.value.requiredLength - error.value.actualLength }}</p>\n }\n @if (error.key === 'maxlength') {\n <p class=\"body-medium\">*Max Length: {{ error.value.requiredLength }}</p>\n }\n @if (error.key === 'pattern') {\n <p class=\"body-medium\">*Incorrect Pattern</p>\n }\n @if (error.key === 'errorMessage') {\n <p class=\"body-medium\">*{{ error.value }}</p>\n }\n </div>\n }\n </div>\n }\n}\n", styles: [".form-valid-feedback{padding:4px 0 0 10px}.form-valid-feedback p{font-size:1.2rem;text-align:left;color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }] });
|
|
812
812
|
}
|
|
813
813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormValidationComponent, decorators: [{
|
|
814
814
|
type: Component,
|
|
815
|
-
args: [{ selector: 'cf-form-validation', standalone: false, template: "@if (customErrorMessage) {\n <div class=\"form-valid-feedback\">\n <p class=\"body-medium\">{{ customErrorMessage }}</p>\n </div>\n} @else {\n @if (control?.dirty && control?.errors) {\n <div class=\"form-valid-feedback\">\n @for (error of this.control?.errors | keyvalue; track error.
|
|
815
|
+
args: [{ selector: 'cf-form-validation', standalone: false, template: "@if (customErrorMessage) {\n <div class=\"form-valid-feedback\">\n <p class=\"body-medium\">{{ customErrorMessage }}</p>\n </div>\n} @else {\n @if (control?.dirty && control?.errors) {\n <div class=\"form-valid-feedback\">\n @for (error of this.control?.errors | keyvalue; track error.value) {\n <div>\n @if (error.key === 'email') {\n <p class=\"body-medium\">*Invalid email format</p>\n }\n @if (error.key === 'minlength') {\n <p class=\"body-medium\">*Length required: {{ error.value.requiredLength - error.value.actualLength }}</p>\n }\n @if (error.key === 'maxlength') {\n <p class=\"body-medium\">*Max Length: {{ error.value.requiredLength }}</p>\n }\n @if (error.key === 'pattern') {\n <p class=\"body-medium\">*Incorrect Pattern</p>\n }\n @if (error.key === 'errorMessage') {\n <p class=\"body-medium\">*{{ error.value }}</p>\n }\n </div>\n }\n </div>\n }\n}\n", styles: [".form-valid-feedback{padding:4px 0 0 10px}.form-valid-feedback p{font-size:1.2rem;text-align:left;color:var(--cf-app-system-color-error)}\n"] }]
|
|
816
816
|
}], propDecorators: { control: [{
|
|
817
817
|
type: Input
|
|
818
818
|
}], customErrorMessage: [{
|
|
@@ -1454,11 +1454,11 @@ class FormInputSelectComponent {
|
|
|
1454
1454
|
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) ?? 'floating';
|
|
1455
1455
|
}
|
|
1456
1456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormInputSelectComponent, isStandalone: false, selector: "cf-form-input-select", inputs: { label: "label", options: "options", labelPlacement: "labelPlacement", placeholder: "placeholder", control: "control", customErrorMessage: "customErrorMessage", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n@if (!control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\"\n [value]=\"value\">\n @for (option of options; track option) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-select{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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: ["ion-select{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormValidationComponent, selector: "cf-form-validation", inputs: ["control", "customErrorMessage"] }] });
|
|
1458
1458
|
}
|
|
1459
1459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormInputSelectComponent, decorators: [{
|
|
1460
1460
|
type: Component,
|
|
1461
|
-
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) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n<!-- Form Control -->\n@if (control) {\n <ion-select\n [ngClass]=\"{ error: !!customErrorMessage }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n [placeholder]=\"placeholder\"\n fill=\"outline\"\n mode=\"md\"\n interface=\"popover\"\n [formControl]=\"control\"\n (ionChange)=\"valueChange.emit($event.detail.value ?? undefined)\">\n @for (option of options; track option) {\n <ion-select-option [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n }\n </ion-select>\n}\n@if (control || customErrorMessage) {\n <cf-form-validation [customErrorMessage]=\"customErrorMessage\" [control]=\"control || null\"></cf-form-validation>\n}\n", styles: ["ion-select{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\n"] }]
|
|
1461
|
+
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: ["ion-select{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start;--border-radius: 8px !important;--highlight-color-focused: var(--cf-app-color-primary);--highlight-color-invalid: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-color-primary)}::ng-deep ion-select-popover ion-list[class*=popover]{background:var(--cf-app-background-light)}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover]{--background: transparent;--border-radius: 8px;--background-focused: var(--cf-app-color-accent);--background-focused-opacity: .5;--background-hover: var(--cf-app-color-primary);--background-hover-opacity: .1;padding:4px}::ng-deep ion-select-popover ion-list[class*=popover] ion-item[class*=popover] ion-radio{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-text-color-default);text-align:start}ion-select.error{--border-color: var(--cf-app-system-color-error);--highlight-color-focused: var(--cf-app-system-color-error);--highlight-color-valid: var(--cf-app-system-color-error)}ion-select.error::part(label){color:var(--cf-app-system-color-error)}\n"] }]
|
|
1462
1462
|
}], propDecorators: { label: [{
|
|
1463
1463
|
type: Input
|
|
1464
1464
|
}], options: [{
|