@carefirst/library 1.3.8 → 1.3.10

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,94 @@
+/**
+ * CareFirst Library - Button
+ *
+ * @file          button.component
+ * @description   Contains all the logic for generating a CareFirst Button
+ * @author        Jacques Coetzee
+ * @since         2023 - 11 - 07
+ * @usage         <cf-btn type="'primary' | 'secondary' | 'tertiary'" fontSize="'small' | 'large'"  %customColor="var() | hex"% %disabled% %alert% %action% %snug%>TEXT</cf-btn>
+ */
+
+import { Component, Input, type SimpleChanges, type OnChanges, HostBinding } from '@angular/core';
+import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
+import { iconsC, type IconsT } from '../../interfaces/icon.interface';
+
+@Component({
+  selector: 'cf-btn',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent implements OnChanges {
+  @Input() type: 'primary' | 'secondary' | 'tertiary' = 'primary';
+  @Input() disabled?: boolean | string | undefined;
+  @Input() alert?: boolean | string | undefined;
+  @Input() action?: boolean | string | undefined;
+  @Input() snug?: boolean | string | undefined;
+  @Input() fontSize?: 'small' | 'large';
+  @Input() iconStart?: IconsT | undefined;
+  @Input() iconEnd?: IconsT | undefined;
+  @Input() loading?: boolean | string | undefined;
+  @Input() customColor?: string | undefined;
+
+  @HostBinding('style.pointer-events') get parentEvents(): string {
+    if (this.disabled) {
+      return 'none';
+    }
+    return 'auto';
+  }
+
+  //--- Local variables
+  inputType: typeof this.type = 'primary';
+  inputFontSize: typeof this.fontSize | undefined = undefined;
+  inputDisabled = false;
+  inputAlert = false;
+  inputAction = false;
+  inputSnug = false;
+  inputIconStart: typeof this.iconStart | undefined = undefined;
+  inputIconEnd: typeof this.iconEnd | undefined = undefined;
+  inputLoading = false;
+  inputCustomColor = '';
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Update various values on input changes
+   * @returns       {void}
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Type
+    this.inputType =
+      validateStringValue<'primary' | 'secondary' | 'tertiary'>(changes, 'type', ['primary', 'secondary', 'tertiary'], this.inputType) || 'primary';
+    //--- Font Size
+    this.inputFontSize = validateStringValue<'small' | 'large'>(changes, 'fontSize', ['small', 'large'], this.inputFontSize);
+    //--- Disabled
+    this.inputDisabled = checkTruthAttribute(changes, 'disabled', this.inputDisabled);
+    //--- Alert
+    this.inputAlert = checkTruthAttribute(changes, 'alert', this.inputAlert);
+    //--- Action
+    this.inputAction = checkTruthAttribute(changes, 'action', this.inputAction);
+    //--- Snug
+    this.inputSnug = checkTruthAttribute(changes, 'snug', this.inputSnug);
+    //--- Icon Start
+    this.inputIconStart = validateStringValue<IconsT>(changes, 'iconStart', iconsC.slice(), this.inputIconStart);
+    //--- Icon Start
+    this.inputIconEnd = validateStringValue<IconsT>(changes, 'iconEnd', iconsC.slice(), this.inputIconEnd);
+    //--- Loading
+    this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
+    //--- Custom color
+    if (changes['customColor']?.currentValue) this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
+  }
+
+  /**----------------------------------------------------------------
+   * @name          checkCustomColor
+   * @description   Check if the custom color is valid
+   * @param         {string} color
+   * @returns       {string}
+   */
+  checkCustomColor(color: string): string {
+    //--- Check for a css variable
+    if (color.startsWith('var')) return color;
+    //--- Check hex
+    if (color.startsWith('#') && (color.length === 4 || color.length === 7) && color.split('').every((char) => char.match(/[#0-9a-fA-F]+/)))
+      return color;
+    return '';
+  }
+}

package/src/lib/components/calendar/calendar.component.html

@@ -0,0 +1,9 @@
+<ion-datetime
+  [class]="inputColor"
+  mode="ios"
+  firstDayOfWeek="1"
+  [min]="min"
+  [max]="max"
+  [presentation]="inputTime ? 'date-time' : 'date'"
+  (ionChange)="setValue($event.detail.value)">
+</ion-datetime>

package/src/lib/components/calendar/calendar.component.scss

@@ -0,0 +1,34 @@
+ion-datetime {
+  --background: var(--cf-app-background-light);
+  color: var(--cf-app-text-color-default);
+}
+
+ion-datetime::part(calendar-day) {
+  font-size: 1.6rem;
+}
+
+ion-datetime::part(month-year-button) {
+  font-size: 1.8rem;
+  font-weight: 900;
+  color: var(--cf-app-text-color-default);
+}
+
+ion-datetime.accent::part(today) {
+  border: 1px solid var(--cf-app-color-accent);
+  color: var(--cf-app-color-accent);
+}
+
+ion-datetime.accent::part(active) {
+  background-color: var(--cf-app-color-accent);
+  color: var(--cf-app-text-color-light);
+}
+
+ion-datetime.success::part(today) {
+  border: 1px solid var(--cf-app-color-primary);
+  color: var(--cf-app-text-color-default);
+}
+
+ion-datetime.success::part(active) {
+  background-color: var(--cf-app-system-color-success);
+  color: var(--cf-app-text-color-light);
+}

package/src/lib/components/calendar/calendar.component.spec.ts

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

package/src/lib/components/calendar/calendar.component.ts

@@ -0,0 +1,53 @@
+/**
+ * CareFirst Library Calendar
+ *
+ * @file          calendar.component
+ * @description   Contains all the logic for generating a CareFirst Calendar
+ * @author        Arno Jansen van Vuuren
+ * @since         2023 - 12 - 01
+ * @usage         <cf-calendar %displayTime% %color%="success | accent" %min% %max%></cf-calendar>
+ */
+
+import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
+import dayjs from 'dayjs';
+//--- Utils
+import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
+
+@Component({
+  selector: 'cf-calendar',
+  templateUrl: './calendar.component.html',
+  styleUrl: './calendar.component.scss',
+})
+export class CalendarComponent implements OnChanges {
+  @Input() displayTime?: boolean | string | undefined;
+  @Input() color?: 'success' | 'accent';
+  @Input() min?: string | undefined = undefined;
+  @Input() max?: string | undefined = undefined;
+  @Output() value = new EventEmitter<string>();
+
+  //--- Local variables
+  inputTime = false;
+  inputColor: typeof this.color = 'accent';
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Update various values on component input changes
+   * @returns       {void}
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Display Time
+    this.inputTime = checkTruthAttribute(changes, 'displayTime', this.inputTime);
+    //--- Color
+    this.inputColor = validateStringValue<'success' | 'accent'>(changes, 'color', ['success', 'accent'], this.inputColor) || 'accent';
+  }
+
+  /**----------------------------------------------------------------
+   * @name          setValue
+   * @description   Emit the selected date value
+   * @param         {string | string[] | null | undefined} value
+   * @returns       {void}
+   */
+  setValue(value: string | string[] | null | undefined): void {
+    if (typeof value === 'string') this.value.emit(dayjs(value).format('YYYY-MM-DD' + (this.inputTime ? ' HH:mm' : '')));
+  }
+}

package/src/lib/components/chat-bubble/chat-bubble.component.html

@@ -0,0 +1,9 @@
+<div id="container" [ngClass]="inputType">
+  <div id="message">
+    <p class="body-extra-small">{{ inputDate }}</p>
+    <cf-spacer default="4"></cf-spacer>
+    <div id="bubble">
+      <p class="body-extra-small">{{ inputMessage }}</p>
+    </div>
+  </div>
+</div>

package/src/lib/components/chat-bubble/chat-bubble.component.scss

@@ -0,0 +1,31 @@
+#container {
+  display: flex;
+
+  #message {
+    p {
+      color: var(--cf-app-text-color-default);
+    }
+    #bubble {
+      background: var(--message-background-color);
+      border-radius: var(--border-radius);
+      padding: 12px 16px;
+      p {
+        color: var(--cf-app-text-color-light);
+      }
+    }
+  }
+}
+
+#container.outgoing {
+  justify-content: end;
+  text-align: end;
+  --border-radius: 16px 4px 16px 16px;
+  --message-background-color: var(--cf-app-color-primary);
+}
+
+#container.incoming {
+  justify-content: start;
+  text-align: start;
+  --border-radius: 4px 16px 16px 16px;
+  --message-background-color: var(--cf-app-color-secondary);
+}

