@carefirst/library 1.3.10 → 1.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
-
}
|