@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.
Files changed (130) hide show
  1. package/esm2022/carefirst-library.mjs +2 -0
  2. package/esm2022/lib/components/alert/alert.component.mjs +56 -0
  3. package/esm2022/lib/components/badge/badge.component.mjs +39 -0
  4. package/esm2022/lib/components/button/button.component.mjs +92 -0
  5. package/esm2022/lib/components/calendar/calendar.component.mjs +39 -0
  6. package/esm2022/lib/components/chat-bubble/chat-bubble.component.mjs +31 -0
  7. package/esm2022/lib/components/form-input/form-input.component.mjs +87 -0
  8. package/esm2022/lib/components/form-input-select/form-input-select.component.mjs +46 -0
  9. package/esm2022/lib/components/form-input-text-area/form-input-text-area.component.mjs +61 -0
  10. package/esm2022/lib/components/form-validation/form-validation.component.mjs +20 -0
  11. package/esm2022/lib/components/icon/icon.component.mjs +29 -0
  12. package/esm2022/lib/components/logo/logo.component.mjs +18 -0
  13. package/esm2022/lib/components/notification/notification.component.mjs +22 -0
  14. package/esm2022/lib/components/page/page.component.mjs +31 -0
  15. package/esm2022/lib/components/spacer/spacer.component.mjs +30 -0
  16. package/esm2022/lib/components/spinner/spinner.component.mjs +19 -0
  17. package/esm2022/lib/directives/button-loader.directive.mjs +41 -0
  18. package/esm2022/lib/interfaces/alert.interface.mjs +2 -0
  19. package/esm2022/lib/interfaces/icon.interface.mjs +52 -0
  20. package/esm2022/lib/interfaces/input.interface.mjs +2 -0
  21. package/esm2022/lib/interfaces/notification.interface.mjs +2 -0
  22. package/esm2022/lib/interfaces/spacer.interface.mjs +2 -0
  23. package/esm2022/lib/library.module.mjs +100 -0
  24. package/esm2022/lib/utils/attribute.util.mjs +34 -0
  25. package/esm2022/lib/utils/form-validators-utility.mjs +113 -0
  26. package/esm2022/public-api.mjs +24 -0
  27. package/fesm2022/carefirst-library.mjs +890 -0
  28. package/fesm2022/carefirst-library.mjs.map +1 -0
  29. package/index.d.ts +2 -0
  30. package/lib/components/alert/alert.component.d.ts +14 -0
  31. package/lib/components/badge/badge.component.d.ts +15 -0
  32. package/lib/components/button/button.component.d.ts +32 -0
  33. package/lib/components/calendar/calendar.component.d.ts +15 -0
  34. package/lib/components/chat-bubble/chat-bubble.component.d.ts +13 -0
  35. package/lib/components/form-input/form-input.component.d.ts +37 -0
  36. package/lib/components/form-input-select/form-input-select.component.d.ts +21 -0
  37. package/lib/components/form-input-text-area/form-input-text-area.component.d.ts +27 -0
  38. package/lib/components/form-validation/form-validation.component.d.ts +9 -0
  39. package/lib/components/icon/icon.component.d.ts +13 -0
  40. package/lib/components/logo/logo.component.d.ts +7 -0
  41. package/lib/components/notification/notification.component.d.ts +9 -0
  42. package/lib/components/page/page.component.d.ts +13 -0
  43. package/lib/components/spacer/spacer.component.d.ts +14 -0
  44. package/lib/components/spinner/spinner.component.d.ts +9 -0
  45. package/lib/directives/button-loader.directive.d.ts +12 -0
  46. package/lib/interfaces/alert.interface.d.ts +11 -0
  47. package/lib/interfaces/icon.interface.d.ts +4 -0
  48. package/lib/interfaces/input.interface.d.ts +4 -0
  49. package/lib/interfaces/notification.interface.d.ts +11 -0
  50. package/lib/interfaces/spacer.interface.d.ts +3 -0
  51. package/lib/library.module.d.ts +25 -0
  52. package/lib/utils/attribute.util.d.ts +4 -0
  53. package/lib/utils/form-validators-utility.d.ts +8 -0
  54. package/package.json +14 -11
  55. package/{src/public-api.ts → public-api.d.ts} +0 -18
  56. package/.eslintrc.json +0 -31
  57. package/ng-package.json +0 -8
  58. package/src/lib/components/alert/alert.component.html +0 -0
  59. package/src/lib/components/alert/alert.component.scss +0 -63
  60. package/src/lib/components/alert/alert.component.spec.ts +0 -23
  61. package/src/lib/components/alert/alert.component.ts +0 -73
  62. package/src/lib/components/badge/badge.component.html +0 -5
  63. package/src/lib/components/badge/badge.component.scss +0 -96
  64. package/src/lib/components/badge/badge.component.spec.ts +0 -23
  65. package/src/lib/components/badge/badge.component.ts +0 -61
  66. package/src/lib/components/button/button.component.html +0 -20
  67. package/src/lib/components/button/button.component.scss +0 -153
  68. package/src/lib/components/button/button.component.spec.ts +0 -21
  69. package/src/lib/components/button/button.component.ts +0 -94
  70. package/src/lib/components/calendar/calendar.component.html +0 -9
  71. package/src/lib/components/calendar/calendar.component.scss +0 -34
  72. package/src/lib/components/calendar/calendar.component.spec.ts +0 -23
  73. package/src/lib/components/calendar/calendar.component.ts +0 -53
  74. package/src/lib/components/chat-bubble/chat-bubble.component.html +0 -9
  75. package/src/lib/components/chat-bubble/chat-bubble.component.scss +0 -31
  76. package/src/lib/components/chat-bubble/chat-bubble.component.spec.ts +0 -23
  77. package/src/lib/components/chat-bubble/chat-bubble.component.ts +0 -43
  78. package/src/lib/components/form-input/form-input.component.html +0 -37
  79. package/src/lib/components/form-input/form-input.component.scss +0 -23
  80. package/src/lib/components/form-input/form-input.component.spec.ts +0 -23
  81. package/src/lib/components/form-input/form-input.component.ts +0 -95
  82. package/src/lib/components/form-input-select/form-input-select.component.html +0 -27
  83. package/src/lib/components/form-input-select/form-input-select.component.scss +0 -40
  84. package/src/lib/components/form-input-select/form-input-select.component.spec.ts +0 -23
  85. package/src/lib/components/form-input-select/form-input-select.component.ts +0 -61
  86. package/src/lib/components/form-input-text-area/form-input-text-area.component.html +0 -29
  87. package/src/lib/components/form-input-text-area/form-input-text-area.component.scss +0 -19
  88. package/src/lib/components/form-input-text-area/form-input-text-area.component.spec.ts +0 -23
  89. package/src/lib/components/form-input-text-area/form-input-text-area.component.ts +0 -76
  90. package/src/lib/components/form-validation/form-validation.component.html +0 -8
  91. package/src/lib/components/form-validation/form-validation.component.scss +0 -8
  92. package/src/lib/components/form-validation/form-validation.component.spec.ts +0 -23
  93. package/src/lib/components/form-validation/form-validation.component.ts +0 -34
  94. package/src/lib/components/icon/icon.component.html +0 -529
  95. package/src/lib/components/icon/icon.component.scss +0 -61
  96. package/src/lib/components/icon/icon.component.spec.ts +0 -21
  97. package/src/lib/components/icon/icon.component.ts +0 -40
  98. package/src/lib/components/logo/logo.component.html +0 -10
  99. package/src/lib/components/logo/logo.component.scss +0 -5
  100. package/src/lib/components/logo/logo.component.spec.ts +0 -23
  101. package/src/lib/components/logo/logo.component.ts +0 -21
  102. package/src/lib/components/notification/notification.component.html +0 -39
  103. package/src/lib/components/notification/notification.component.scss +0 -20
  104. package/src/lib/components/notification/notification.component.spec.ts +0 -21
  105. package/src/lib/components/notification/notification.component.ts +0 -23
  106. package/src/lib/components/page/page.component.html +0 -5
  107. package/src/lib/components/page/page.component.scss +0 -35
  108. package/src/lib/components/page/page.component.spec.ts +0 -21
  109. package/src/lib/components/page/page.component.ts +0 -42
  110. package/src/lib/components/spacer/spacer.component.html +0 -4
  111. package/src/lib/components/spacer/spacer.component.scss +0 -27
  112. package/src/lib/components/spacer/spacer.component.spec.ts +0 -21
  113. package/src/lib/components/spacer/spacer.component.ts +0 -43
  114. package/src/lib/components/spinner/spinner.component.html +0 -1
  115. package/src/lib/components/spinner/spinner.component.scss +0 -14
  116. package/src/lib/components/spinner/spinner.component.spec.ts +0 -23
  117. package/src/lib/components/spinner/spinner.component.ts +0 -33
  118. package/src/lib/directives/button-loader.directive.spec.ts +0 -8
  119. package/src/lib/directives/button-loader.directive.ts +0 -77
  120. package/src/lib/interfaces/alert.interface.ts +0 -20
  121. package/src/lib/interfaces/icon.interface.ts +0 -62
  122. package/src/lib/interfaces/input.interface.ts +0 -8
  123. package/src/lib/interfaces/notification.interface.ts +0 -15
  124. package/src/lib/interfaces/spacer.interface.ts +0 -6
  125. package/src/lib/library.module.ts +0 -66
  126. package/src/lib/utils/attribute.util.ts +0 -66
  127. package/src/lib/utils/form-validators-utility.ts +0 -186
  128. package/tsconfig.lib.json +0 -12
  129. package/tsconfig.lib.prod.json +0 -10
  130. 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,8 +0,0 @@
1
- .form-valid-feedback {
2
- padding: 4px 0 0 10px;
3
- p {
4
- font-size: 1.2rem;
5
- text-align: left;
6
- color: var(--cf-app-system-color-error);
7
- }
8
- }
@@ -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
- }