package/src/lib/components/chat-bubble/chat-bubble.component.spec.ts

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

package/src/lib/components/chat-bubble/chat-bubble.component.ts

@@ -0,0 +1,43 @@
+/**
+ * CareFirst Chat Bubble
+ *
+ * @file          chat-bubble.component
+ * @description   Contains all the logic for generating a CareFirst Chat Bubble
+ * @author        Jacques Coetzee
+ * @since         2024 - 02 - 22
+ * @usage         <cf-chat-bubble type="outgoing | incoming" date="string" message="string"></cf-chat-bubble>
+ */
+
+import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
+//--- Utils
+import { validateStringValue } from '../../utils/attribute.util';
+
+@Component({
+  selector: 'cf-chat-bubble',
+  templateUrl: './chat-bubble.component.html',
+  styleUrl: './chat-bubble.component.scss',
+})
+export class ChatBubbleComponent implements OnChanges {
+  @Input() type: 'outgoing' | 'incoming' = 'outgoing';
+  @Input() date: string = '';
+  @Input() message: string = '';
+
+  //--- Local variables
+  inputType: typeof this.type = 'incoming';
+  inputDate: typeof this.date = '';
+  inputMessage: typeof this.message = '';
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Update various values on input changes
+   * @returns       {void}
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Type
+    this.inputType = validateStringValue<typeof this.type>(changes, 'type', ['incoming', 'outgoing'], this.inputType) || 'outgoing';
+    //--- Date
+    this.inputDate = changes['date']?.currentValue || '';
+    //--- Message
+    this.inputMessage = changes['message']?.currentValue || '';
+  }
+}

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

