@carefirst/library 7.1.0 → 7.1.2
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.
|
@@ -428,10 +428,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
428
428
|
* type="'primary' | 'secondary' | 'tertiary'"
|
|
429
429
|
* fontSize="'small' | 'large'"
|
|
430
430
|
* %customColor="var() | hex"%
|
|
431
|
+
* %iconStart=''%
|
|
432
|
+
* %iconEnd=''%
|
|
433
|
+
* %emojiStart=''%
|
|
434
|
+
* %emojiEnd=''%
|
|
431
435
|
* %disabled%
|
|
432
436
|
* %alert%
|
|
433
437
|
* %action%
|
|
434
438
|
* %snug%
|
|
439
|
+
* %accent%
|
|
440
|
+
* %white%
|
|
441
|
+
* %loading%
|
|
442
|
+
* %loadingText='TEXT'%
|
|
443
|
+
* %primaryColorSpinner%
|
|
435
444
|
* >TEXT</cf-btn>
|
|
436
445
|
*/
|
|
437
446
|
class ButtonComponent {
|
|
@@ -449,6 +458,7 @@ class ButtonComponent {
|
|
|
449
458
|
emojiEnd;
|
|
450
459
|
loading;
|
|
451
460
|
loadingText;
|
|
461
|
+
primaryColorSpinner;
|
|
452
462
|
customColor;
|
|
453
463
|
get parentEvents() {
|
|
454
464
|
if (this.disabled) {
|
|
@@ -470,6 +480,7 @@ class ButtonComponent {
|
|
|
470
480
|
inputEmojiStart = undefined;
|
|
471
481
|
inputEmojiEnd = undefined;
|
|
472
482
|
inputLoading = false;
|
|
483
|
+
inputPrimaryColorSpinner = false;
|
|
473
484
|
inputCustomColor = '';
|
|
474
485
|
/**----------------------------------------------------------------
|
|
475
486
|
* @name ngOnChanges
|
|
@@ -504,6 +515,8 @@ class ButtonComponent {
|
|
|
504
515
|
this.inputEmojiEnd = validateStringValue(changes, 'emojiEnd', emojisC.slice(), this.inputEmojiEnd);
|
|
505
516
|
//--- Loading
|
|
506
517
|
this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
|
|
518
|
+
//--- Primary Color Spinner
|
|
519
|
+
this.inputPrimaryColorSpinner = checkTruthAttribute(changes, 'primaryColorSpinner', this.inputPrimaryColorSpinner);
|
|
507
520
|
//--- Custom color
|
|
508
521
|
if (changes['customColor']?.currentValue)
|
|
509
522
|
this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
|
|
@@ -524,13 +537,13 @@ class ButtonComponent {
|
|
|
524
537
|
return '';
|
|
525
538
|
}
|
|
526
539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ButtonComponent, isStandalone: false, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", white: "white", snug: "snug", accent: "accent", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", emojiStart: "emojiStart", emojiEnd: "emojiEnd", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner
|
|
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", primaryColorSpinner: "primaryColorSpinner", customColor: "customColor" }, host: { properties: { "style.pointer-events": "parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor + (inputPrimaryColorSpinner ? '; --cf-app-color-accent: var(--cf-app-color-primary)' : '')\"\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\n [icon]=\"inputIconStart\"\n [primaryColor]=\"inputPrimaryColorSpinner\"\n [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: EmojiComponent, selector: "cf-emoji", inputs: ["emoji", "height", "heightMobile", "heightDesktop"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
528
541
|
}
|
|
529
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
530
543
|
type: Component,
|
|
531
544
|
args: [{ selector: 'cf-btn', standalone: false, host: {
|
|
532
545
|
'[style.pointer-events]': 'parentEvents',
|
|
533
|
-
}, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor\"\n [ngClass]=\"{\n 'cf-button-primary': inputType === 'primary',\n 'cf-button-secondary': inputType === 'secondary',\n 'cf-button-tertiary': inputType === 'tertiary',\n 'text-large': inputFontSize === 'large',\n 'text-small': inputFontSize === 'small',\n alert: inputAlert,\n action: inputAction,\n snug: inputSnug,\n accent: inputAccent,\n white: inputWhite,\n }\"\n mode=\"md\"\n [disabled]=\"inputDisabled || inputLoading\">\n @if (inputIconStart) {\n <cf-icon [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiStart) {\n <cf-emoji [emoji]=\"inputEmojiStart\"></cf-emoji>\n }\n @if (loadingText && inputLoading) {\n <cf-spinner
|
|
546
|
+
}, template: "<ion-button\n [style]=\"'--custom-color: ' + inputCustomColor + (inputPrimaryColorSpinner ? '; --cf-app-color-accent: var(--cf-app-color-primary)' : '')\"\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\n [icon]=\"inputIconStart\"\n [primaryColor]=\"inputPrimaryColorSpinner\"\n [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n <p>{{ loadingText }}</p>\n } @else {\n <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n }\n @if (inputIconEnd) {\n <cf-icon [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n }\n @if (inputEmojiEnd) {\n <cf-emoji [emoji]=\"inputEmojiEnd\"></cf-emoji>\n }\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));min-height:5.6rem;border-radius:1.6rem;text-transform:capitalize;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem}ion-button[class^=cf-button-]>p{width:fit-content;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1.6rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:1.2rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:1.2rem}ion-button[class^=cf-button-].snug{width:fit-content}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-grey-disabled);--button-text-color: var(--cf-app-text-color-grey)}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error-100)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-color-white);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:1px solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-secondary[class*=disabled]::part(native){border:1px solid var(--cf-app-system-color-grey-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:1px solid var(--cf-app-system-color-error-100)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:1px solid var(--cf-app-color-white)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-text-color-grey)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error-100)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
|
|
534
547
|
}], propDecorators: { type: [{
|
|
535
548
|
type: Input
|
|
536
549
|
}], disabled: [{
|
|
@@ -559,6 +572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
559
572
|
type: Input
|
|
560
573
|
}], loadingText: [{
|
|
561
574
|
type: Input
|
|
575
|
+
}], primaryColorSpinner: [{
|
|
576
|
+
type: Input
|
|
562
577
|
}], customColor: [{
|
|
563
578
|
type: Input
|
|
564
579
|
}] } });
|
|
@@ -1097,7 +1112,7 @@ class AlertComponent {
|
|
|
1097
1112
|
this.popover?.dismiss();
|
|
1098
1113
|
}
|
|
1099
1114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1100
|
-
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"] }] });
|
|
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", "primaryColorSpinner", "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"] }] });
|
|
1101
1116
|
}
|
|
1102
1117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1103
1118
|
type: Component,
|
|
@@ -1204,11 +1219,11 @@ class BadgeComponent {
|
|
|
1204
1219
|
this.inputStretch = checkTruthAttribute(changes, 'stretch', this.inputStretch);
|
|
1205
1220
|
}
|
|
1206
1221
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", emoji: "emoji", "extra-small": "extra-small", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-
|
|
1222
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", emoji: "emoji", "extra-small": "extra-small", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-color-white);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-success{--cf-badge-background: var(--cf-app-system-color-success-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning-100);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-grey-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-success-25);--cf-badge-text-color: var(--cf-app-system-color-success-100)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-error-25);--cf-badge-text-color: var(--cf-app-system-color-error-100)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-warning-25);--cf-badge-text-color: var(--cf-app-system-color-warning-100)}div.cf-badge-feedback-busy ion-spinner{height:1.2rem;width:1.2rem}div.cf-badge-feedback-accent{--cf-badge-background: var(--cf-app-color-accent-25);--cf-badge-text-color: var(--cf-app-color-accent)}div.cf-badge-feedback-disabled{--cf-badge-background: var(--cf-app-system-color-grey-background);--cf-badge-text-color: var(--cf-app-system-color-grey-disabled)}div.cf-badge-custom-color{--cf-badge-background: var(--custom-color, var(--cf-app-color-primary));--cf-badge-text-color: var(--custom-color-text, var(--cf-app-text-color-light))}\n"], dependencies: [{ 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: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
1208
1223
|
}
|
|
1209
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1210
1225
|
type: Component,
|
|
1211
|
-
args: [{ selector: 'cf-badge', standalone: false, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-
|
|
1226
|
+
args: [{ selector: 'cf-badge', standalone: false, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-color-white);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-success{--cf-badge-background: var(--cf-app-system-color-success-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning-100);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-grey-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-success-25);--cf-badge-text-color: var(--cf-app-system-color-success-100)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-error-25);--cf-badge-text-color: var(--cf-app-system-color-error-100)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-warning-25);--cf-badge-text-color: var(--cf-app-system-color-warning-100)}div.cf-badge-feedback-busy ion-spinner{height:1.2rem;width:1.2rem}div.cf-badge-feedback-accent{--cf-badge-background: var(--cf-app-color-accent-25);--cf-badge-text-color: var(--cf-app-color-accent)}div.cf-badge-feedback-disabled{--cf-badge-background: var(--cf-app-system-color-grey-background);--cf-badge-text-color: var(--cf-app-system-color-grey-disabled)}div.cf-badge-custom-color{--cf-badge-background: var(--custom-color, var(--cf-app-color-primary));--cf-badge-text-color: var(--custom-color-text, var(--cf-app-text-color-light))}\n"] }]
|
|
1212
1227
|
}], propDecorators: { type: [{
|
|
1213
1228
|
type: Input
|
|
1214
1229
|
}], icon: [{
|
|
@@ -1929,7 +1944,7 @@ class NotificationComponent {
|
|
|
1929
1944
|
}
|
|
1930
1945
|
}
|
|
1931
1946
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1932
|
-
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"] }] });
|
|
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", "primaryColorSpinner", "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"] }] });
|
|
1933
1948
|
}
|
|
1934
1949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
1935
1950
|
type: Component,
|