@carefirst/library 6.2.5 → 6.2.6
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.
|
@@ -1108,11 +1108,11 @@ class BadgeComponent {
|
|
|
1108
1108
|
this.inputStretch = checkTruthAttribute(changes, 'stretch', this.inputStretch);
|
|
1109
1109
|
}
|
|
1110
1110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div [className]=\"'cf-badge-' + inputType\" [ngClass]=\"{ small: inputSmall, large: inputLarge, stretch: inputStretch }\">\n @if (inputIcon && inputType !== 'feedback-busy') {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor size=\"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;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].small>p{font-size:1rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].large>p{font-size:1.6rem}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: #fff;--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:
|
|
1111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div [className]=\"'cf-badge-' + inputType\" [ngClass]=\"{ small: inputSmall, large: inputLarge, stretch: inputStretch }\">\n @if (inputIcon && inputType !== 'feedback-busy') {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor size=\"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;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].small>p{font-size:1rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].large>p{font-size:1.6rem}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: #fff;--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: #fff;--cf-badge-text-color: color-mix(in srgb, var(--cf-app-system-color-grey-disabled) 85%, var(--cf-app-color-white))}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: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
1112
1112
|
}
|
|
1113
1113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1114
1114
|
type: Component,
|
|
1115
|
-
args: [{ selector: 'cf-badge', standalone: false, template: "<div [className]=\"'cf-badge-' + inputType\" [ngClass]=\"{ small: inputSmall, large: inputLarge, stretch: inputStretch }\">\n @if (inputIcon && inputType !== 'feedback-busy') {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor size=\"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;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].small>p{font-size:1rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].large>p{font-size:1.6rem}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: #fff;--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:
|
|
1115
|
+
args: [{ selector: 'cf-badge', standalone: false, template: "<div [className]=\"'cf-badge-' + inputType\" [ngClass]=\"{ small: inputSmall, large: inputLarge, stretch: inputStretch }\">\n @if (inputIcon && inputType !== 'feedback-busy') {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor size=\"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;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].small>p{font-size:1rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].large>p{font-size:1.6rem}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: #fff;--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: #fff;--cf-badge-text-color: color-mix(in srgb, var(--cf-app-system-color-grey-disabled) 85%, var(--cf-app-color-white))}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"] }]
|
|
1116
1116
|
}], propDecorators: { type: [{
|
|
1117
1117
|
type: Input
|
|
1118
1118
|
}], icon: [{
|
|
@@ -1829,11 +1829,11 @@ class NotificationComponent {
|
|
|
1829
1829
|
}
|
|
1830
1830
|
}
|
|
1831
1831
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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:
|
|
1832
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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", "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"] }] });
|
|
1833
1833
|
}
|
|
1834
1834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
1835
1835
|
type: Component,
|
|
1836
|
-
args: [{ selector: 'cf-notification', standalone: false, 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:
|
|
1836
|
+
args: [{ selector: 'cf-notification', standalone: false, 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"] }]
|
|
1837
1837
|
}], propDecorators: { data: [{
|
|
1838
1838
|
type: Input
|
|
1839
1839
|
}], dataChange: [{
|