@carefirst/library 1.3.8 → 1.3.10

package/src/lib/components/form-input-text-area/form-input-text-area.component.html

@@ -0,0 +1,29 @@
+<!-- ngModel -->
+<ion-textarea
+  [style]="'min-height: ' + minHeight + '; max-height: ' + maxHeight"
+  *ngIf="!control"
+  [placeholder]="placeholder"
+  [ngClass]="{ 'text-center': inputTextCenter }"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  fill="outline"
+  [autocapitalize]="autoCapitalize"
+  [autoGrow]="true"
+  mode="md"
+  (ionInput)="valueChange.emit($event.detail.value ?? undefined)"
+  [value]="value"></ion-textarea>
+<!-- Form Control -->
+<ion-textarea
+  [style]="'min-height: ' + minHeight + '; max-height: ' + maxHeight"
+  *ngIf="control"
+  [placeholder]="placeholder"
+  [ngClass]="{ 'text-center': inputTextCenter }"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  fill="outline"
+  [autocapitalize]="autoCapitalize"
+  [autoGrow]="true"
+  mode="md"
+  [formControl]="control"
+  (ionInput)="valueChange.emit($event.detail.value ?? undefined)"></ion-textarea>
+<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>

package/src/lib/components/form-input-text-area/form-input-text-area.component.scss

@@ -0,0 +1,19 @@
+/*===============================================
+================== Form Items ===================
+===============================================*/
+ion-textarea {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.6rem;
+  color: var(--cf-app-text-color-default);
+  text-align: start;
+  --border-radius: 8px !important; //--- important overrides the fill option
+  --highlight-color-focused: var(--cf-app-color-primary);
+  --highlight-color-invalid: var(--cf-app-system-color-error);
+  --highlight-color-valid: var(--cf-app-color-primary);
+}
+
+ion-textarea.text-center {
+  text-align: center;
+}

package/src/lib/components/form-input-text-area/form-input-text-area.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormInputTextAreaComponent } from './form-input-text-area.component';
+
+describe('FormInputTextAreaComponent', () => {
+  let component: FormInputTextAreaComponent;
+  let fixture: ComponentFixture<FormInputTextAreaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormInputTextAreaComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FormInputTextAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/form-input-text-area/form-input-text-area.component.ts

@@ -0,0 +1,76 @@
+/**
+ * Carefirst Library Form Input Text Area
+ *
+ * @file          form-input-text-area.component
+ * @description   Contains all the logic for generating a CareFirst Form Input Text Area
+ * @author        Arno Jansen van Vuuren
+ * @since         2023 - 12 - 18
+ * @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>
+ *                disable input by disabling the form control
+ */
+
+import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
+import type { FormControl } from '@angular/forms';
+//--- Utils
+import { validateStringValue, checkTruthAttribute } from '../../utils/attribute.util';
+
+/**==============================================
+ * @interface     inputTextAreaC
+ * @description   Define available input values
+ */
+const inputTextAreaC = {
+  labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
+  autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
+} as const;
+
+@Component({
+  selector: 'cf-form-input-text-area',
+  templateUrl: './form-input-text-area.component.html',
+  styleUrl: './form-input-text-area.component.scss',
+})
+export class FormInputTextAreaComponent implements OnChanges {
+  @Input() label!: string;
+  @Input() labelPlacement?: (typeof inputTextAreaC.labelPlacement)[number];
+  @Input() placeholder?: string | undefined;
+  @Input() autoCapitalize?: (typeof inputTextAreaC.autoCapitalize)[number];
+  @Input() control?: FormControl | null;
+  @Input() textCenter?: boolean | string | undefined;
+  @Input() minHeight?: string | 'none' = 'none';
+  @Input() maxHeight?: string | 'none' = 'none';
+
+  //--- ngModel
+  @Input() value: string | undefined;
+  @Output() valueChange = new EventEmitter<typeof this.value>();
+
+  //--- Local variables
+  inputLabelPlacement: typeof this.labelPlacement;
+  inputClear = true;
+  inputTextCenter = false;
+  inputAutoCapitalize: typeof this.autoCapitalize;
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Detect changes to input values
+   * @param         {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Label Placement
+    this.inputLabelPlacement =
+      validateStringValue<(typeof inputTextAreaC.labelPlacement)[number]>(
+        changes,
+        'labelPlacement',
+        inputTextAreaC.labelPlacement.slice(),
+        this.inputLabelPlacement
+      ) || 'floating';
+    //--- Text Center
+    this.inputTextCenter = checkTruthAttribute(changes, 'textCenter', this.inputTextCenter);
+    //--- Auto Capitalize
+    this.inputAutoCapitalize =
+      validateStringValue<(typeof inputTextAreaC.autoCapitalize)[number]>(
+        changes,
+        'autoCapitalize',
+        inputTextAreaC.autoCapitalize.slice(),
+        this.inputAutoCapitalize
+      ) || 'none';
+  }
+}

package/src/lib/components/form-validation/form-validation.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="control?.dirty && control?.errors" class="form-valid-feedback">
+  <div *ngFor="let error of this.control?.errors | keyvalue">
+    <p class="body-medium" *ngIf="error.key === 'email'">*Invalid email format</p>
+    <p class="body-medium" *ngIf="error.key === 'minlength'">*Length required: {{ error.value.requiredLength - error.value.actualLength }}</p>
+    <p class="body-medium" *ngIf="error.key === 'maxlength'">*Max Length: {{ error.value.requiredLength }}</p>
+    <p class="body-medium" *ngIf="error.key === 'errorMessage'">*{{ error.value }}</p>
+  </div>
+</div>

package/src/lib/components/form-validation/form-validation.component.scss

@@ -0,0 +1,8 @@
+.form-valid-feedback {
+  padding: 4px 0 0 10px;
+  p {
+    font-size: 1.2rem;
+    text-align: left;
+    color: var(--cf-app-system-color-error);
+  }
+}

package/src/lib/components/form-validation/form-validation.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormValidationComponent } from './form-validation.component';
+
+describe('FormValidationComponent', () => {
+  let component: FormValidationComponent;
+  let fixture: ComponentFixture<FormValidationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormValidationComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FormValidationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/form-validation/form-validation.component.ts

@@ -0,0 +1,34 @@
+/**
+ * CareFirst Library Form Validation Feedback
+ *
+ * @file          form-validation.component
+ * @description   Contains all the logic for generating CareFirst Form Validation Feedback
+ * @author        Arno Jansen van Vuuren
+ * @since         2023 - 12 - 05
+ * @usage         <cf-form-validation [control]="formName.get('controlName')"></cf-form-validation>
+ */
+
+import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
+//--- Interfaces
+import type { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'cf-form-validation',
+  templateUrl: './form-validation.component.html',
+  styleUrl: './form-validation.component.scss',
+})
+export class FormValidationComponent implements OnChanges {
+  //--- Receive form control
+  @Input() control!: FormControl | null;
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Detect changes to input values
+   * @param         {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['control'] && changes['control'].currentValue) {
+      this.control = changes['control'].currentValue;
+    }
+  }
+}