@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.
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
- }