@@ -0,0 +1,37 @@
+<!-- ngModel -->
+<ion-input
+  *ngIf="!control"
+  [ngClass]="{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground }"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  [placeholder]="placeholder"
+  fill="outline"
+  [clearInput]="!inputClear"
+  [autocapitalize]="autoCapitalize"
+  mode="md"
+  [inputmode]="localInputMode"
+  [min]="min"
+  [max]="max"
+  [maxlength]="maxLength || null"
+  [type]="type"
+  (ionInput)="valueChange.emit($event.detail.value ?? undefined)"
+  [value]="value"></ion-input>
+<!-- Form Control -->
+<ion-input
+  *ngIf="control"
+  [ngClass]="{ 'text-center': inputTextCenter, 'grey-background': inputGreyBackground }"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  [placeholder]="placeholder"
+  fill="outline"
+  [clearInput]="!inputClear"
+  [autocapitalize]="autoCapitalize"
+  mode="md"
+  [inputmode]="localInputMode"
+  [formControl]="control"
+  [min]="min"
+  [max]="max"
+  [maxlength]="maxLength || null"
+  [type]="type"
+  (ionInput)="valueChange.emit($event.detail.value ?? undefined)"></ion-input>
+<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>

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

@@ -0,0 +1,23 @@
+/*===============================================
+================== Form Items ===================
+===============================================*/
+ion-input {
+  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-input.text-center {
+  text-align: center;
+}
+
+ion-input.grey-background {
+  --background: var(--cf-app-system-color-outline);
+}

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

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

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

@@ -0,0 +1,95 @@
+/**
+ * Carefirst Library Form Input
+ *
+ * @file          form-input.component
+ * @description   Contains all the logic for generating a CareFirst Form Input Field
+ * @author        Arno Jansen van Vuuren
+ * @since         2023 - 12 - 14
+ * @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>
+ *                disable input by disabling the form control
+ */
+
+import { Component, Input, Output, type OnChanges, type SimpleChanges, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+//--- Utils
+import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
+
+/**==============================================
+ * @interface     inputsC
+ * @description   Define available input values
+ */
+const inputsC = {
+  labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
+  inputMode: ['text', 'email', 'numeric', 'tel', 'decimal', 'url', 'search'],
+  autoCapitalize: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
+  type: ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'],
+} as const;
+
+@Component({
+  selector: 'cf-form-input',
+  templateUrl: './form-input.component.html',
+  styleUrl: './form-input.component.scss',
+})
+export class FormInputComponent implements OnChanges {
+  @Input() label!: string;
+  @Input() min: number | string = 'none';
+  @Input() max: number | string = 'none';
+  @Input() labelPlacement?: (typeof inputsC.labelPlacement)[number];
+  @Input() placeholder?: string | undefined;
+  @Input() inputmode?: (typeof inputsC.inputMode)[number];
+  @Input() autoCapitalize?: (typeof inputsC.autoCapitalize)[number];
+  @Input() type?: (typeof inputsC.type)[number];
+  @Input() noClearButton?: boolean | string | undefined;
+  @Input() control?: FormControl | null;
+  @Input() textCenter?: boolean | string | undefined;
+  @Input() maxLength?: number | string;
+  @Input() greyBackground?: boolean | string | undefined;
+
+  //--- ngModel
+  @Input() value: string | undefined;
+  @Output() valueChange = new EventEmitter<typeof this.value>();
+
+  //--- Local variables
+  inputLabelPlacement: typeof this.labelPlacement;
+  localInputMode: typeof this.inputmode;
+  inputClear = false;
+  inputTextCenter = false;
+  inputType: typeof this.type;
+  inputAutoCapitalize: typeof this.autoCapitalize;
+  inputGreyBackground = false;
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Detect changes to input values
+   * @param         {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Label Placement
+    this.inputLabelPlacement =
+      validateStringValue<(typeof inputsC.labelPlacement)[number]>(
+        changes,
+        'labelPlacement',
+        inputsC.labelPlacement.slice(),
+        this.inputLabelPlacement
+      ) || 'floating';
+    //--- Input Type (keyboard)
+    this.localInputMode =
+      validateStringValue<(typeof inputsC.inputMode)[number]>(changes, 'inputmode', inputsC.inputMode.slice(), this.localInputMode) || 'text';
+    //--- Clear Button
+    this.inputClear = checkTruthAttribute(changes, 'noClearButton', this.inputClear);
+    //--- Text Center
+    this.inputTextCenter = checkTruthAttribute(changes, 'textCenter', this.inputTextCenter);
+    //--- Type
+    this.inputType = validateStringValue<(typeof inputsC.type)[number]>(changes, 'type', inputsC.type.slice(), this.inputType) || 'text';
+    //--- Auto Capitalize
+    this.inputAutoCapitalize =
+      validateStringValue<(typeof inputsC.autoCapitalize)[number]>(
+        changes,
+        'autoCapitalize',
+        inputsC.autoCapitalize.slice(),
+        this.inputAutoCapitalize
+      ) || 'none';
+    //--- Grey Background
+    this.inputGreyBackground = checkTruthAttribute(changes, 'greyBackground', this.inputGreyBackground);
+  }
+}

package/src/lib/components/form-input-select/form-input-select.component.html

@@ -0,0 +1,27 @@
+<!-- ngModel -->
+<ion-select
+  *ngIf="!control"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  [placeholder]="placeholder"
+  fill="outline"
+  mode="md"
+  interface="popover"
+  (ionChange)="valueChange.emit($event.detail.value ?? undefined)"
+  [value]="value">
+  <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.displayName }}</ion-select-option>
+</ion-select>
+<!-- Form Control -->
+<ion-select
+  *ngIf="control"
+  [label]="label"
+  [labelPlacement]="inputLabelPlacement"
+  [placeholder]="placeholder"
+  fill="outline"
+  mode="md"
+  interface="popover"
+  [formControl]="control"
+  (ionChange)="valueChange.emit($event.detail.value ?? undefined)">
+  <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.displayName }}</ion-select-option>
+</ion-select>
+<cf-form-validation *ngIf="control" [control]="control"></cf-form-validation>

