@carefirst/library 1.3.8 → 1.3.9
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/badge/badge.component.mjs +39 -0
- package/esm2022/lib/components/button/button.component.mjs +3 -3
- package/esm2022/lib/components/chat-bubble/chat-bubble.component.mjs +31 -0
- package/esm2022/lib/components/form-input-select/form-input-select.component.mjs +2 -2
- package/esm2022/lib/components/notification/notification.component.mjs +2 -2
- package/esm2022/lib/components/spinner/spinner.component.mjs +19 -0
- package/esm2022/lib/directives/button-loader.directive.mjs +3 -3
- package/esm2022/lib/library.module.mjs +18 -3
- package/esm2022/lib/utils/attribute.util.mjs +1 -1
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/carefirst-library.mjs +101 -15
- package/fesm2022/carefirst-library.mjs.map +1 -1
- package/lib/components/badge/badge.component.d.ts +15 -0
- package/lib/components/chat-bubble/chat-bubble.component.d.ts +13 -0
- package/lib/components/spinner/spinner.component.d.ts +9 -0
- package/lib/library.module.d.ts +7 -4
- package/package.json +1 -1
- package/public/styles/colors.scss +2 -2
- package/public/styles/font.scss +2 -2
- package/public-api.d.ts +3 -0
|
@@ -25,7 +25,7 @@ class ButtonLoaderDirective {
|
|
|
25
25
|
this.viewContainer.clear();
|
|
26
26
|
this.viewContainer.createEmbeddedView(this.templateRef);
|
|
27
27
|
if (loading) {
|
|
28
|
-
this.viewContainer.createComponent(SpinnerComponent);
|
|
28
|
+
this.viewContainer.createComponent(SpinnerComponent$1);
|
|
29
29
|
this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -40,13 +40,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
40
40
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { cfButtonLoader: [{
|
|
41
41
|
type: Input
|
|
42
42
|
}] } });
|
|
43
|
-
class SpinnerComponent {
|
|
43
|
+
let SpinnerComponent$1 = class SpinnerComponent {
|
|
44
44
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SpinnerComponent, selector: "ng-component", ngImport: i0, template: '<div class="loading-spinner"></div>', isInline: true, styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{
|
|
46
|
-
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
45
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SpinnerComponent, selector: "ng-component", ngImport: i0, template: '<div class="loading-spinner"></div>', isInline: true, styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-outline);border-top-color:var(--cf-app-color-accent);animation:spinner 1s linear infinite}\n"] });
|
|
46
|
+
};
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SpinnerComponent$1, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
|
-
args: [{ template: '<div class="loading-spinner"></div>', styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{
|
|
49
|
+
args: [{ template: '<div class="loading-spinner"></div>', styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.loading-spinner{position:absolute;top:calc(50% - 1em);left:calc(50% - 1em);width:2em;height:2em;border-radius:50%;border:3px solid var(--cf-app-system-color-outline);border-top-color:var(--cf-app-color-accent);animation:spinner 1s linear infinite}\n"] }]
|
|
50
50
|
}] });
|
|
51
51
|
|
|
52
52
|
function checkTruthAttribute(changes, attribute, curVal) {
|
|
@@ -240,11 +240,11 @@ class ButtonComponent {
|
|
|
240
240
|
return '';
|
|
241
241
|
}
|
|
242
242
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: ButtonComponent, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", snug: "snug", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", loading: "loading", 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 }\"\n mode=\"md\"\n [disabled]=\"inputDisabled\"
|
|
243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: ButtonComponent, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", snug: "snug", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", loading: "loading", 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 }\"\n mode=\"md\"\n [disabled]=\"inputDisabled\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p *cfButtonLoader=\"inputLoading\">\n <ng-content></ng-content>\n </p>\n <cf-icon *ngIf=\"inputIconEnd\" [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\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%;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:-moz-fit-content;width:fit-content;font-weight:500;font-style:normal;line-height:auto}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:-moz-fit-content;width:fit-content;min-height:-moz-fit-content;min-height: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 p{color:var(--button-text-color)}.cf-button-primary[class*=disabled]{opacity:100%;--background: var(--cf-app-system-color-disabled);--button-text-color: #9d9d9d}.cf-button-primary[class*=disabled] p{color:var(--button-text-color)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary.alert:not([class*=disabled]) p{color:var(--button-text-color)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary p{color:var(--button-text-color)}.cf-button-secondary::part(native){border:.2rem solid var(--core)}.cf-button-secondary[class*=disabled]{opacity:100%;--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-secondary[class*=disabled] p{color:var(--button-text-color)}.cf-button-secondary[class*=disabled]::part(native){border:.2rem solid var(--cf-app-system-color-disabled)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled]) p{color:var(--button-text-color)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary p{color:var(--button-text-color)}.cf-button-tertiary[class*=disabled]{opacity:100%;--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-tertiary[class*=disabled] p{color:var(--button-text-color)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-tertiary.alert:not([class*=disabled]) p{color:var(--button-text-color)}\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "iconColor"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }] });
|
|
244
244
|
}
|
|
245
245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
246
246
|
type: Component,
|
|
247
|
-
args: [{ selector: 'cf-btn', 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 }\"\n mode=\"md\"\n [disabled]=\"inputDisabled\"
|
|
247
|
+
args: [{ selector: 'cf-btn', 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 }\"\n mode=\"md\"\n [disabled]=\"inputDisabled\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p *cfButtonLoader=\"inputLoading\">\n <ng-content></ng-content>\n </p>\n <cf-icon *ngIf=\"inputIconEnd\" [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\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%;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:-moz-fit-content;width:fit-content;font-weight:500;font-style:normal;line-height:auto}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:-moz-fit-content;width:fit-content;min-height:-moz-fit-content;min-height: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 p{color:var(--button-text-color)}.cf-button-primary[class*=disabled]{opacity:100%;--background: var(--cf-app-system-color-disabled);--button-text-color: #9d9d9d}.cf-button-primary[class*=disabled] p{color:var(--button-text-color)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary.alert:not([class*=disabled]) p{color:var(--button-text-color)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary p{color:var(--button-text-color)}.cf-button-secondary::part(native){border:.2rem solid var(--core)}.cf-button-secondary[class*=disabled]{opacity:100%;--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-secondary[class*=disabled] p{color:var(--button-text-color)}.cf-button-secondary[class*=disabled]::part(native){border:.2rem solid var(--cf-app-system-color-disabled)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled]) p{color:var(--button-text-color)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary p{color:var(--button-text-color)}.cf-button-tertiary[class*=disabled]{opacity:100%;--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-tertiary[class*=disabled] p{color:var(--button-text-color)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-tertiary.alert:not([class*=disabled]) p{color:var(--button-text-color)}\n"] }]
|
|
248
248
|
}], propDecorators: { type: [{
|
|
249
249
|
type: Input
|
|
250
250
|
}], disabled: [{
|
|
@@ -300,11 +300,11 @@ class NotificationComponent {
|
|
|
300
300
|
data;
|
|
301
301
|
buttonClick = new EventEmitter();
|
|
302
302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: NotificationComponent, selector: "cf-notification", inputs: { data: "data" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div *ngIf=\"data\">\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\" size-md=\"6\">\n <div [ngClass]=\"data.status\" id=\"notification-container\">\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 <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n </ion-col>\n <ion-col *ngIf=\"data.message\" size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n <ion-col *ngIf=\"data.button?.buttonHeading\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n </ion-col>\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n <ion-col size=\"12\" *ngIf=\"data.button\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n data.button.buttonText\n }}</cf-btn>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-
|
|
303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: NotificationComponent, selector: "cf-notification", inputs: { data: "data" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div *ngIf=\"data\">\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\" size-md=\"6\">\n <div [ngClass]=\"data.status\" id=\"notification-container\">\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 <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n </ion-col>\n <ion-col *ngIf=\"data.message\" size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n <ion-col *ngIf=\"data.button?.buttonHeading\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n </ion-col>\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n <ion-col size=\"12\" *ngIf=\"data.button\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n data.button.buttonText\n }}</cf-btn>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-success)}#notification-container.warning{border:1.5px solid var(--cf-app-system-color-warning);background-color:var(--cf-app-system-color-light-warning)}#notification-container.error{border:1.5px solid var(--cf-app-system-color-error);background-color:var(--cf-app-system-color-light-error)}\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "cf-btn", inputs: ["type", "disabled", "alert", "action", "snug", "fontSize", "iconStart", "iconEnd", "loading", "customColor"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "iconColor"] }] });
|
|
304
304
|
}
|
|
305
305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
306
306
|
type: Component,
|
|
307
|
-
args: [{ selector: 'cf-notification', template: "<div *ngIf=\"data\">\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\" size-md=\"6\">\n <div [ngClass]=\"data.status\" id=\"notification-container\">\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 <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n </ion-col>\n <ion-col *ngIf=\"data.message\" size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n <ion-col *ngIf=\"data.button?.buttonHeading\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n </ion-col>\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n <ion-col size=\"12\" *ngIf=\"data.button\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n data.button.buttonText\n }}</cf-btn>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-
|
|
307
|
+
args: [{ selector: 'cf-notification', template: "<div *ngIf=\"data\">\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n <ion-grid>\n <ion-row class=\"ion-justify-content-center\">\n <ion-col size=\"12\" size-md=\"6\">\n <div [ngClass]=\"data.status\" id=\"notification-container\">\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 <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n </ion-col>\n <ion-col *ngIf=\"data.message\" size=\"12\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-small\">{{ data.message }}</p>\n </ion-col>\n <ion-col *ngIf=\"data.button?.buttonHeading\">\n <cf-spacer default=\"8\"></cf-spacer>\n <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n </ion-col>\n <ion-col size=\"12\">\n <ng-content></ng-content>\n </ion-col>\n <ion-col size=\"12\" *ngIf=\"data.button\">\n <cf-spacer default=\"8\"></cf-spacer>\n <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n data.button.buttonText\n }}</cf-btn>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n <cf-spacer mobile=\"16\" desktop=\"32\"></cf-spacer>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-success)}#notification-container.warning{border:1.5px solid var(--cf-app-system-color-warning);background-color:var(--cf-app-system-color-light-warning)}#notification-container.error{border:1.5px solid var(--cf-app-system-color-error);background-color:var(--cf-app-system-color-light-error)}\n"] }]
|
|
308
308
|
}], propDecorators: { data: [{
|
|
309
309
|
type: Input
|
|
310
310
|
}], buttonClick: [{
|
|
@@ -525,11 +525,11 @@ class FormInputSelectComponent {
|
|
|
525
525
|
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) || 'floating';
|
|
526
526
|
}
|
|
527
527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
528
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FormInputSelectComponent, selector: "cf-form-input-select", inputs: { label: "label", options: "options", labelPlacement: "labelPlacement", placeholder: "placeholder", control: "control", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n<ion-select\n *ngIf=\"!control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<!-- Form Control -->\n<ion-select\n *ngIf=\"control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<cf-form-validation *ngIf=\"control\" [control]=\"control\"></cf-form-validation>\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}::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}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "legacy", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FormInputSelectComponent, selector: "cf-form-input-select", inputs: { label: "label", options: "options", labelPlacement: "labelPlacement", placeholder: "placeholder", control: "control", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n<ion-select\n *ngIf=\"!control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<!-- Form Control -->\n<ion-select\n *ngIf=\"control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<cf-form-validation *ngIf=\"control\" [control]=\"control\"></cf-form-validation>\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}\n"], dependencies: [{ kind: "component", type: i1.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "legacy", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
529
529
|
}
|
|
530
530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormInputSelectComponent, decorators: [{
|
|
531
531
|
type: Component,
|
|
532
|
-
args: [{ selector: 'cf-form-input-select', template: "<!-- ngModel -->\n<ion-select\n *ngIf=\"!control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<!-- Form Control -->\n<ion-select\n *ngIf=\"control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<cf-form-validation *ngIf=\"control\" [control]=\"control\"></cf-form-validation>\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}::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}\n"] }]
|
|
532
|
+
args: [{ selector: 'cf-form-input-select', template: "<!-- ngModel -->\n<ion-select\n *ngIf=\"!control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<!-- Form Control -->\n<ion-select\n *ngIf=\"control\"\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 <ion-select-option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.displayName }}</ion-select-option>\n</ion-select>\n<cf-form-validation *ngIf=\"control\" [control]=\"control\"></cf-form-validation>\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}\n"] }]
|
|
533
533
|
}], propDecorators: { label: [{
|
|
534
534
|
type: Input
|
|
535
535
|
}], options: [{
|
|
@@ -600,6 +600,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
600
600
|
type: Output
|
|
601
601
|
}] } });
|
|
602
602
|
|
|
603
|
+
class ChatBubbleComponent {
|
|
604
|
+
type = 'outgoing';
|
|
605
|
+
date = '';
|
|
606
|
+
message = '';
|
|
607
|
+
inputType = 'incoming';
|
|
608
|
+
inputDate = '';
|
|
609
|
+
inputMessage = '';
|
|
610
|
+
ngOnChanges(changes) {
|
|
611
|
+
this.inputType = validateStringValue(changes, 'type', ['incoming', 'outgoing'], this.inputType) || 'outgoing';
|
|
612
|
+
this.inputDate = changes['date']?.currentValue || '';
|
|
613
|
+
this.inputMessage = changes['message']?.currentValue || '';
|
|
614
|
+
}
|
|
615
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ChatBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: ChatBubbleComponent, selector: "cf-chat-bubble", inputs: { type: "type", date: "date", message: "message" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"container\" [ngClass]=\"inputType\">\n <div id=\"message\">\n <p class=\"body-extra-small\">{{ inputDate }}</p>\n <cf-spacer default=\"4\"></cf-spacer>\n <div id=\"bubble\">\n <p class=\"body-extra-small\">{{ inputMessage }}</p>\n </div>\n </div>\n</div>\n", styles: ["#container{display:flex}#container #message p{color:var(--cf-app-text-color-default)}#container #message #bubble{background:var(--message-background-color);border-radius:var(--border-radius);padding:12px 16px}#container #message #bubble p{color:var(--cf-app-text-color-light)}#container.outgoing{justify-content:end;text-align:end;--border-radius: 16px 4px 16px 16px;--message-background-color: var(--cf-app-color-primary)}#container.incoming{justify-content:start;text-align:start;--border-radius: 4px 16px 16px 16px;--message-background-color: var(--cf-app-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }] });
|
|
617
|
+
}
|
|
618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ChatBubbleComponent, decorators: [{
|
|
619
|
+
type: Component,
|
|
620
|
+
args: [{ selector: 'cf-chat-bubble', template: "<div id=\"container\" [ngClass]=\"inputType\">\n <div id=\"message\">\n <p class=\"body-extra-small\">{{ inputDate }}</p>\n <cf-spacer default=\"4\"></cf-spacer>\n <div id=\"bubble\">\n <p class=\"body-extra-small\">{{ inputMessage }}</p>\n </div>\n </div>\n</div>\n", styles: ["#container{display:flex}#container #message p{color:var(--cf-app-text-color-default)}#container #message #bubble{background:var(--message-background-color);border-radius:var(--border-radius);padding:12px 16px}#container #message #bubble p{color:var(--cf-app-text-color-light)}#container.outgoing{justify-content:end;text-align:end;--border-radius: 16px 4px 16px 16px;--message-background-color: var(--cf-app-color-primary)}#container.incoming{justify-content:start;text-align:start;--border-radius: 4px 16px 16px 16px;--message-background-color: var(--cf-app-color-secondary)}\n"] }]
|
|
621
|
+
}], propDecorators: { type: [{
|
|
622
|
+
type: Input
|
|
623
|
+
}], date: [{
|
|
624
|
+
type: Input
|
|
625
|
+
}], message: [{
|
|
626
|
+
type: Input
|
|
627
|
+
}] } });
|
|
628
|
+
|
|
629
|
+
const badgeTypeC = [
|
|
630
|
+
'primary',
|
|
631
|
+
'alert',
|
|
632
|
+
'accent',
|
|
633
|
+
'warning',
|
|
634
|
+
'disabled',
|
|
635
|
+
'feedback-success',
|
|
636
|
+
'feedback-error',
|
|
637
|
+
'feedback-warning',
|
|
638
|
+
'feedback-busy',
|
|
639
|
+
];
|
|
640
|
+
class BadgeComponent {
|
|
641
|
+
type = 'primary';
|
|
642
|
+
icon;
|
|
643
|
+
inputType = 'primary';
|
|
644
|
+
inputIcon = undefined;
|
|
645
|
+
ngOnChanges(changes) {
|
|
646
|
+
this.inputType = validateStringValue(changes, 'type', badgeTypeC.slice(), this.inputType) || 'primary';
|
|
647
|
+
this.inputIcon = validateStringValue(changes, 'icon', iconsC.slice(), this.inputIcon);
|
|
648
|
+
}
|
|
649
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: BadgeComponent, selector: "cf-badge", inputs: { type: "type", icon: "icon" }, usesOnChanges: true, ngImport: i0, template: "<div [className]=\"'cf-badge-' + inputType\">\n <cf-icon *ngIf=\"inputIcon && inputType !== 'feedback-busy'\" [icon]=\"inputIcon\" [height]=\"12\"></cf-icon>\n <ion-spinner *ngIf=\"inputType === 'feedback-busy'\"></ion-spinner>\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-badge-border-color: var(--cf-badge-background);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:8px;justify-content:center;align-items:center;padding:8px 16px;border-radius:6px;width:-moz-fit-content;width:fit-content;background:var(--cf-badge-background);border:.2rem solid var(--cf-badge-border-color)}div[class^=cf-badge-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-badge-background)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-app-system-color-error)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-app-color-accent)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning);--cf-badge-text-color: var(--cf-app-text-color-grey);--cf-badge-border-color: var(--cf-app-system-color-warning)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey);--cf-badge-border-color: var(--cf-app-system-color-disabled)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-light-success);--cf-badge-text-color: var(--cf-app-system-color-success);--cf-badge-border-color: var(--cf-app-system-color-success)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-light-error);--cf-badge-text-color: var(--cf-app-system-color-error);--cf-badge-border-color: var(--cf-app-system-color-error)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-light-warning);--cf-badge-text-color: var(--cf-app-system-color-warning);--cf-badge-border-color: var(--cf-app-system-color-warning)}div.cf-badge-feedback-busy ion-spinner{color:var(--cf-app-system-color-warning);height:1.2rem;width:1.2rem}\n"], dependencies: [{ kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "iconColor"] }] });
|
|
651
|
+
}
|
|
652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
653
|
+
type: Component,
|
|
654
|
+
args: [{ selector: 'cf-badge', template: "<div [className]=\"'cf-badge-' + inputType\">\n <cf-icon *ngIf=\"inputIcon && inputType !== 'feedback-busy'\" [icon]=\"inputIcon\" [height]=\"12\"></cf-icon>\n <ion-spinner *ngIf=\"inputType === 'feedback-busy'\"></ion-spinner>\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-badge-border-color: var(--cf-badge-background);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:8px;justify-content:center;align-items:center;padding:8px 16px;border-radius:6px;width:-moz-fit-content;width:fit-content;background:var(--cf-badge-background);border:.2rem solid var(--cf-badge-border-color)}div[class^=cf-badge-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;font-weight:500;font-style:normal;line-height:auto;color:var(--cf-badge-text-color)}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-badge-background)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-app-system-color-error)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-badge-border-color: var(--cf-app-color-accent)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning);--cf-badge-text-color: var(--cf-app-text-color-grey);--cf-badge-border-color: var(--cf-app-system-color-warning)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey);--cf-badge-border-color: var(--cf-app-system-color-disabled)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-light-success);--cf-badge-text-color: var(--cf-app-system-color-success);--cf-badge-border-color: var(--cf-app-system-color-success)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-light-error);--cf-badge-text-color: var(--cf-app-system-color-error);--cf-badge-border-color: var(--cf-app-system-color-error)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-light-warning);--cf-badge-text-color: var(--cf-app-system-color-warning);--cf-badge-border-color: var(--cf-app-system-color-warning)}div.cf-badge-feedback-busy ion-spinner{color:var(--cf-app-system-color-warning);height:1.2rem;width:1.2rem}\n"] }]
|
|
655
|
+
}], propDecorators: { type: [{
|
|
656
|
+
type: Input
|
|
657
|
+
}], icon: [{
|
|
658
|
+
type: Input
|
|
659
|
+
}] } });
|
|
660
|
+
|
|
661
|
+
class SpinnerComponent {
|
|
662
|
+
size = 20;
|
|
663
|
+
inputSize = 20;
|
|
664
|
+
ngOnChanges(changes) {
|
|
665
|
+
this.inputSize = validateNumberValue(changes, 'size', this.inputSize) || this.inputSize;
|
|
666
|
+
}
|
|
667
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
668
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: SpinnerComponent, selector: "cf-spinner", inputs: { size: "size" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"spinner\" [style]=\"'font-size: ' + inputSize + 'px'\"></div>\n", styles: ["#spinner{width:1em;height:1em;border:.15em solid var(--cf-app-system-color-outline);border-radius:50%;border-top-color:var(--cf-app-color-accent);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] });
|
|
669
|
+
}
|
|
670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
671
|
+
type: Component,
|
|
672
|
+
args: [{ selector: 'cf-spinner', template: "<div id=\"spinner\" [style]=\"'font-size: ' + inputSize + 'px'\"></div>\n", styles: ["#spinner{width:1em;height:1em;border:.15em solid var(--cf-app-system-color-outline);border-radius:50%;border-top-color:var(--cf-app-color-accent);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
673
|
+
}], propDecorators: { size: [{
|
|
674
|
+
type: Input
|
|
675
|
+
}] } });
|
|
676
|
+
|
|
603
677
|
class CareFirstLibraryModule {
|
|
604
678
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CareFirstLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
605
679
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: CareFirstLibraryModule, declarations: [PageComponent,
|
|
@@ -614,7 +688,10 @@ class CareFirstLibraryModule {
|
|
|
614
688
|
FormValidationComponent,
|
|
615
689
|
FormInputComponent,
|
|
616
690
|
FormInputSelectComponent,
|
|
617
|
-
FormInputTextAreaComponent
|
|
691
|
+
FormInputTextAreaComponent,
|
|
692
|
+
ChatBubbleComponent,
|
|
693
|
+
BadgeComponent,
|
|
694
|
+
SpinnerComponent], imports: [IonicModule, CommonModule, ReactiveFormsModule], exports: [PageComponent,
|
|
618
695
|
ButtonComponent,
|
|
619
696
|
SpacerComponent,
|
|
620
697
|
IconComponent,
|
|
@@ -626,7 +703,10 @@ class CareFirstLibraryModule {
|
|
|
626
703
|
FormValidationComponent,
|
|
627
704
|
FormInputComponent,
|
|
628
705
|
FormInputSelectComponent,
|
|
629
|
-
FormInputTextAreaComponent
|
|
706
|
+
FormInputTextAreaComponent,
|
|
707
|
+
ChatBubbleComponent,
|
|
708
|
+
BadgeComponent,
|
|
709
|
+
SpinnerComponent] });
|
|
630
710
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CareFirstLibraryModule, imports: [IonicModule, CommonModule, ReactiveFormsModule] });
|
|
631
711
|
}
|
|
632
712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CareFirstLibraryModule, decorators: [{
|
|
@@ -646,6 +726,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
646
726
|
FormInputComponent,
|
|
647
727
|
FormInputSelectComponent,
|
|
648
728
|
FormInputTextAreaComponent,
|
|
729
|
+
ChatBubbleComponent,
|
|
730
|
+
BadgeComponent,
|
|
731
|
+
SpinnerComponent,
|
|
649
732
|
],
|
|
650
733
|
imports: [IonicModule, CommonModule, ReactiveFormsModule],
|
|
651
734
|
exports: [
|
|
@@ -662,6 +745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
662
745
|
FormInputComponent,
|
|
663
746
|
FormInputSelectComponent,
|
|
664
747
|
FormInputTextAreaComponent,
|
|
748
|
+
ChatBubbleComponent,
|
|
749
|
+
BadgeComponent,
|
|
750
|
+
SpinnerComponent,
|
|
665
751
|
],
|
|
666
752
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
667
753
|
}]
|
|
@@ -795,5 +881,5 @@ var input_interface = /*#__PURE__*/Object.freeze({
|
|
|
795
881
|
__proto__: null
|
|
796
882
|
});
|
|
797
883
|
|
|
798
|
-
export { AlertComponent, ButtonComponent, ButtonLoaderDirective, alert_interface as CFAlertI, icon_interface as CFIconI, input_interface as CFInputI, notification_interface as CFNotificationI, CFPFormValidators, spacer_interface as CFSpacerI, CalendarComponent, CareFirstLibraryModule, FormInputComponent, FormInputSelectComponent, FormInputTextAreaComponent, FormValidationComponent, IconComponent, LogoComponent, NotificationComponent, PageComponent, SpacerComponent };
|
|
884
|
+
export { AlertComponent, BadgeComponent, ButtonComponent, ButtonLoaderDirective, alert_interface as CFAlertI, icon_interface as CFIconI, input_interface as CFInputI, notification_interface as CFNotificationI, CFPFormValidators, spacer_interface as CFSpacerI, CalendarComponent, CareFirstLibraryModule, ChatBubbleComponent, FormInputComponent, FormInputSelectComponent, FormInputTextAreaComponent, FormValidationComponent, IconComponent, LogoComponent, NotificationComponent, PageComponent, SpacerComponent, SpinnerComponent };
|
|
799
885
|
//# sourceMappingURL=carefirst-library.mjs.map
|