@carefirst/library 1.3.4 → 1.3.6
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/button/button.component.mjs +16 -3
- package/esm2022/lib/components/calendar/calendar.component.mjs +2 -2
- package/esm2022/lib/components/form-input/form-input.component.mjs +2 -2
- package/esm2022/lib/components/form-input-select/form-input-select.component.mjs +5 -3
- package/esm2022/lib/components/form-input-text-area/form-input-text-area.component.mjs +7 -3
- package/esm2022/lib/components/notification/notification.component.mjs +1 -1
- package/fesm2022/carefirst-library.mjs +29 -10
- package/fesm2022/carefirst-library.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +4 -1
- package/lib/components/form-input/form-input.component.d.ts +1 -1
- package/lib/components/form-input-select/form-input-select.component.d.ts +5 -1
- package/lib/components/form-input-text-area/form-input-text-area.component.d.ts +7 -2
- package/package.json +1 -1
|
@@ -201,6 +201,7 @@ class ButtonComponent {
|
|
|
201
201
|
iconStart;
|
|
202
202
|
iconEnd;
|
|
203
203
|
loading;
|
|
204
|
+
customColor;
|
|
204
205
|
get parentEvents() {
|
|
205
206
|
if (this.disabled) {
|
|
206
207
|
return 'none';
|
|
@@ -216,6 +217,7 @@ class ButtonComponent {
|
|
|
216
217
|
inputIconStart = undefined;
|
|
217
218
|
inputIconEnd = undefined;
|
|
218
219
|
inputLoading = false;
|
|
220
|
+
inputCustomColor = '';
|
|
219
221
|
ngOnChanges(changes) {
|
|
220
222
|
this.inputType =
|
|
221
223
|
validateStringValue(changes, 'type', ['primary', 'secondary', 'tertiary'], this.inputType) || 'primary';
|
|
@@ -227,13 +229,22 @@ class ButtonComponent {
|
|
|
227
229
|
this.inputIconStart = validateStringValue(changes, 'iconStart', iconsC.slice(), this.inputIconStart);
|
|
228
230
|
this.inputIconEnd = validateStringValue(changes, 'iconEnd', iconsC.slice(), this.inputIconEnd);
|
|
229
231
|
this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
|
|
232
|
+
if (changes['customColor']?.currentValue)
|
|
233
|
+
this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
|
|
234
|
+
}
|
|
235
|
+
checkCustomColor(color) {
|
|
236
|
+
if (color.startsWith('var'))
|
|
237
|
+
return color;
|
|
238
|
+
if (color.startsWith('#') && (color.length === 4 || color.length === 7) && color.split('').every((char) => char.match(/[#0-9a-fA-F]+/)))
|
|
239
|
+
return color;
|
|
240
|
+
return '';
|
|
230
241
|
}
|
|
231
242
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
232
|
-
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" }, host: { properties: { "style.pointer-events": "this.parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\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 *cfButtonLoader=\"inputLoading\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p>\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-]{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}ion-button[class^=cf-button-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;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: .7rem;--padding-bottom: .7rem;--padding-start: 2.1rem;--padding-end: 2.1rem}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>p{font-size:1.6rem}ion-button[class^=cf-button-].text-small>p{font-size:1rem}.cf-button-primary{--background: var(--
|
|
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 *cfButtonLoader=\"inputLoading\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p>\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}ion-button[class^=cf-button-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;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: .7rem;--padding-bottom: .7rem;--padding-start: 2.1rem;--padding-end: 2.1rem}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>p{font-size:1.6rem}ion-button[class^=cf-button-].text-small>p{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"] }] });
|
|
233
244
|
}
|
|
234
245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
235
246
|
type: Component,
|
|
236
|
-
args: [{ selector: 'cf-btn', template: "<ion-button\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 *cfButtonLoader=\"inputLoading\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p>\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-]{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}ion-button[class^=cf-button-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;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: .7rem;--padding-bottom: .7rem;--padding-start: 2.1rem;--padding-end: 2.1rem}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>p{font-size:1.6rem}ion-button[class^=cf-button-].text-small>p{font-size:1rem}.cf-button-primary{--background: var(--
|
|
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 *cfButtonLoader=\"inputLoading\">\n <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n <p>\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}ion-button[class^=cf-button-]>p{width:-moz-fit-content;width:fit-content;font-size:1.2rem;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: .7rem;--padding-bottom: .7rem;--padding-start: 2.1rem;--padding-end: 2.1rem}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>p{font-size:1.6rem}ion-button[class^=cf-button-].text-small>p{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"] }]
|
|
237
248
|
}], propDecorators: { type: [{
|
|
238
249
|
type: Input
|
|
239
250
|
}], disabled: [{
|
|
@@ -252,6 +263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
252
263
|
type: Input
|
|
253
264
|
}], loading: [{
|
|
254
265
|
type: Input
|
|
266
|
+
}], customColor: [{
|
|
267
|
+
type: Input
|
|
255
268
|
}], parentEvents: [{
|
|
256
269
|
type: HostBinding,
|
|
257
270
|
args: ['style.pointer-events']
|
|
@@ -287,7 +300,7 @@ class NotificationComponent {
|
|
|
287
300
|
data;
|
|
288
301
|
buttonClick = new EventEmitter();
|
|
289
302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
-
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-green)}#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-red)}\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"] }, { kind: "component", type: SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "iconColor"] }] });
|
|
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-green)}#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-red)}\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"] }] });
|
|
291
304
|
}
|
|
292
305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
293
306
|
type: Component,
|
|
@@ -382,11 +395,11 @@ class CalendarComponent {
|
|
|
382
395
|
this.value.emit(dayjs(value).format('YYYY-MM-DD' + (this.inputTime ? ' HH:mm' : '')));
|
|
383
396
|
}
|
|
384
397
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CalendarComponent, selector: "cf-calendar", inputs: { displayTime: "displayTime", color: "color", min: "min", max: "max" }, outputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-color-primary)}ion-datetime::part(calendar-day){font-size:1.
|
|
398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CalendarComponent, selector: "cf-calendar", inputs: { displayTime: "displayTime", color: "color", min: "min", max: "max" }, outputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-color-primary)}ion-datetime::part(calendar-day){font-size:1.6rem}ion-datetime::part(month-year-button){font-size:2.8rem;font-weight:900;color:var(--cf-app-color-primary)}ion-datetime.accent::part(today){border:1px solid var(--cf-app-color-accent);color:var(--cf-app-color-accent)}ion-datetime.accent::part(active){background-color:var(--cf-app-color-accent);color:var(--cf-app-text-color-light)}ion-datetime.success::part(today){border:1px solid var(--cf-app-color-primary);color:var(--cf-app-color-primary)}ion-datetime.success::part(active){background-color:var(--cf-app-system-color-success);color:var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }] });
|
|
386
399
|
}
|
|
387
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
388
401
|
type: Component,
|
|
389
|
-
args: [{ selector: 'cf-calendar', template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-color-primary)}ion-datetime::part(calendar-day){font-size:1.
|
|
402
|
+
args: [{ selector: 'cf-calendar', template: "<ion-datetime\n [class]=\"inputColor\"\n mode=\"ios\"\n firstDayOfWeek=\"1\"\n [min]=\"min\"\n [max]=\"max\"\n [presentation]=\"inputTime ? 'date-time' : 'date'\"\n (ionChange)=\"setValue($event.detail.value)\">\n</ion-datetime>\n", styles: ["ion-datetime{--background: var(--cf-app-background-light);color:var(--cf-app-color-primary)}ion-datetime::part(calendar-day){font-size:1.6rem}ion-datetime::part(month-year-button){font-size:2.8rem;font-weight:900;color:var(--cf-app-color-primary)}ion-datetime.accent::part(today){border:1px solid var(--cf-app-color-accent);color:var(--cf-app-color-accent)}ion-datetime.accent::part(active){background-color:var(--cf-app-color-accent);color:var(--cf-app-text-color-light)}ion-datetime.success::part(today){border:1px solid var(--cf-app-color-primary);color:var(--cf-app-color-primary)}ion-datetime.success::part(active){background-color:var(--cf-app-system-color-success);color:var(--cf-app-text-color-light)}\n"] }]
|
|
390
403
|
}], propDecorators: { displayTime: [{
|
|
391
404
|
type: Input
|
|
392
405
|
}], color: [{
|
|
@@ -417,7 +430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
417
430
|
}] } });
|
|
418
431
|
|
|
419
432
|
const inputsC = {
|
|
420
|
-
labelPlacement: ['fixed', 'floating', 'stacked'],
|
|
433
|
+
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
|
421
434
|
inputMode: ['text', 'email', 'numeric', 'tel', 'decimal', 'url', 'search'],
|
|
422
435
|
autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
|
|
423
436
|
type: ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'],
|
|
@@ -495,6 +508,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
495
508
|
type: Output
|
|
496
509
|
}] } });
|
|
497
510
|
|
|
511
|
+
const inputSelectC = {
|
|
512
|
+
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
|
513
|
+
};
|
|
498
514
|
class FormInputSelectComponent {
|
|
499
515
|
label;
|
|
500
516
|
options;
|
|
@@ -506,8 +522,7 @@ class FormInputSelectComponent {
|
|
|
506
522
|
inputLabelPlacement;
|
|
507
523
|
ngOnChanges(changes) {
|
|
508
524
|
this.inputLabelPlacement =
|
|
509
|
-
validateStringValue(changes, '
|
|
510
|
-
'floating';
|
|
525
|
+
validateStringValue(changes, 'labelPlacement', inputSelectC.labelPlacement.slice(), this.inputLabelPlacement) || 'floating';
|
|
511
526
|
}
|
|
512
527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
513
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-color-primary);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-color-primary);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"] }] });
|
|
@@ -531,6 +546,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
531
546
|
type: Output
|
|
532
547
|
}] } });
|
|
533
548
|
|
|
549
|
+
const inputTextAreaC = {
|
|
550
|
+
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
|
551
|
+
autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
|
|
552
|
+
};
|
|
534
553
|
class FormInputTextAreaComponent {
|
|
535
554
|
label;
|
|
536
555
|
labelPlacement;
|
|
@@ -548,10 +567,10 @@ class FormInputTextAreaComponent {
|
|
|
548
567
|
inputAutoCapitalize;
|
|
549
568
|
ngOnChanges(changes) {
|
|
550
569
|
this.inputLabelPlacement =
|
|
551
|
-
validateStringValue(changes, 'labelPlacement',
|
|
570
|
+
validateStringValue(changes, 'labelPlacement', inputTextAreaC.labelPlacement.slice(), this.inputLabelPlacement) || 'floating';
|
|
552
571
|
this.inputTextCenter = checkTruthAttribute(changes, 'textCenter', this.inputTextCenter);
|
|
553
572
|
this.inputAutoCapitalize =
|
|
554
|
-
validateStringValue(changes, '
|
|
573
|
+
validateStringValue(changes, 'autoCapitalize', inputTextAreaC.autoCapitalize.slice(), this.inputAutoCapitalize) || 'none';
|
|
555
574
|
}
|
|
556
575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FormInputTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
557
576
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FormInputTextAreaComponent, selector: "cf-form-input-text-area", inputs: { label: "label", labelPlacement: "labelPlacement", placeholder: "placeholder", autoCapitalize: "autoCapitalize", control: "control", textCenter: "textCenter", minHeight: "minHeight", maxHeight: "maxHeight", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- ngModel -->\n<ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n *ngIf=\"!control\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n<!-- Form Control -->\n<ion-textarea\n [style]=\"'min-height: ' + minHeight + '; max-height: ' + maxHeight\"\n *ngIf=\"control\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'text-center': inputTextCenter }\"\n [label]=\"label\"\n [labelPlacement]=\"inputLabelPlacement\"\n fill=\"outline\"\n [autocapitalize]=\"autoCapitalize\"\n [autoGrow]=\"true\"\n mode=\"md\"\n [formControl]=\"control\"\n (ionInput)=\"valueChange.emit($event.detail.value ?? undefined)\"></ion-textarea>\n<cf-form-validation *ngIf=\"control\" [control]=\"control\"></cf-form-validation>\n", styles: ["ion-textarea{font-family:Roboto,sans-serif;font-weight:400;font-style:normal;font-size:1.6rem;color:var(--cf-app-color-primary);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)}ion-textarea.text-center{text-align:center}\n"], dependencies: [{ kind: "component", type: i1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
|