package/src/lib/components/form-input-select/form-input-select.component.scss

@@ -0,0 +1,40 @@
+/*===============================================
+================== Form Items ===================
+===============================================*/
+ion-select {
+  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);
+}
+
+/*===============================================
+================ Select Popovers ================
+===============================================*/
+::ng-deep ion-select-popover ion-list[class*='popover'] {
+  background: var(--cf-app-background-light);
+  ion-item[class*='popover'] {
+    ion-radio {
+      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;
+    }
+
+    --background: transparent;
+    --border-radius: 8px;
+    --background-focused: var(--cf-app-color-accent);
+    --background-focused-opacity: 0.5;
+    --background-hover: var(--cf-app-color-primary);
+    --background-hover-opacity: 0.1;
+    padding: 4px;
+  }
+}

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

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

package/src/lib/components/form-input-select/form-input-select.component.ts

@@ -0,0 +1,61 @@
+/**
+ * Carefirst Library Form Input Select
+ *
+ * @file          form-input-select.component
+ * @description   Contains all the logic for generating a CareFirst Select
+ * @author        Arno Jansen van Vuuren
+ * @since         2023 - 12 - 14
+ * @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>
+ *                disable input by disabling the form control
+ */
+
+import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
+import { FormControl } from '@angular/forms';
+//--- Utils
+import { validateStringValue } from '../../utils/attribute.util';
+//--- Interfaces
+import type { FormInputSelectOptionsI } from '../../interfaces/input.interface';
+
+/**==============================================
+ * @interface     inputSelectC
+ * @description   Define available input select values
+ */
+const inputSelectC = {
+  labelPlacement: ['fixed', 'floating', 'stacked', 'start', 'end'],
+} as const;
+
+@Component({
+  selector: 'cf-form-input-select',
+  templateUrl: './form-input-select.component.html',
+  styleUrl: './form-input-select.component.scss',
+})
+export class FormInputSelectComponent<T> implements OnChanges {
+  @Input() label!: string;
+  @Input() options!: FormInputSelectOptionsI<T>[];
+  @Input() labelPlacement?: (typeof inputSelectC.labelPlacement)[number];
+  @Input() placeholder?: string | undefined;
+  @Input() control?: FormControl | null;
+
+  //--- ngModel
+  @Input() value: FormInputSelectOptionsI<T>['value'] | undefined;
+  @Output() valueChange = new EventEmitter<typeof this.value>();
+
+  //--- Local variables
+  inputLabelPlacement: typeof this.labelPlacement;
+
+  /**----------------------------------------------------------------
+   * @name          ngOnChanges
+   * @description   Detect changes to input values
+   * @param         {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    //--- Label Placement
+    this.inputLabelPlacement =
+      validateStringValue<(typeof inputSelectC.labelPlacement)[number]>(
+        changes,
+        'labelPlacement',
+        inputSelectC.labelPlacement.slice(),
+        this.inputLabelPlacement
+      ) || 'floating';
+  }
+}