@carefirst/library 1.3.10 → 1.3.12
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/carefirst-library.mjs +2 -0
- package/esm2022/lib/components/alert/alert.component.mjs +56 -0
- package/esm2022/lib/components/badge/badge.component.mjs +39 -0
- package/esm2022/lib/components/button/button.component.mjs +92 -0
- package/esm2022/lib/components/calendar/calendar.component.mjs +39 -0
- package/esm2022/lib/components/chat-bubble/chat-bubble.component.mjs +31 -0
- package/esm2022/lib/components/form-input/form-input.component.mjs +87 -0
- package/esm2022/lib/components/form-input-select/form-input-select.component.mjs +46 -0
- package/esm2022/lib/components/form-input-text-area/form-input-text-area.component.mjs +61 -0
- package/esm2022/lib/components/form-validation/form-validation.component.mjs +20 -0
- package/esm2022/lib/components/icon/icon.component.mjs +29 -0
- package/esm2022/lib/components/logo/logo.component.mjs +18 -0
- package/esm2022/lib/components/notification/notification.component.mjs +22 -0
- package/esm2022/lib/components/page/page.component.mjs +31 -0
- package/esm2022/lib/components/spacer/spacer.component.mjs +30 -0
- package/esm2022/lib/components/spinner/spinner.component.mjs +19 -0
- package/esm2022/lib/directives/button-loader.directive.mjs +41 -0
- package/esm2022/lib/interfaces/alert.interface.mjs +2 -0
- package/esm2022/lib/interfaces/icon.interface.mjs +52 -0
- package/esm2022/lib/interfaces/input.interface.mjs +2 -0
- package/esm2022/lib/interfaces/notification.interface.mjs +2 -0
- package/esm2022/lib/interfaces/spacer.interface.mjs +2 -0
- package/esm2022/lib/library.module.mjs +100 -0
- package/esm2022/lib/utils/attribute.util.mjs +34 -0
- package/esm2022/lib/utils/form-validators-utility.mjs +113 -0
- package/esm2022/public-api.mjs +24 -0
- package/fesm2022/carefirst-library.mjs +890 -0
- package/fesm2022/carefirst-library.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/lib/components/alert/alert.component.d.ts +14 -0
- package/lib/components/badge/badge.component.d.ts +15 -0
- package/lib/components/button/button.component.d.ts +32 -0
- package/lib/components/calendar/calendar.component.d.ts +15 -0
- package/lib/components/chat-bubble/chat-bubble.component.d.ts +13 -0
- package/lib/components/form-input/form-input.component.d.ts +37 -0
- package/lib/components/form-input-select/form-input-select.component.d.ts +21 -0
- package/lib/components/form-input-text-area/form-input-text-area.component.d.ts +27 -0
- package/lib/components/form-validation/form-validation.component.d.ts +9 -0
- package/lib/components/icon/icon.component.d.ts +13 -0
- package/lib/components/logo/logo.component.d.ts +7 -0
- package/lib/components/notification/notification.component.d.ts +9 -0
- package/lib/components/page/page.component.d.ts +13 -0
- package/lib/components/spacer/spacer.component.d.ts +14 -0
- package/lib/components/spinner/spinner.component.d.ts +9 -0
- package/lib/directives/button-loader.directive.d.ts +12 -0
- package/lib/interfaces/alert.interface.d.ts +11 -0
- package/lib/interfaces/icon.interface.d.ts +4 -0
- package/lib/interfaces/input.interface.d.ts +4 -0
- package/lib/interfaces/notification.interface.d.ts +11 -0
- package/lib/interfaces/spacer.interface.d.ts +3 -0
- package/lib/library.module.d.ts +25 -0
- package/lib/utils/attribute.util.d.ts +4 -0
- package/lib/utils/form-validators-utility.d.ts +8 -0
- package/package.json +14 -11
- package/{src/public-api.ts → public-api.d.ts} +0 -18
- package/.eslintrc.json +0 -31
- package/ng-package.json +0 -8
- package/src/lib/components/alert/alert.component.html +0 -0
- package/src/lib/components/alert/alert.component.scss +0 -63
- package/src/lib/components/alert/alert.component.spec.ts +0 -23
- package/src/lib/components/alert/alert.component.ts +0 -73
- package/src/lib/components/badge/badge.component.html +0 -5
- package/src/lib/components/badge/badge.component.scss +0 -96
- package/src/lib/components/badge/badge.component.spec.ts +0 -23
- package/src/lib/components/badge/badge.component.ts +0 -61
- package/src/lib/components/button/button.component.html +0 -20
- package/src/lib/components/button/button.component.scss +0 -153
- package/src/lib/components/button/button.component.spec.ts +0 -21
- package/src/lib/components/button/button.component.ts +0 -94
- package/src/lib/components/calendar/calendar.component.html +0 -9
- package/src/lib/components/calendar/calendar.component.scss +0 -34
- package/src/lib/components/calendar/calendar.component.spec.ts +0 -23
- package/src/lib/components/calendar/calendar.component.ts +0 -53
- package/src/lib/components/chat-bubble/chat-bubble.component.html +0 -9
- package/src/lib/components/chat-bubble/chat-bubble.component.scss +0 -31
- package/src/lib/components/chat-bubble/chat-bubble.component.spec.ts +0 -23
- package/src/lib/components/chat-bubble/chat-bubble.component.ts +0 -43
- package/src/lib/components/form-input/form-input.component.html +0 -37
- package/src/lib/components/form-input/form-input.component.scss +0 -23
- package/src/lib/components/form-input/form-input.component.spec.ts +0 -23
- package/src/lib/components/form-input/form-input.component.ts +0 -95
- package/src/lib/components/form-input-select/form-input-select.component.html +0 -27
- package/src/lib/components/form-input-select/form-input-select.component.scss +0 -40
- package/src/lib/components/form-input-select/form-input-select.component.spec.ts +0 -23
- package/src/lib/components/form-input-select/form-input-select.component.ts +0 -61
- package/src/lib/components/form-input-text-area/form-input-text-area.component.html +0 -29
- package/src/lib/components/form-input-text-area/form-input-text-area.component.scss +0 -19
- package/src/lib/components/form-input-text-area/form-input-text-area.component.spec.ts +0 -23
- package/src/lib/components/form-input-text-area/form-input-text-area.component.ts +0 -76
- package/src/lib/components/form-validation/form-validation.component.html +0 -8
- package/src/lib/components/form-validation/form-validation.component.scss +0 -8
- package/src/lib/components/form-validation/form-validation.component.spec.ts +0 -23
- package/src/lib/components/form-validation/form-validation.component.ts +0 -34
- package/src/lib/components/icon/icon.component.html +0 -529
- package/src/lib/components/icon/icon.component.scss +0 -61
- package/src/lib/components/icon/icon.component.spec.ts +0 -21
- package/src/lib/components/icon/icon.component.ts +0 -40
- package/src/lib/components/logo/logo.component.html +0 -10
- package/src/lib/components/logo/logo.component.scss +0 -5
- package/src/lib/components/logo/logo.component.spec.ts +0 -23
- package/src/lib/components/logo/logo.component.ts +0 -21
- package/src/lib/components/notification/notification.component.html +0 -39
- package/src/lib/components/notification/notification.component.scss +0 -20
- package/src/lib/components/notification/notification.component.spec.ts +0 -21
- package/src/lib/components/notification/notification.component.ts +0 -23
- package/src/lib/components/page/page.component.html +0 -5
- package/src/lib/components/page/page.component.scss +0 -35
- package/src/lib/components/page/page.component.spec.ts +0 -21
- package/src/lib/components/page/page.component.ts +0 -42
- package/src/lib/components/spacer/spacer.component.html +0 -4
- package/src/lib/components/spacer/spacer.component.scss +0 -27
- package/src/lib/components/spacer/spacer.component.spec.ts +0 -21
- package/src/lib/components/spacer/spacer.component.ts +0 -43
- package/src/lib/components/spinner/spinner.component.html +0 -1
- package/src/lib/components/spinner/spinner.component.scss +0 -14
- package/src/lib/components/spinner/spinner.component.spec.ts +0 -23
- package/src/lib/components/spinner/spinner.component.ts +0 -33
- package/src/lib/directives/button-loader.directive.spec.ts +0 -8
- package/src/lib/directives/button-loader.directive.ts +0 -77
- package/src/lib/interfaces/alert.interface.ts +0 -20
- package/src/lib/interfaces/icon.interface.ts +0 -62
- package/src/lib/interfaces/input.interface.ts +0 -8
- package/src/lib/interfaces/notification.interface.ts +0 -15
- package/src/lib/interfaces/spacer.interface.ts +0 -6
- package/src/lib/library.module.ts +0 -66
- package/src/lib/utils/attribute.util.ts +0 -66
- package/src/lib/utils/form-validators-utility.ts +0 -186
- package/tsconfig.lib.json +0 -12
- package/tsconfig.lib.prod.json +0 -10
- package/tsconfig.spec.json +0 -14
@@ -1,31 +0,0 @@
|
|
1
|
-
#container {
|
2
|
-
display: flex;
|
3
|
-
|
4
|
-
#message {
|
5
|
-
p {
|
6
|
-
color: var(--cf-app-text-color-default);
|
7
|
-
}
|
8
|
-
#bubble {
|
9
|
-
background: var(--message-background-color);
|
10
|
-
border-radius: var(--border-radius);
|
11
|
-
padding: 12px 16px;
|
12
|
-
p {
|
13
|
-
color: var(--cf-app-text-color-light);
|
14
|
-
}
|
15
|
-
}
|
16
|
-
}
|
17
|
-
}
|
18
|
-
|
19
|
-
#container.outgoing {
|
20
|
-
justify-content: end;
|
21
|
-
text-align: end;
|
22
|
-
--border-radius: 16px 4px 16px 16px;
|
23
|
-
--message-background-color: var(--cf-app-color-primary);
|
24
|
-
}
|
25
|
-
|
26
|
-
#container.incoming {
|
27
|
-
justify-content: start;
|
28
|
-
text-align: start;
|
29
|
-
--border-radius: 4px 16px 16px 16px;
|
30
|
-
--message-background-color: var(--cf-app-color-secondary);
|
31
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { ChatBubbleComponent } from './chat-bubble.component';
|
4
|
-
|
5
|
-
describe('ChatBubbleComponent', () => {
|
6
|
-
let component: ChatBubbleComponent;
|
7
|
-
let fixture: ComponentFixture<ChatBubbleComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [ChatBubbleComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(ChatBubbleComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,43 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* CareFirst Chat Bubble
|
3
|
-
*
|
4
|
-
* @file chat-bubble.component
|
5
|
-
* @description Contains all the logic for generating a CareFirst Chat Bubble
|
6
|
-
* @author Jacques Coetzee
|
7
|
-
* @since 2024 - 02 - 22
|
8
|
-
* @usage <cf-chat-bubble type="outgoing | incoming" date="string" message="string"></cf-chat-bubble>
|
9
|
-
*/
|
10
|
-
|
11
|
-
import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
|
12
|
-
//--- Utils
|
13
|
-
import { validateStringValue } from '../../utils/attribute.util';
|
14
|
-
|
15
|
-
@Component({
|
16
|
-
selector: 'cf-chat-bubble',
|
17
|
-
templateUrl: './chat-bubble.component.html',
|
18
|
-
styleUrl: './chat-bubble.component.scss',
|
19
|
-
})
|
20
|
-
export class ChatBubbleComponent implements OnChanges {
|
21
|
-
@Input() type: 'outgoing' | 'incoming' = 'outgoing';
|
22
|
-
@Input() date: string = '';
|
23
|
-
@Input() message: string = '';
|
24
|
-
|
25
|
-
//--- Local variables
|
26
|
-
inputType: typeof this.type = 'incoming';
|
27
|
-
inputDate: typeof this.date = '';
|
28
|
-
inputMessage: typeof this.message = '';
|
29
|
-
|
30
|
-
/**----------------------------------------------------------------
|
31
|
-
* @name ngOnChanges
|
32
|
-
* @description Update various values on input changes
|
33
|
-
* @returns {void}
|
34
|
-
*/
|
35
|
-
ngOnChanges(changes: SimpleChanges): void {
|
36
|
-
//--- Type
|
37
|
-
this.inputType = validateStringValue<typeof this.type>(changes, 'type', ['incoming', 'outgoing'], this.inputType) || 'outgoing';
|
38
|
-
//--- Date
|
39
|
-
this.inputDate = changes['date']?.currentValue || '';
|
40
|
-
//--- Message
|
41
|
-
this.inputMessage = changes['message']?.currentValue || '';
|
42
|
-
}
|
43
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
<!-- ngModel -->
|
2
|
-
<ion-input
|
3
|
-
*ngIf="!control"
|
4
|
-
[ngClass]="{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground }"
|
5
|
-
[label]="label"
|
6
|
-
[labelPlacement]="inputLabelPlacement"
|
7
|
-
[placeholder]="placeholder"
|
8
|
-
fill="outline"
|
9
|
-
[clearInput]="!inputClear"
|
10
|
-
[autocapitalize]="autoCapitalize"
|
11
|
-
mode="md"
|
12
|
-
[inputmode]="localInputMode"
|
13
|
-
[min]="min"
|
14
|
-
[max]="max"
|
15
|
-
[maxlength]="maxLength || null"
|
16
|
-
[type]="type"
|
17
|
-
(ionInput)="valueChange.emit($event.detail.value ?? undefined)"
|
18
|
-
[value]="value"></ion-input>
|
19
|
-
<!-- Form Control -->
|
20
|
-
<ion-input
|
21
|
-
*ngIf="control"
|
22
|
-
[ngClass]="{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground }"
|
23
|
-
[label]="label"
|
24
|
-
[labelPlacement]="inputLabelPlacement"
|
25
|
-
[placeholder]="placeholder"
|
26
|
-
fill="outline"
|
27
|
-
[clearInput]="!inputClear"
|
28
|
-
[autocapitalize]="autoCapitalize"
|
29
|
-
mode="md"
|
30
|
-
[inputmode]="localInputMode"
|
31
|
-
[formControl]="control"
|
32
|
-
[min]="min"
|
33
|
-
[max]="max"
|
34
|
-
[maxlength]="maxLength || null"
|
35
|
-
[type]="type"
|
36
|
-
(ionInput)="valueChange.emit($event.detail.value ?? undefined)"></ion-input>
|
37
|
-
<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>
|
@@ -1,23 +0,0 @@
|
|
1
|
-
/*===============================================
|
2
|
-
================== Form Items ===================
|
3
|
-
===============================================*/
|
4
|
-
ion-input {
|
5
|
-
font-family: 'Roboto', sans-serif;
|
6
|
-
font-weight: 400;
|
7
|
-
font-style: normal;
|
8
|
-
font-size: 1.6rem;
|
9
|
-
color: var(--cf-app-text-color-default);
|
10
|
-
text-align: start;
|
11
|
-
--border-radius: 8px !important; //--- important overrides the fill option
|
12
|
-
--highlight-color-focused: var(--cf-app-color-primary);
|
13
|
-
--highlight-color-invalid: var(--cf-app-system-color-error);
|
14
|
-
--highlight-color-valid: var(--cf-app-color-primary);
|
15
|
-
}
|
16
|
-
|
17
|
-
ion-input.text-center {
|
18
|
-
text-align: center;
|
19
|
-
}
|
20
|
-
|
21
|
-
ion-input.grey-background {
|
22
|
-
--background: var(--cf-app-system-color-outline);
|
23
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { FormInputComponent } from './form-input.component';
|
4
|
-
|
5
|
-
describe('FormInputComponent', () => {
|
6
|
-
let component: FormInputComponent;
|
7
|
-
let fixture: ComponentFixture<FormInputComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [FormInputComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(FormInputComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,95 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Carefirst Library Form Input
|
3
|
-
*
|
4
|
-
* @file form-input.component
|
5
|
-
* @description Contains all the logic for generating a CareFirst Form Input Field
|
6
|
-
* @author Arno Jansen van Vuuren
|
7
|
-
* @since 2023 - 12 - 14
|
8
|
-
* @usage <cf-form-input label="Label Name" %labelPlacement% %inputMode% %noClearButton% %textCenter% %min% %max% %autoCapitalize% %type% %[(value)]="twoWayComs"% %(valueChange)="currentValueEvent"% %[control]%="formName.controls.controlName"></cf-form-input>
|
9
|
-
* disable input by disabling the form control
|
10
|
-
*/
|
11
|
-
|
12
|
-
import { Component, Input, Output, type OnChanges, type SimpleChanges, EventEmitter } from '@angular/core';
|
13
|
-
import { FormControl } from '@angular/forms';
|
14
|
-
//--- Utils
|
15
|
-
import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
|
16
|
-
|
17
|
-
/**==============================================
|
18
|
-
* @interface inputsC
|
19
|
-
* @description Define available input values
|
20
|
-
*/
|
21
|
-
const inputsC = {
|
22
|
-
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
23
|
-
inputMode: ['text', 'email', 'numeric', 'tel', 'decimal', 'url', 'search'],
|
24
|
-
autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
|
25
|
-
type: ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'],
|
26
|
-
} as const;
|
27
|
-
|
28
|
-
@Component({
|
29
|
-
selector: 'cf-form-input',
|
30
|
-
templateUrl: './form-input.component.html',
|
31
|
-
styleUrl: './form-input.component.scss',
|
32
|
-
})
|
33
|
-
export class FormInputComponent implements OnChanges {
|
34
|
-
@Input() label!: string;
|
35
|
-
@Input() min: number | string = 'none';
|
36
|
-
@Input() max: number | string = 'none';
|
37
|
-
@Input() labelPlacement?: (typeof inputsC.labelPlacement)[number];
|
38
|
-
@Input() placeholder?: string | undefined;
|
39
|
-
@Input() inputmode?: (typeof inputsC.inputMode)[number];
|
40
|
-
@Input() autoCapitalize?: (typeof inputsC.autoCapitalize)[number];
|
41
|
-
@Input() type?: (typeof inputsC.type)[number];
|
42
|
-
@Input() noClearButton?: boolean | string | undefined;
|
43
|
-
@Input() control?: FormControl | null;
|
44
|
-
@Input() textCenter?: boolean | string | undefined;
|
45
|
-
@Input() maxLength?: number | string;
|
46
|
-
@Input() greyBackground?: boolean | string | undefined;
|
47
|
-
|
48
|
-
//--- ngModel
|
49
|
-
@Input() value: string | undefined;
|
50
|
-
@Output() valueChange = new EventEmitter<typeof this.value>();
|
51
|
-
|
52
|
-
//--- Local variables
|
53
|
-
inputLabelPlacement: typeof this.labelPlacement;
|
54
|
-
localInputMode: typeof this.inputmode;
|
55
|
-
inputClear = false;
|
56
|
-
inputTextCenter = false;
|
57
|
-
inputType: typeof this.type;
|
58
|
-
inputAutoCapitalize: typeof this.autoCapitalize;
|
59
|
-
inputGreyBackground = false;
|
60
|
-
|
61
|
-
/**----------------------------------------------------------------
|
62
|
-
* @name ngOnChanges
|
63
|
-
* @description Detect changes to input values
|
64
|
-
* @param {SimpleChanges} changes
|
65
|
-
*/
|
66
|
-
ngOnChanges(changes: SimpleChanges): void {
|
67
|
-
//--- Label Placement
|
68
|
-
this.inputLabelPlacement =
|
69
|
-
validateStringValue<(typeof inputsC.labelPlacement)[number]>(
|
70
|
-
changes,
|
71
|
-
'labelPlacement',
|
72
|
-
inputsC.labelPlacement.slice(),
|
73
|
-
this.inputLabelPlacement
|
74
|
-
) || 'floating';
|
75
|
-
//--- Input Type (keyboard)
|
76
|
-
this.localInputMode =
|
77
|
-
validateStringValue<(typeof inputsC.inputMode)[number]>(changes, 'inputmode', inputsC.inputMode.slice(), this.localInputMode) || 'text';
|
78
|
-
//--- Clear Button
|
79
|
-
this.inputClear = checkTruthAttribute(changes, 'noClearButton', this.inputClear);
|
80
|
-
//--- Text Center
|
81
|
-
this.inputTextCenter = checkTruthAttribute(changes, 'textCenter', this.inputTextCenter);
|
82
|
-
//--- Type
|
83
|
-
this.inputType = validateStringValue<(typeof inputsC.type)[number]>(changes, 'type', inputsC.type.slice(), this.inputType) || 'text';
|
84
|
-
//--- Auto Capitalize
|
85
|
-
this.inputAutoCapitalize =
|
86
|
-
validateStringValue<(typeof inputsC.autoCapitalize)[number]>(
|
87
|
-
changes,
|
88
|
-
'autoCapitalize',
|
89
|
-
inputsC.autoCapitalize.slice(),
|
90
|
-
this.inputAutoCapitalize
|
91
|
-
) || 'none';
|
92
|
-
//--- Grey Background
|
93
|
-
this.inputGreyBackground = checkTruthAttribute(changes, 'greyBackground', this.inputGreyBackground);
|
94
|
-
}
|
95
|
-
}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
<!-- ngModel -->
|
2
|
-
<ion-select
|
3
|
-
*ngIf="!control"
|
4
|
-
[label]="label"
|
5
|
-
[labelPlacement]="inputLabelPlacement"
|
6
|
-
[placeholder]="placeholder"
|
7
|
-
fill="outline"
|
8
|
-
mode="md"
|
9
|
-
interface="popover"
|
10
|
-
(ionChange)="valueChange.emit($event.detail.value ?? undefined)"
|
11
|
-
[value]="value">
|
12
|
-
<ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.displayName }}</ion-select-option>
|
13
|
-
</ion-select>
|
14
|
-
<!-- Form Control -->
|
15
|
-
<ion-select
|
16
|
-
*ngIf="control"
|
17
|
-
[label]="label"
|
18
|
-
[labelPlacement]="inputLabelPlacement"
|
19
|
-
[placeholder]="placeholder"
|
20
|
-
fill="outline"
|
21
|
-
mode="md"
|
22
|
-
interface="popover"
|
23
|
-
[formControl]="control"
|
24
|
-
(ionChange)="valueChange.emit($event.detail.value ?? undefined)">
|
25
|
-
<ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.displayName }}</ion-select-option>
|
26
|
-
</ion-select>
|
27
|
-
<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>
|
@@ -1,40 +0,0 @@
|
|
1
|
-
/*===============================================
|
2
|
-
================== Form Items ===================
|
3
|
-
===============================================*/
|
4
|
-
ion-select {
|
5
|
-
font-family: 'Roboto', sans-serif;
|
6
|
-
font-weight: 400;
|
7
|
-
font-style: normal;
|
8
|
-
font-size: 1.6rem;
|
9
|
-
color: var(--cf-app-text-color-default);
|
10
|
-
text-align: start;
|
11
|
-
--border-radius: 8px !important; //--- important overrides the fill option
|
12
|
-
--highlight-color-focused: var(--cf-app-color-primary);
|
13
|
-
--highlight-color-invalid: var(--cf-app-system-color-error);
|
14
|
-
--highlight-color-valid: var(--cf-app-color-primary);
|
15
|
-
}
|
16
|
-
|
17
|
-
/*===============================================
|
18
|
-
================ Select Popovers ================
|
19
|
-
===============================================*/
|
20
|
-
::ng-deep ion-select-popover ion-list[class*='popover'] {
|
21
|
-
background: var(--cf-app-background-light);
|
22
|
-
ion-item[class*='popover'] {
|
23
|
-
ion-radio {
|
24
|
-
font-family: 'Roboto', sans-serif;
|
25
|
-
font-weight: 400;
|
26
|
-
font-style: normal;
|
27
|
-
font-size: 1.6rem;
|
28
|
-
color: var(--cf-app-text-color-default);
|
29
|
-
text-align: start;
|
30
|
-
}
|
31
|
-
|
32
|
-
--background: transparent;
|
33
|
-
--border-radius: 8px;
|
34
|
-
--background-focused: var(--cf-app-color-accent);
|
35
|
-
--background-focused-opacity: 0.5;
|
36
|
-
--background-hover: var(--cf-app-color-primary);
|
37
|
-
--background-hover-opacity: 0.1;
|
38
|
-
padding: 4px;
|
39
|
-
}
|
40
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { FormInputSelectComponent } from './form-input-select.component';
|
4
|
-
|
5
|
-
describe('FormInputSelectComponent', () => {
|
6
|
-
let component: FormInputSelectComponent;
|
7
|
-
let fixture: ComponentFixture<FormInputSelectComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [FormInputSelectComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(FormInputSelectComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,61 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Carefirst Library Form Input Select
|
3
|
-
*
|
4
|
-
* @file form-input-select.component
|
5
|
-
* @description Contains all the logic for generating a CareFirst Select
|
6
|
-
* @author Arno Jansen van Vuuren
|
7
|
-
* @since 2023 - 12 - 14
|
8
|
-
* @usage <cf-form-input-select label="Label Name" [options]="[{ displayName: string; value: string | number | boolean | null | undefined }]" %labelPlacement% %(valueChange)="currentValue"% %[(value)]="twoWayComs"% %[control]%="formName.controls.controlName"></cf-form-input-select>
|
9
|
-
* disable input by disabling the form control
|
10
|
-
*/
|
11
|
-
|
12
|
-
import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
|
13
|
-
import { FormControl } from '@angular/forms';
|
14
|
-
//--- Utils
|
15
|
-
import { validateStringValue } from '../../utils/attribute.util';
|
16
|
-
//--- Interfaces
|
17
|
-
import type { FormInputSelectOptionsI } from '../../interfaces/input.interface';
|
18
|
-
|
19
|
-
/**==============================================
|
20
|
-
* @interface inputSelectC
|
21
|
-
* @description Define available input select values
|
22
|
-
*/
|
23
|
-
const inputSelectC = {
|
24
|
-
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
25
|
-
} as const;
|
26
|
-
|
27
|
-
@Component({
|
28
|
-
selector: 'cf-form-input-select',
|
29
|
-
templateUrl: './form-input-select.component.html',
|
30
|
-
styleUrl: './form-input-select.component.scss',
|
31
|
-
})
|
32
|
-
export class FormInputSelectComponent<T> implements OnChanges {
|
33
|
-
@Input() label!: string;
|
34
|
-
@Input() options!: FormInputSelectOptionsI<T>[];
|
35
|
-
@Input() labelPlacement?: (typeof inputSelectC.labelPlacement)[number];
|
36
|
-
@Input() placeholder?: string | undefined;
|
37
|
-
@Input() control?: FormControl | null;
|
38
|
-
|
39
|
-
//--- ngModel
|
40
|
-
@Input() value: FormInputSelectOptionsI<T>['value'] | undefined;
|
41
|
-
@Output() valueChange = new EventEmitter<typeof this.value>();
|
42
|
-
|
43
|
-
//--- Local variables
|
44
|
-
inputLabelPlacement: typeof this.labelPlacement;
|
45
|
-
|
46
|
-
/**----------------------------------------------------------------
|
47
|
-
* @name ngOnChanges
|
48
|
-
* @description Detect changes to input values
|
49
|
-
* @param {SimpleChanges} changes
|
50
|
-
*/
|
51
|
-
ngOnChanges(changes: SimpleChanges): void {
|
52
|
-
//--- Label Placement
|
53
|
-
this.inputLabelPlacement =
|
54
|
-
validateStringValue<(typeof inputSelectC.labelPlacement)[number]>(
|
55
|
-
changes,
|
56
|
-
'labelPlacement',
|
57
|
-
inputSelectC.labelPlacement.slice(),
|
58
|
-
this.inputLabelPlacement
|
59
|
-
) || 'floating';
|
60
|
-
}
|
61
|
-
}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
<!-- ngModel -->
|
2
|
-
<ion-textarea
|
3
|
-
[style]="'min-height: ' + minHeight + '; max-height: ' + maxHeight"
|
4
|
-
*ngIf="!control"
|
5
|
-
[placeholder]="placeholder"
|
6
|
-
[ngClass]="{ 'text-center': inputTextCenter }"
|
7
|
-
[label]="label"
|
8
|
-
[labelPlacement]="inputLabelPlacement"
|
9
|
-
fill="outline"
|
10
|
-
[autocapitalize]="autoCapitalize"
|
11
|
-
[autoGrow]="true"
|
12
|
-
mode="md"
|
13
|
-
(ionInput)="valueChange.emit($event.detail.value ?? undefined)"
|
14
|
-
[value]="value"></ion-textarea>
|
15
|
-
<!-- Form Control -->
|
16
|
-
<ion-textarea
|
17
|
-
[style]="'min-height: ' + minHeight + '; max-height: ' + maxHeight"
|
18
|
-
*ngIf="control"
|
19
|
-
[placeholder]="placeholder"
|
20
|
-
[ngClass]="{ 'text-center': inputTextCenter }"
|
21
|
-
[label]="label"
|
22
|
-
[labelPlacement]="inputLabelPlacement"
|
23
|
-
fill="outline"
|
24
|
-
[autocapitalize]="autoCapitalize"
|
25
|
-
[autoGrow]="true"
|
26
|
-
mode="md"
|
27
|
-
[formControl]="control"
|
28
|
-
(ionInput)="valueChange.emit($event.detail.value ?? undefined)"></ion-textarea>
|
29
|
-
<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>
|
@@ -1,19 +0,0 @@
|
|
1
|
-
/*===============================================
|
2
|
-
================== Form Items ===================
|
3
|
-
===============================================*/
|
4
|
-
ion-textarea {
|
5
|
-
font-family: 'Roboto', sans-serif;
|
6
|
-
font-weight: 400;
|
7
|
-
font-style: normal;
|
8
|
-
font-size: 1.6rem;
|
9
|
-
color: var(--cf-app-text-color-default);
|
10
|
-
text-align: start;
|
11
|
-
--border-radius: 8px !important; //--- important overrides the fill option
|
12
|
-
--highlight-color-focused: var(--cf-app-color-primary);
|
13
|
-
--highlight-color-invalid: var(--cf-app-system-color-error);
|
14
|
-
--highlight-color-valid: var(--cf-app-color-primary);
|
15
|
-
}
|
16
|
-
|
17
|
-
ion-textarea.text-center {
|
18
|
-
text-align: center;
|
19
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { FormInputTextAreaComponent } from './form-input-text-area.component';
|
4
|
-
|
5
|
-
describe('FormInputTextAreaComponent', () => {
|
6
|
-
let component: FormInputTextAreaComponent;
|
7
|
-
let fixture: ComponentFixture<FormInputTextAreaComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [FormInputTextAreaComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(FormInputTextAreaComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,76 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Carefirst Library Form Input Text Area
|
3
|
-
*
|
4
|
-
* @file form-input-text-area.component
|
5
|
-
* @description Contains all the logic for generating a CareFirst Form Input Text Area
|
6
|
-
* @author Arno Jansen van Vuuren
|
7
|
-
* @since 2023 - 12 - 18
|
8
|
-
* @usage <cf-form-input-text-area label="Label Name" %labelPlacement% %textCenter% %autoCapitalize% %(valueChange)="currentValue"% %[(value)]="twoWayComs"% %[control]%="formName.controls.controlName"></cf-form-input-text-area>
|
9
|
-
* disable input by disabling the form control
|
10
|
-
*/
|
11
|
-
|
12
|
-
import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
|
13
|
-
import type { FormControl } from '@angular/forms';
|
14
|
-
//--- Utils
|
15
|
-
import { validateStringValue, checkTruthAttribute } from '../../utils/attribute.util';
|
16
|
-
|
17
|
-
/**==============================================
|
18
|
-
* @interface inputTextAreaC
|
19
|
-
* @description Define available input values
|
20
|
-
*/
|
21
|
-
const inputTextAreaC = {
|
22
|
-
labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
|
23
|
-
autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
|
24
|
-
} as const;
|
25
|
-
|
26
|
-
@Component({
|
27
|
-
selector: 'cf-form-input-text-area',
|
28
|
-
templateUrl: './form-input-text-area.component.html',
|
29
|
-
styleUrl: './form-input-text-area.component.scss',
|
30
|
-
})
|
31
|
-
export class FormInputTextAreaComponent implements OnChanges {
|
32
|
-
@Input() label!: string;
|
33
|
-
@Input() labelPlacement?: (typeof inputTextAreaC.labelPlacement)[number];
|
34
|
-
@Input() placeholder?: string | undefined;
|
35
|
-
@Input() autoCapitalize?: (typeof inputTextAreaC.autoCapitalize)[number];
|
36
|
-
@Input() control?: FormControl | null;
|
37
|
-
@Input() textCenter?: boolean | string | undefined;
|
38
|
-
@Input() minHeight?: string | 'none' = 'none';
|
39
|
-
@Input() maxHeight?: string | 'none' = 'none';
|
40
|
-
|
41
|
-
//--- ngModel
|
42
|
-
@Input() value: string | undefined;
|
43
|
-
@Output() valueChange = new EventEmitter<typeof this.value>();
|
44
|
-
|
45
|
-
//--- Local variables
|
46
|
-
inputLabelPlacement: typeof this.labelPlacement;
|
47
|
-
inputClear = true;
|
48
|
-
inputTextCenter = false;
|
49
|
-
inputAutoCapitalize: typeof this.autoCapitalize;
|
50
|
-
|
51
|
-
/**----------------------------------------------------------------
|
52
|
-
* @name ngOnChanges
|
53
|
-
* @description Detect changes to input values
|
54
|
-
* @param {SimpleChanges} changes
|
55
|
-
*/
|
56
|
-
ngOnChanges(changes: SimpleChanges): void {
|
57
|
-
//--- Label Placement
|
58
|
-
this.inputLabelPlacement =
|
59
|
-
validateStringValue<(typeof inputTextAreaC.labelPlacement)[number]>(
|
60
|
-
changes,
|
61
|
-
'labelPlacement',
|
62
|
-
inputTextAreaC.labelPlacement.slice(),
|
63
|
-
this.inputLabelPlacement
|
64
|
-
) || 'floating';
|
65
|
-
//--- Text Center
|
66
|
-
this.inputTextCenter = checkTruthAttribute(changes, 'textCenter', this.inputTextCenter);
|
67
|
-
//--- Auto Capitalize
|
68
|
-
this.inputAutoCapitalize =
|
69
|
-
validateStringValue<(typeof inputTextAreaC.autoCapitalize)[number]>(
|
70
|
-
changes,
|
71
|
-
'autoCapitalize',
|
72
|
-
inputTextAreaC.autoCapitalize.slice(),
|
73
|
-
this.inputAutoCapitalize
|
74
|
-
) || 'none';
|
75
|
-
}
|
76
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
<div *ngIf="control?.dirty && control?.errors" class="form-valid-feedback">
|
2
|
-
<div *ngFor="let error of this.control?.errors | keyvalue">
|
3
|
-
<p class="body-medium" *ngIf="error.key === 'email'">*Invalid email format</p>
|
4
|
-
<p class="body-medium" *ngIf="error.key === 'minlength'">*Length required: {{ error.value.requiredLength - error.value.actualLength }}</p>
|
5
|
-
<p class="body-medium" *ngIf="error.key === 'maxlength'">*Max Length: {{ error.value.requiredLength }}</p>
|
6
|
-
<p class="body-medium" *ngIf="error.key === 'errorMessage'">*{{ error.value }}</p>
|
7
|
-
</div>
|
8
|
-
</div>
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
2
|
-
|
3
|
-
import { FormValidationComponent } from './form-validation.component';
|
4
|
-
|
5
|
-
describe('FormValidationComponent', () => {
|
6
|
-
let component: FormValidationComponent;
|
7
|
-
let fixture: ComponentFixture<FormValidationComponent>;
|
8
|
-
|
9
|
-
beforeEach(async () => {
|
10
|
-
await TestBed.configureTestingModule({
|
11
|
-
imports: [FormValidationComponent]
|
12
|
-
})
|
13
|
-
.compileComponents();
|
14
|
-
|
15
|
-
fixture = TestBed.createComponent(FormValidationComponent);
|
16
|
-
component = fixture.componentInstance;
|
17
|
-
fixture.detectChanges();
|
18
|
-
});
|
19
|
-
|
20
|
-
it('should create', () => {
|
21
|
-
expect(component).toBeTruthy();
|
22
|
-
});
|
23
|
-
});
|
@@ -1,34 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* CareFirst Library Form Validation Feedback
|
3
|
-
*
|
4
|
-
* @file form-validation.component
|
5
|
-
* @description Contains all the logic for generating CareFirst Form Validation Feedback
|
6
|
-
* @author Arno Jansen van Vuuren
|
7
|
-
* @since 2023 - 12 - 05
|
8
|
-
* @usage <cf-form-validation [control]="formName.get('controlName')"></cf-form-validation>
|
9
|
-
*/
|
10
|
-
|
11
|
-
import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
|
12
|
-
//--- Interfaces
|
13
|
-
import type { FormControl } from '@angular/forms';
|
14
|
-
|
15
|
-
@Component({
|
16
|
-
selector: 'cf-form-validation',
|
17
|
-
templateUrl: './form-validation.component.html',
|
18
|
-
styleUrl: './form-validation.component.scss',
|
19
|
-
})
|
20
|
-
export class FormValidationComponent implements OnChanges {
|
21
|
-
//--- Receive form control
|
22
|
-
@Input() control!: FormControl | null;
|
23
|
-
|
24
|
-
/**----------------------------------------------------------------
|
25
|
-
* @name ngOnChanges
|
26
|
-
* @description Detect changes to input values
|
27
|
-
* @param {SimpleChanges} changes
|
28
|
-
*/
|
29
|
-
ngOnChanges(changes: SimpleChanges): void {
|
30
|
-
if (changes['control'] && changes['control'].currentValue) {
|
31
|
-
this.control = changes['control'].currentValue;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
}
|