From 131c68579b97d342dd3edc362c1909c2648998c1 Mon Sep 17 00:00:00 2001
From: Cody Tolene <codyatolene@gmail.com>
Date: Sat, 15 Feb 2025 09:46:13 -0600
Subject: [PATCH 1/2] Add remaining components.

---
 README.md                                     | 40 ++++++---
 prettier.config.js                            |  2 +-
 src/app/form/form-group-example.ts            | 20 ++++-
 src/app/form/form.component.html              | 58 +++++++++++++
 src/app/form/form.component.scss              | 12 ++-
 src/app/form/form.component.ts                | 40 ++++++++-
 src/app/layout/footer.component.html          |  4 +-
 src/app/layout/header.component.html          |  6 +-
 src/app/public/form.directive.ts              | 12 +++
 .../input-chips/input-chip.component.ts       | 18 ++++
 .../input-chips/input-chips.component.html    | 24 ++++++
 .../input-chips.component.scss}               |  0
 .../input-chips/input-chips.component.ts      | 34 ++++++++
 .../public/input-chips/input-chips.module.ts  | 20 +++++
 .../input-datepicker.component.html           | 63 +++++++-------
 .../input-datepicker.component.ts             |  3 +-
 .../input-dropdown-option-group.component.ts  | 16 ++++
 .../input-dropdown-option.component.ts        | 21 +++++
 .../input-dropdown.component.html             | 41 +++++++++
 .../input-dropdown.component.scss             |  3 +
 .../input-dropdown.component.ts               | 78 +++++++++++++++++
 .../input-dropdown/input-dropdown.module.ts   | 31 +++++++
 .../input-timepicker.component.html           | 59 ++++++-------
 .../input-timepicker.component.ts             |  2 +
 src/app/public/input/input.component.html     | 84 ++++++++++---------
 src/app/public/input/input.component.ts       |  3 +-
 src/app/public/types/index.ts                 |  2 +-
 .../types/{radio-option.ts => option.ts}      |  2 +-
 .../utilities/loading-input.component.ts      | 58 +++++++++++++
 29 files changed, 628 insertions(+), 128 deletions(-)
 create mode 100644 src/app/public/input-chips/input-chip.component.ts
 create mode 100644 src/app/public/input-chips/input-chips.component.html
 rename src/app/public/{input-dropdown/.gitkeep => input-chips/input-chips.component.scss} (100%)
 create mode 100644 src/app/public/input-chips/input-chips.component.ts
 create mode 100644 src/app/public/input-chips/input-chips.module.ts
 create mode 100644 src/app/public/input-dropdown/input-dropdown-option-group.component.ts
 create mode 100644 src/app/public/input-dropdown/input-dropdown-option.component.ts
 create mode 100644 src/app/public/input-dropdown/input-dropdown.component.html
 create mode 100644 src/app/public/input-dropdown/input-dropdown.component.scss
 create mode 100644 src/app/public/input-dropdown/input-dropdown.component.ts
 create mode 100644 src/app/public/input-dropdown/input-dropdown.module.ts
 rename src/app/public/types/{radio-option.ts => option.ts} (59%)
 create mode 100644 src/app/public/utilities/loading-input.component.ts

diff --git a/README.md b/README.md
index ac0fef9..5d7eb03 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ The components included in this project are:
 - **InputComponent**: A generic input field that can be used for text, email,
   password, etc.
 - **InputCheckboxComponent**: A checkbox input field.
+- **InputChipsComponent**: A chips input field.
 - **InputDatepickerComponent**: A datepicker input field.
 - **InputDropdownComponent**: A dropdown input field.
 - **InputRadioModule**: A radio input options field.
@@ -145,6 +146,7 @@ application where used:
 + import {
 +   InputComponent,
 +   InputCheckboxComponent,
++   InputChipsComponent,
 +   InputDatepickerComponent,
 +   InputDropdownComponent,
 +   InputRadioModule,
@@ -158,34 +160,50 @@ application where used:
   ...
   imports: [
 +   InputComponent,
++   InputCheckboxComponent,
++   InputChipsComponent,
++   InputDatepickerComponent,
++   InputDropdownComponent,
++   InputRadioModule,
++   InputTextareaComponent,
++   InputTimepickerComponent,
++   InputToggleComponent,
     ...
   ],
 })
 
 ...
 
-// Or import to component
+// Or import to a standalone component
 @Component({
   ...
   imports: [
 +   InputComponent,
++   InputCheckboxComponent,
++   InputChipsComponent,
++   InputDatepickerComponent,
++   InputDropdownComponent,
++   InputRadioModule,
++   InputTextareaComponent,
++   InputTimepickerComponent,
++   InputToggleComponent,
     ...
   ],
 })
 
 ...
 
-// Then use in template
+// Then use in template, simplified example form below:
 + <form [formGroup]="formGroup">
-+   <pro-input [formControl]="formGroup.controls.input" />
-+   <pro-input-checkbox ... />
-+   <pro-input-datepicker ... />
-+   <pro-input-dropdown ... />
-+   <pro-input-radio ... />
-+   <pro-input-textarea ... />
-+   <pro-input-timepicker ... />
-+   <pro-input-toggle ... />
-+   ...
++   <pro-input [formControl]="formGroup.controls.input" ... />
++   <pro-input-checkbox [formControl]="formGroup.controls.checkbox" ... />
++   <pro-input-chips [formControl]="formGroup.controls.chips" ... />
++   <pro-input-datepicker [formControl]="formGroup.controls.datepicker" ... />
++   <pro-input-dropdown [formControl]="formGroup.controls.dropdown" ... />
++   <pro-input-radio [formControl]="formGroup.controls.radio" ... />
++   <pro-input-textarea [formControl]="formGroup.controls.textarea" ... />
++   <pro-input-timepicker [formControl]="formGroup.controls.timepicker" ... />
++   <pro-input-toggle [formControl]="formGroup.controls.toggle" ... />
 + </form>
 ```
 
diff --git a/prettier.config.js b/prettier.config.js
index 2735ad2..82d6156 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,5 +1,5 @@
 /** Prettier configuration and options. */
-const prettierConfig = {
+var prettierConfig = {
   $schema: 'https://json.schemastore.org/prettierrc',
   plugins: ['@trivago/prettier-plugin-sort-imports'],
   importOrderParserPlugins: ['typescript', 'decorators-legacy'],
diff --git a/src/app/form/form-group-example.ts b/src/app/form/form-group-example.ts
index bee9379..6dda8a8 100644
--- a/src/app/form/form-group-example.ts
+++ b/src/app/form/form-group-example.ts
@@ -2,18 +2,21 @@ import { DateTime } from 'luxon';
 
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { RadioOption } from '../public/types';
+import { Option } from '../public/types';
 import { CustomValidators } from '../public/utilities/custom-validators';
 
 export interface FormGroupExample {
   checkboxOptional: FormControl<boolean | null>;
   checkboxRequired: FormControl<boolean | null>;
+  chips: FormControl<readonly string[] | null>;
   count: FormControl<number | null>;
   date: FormControl<DateTime | null>;
   description: FormControl<string | null>;
+  dropdown: FormControl<Option['value'] | null>;
+  dropdownMultiple: FormControl<ReadonlyArray<Option['value']> | null>;
   email: FormControl<string | null>;
   name: FormControl<string | null>;
-  optionsRadio: FormControl<RadioOption['value'] | null>;
+  optionsRadio: FormControl<Option['value'] | null>;
   password: FormControl<string | null>;
   time: FormControl<DateTime | null>;
   toggleOptional: FormControl<boolean | null>;
@@ -42,6 +45,10 @@ export const formGroupExample = new FormGroup<FormGroupExample>({
   checkboxRequired: new FormControl<boolean | null>(null, [
     Validators.required,
   ]),
+  chips: new FormControl<readonly string[] | null>(null, [
+    Validators.required,
+    Validators.maxLength(3),
+  ]),
   count: new FormControl<number | null>(null, [
     Validators.min(validation.count.min),
     Validators.max(validation.count.max),
@@ -55,12 +62,19 @@ export const formGroupExample = new FormGroup<FormGroupExample>({
     Validators.required,
     Validators.maxLength(validation.description.maxLength),
   ]),
+  dropdown: new FormControl<Option['value'] | null>(null, [
+    Validators.required,
+  ]),
+  dropdownMultiple: new FormControl<ReadonlyArray<Option['value']> | null>(
+    null,
+    [Validators.required, Validators.maxLength(2)],
+  ),
   email: new FormControl<string | null>(null, [
     Validators.email,
     Validators.required,
   ]),
   name: new FormControl<string | null>(null, [Validators.required]),
-  optionsRadio: new FormControl<RadioOption['value'] | null>(null, [
+  optionsRadio: new FormControl<Option['value'] | null>(null, [
     Validators.required,
   ]),
   password: new FormControl<string | null>(null, [
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 5b03cbc..e34dd09 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -74,6 +74,64 @@
     placeholder="Enter or select a time"
     hint="A time between 8 AM and 8 PM CST."
   ></pro-input-timepicker>
+  <!-- DROPDOWN - SINGLE -->
+  <pro-input-dropdown
+    [formControl]="formGroup.controls.dropdown"
+    hint="A single-select dropdown."
+    label="Dropdown"
+    placeholder="Select an option"
+  >
+    @for (option of dropdownOptions; track option) {
+      <pro-input-dropdown-option [value]="option.value">{{
+        option.label
+      }}</pro-input-dropdown-option>
+    }
+    <pro-input-dropdown-option-group label="Grouped Options">
+      @for (option of groupedDropdownOptions; track option) {
+        <pro-input-dropdown-option [value]="option.value">{{
+          option.label
+        }}</pro-input-dropdown-option>
+      }
+    </pro-input-dropdown-option-group>
+    <pro-input-dropdown-option disabled [value]="1"
+      >Disabled Option</pro-input-dropdown-option
+    >
+  </pro-input-dropdown>
+  <!-- DROPDOWN - MULTIPLE -->
+  <pro-input-dropdown
+    [formControl]="formGroup.controls.dropdownMultiple"
+    hint="A multi-select dropdown with a max of 2 selections."
+    label="Dropdown (Multiple)"
+    multiple
+    placeholder="Select multiple options"
+  >
+    @for (option of dropdownOptions; track option) {
+      <pro-input-dropdown-option [value]="option.value">{{
+        option.label
+      }}</pro-input-dropdown-option>
+    }
+    <pro-input-dropdown-option-group label="Grouped Options">
+      @for (option of groupedDropdownOptions; track option) {
+        <pro-input-dropdown-option [value]="option.value">{{
+          option.label
+        }}</pro-input-dropdown-option>
+      }
+    </pro-input-dropdown-option-group>
+    <pro-input-dropdown-option disabled [value]="1"
+      >Disabled Option</pro-input-dropdown-option
+    >
+  </pro-input-dropdown>
+  <!-- CHIPS -->
+  <pro-input-chips
+    [formControl]="formGroup.controls.chips"
+    hint="A max of 3 chips."
+    label="Chips"
+    multiple
+  >
+    @for (chip of chips; track chip) {
+      <pro-input-chip [value]="chip">{{ chip }}</pro-input-chip>
+    }
+  </pro-input-chips>
   <!-- OPTIONS RADIO -->
   <pro-input-radio
     [formControl]="formGroup.controls.optionsRadio"
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 7cc6568..a16229c 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -16,10 +16,13 @@ form {
 
   pro-input,
   pro-input-checkbox,
+  pro-input-chips,
   pro-input-datepicker,
+  pro-input-dropdown,
   pro-input-radio,
   pro-input-timepicker,
-  pro-input-toggle {
+  pro-input-toggle,
+  pro-loading-input {
     flex: 0 0 calc(50% - ($gap/ 2));
     margin: 0 $margin calc($margin * 2) $margin;
     max-width: calc(50% - ($gap / 2));
@@ -67,11 +70,14 @@ form {
   :host form {
     > pro-input,
     > pro-input-checkbox,
+    > pro-input-chips,
     > pro-input-datepicker,
+    > pro-input-dropdown,
     > pro-input-radio,
-    > pro-input-timepicker,
     > pro-input-textarea,
-    > pro-input-toggle {
+    > pro-input-timepicker,
+    > pro-input-toggle,
+    > pro-loading-input {
       flex: 0 0 100%;
       margin: 0 0 calc($margin * 2) 0;
       max-width: 100%;
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index ff47ff0..a40af9b 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -8,13 +8,15 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { FormDirective } from '../public/form.directive';
 import { InputCheckboxComponent } from '../public/input-checkbox/input-checkbox.component';
+import { InputChipsModule } from '../public/input-chips/input-chips.module';
 import { InputDatepickerComponent } from '../public/input-datepicker/input-datepicker.component';
+import { InputDropdownModule } from '../public/input-dropdown/input-dropdown.module';
 import { InputRadioModule } from '../public/input-radio/input-radio.module';
 import { InputTextareaComponent } from '../public/input-textarea/input-textarea.component';
 import { InputTimepickerComponent } from '../public/input-timepicker/input-timepicker.component';
 import { InputToggleComponent } from '../public/input-toggle/input-toggle.component';
 import { InputComponent } from '../public/input/input.component';
-import { RadioOption } from '../public/types';
+import { Option } from '../public/types';
 import {
   FormGroupExample,
   formGroupExample,
@@ -27,8 +29,10 @@ import {
   imports: [
     CommonModule,
     InputCheckboxComponent,
+    InputChipsModule,
     InputComponent,
     InputDatepickerComponent,
+    InputDropdownModule,
     InputRadioModule,
     InputTextareaComponent,
     InputTimepickerComponent,
@@ -50,6 +54,9 @@ export class FormComponent extends FormDirective<FormGroupExample> {
   }
 
   protected override readonly formGroup = formGroupExample;
+  protected readonly chips = chips;
+  protected readonly dropdownOptions = dropdownOptions;
+  protected readonly groupedDropdownOptions = groupedDropdownOptions;
   protected readonly radioOptions = radioOptions;
   protected readonly thirtyDaysFromNow: DateTime;
   protected readonly today: DateTime;
@@ -60,9 +67,15 @@ export class FormComponent extends FormDirective<FormGroupExample> {
     this.formGroup.setValue({
       checkboxOptional: false,
       checkboxRequired: true,
+      chips: [this.chips[0], this.chips[1]],
       count: 45,
       date: this.today.plus({ weeks: 1 }),
       description: 'Lorem ipsum dolor sit amet.',
+      dropdown: this.dropdownOptions[0].value,
+      dropdownMultiple: [
+        this.dropdownOptions[0].value,
+        this.dropdownOptions[1].value,
+      ],
       email: 'test@test.com',
       name: 'John Doe',
       optionsRadio: this.radioOptions[0].value,
@@ -105,7 +118,30 @@ export class FormComponent extends FormDirective<FormGroupExample> {
   }
 }
 
-const radioOptions: RadioOption[] = [
+const chips: readonly string[] = [
+  'Chip 1',
+  'Chip 2',
+  'Chip 3',
+  'Chip 4',
+  'Chip 5',
+  'Chip 6',
+  'Chip 7',
+  'Chip 8',
+];
+
+const dropdownOptions: readonly Option[] = [
+  { label: 'Option 1', value: 'One' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: 3 },
+];
+
+const groupedDropdownOptions: readonly Option[] = [
+  { label: 'Option 4', value: 'Four' },
+  { label: 'Option 5', value: '5' },
+  { label: 'Option 6', value: 6 },
+];
+
+const radioOptions: readonly Option[] = [
   { label: 'Option 1', value: 1 },
   { label: 'Option 2', value: '2' },
   { label: 'Option 3', value: 3 },
diff --git a/src/app/layout/footer.component.html b/src/app/layout/footer.component.html
index 2ffb88d..39f7683 100644
--- a/src/app/layout/footer.component.html
+++ b/src/app/layout/footer.component.html
@@ -1,8 +1,6 @@
 <footer>
   <a href="https://www.ProAngular.com" target="_blank">
-    <img
-      src="https://www.proangular.com/assets/images/pro-angular-logo-large.png"
-    />
+    <img src="https://www.proangular.com/images/pro-angular-logo-large.png" />
   </a>
   <p>
     Copyright &copy; Pro Angular 2022
diff --git a/src/app/layout/header.component.html b/src/app/layout/header.component.html
index a853c22..cb49f57 100644
--- a/src/app/layout/header.component.html
+++ b/src/app/layout/header.component.html
@@ -1,9 +1,7 @@
 <mat-toolbar>
   <mat-toolbar-row>
     <a href="https://www.ProAngular.com" target="_blank">
-      <img
-        src="https://www.proangular.com/assets/images/pro-angular-logo-full.png"
-      />
+      <img src="https://www.proangular.com/images/pro-angular-logo-full.png" />
     </a>
     <div>
       <a
@@ -11,7 +9,7 @@
         aria-label="GitHub Repo"
         target="_blank"
       >
-        <img src="https://www.proangular.com/assets/images/git-hub.svg" />
+        <img src="https://www.proangular.com/images/git-hub.svg" />
       </a>
     </div>
   </mat-toolbar-row>
diff --git a/src/app/public/form.directive.ts b/src/app/public/form.directive.ts
index d325025..32157e8 100644
--- a/src/app/public/form.directive.ts
+++ b/src/app/public/form.directive.ts
@@ -13,6 +13,8 @@ import { InputTextareaComponent } from './input-textarea/input-textarea.componen
 import { InputTimepickerComponent } from './input-timepicker/input-timepicker.component';
 import { InputToggleComponent } from './input-toggle/input-toggle.component';
 import { InputComponent } from './input/input.component';
+import { InputDropdownComponent } from './input-dropdown/input-dropdown.component';
+import { InputChipsComponent } from './input-chips/input-chips.component';
 
 @Directive({ selector: '[proFormDirective][formGroup]' })
 export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
@@ -25,10 +27,16 @@ export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
 
   @ViewChildren(InputCheckboxComponent)
   private readonly inputCheckboxes!: QueryList<InputCheckboxComponent>;
+  
+  @ViewChildren(InputChipsComponent)
+  private readonly inputChips!: QueryList<InputChipsComponent>;
 
   @ViewChildren(InputDatepickerComponent)
   private readonly inputDatepickers!: QueryList<InputDatepickerComponent>;
 
+  @ViewChildren(InputDropdownComponent)
+  private readonly inputDropdowns!: QueryList<InputDropdownComponent<T>>;
+
   @ViewChildren(InputRadioComponent)
   private readonly inputRadios!: QueryList<InputRadioComponent<T>>;
 
@@ -44,7 +52,9 @@ export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
   private get formInputs(): ReadonlyArray<
     | InputComponent
     | InputCheckboxComponent
+    | InputChipsComponent
     | InputDatepickerComponent
+    | InputDropdownComponent<T>
     | InputRadioComponent<T>
     | InputTextareaComponent
     | InputTimepickerComponent
@@ -53,7 +63,9 @@ export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
     return [
       ...this.inputs.toArray(),
       ...this.inputCheckboxes.toArray(),
+      ...this.inputChips.toArray(),
       ...this.inputDatepickers.toArray(),
+      ...this.inputDropdowns.toArray(),
       ...this.inputRadios.toArray(),
       ...this.inputTextareas.toArray(),
       ...this.inputTimepickers.toArray(),
diff --git a/src/app/public/input-chips/input-chip.component.ts b/src/app/public/input-chips/input-chip.component.ts
new file mode 100644
index 0000000..e98e90c
--- /dev/null
+++ b/src/app/public/input-chips/input-chip.component.ts
@@ -0,0 +1,18 @@
+import { coerceElement } from '@angular/cdk/coercion';
+import { Component, ElementRef } from '@angular/core';
+import { MatChip } from '@angular/material/chips';
+
+@Component({
+  selector: 'pro-input-chip',
+  template: `<ng-content></ng-content>`,
+  standalone: false,
+})
+export class InputChipComponent extends MatChip {
+  public constructor(private readonly elementRef: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  public get element(): HTMLElement {
+    return coerceElement(this.elementRef);
+  }
+}
diff --git a/src/app/public/input-chips/input-chips.component.html b/src/app/public/input-chips/input-chips.component.html
new file mode 100644
index 0000000..50481d5
--- /dev/null
+++ b/src/app/public/input-chips/input-chips.component.html
@@ -0,0 +1,24 @@
+<mat-label>{{ label }}</mat-label>
+<mat-chip-listbox
+  [compareWith]="compareWith"
+  [formControl]="formControl"
+  [multiple]="multiple"
+>
+  @for (chip of chips; track chip) {
+    <mat-chip-option
+      [disabled]="chip.disabled"
+      [value]="chip.value"
+    >{{
+      chip.element.textContent
+    }}</mat-chip-option>
+  }
+</mat-chip-listbox>
+<mat-error *ngIf="formControl.invalid && formControl.touched">
+  @if (formControl.hasError('required')) {
+    {{ label }} is required.
+  } @else if (formControl.hasError('maxlength')) {
+    {{ label }} cannot exceed {{ formControl.errors?.['maxlength'].requiredLength }} selections.
+  } @else if (formControl.hasError('minlength')) {
+    {{ label }} must have at least {{ formControl.errors?.['minlength'].requiredLength }} selections.
+  }
+</mat-error>
\ No newline at end of file
diff --git a/src/app/public/input-dropdown/.gitkeep b/src/app/public/input-chips/input-chips.component.scss
similarity index 100%
rename from src/app/public/input-dropdown/.gitkeep
rename to src/app/public/input-chips/input-chips.component.scss
diff --git a/src/app/public/input-chips/input-chips.component.ts b/src/app/public/input-chips/input-chips.component.ts
new file mode 100644
index 0000000..2c0b56f
--- /dev/null
+++ b/src/app/public/input-chips/input-chips.component.ts
@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, ViewChild } from '@angular/core';
+import { InputDirective } from '../input.directive';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MatChipListbox } from '@angular/material/chips';
+import { InputChipComponent } from './input-chip.component';
+
+@Component({
+  selector: 'pro-input-chips',
+  templateUrl: './input-chips.component.html',
+  styleUrl: './input-chips.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class InputChipsComponent extends InputDirective<string> {
+  @ContentChildren(InputChipComponent)
+  public readonly chips = new QueryList<InputChipComponent>();
+  
+  @ViewChild(MatChipListbox) public readonly matChipListbox?: MatChipListbox;
+  
+  @Input() public max: number | undefined;
+
+  @Input({ required: false, transform: coerceBooleanProperty }) 
+  public multiple: boolean = false;
+
+  @Input({ required: false }) public compareWith: MatChipListbox['compareWith'] = (
+    optionValue,
+    selectedValue,
+  ) => {
+    return (
+      JSON.stringify(optionValue) === JSON.stringify(selectedValue) ||
+      optionValue === selectedValue
+    );
+  };
+}
diff --git a/src/app/public/input-chips/input-chips.module.ts b/src/app/public/input-chips/input-chips.module.ts
new file mode 100644
index 0000000..f472089
--- /dev/null
+++ b/src/app/public/input-chips/input-chips.module.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { InputChipComponent } from './input-chip.component';
+import { InputChipsComponent } from './input-chips.component';
+
+@NgModule({
+  declarations: [InputChipComponent, InputChipsComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+  ],
+  exports: [InputChipComponent, InputChipsComponent],
+})
+export class InputChipsModule {}
diff --git a/src/app/public/input-datepicker/input-datepicker.component.html b/src/app/public/input-datepicker/input-datepicker.component.html
index 0ee3696..0715594 100644
--- a/src/app/public/input-datepicker/input-datepicker.component.html
+++ b/src/app/public/input-datepicker/input-datepicker.component.html
@@ -1,29 +1,34 @@
-<mat-form-field [appearance]="appearance">
-  <mat-label>{{ label }}</mat-label>
-  <input
-    *ngIf="formControl; else loadingTemplate"
-    [formControl]="formControl"
-    [matDatepicker]="datepicker"
-    [max]="max"
-    [min]="min"
-    [placeholder]="placeholder ?? ''"
-    matInput
-  />
-  <ng-template #loadingTemplate>
-    Loading{{ label ? ' ' + label : '' }}...
-  </ng-template>
-  <mat-datepicker-toggle [for]="datepicker" matSuffix />
-  <mat-datepicker #datepicker />
-  <mat-hint [title]="hint">{{ hint }}</mat-hint>
-  <mat-error *ngIf="formControl.invalid && formControl.touched">
-    @if (formControl.hasError('required')) {
-      {{ label }} is required.
-    } @else if (formControl.hasError('min')) {
-      {{ label }} must be at least
-      {{ formControl.errors?.['min'].min | dateTime: 'MM/dd/yyyy' }}.
-    } @else if (formControl.hasError('max')) {
-      {{ label }} cannot exceed
-      {{ formControl.errors?.['max'].max | dateTime: 'MM/dd/yyyy' }}.
-    }
-  </mat-error>
-</mat-form-field>
+@if (formControl) {
+  <mat-form-field [appearance]="appearance">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      *ngIf="formControl; else loadingTemplate"
+      [formControl]="formControl"
+      [matDatepicker]="datepicker"
+      [max]="max"
+      [min]="min"
+      [placeholder]="placeholder ?? ''"
+      matInput
+    />
+    <ng-template #loadingTemplate>
+      Loading{{ label ? ' ' + label : '' }}...
+    </ng-template>
+    <mat-datepicker-toggle [for]="datepicker" matSuffix />
+    <mat-datepicker #datepicker />
+    <mat-hint [title]="hint">{{ hint }}</mat-hint>
+    <mat-error *ngIf="formControl.invalid && formControl.touched">
+      @if (formControl.hasError('required')) {
+        {{ label }} is required.
+      } @else if (formControl.hasError('min')) {
+        {{ label }} must be at least
+        {{ formControl.errors?.['min'].min | dateTime: 'MM/dd/yyyy' }}.
+      } @else if (formControl.hasError('max')) {
+        {{ label }} cannot exceed
+        {{ formControl.errors?.['max'].max | dateTime: 'MM/dd/yyyy' }}.
+      }
+    </mat-error>
+  </mat-form-field>
+}
+@else {
+  <pro-loading-input [label]="label" />
+}
diff --git a/src/app/public/input-datepicker/input-datepicker.component.ts b/src/app/public/input-datepicker/input-datepicker.component.ts
index cb886b6..3aeaf13 100644
--- a/src/app/public/input-datepicker/input-datepicker.component.ts
+++ b/src/app/public/input-datepicker/input-datepicker.component.ts
@@ -11,15 +11,16 @@ import { MatInputModule } from '@angular/material/input';
 
 import { InputDirective } from '../input.directive';
 import { InputAppearance } from '../types';
+import { LoadingInputComponent } from '../utilities/loading-input.component';
 
 @Component({
   selector: 'pro-input-datepicker',
   templateUrl: './input-datepicker.component.html',
-  styleUrls: [],
   standalone: true,
   imports: [
     CommonModule,
     DateTimePipe,
+    LoadingInputComponent,
     MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
diff --git a/src/app/public/input-dropdown/input-dropdown-option-group.component.ts b/src/app/public/input-dropdown/input-dropdown-option-group.component.ts
new file mode 100644
index 0000000..a89296d
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown-option-group.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { InputDropdownOptionComponent } from './input-dropdown-option.component';
+
+@Component({
+  selector: 'pro-input-dropdown-option-group',
+  template: `<ng-content></ng-content>`,
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputDropdownOptionGroupComponent {
+  @Input({ required: true }) public label!: string;
+  
+  @ContentChildren(InputDropdownOptionComponent) 
+  public readonly options: QueryList<InputDropdownOptionComponent> = 
+    new QueryList<InputDropdownOptionComponent>();
+}
diff --git a/src/app/public/input-dropdown/input-dropdown-option.component.ts b/src/app/public/input-dropdown/input-dropdown-option.component.ts
new file mode 100644
index 0000000..5753247
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown-option.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
+import {
+  coerceElement,
+} from '@angular/cdk/coercion';
+import { MatOption } from '@angular/material/core';
+
+@Component({
+  selector: 'pro-input-dropdown-option',
+  template: `<ng-content></ng-content>`,
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputDropdownOptionComponent extends MatOption {
+  public constructor(private readonly elementRef: ElementRef<HTMLElement>) {
+    super();
+  }
+
+  public get element(): HTMLElement {
+    return coerceElement(this.elementRef);
+  }
+}
diff --git a/src/app/public/input-dropdown/input-dropdown.component.html b/src/app/public/input-dropdown/input-dropdown.component.html
new file mode 100644
index 0000000..20f5acb
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown.component.html
@@ -0,0 +1,41 @@
+@if (formControl && (options || optionGroups)) {
+  <mat-form-field [appearance]="appearance">
+    <mat-label>{{ label }}</mat-label>
+    <mat-select
+      [compareWith]="compareWith"
+      [formControl]="formControl"
+      [multiple]="multiple"
+      [placeholder]="placeholder || ''"
+    >
+      @for (option of options; track option) {
+        <mat-option
+          [disabled]="option.disabled"
+          [value]="option.value"
+        >{{ option.element.textContent }}</mat-option>
+      }
+      @for (optionGroup of optionGroups; track optionGroup) {
+        <mat-optgroup [label]="optionGroup.label">
+          @for (option of optionGroup.options; track option) {
+            <mat-option
+              [disabled]="option.disabled"
+              [value]="option.value"
+            >{{ option.element.textContent }}</mat-option>
+          }
+        </mat-optgroup>
+      }
+    </mat-select>
+    <mat-hint [title]="hint">{{ hint }}</mat-hint>
+    <mat-error *ngIf="formControl.invalid && formControl.touched">
+      @if (formControl.hasError('required')) {
+        {{ label }} is required.
+      } @else if (formControl.hasError('maxlength')) {
+        {{ label }} cannot exceed {{ formControl.errors?.['maxlength'].requiredLength }} selections.
+      } @else if (formControl.hasError('minlength')) {
+        {{ label }} must have at least {{ formControl.errors?.['minlength'].requiredLength }} selections.
+      }
+    </mat-error>
+  </mat-form-field>
+}
+@else {
+  <pro-loading-input [label]="label" />
+}
diff --git a/src/app/public/input-dropdown/input-dropdown.component.scss b/src/app/public/input-dropdown/input-dropdown.component.scss
new file mode 100644
index 0000000..a6e8bea
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown.component.scss
@@ -0,0 +1,3 @@
+::ng-deep mat-form-field {
+  width: 100%;
+}
diff --git a/src/app/public/input-dropdown/input-dropdown.component.ts b/src/app/public/input-dropdown/input-dropdown.component.ts
new file mode 100644
index 0000000..92668a9
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown.component.ts
@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, ViewChild } from '@angular/core';
+
+import { InputDirective } from '../input.directive';
+import { InputAppearance } from '../types';
+import { InputDropdownOptionComponent } from './input-dropdown-option.component';
+import { InputDropdownOptionGroupComponent } from './input-dropdown-option-group.component';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'pro-input-dropdown',
+  templateUrl: './input-dropdown.component.html',
+  styleUrl: './input-dropdown.component.scss',
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputDropdownComponent<T> extends InputDirective<T> {
+  @ContentChildren(InputDropdownOptionComponent) 
+  public readonly options: QueryList<InputDropdownOptionComponent> = 
+    new QueryList<InputDropdownOptionComponent>();
+
+  @ContentChildren(InputDropdownOptionGroupComponent) 
+  public readonly optionGroups: QueryList<InputDropdownOptionGroupComponent> = 
+    new QueryList<InputDropdownOptionGroupComponent>();
+
+  @ViewChild(MatSelect) public readonly matSelect?: MatSelect;
+
+  @Input({ required: false }) 
+  public appearance: InputAppearance = 'outline';
+
+  @Input() public max: number | undefined;
+
+  private get exceedsMax(): boolean {
+    return this.max !== undefined && this.selectedOptions.length > this.max;
+  }
+
+  protected get selectedOptions(): readonly InputDropdownOptionComponent[] {
+    if (!this.matSelect) {
+      return [];
+    }
+  
+    const allOptions = [
+      ...this.options.toArray(),
+      ...this.optionGroups.toArray().flatMap((group) => group.options.toArray()),
+    ];
+  
+    // Single selection
+    if (this.matSelect.selected instanceof MatOption) {
+      const selectedValue = this.matSelect.selected.value;
+      return allOptions.filter((option) => option.value === selectedValue);
+    }
+  
+    // Multi-selection
+    if (
+      Array.isArray(this.matSelect.selected) && 
+      this.matSelect.selected.every((s) => s instanceof MatOption)
+    ) {
+      const selectedValues = this.matSelect.selected.map((selected) => (selected as MatOption).value);
+      return allOptions.filter((option) => selectedValues.includes(option.value));
+    }
+  
+    // Default: No option is selected.
+    return [];
+  }
+  
+  @Input({ required: false, transform: coerceBooleanProperty }) 
+  public multiple: boolean = false;
+
+  @Input({ required: false }) public compareWith: MatSelect['compareWith'] = (
+    optionValue,
+    selectedValue,
+  ) => {
+    return (
+      JSON.stringify(optionValue) === JSON.stringify(selectedValue) ||
+      optionValue === selectedValue
+    );
+  };
+}
diff --git a/src/app/public/input-dropdown/input-dropdown.module.ts b/src/app/public/input-dropdown/input-dropdown.module.ts
new file mode 100644
index 0000000..0c84089
--- /dev/null
+++ b/src/app/public/input-dropdown/input-dropdown.module.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { InputDropdownComponent } from './input-dropdown.component';
+import { InputDropdownOptionComponent } from './input-dropdown-option.component';
+import { InputDropdownOptionGroupComponent } from './input-dropdown-option-group.component';
+import { LoadingInputComponent } from '../utilities/loading-input.component';
+
+@NgModule({
+  declarations: [
+    InputDropdownComponent,
+    InputDropdownOptionComponent,
+    InputDropdownOptionGroupComponent,
+  ],
+  exports: [
+    InputDropdownComponent,
+    InputDropdownOptionComponent,
+    InputDropdownOptionGroupComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    LoadingInputComponent,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+  ],
+})
+export class InputDropdownModule {}
diff --git a/src/app/public/input-timepicker/input-timepicker.component.html b/src/app/public/input-timepicker/input-timepicker.component.html
index ec7529d..170176d 100644
--- a/src/app/public/input-timepicker/input-timepicker.component.html
+++ b/src/app/public/input-timepicker/input-timepicker.component.html
@@ -1,29 +1,30 @@
-<mat-form-field [appearance]="appearance">
-  <mat-label>{{ label }}</mat-label>
-  <input
-    *ngIf="formControl; else loadingTemplate"
-    [formControl]="formControl"
-    [matTimepicker]="timepicker"
-    [max]="max"
-    [min]="min"
-    [placeholder]="placeholder ?? ''"
-    matInput
-  />
-  <ng-template #loadingTemplate>
-    Loading{{ label ? ' ' + label : '' }}...
-  </ng-template>
-  <mat-timepicker-toggle [for]="timepicker" matSuffix />
-  <mat-timepicker #timepicker [interval]="interval" />
-  <mat-hint [title]="hint">{{ hint }}</mat-hint>
-  <mat-error *ngIf="formControl.invalid && formControl.touched">
-    @if (formControl.hasError('required')) {
-      {{ label }} is required.
-    } @else if (formControl.hasError('min')) {
-      {{ label }} must be at least
-      {{ formControl.errors?.['min'].min | dateTime: 'h:mm a (ZZZZ)' }}.
-    } @else if (formControl.hasError('max')) {
-      {{ label }} cannot exceed
-      {{ formControl.errors?.['max'].max | dateTime: 'h:mm a (ZZZZ)' }}.
-    }
-  </mat-error>
-</mat-form-field>
+@if (formControl) {
+  <mat-form-field [appearance]="appearance">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      [formControl]="formControl"
+      [matTimepicker]="timepicker"
+      [max]="max"
+      [min]="min"
+      [placeholder]="placeholder ?? ''"
+      matInput
+    />
+    <mat-timepicker-toggle [for]="timepicker" matSuffix />
+    <mat-timepicker #timepicker [interval]="interval" />
+    <mat-hint [title]="hint">{{ hint }}</mat-hint>
+    <mat-error *ngIf="formControl.invalid && formControl.touched">
+      @if (formControl.hasError('required')) {
+        {{ label }} is required.
+      } @else if (formControl.hasError('min')) {
+        {{ label }} must be at least
+        {{ formControl.errors?.['min'].min | dateTime: 'h:mm a (ZZZZ)' }}.
+      } @else if (formControl.hasError('max')) {
+        {{ label }} cannot exceed
+        {{ formControl.errors?.['max'].max | dateTime: 'h:mm a (ZZZZ)' }}.
+      }
+    </mat-error>
+  </mat-form-field>
+}
+@else {
+  <pro-loading-input [label]="label" />
+}
diff --git a/src/app/public/input-timepicker/input-timepicker.component.ts b/src/app/public/input-timepicker/input-timepicker.component.ts
index 6413be8..388a731 100644
--- a/src/app/public/input-timepicker/input-timepicker.component.ts
+++ b/src/app/public/input-timepicker/input-timepicker.component.ts
@@ -11,6 +11,7 @@ import { MatTimepickerModule } from '@angular/material/timepicker';
 
 import { InputDirective } from '../input.directive';
 import { InputAppearance } from '../types';
+import { LoadingInputComponent } from '../utilities/loading-input.component';
 
 @Component({
   selector: 'pro-input-timepicker',
@@ -20,6 +21,7 @@ import { InputAppearance } from '../types';
   imports: [
     CommonModule,
     DateTimePipe,
+    LoadingInputComponent,
     MatFormFieldModule,
     MatInputModule,
     MatTimepickerModule,
diff --git a/src/app/public/input/input.component.html b/src/app/public/input/input.component.html
index ea9fdf5..71331b0 100644
--- a/src/app/public/input/input.component.html
+++ b/src/app/public/input/input.component.html
@@ -1,39 +1,45 @@
-<mat-form-field [appearance]="appearance">
-  <mat-label>{{ label }}</mat-label>
-  <input
-    *ngIf="formControl; else loadingTemplate"
-    [attr.step]="step"
-    [autocomplete]="autocomplete"
-    [formControl]="formControl"
-    [id]="id"
-    [name]="name || id"
-    [placeholder]="placeholder || ''"
-    [type]="type"
-    matInput
-  />
-  <ng-template #loadingTemplate>
-    Loading{{ label ? ' ' + label : '' }}...
-  </ng-template>
-  <mat-hint [title]="hint">{{ hint }}</mat-hint>
-  <mat-error *ngIf="formControl.invalid && formControl.touched">
-    @if (formControl.hasError('required')) {
-      {{ label }} is required.
-    } @else if (formControl.hasError('min')) {
-      {{ label }} must be at least {{ formControl.errors?.['min'].min }}.
-    } @else if (formControl.hasError('max')) {
-      {{ label }} cannot exceed {{ formControl.errors?.['max'].max }}.
-    } @else if (formControl.hasError('minlength')) {
-      {{ label }} must be at least
-      {{ formControl.errors?.['minlength'].requiredLength }} characters.
-    } @else if (formControl.hasError('maxlength')) {
-      {{ label }} cannot exceed
-      {{ formControl.errors?.['maxlength'].requiredLength }} characters.
-    } @else if (formControl.hasError('email')) {
-      {{ label }} must be a valid email address.
-    } @else if (formControl.hasError('nonNumber')) {
-      {{ label }} must be a number.
-    } @else if (formControl.hasError('wholeNumber')) {
-      {{ label }} must be a whole number.
-    }
-  </mat-error>
-</mat-form-field>
+@if (formControl) {
+  <mat-form-field [appearance]="appearance">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      *ngIf="formControl; else loadingTemplate"
+      [attr.step]="step"
+      [autocomplete]="autocomplete"
+      [formControl]="formControl"
+      [id]="id"
+      [name]="name || id"
+      [placeholder]="placeholder || ''"
+      [type]="type"
+      matInput
+    />
+    <ng-template #loadingTemplate>
+      Loading{{ label ? ' ' + label : '' }}...
+    </ng-template>
+    <mat-hint [title]="hint">{{ hint }}</mat-hint>
+    <mat-error *ngIf="formControl.invalid && formControl.touched">
+      @if (formControl.hasError('required')) {
+        {{ label }} is required.
+      } @else if (formControl.hasError('min')) {
+        {{ label }} must be at least {{ formControl.errors?.['min'].min }}.
+      } @else if (formControl.hasError('max')) {
+        {{ label }} cannot exceed {{ formControl.errors?.['max'].max }}.
+      } @else if (formControl.hasError('minlength')) {
+        {{ label }} must be at least
+        {{ formControl.errors?.['minlength'].requiredLength }} characters.
+      } @else if (formControl.hasError('maxlength')) {
+        {{ label }} cannot exceed
+        {{ formControl.errors?.['maxlength'].requiredLength }} characters.
+      } @else if (formControl.hasError('email')) {
+        {{ label }} must be a valid email address.
+      } @else if (formControl.hasError('nonNumber')) {
+        {{ label }} must be a number.
+      } @else if (formControl.hasError('wholeNumber')) {
+        {{ label }} must be a whole number.
+      }
+    </mat-error>
+  </mat-form-field>
+}
+@else {
+  <pro-loading-input [label]="label" />
+}
+
diff --git a/src/app/public/input/input.component.ts b/src/app/public/input/input.component.ts
index bc2d5d6..0de6828 100644
--- a/src/app/public/input/input.component.ts
+++ b/src/app/public/input/input.component.ts
@@ -6,14 +6,15 @@ import { MatInputModule } from '@angular/material/input';
 
 import { InputDirective } from '../input.directive';
 import { InputAppearance, InputAutocomplete, InputType } from '../types';
+import { LoadingInputComponent } from '../utilities/loading-input.component';
 
 @Component({
   selector: 'pro-input',
   templateUrl: './input.component.html',
-  styleUrls: [],
   standalone: true,
   imports: [
     CommonModule,
+    LoadingInputComponent,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
diff --git a/src/app/public/types/index.ts b/src/app/public/types/index.ts
index 4f3b4e5..c6f20c8 100644
--- a/src/app/public/types/index.ts
+++ b/src/app/public/types/index.ts
@@ -1,3 +1,3 @@
 export type { DateTimeFormat } from './date-time-format';
 export type { InputAppearance, InputAutocomplete, InputType } from './input';
-export type { RadioOption } from './radio-option';
+export type { Option } from './option';
diff --git a/src/app/public/types/radio-option.ts b/src/app/public/types/option.ts
similarity index 59%
rename from src/app/public/types/radio-option.ts
rename to src/app/public/types/option.ts
index 9915ebc..bf1903f 100644
--- a/src/app/public/types/radio-option.ts
+++ b/src/app/public/types/option.ts
@@ -1,4 +1,4 @@
-export interface RadioOption {
+export interface Option {
   label: string;
   value: number | string;
 }
diff --git a/src/app/public/utilities/loading-input.component.ts b/src/app/public/utilities/loading-input.component.ts
new file mode 100644
index 0000000..bac6856
--- /dev/null
+++ b/src/app/public/utilities/loading-input.component.ts
@@ -0,0 +1,58 @@
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { interval } from 'rxjs';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { InputAppearance } from '../types';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@UntilDestroy()
+@Component({
+  selector: 'pro-loading-input',
+  template: `
+    <mat-form-field [appearance]="appearance">
+      <input [formControl]="formControl" matInput type="text" />
+      @if (hint) {
+        <mat-hint [title]="hint">{{ hint }}</mat-hint>
+      }
+    </mat-form-field>
+  `,
+  styles: [`:host { width: 100%; }`],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
+  standalone: true,
+})
+export class LoadingInputComponent implements OnInit {
+  @Input({ required: false }) public appearance: InputAppearance = 'outline';
+  @Input({ required: false }) public hint?: string;
+  @Input({ required: false }) public label?: string;
+
+  protected readonly formControl = new FormControl<string | null>(null);
+  protected loadingText = 'Loading';
+
+  public ngOnInit(): void {
+    this.formControl.disable();
+
+    interval(500)
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        if (this.loadingText === 'Loading') {
+          this.loadingText = this.label 
+            ? `Loading "${this.label}".` 
+            : 'Loading.';
+        } else if (this.loadingText.endsWith('...')) {
+          this.loadingText = this.label 
+            ? `Loading "${this.label}"` 
+            : 'Loading';
+        } else {
+          this.loadingText = this.loadingText + '.';
+        }
+        this.formControl.setValue(this.loadingText);
+      });
+  }
+}

From 01e0d8a16ddadd5197b8b4249087d9a4ef924ac3 Mon Sep 17 00:00:00 2001
From: Cody Tolene <codyatolene@gmail.com>
Date: Sat, 15 Feb 2025 10:54:17 -0600
Subject: [PATCH 2/2] Update public packaging. Convert modules to standalone
 components.

---
 README.md                                     | 32 ++++++++++++-----
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/app/form/form.component.ts                | 34 +++++++++++++------
 src/app/public/form.directive.ts              | 12 +++++--
 .../input-chips/input-chip.component.ts       |  2 +-
 .../input-chips/input-chips.component.ts      | 14 ++++++--
 .../public/input-chips/input-chips.module.ts  | 20 -----------
 .../input-datepicker.component.ts             |  4 +--
 .../input-dropdown-option-group.component.ts  |  2 +-
 .../input-dropdown-option.component.ts        |  2 +-
 .../input-dropdown.component.ts               | 16 +++++++--
 .../input-dropdown/input-dropdown.module.ts   | 31 -----------------
 .../input-radio-option.component.ts           |  2 +-
 .../input-radio/input-radio.component.ts      | 12 ++++++-
 .../public/input-radio/input-radio.module.ts  | 20 -----------
 src/app/public/public.ts                      | 10 ++++--
 17 files changed, 109 insertions(+), 108 deletions(-)
 delete mode 100644 src/app/public/input-chips/input-chips.module.ts
 delete mode 100644 src/app/public/input-dropdown/input-dropdown.module.ts
 delete mode 100644 src/app/public/input-radio/input-radio.module.ts

diff --git a/README.md b/README.md
index 5d7eb03..0c45d6d 100644
--- a/README.md
+++ b/README.md
@@ -82,16 +82,20 @@ breakpoints.
 The components included in this project are:
 
 - **InputComponent**: A generic input field that can be used for text, email,
-  password, etc.
+  password, etc. **InputDropdownOptionComponent**: An option element for the
+  dropdown list input field.
 - **InputCheckboxComponent**: A checkbox input field.
-- **InputChipsComponent**: A chips input field.
+- **InputChipComponent**: A chip element for the chips list input field.
+- **InputChipsComponent**: A chips list input field.
 - **InputDatepickerComponent**: A datepicker input field.
-- **InputDropdownComponent**: A dropdown input field.
-- **InputRadioModule**: A radio input options field.
+- **InputDropdownComponent**: A dropdown list input field.
+- **InputDropdownOptionGroupComponent**: An option group element for the
+  dropdown list input field.
+- **InputRadioComponent**: A radio input options field.
+- **InputRadioOptionComponent**: An option element for the radio input field.
 - **InputTextareaComponent**: A textarea input field.
 - **InputTimepickerComponent**: A timepicker input field.
 - **InputToggleComponent**: A toggle input field.
-- More to come...
 
 Each component is designed to be easily customized and extended to meet your
 specific needs. They are built using Angular Material and Angular CDK, ensuring
@@ -146,10 +150,14 @@ application where used:
 + import {
 +   InputComponent,
 +   InputCheckboxComponent,
++   InputChipComponent,
 +   InputChipsComponent,
 +   InputDatepickerComponent,
 +   InputDropdownComponent,
-+   InputRadioModule,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
 +   InputTextareaComponent,
 +   InputTimepickerComponent,
 +   InputToggleComponent,
@@ -161,10 +169,14 @@ application where used:
   imports: [
 +   InputComponent,
 +   InputCheckboxComponent,
++   InputChipComponent,
 +   InputChipsComponent,
 +   InputDatepickerComponent,
 +   InputDropdownComponent,
-+   InputRadioModule,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
 +   InputTextareaComponent,
 +   InputTimepickerComponent,
 +   InputToggleComponent,
@@ -180,10 +192,14 @@ application where used:
   imports: [
 +   InputComponent,
 +   InputCheckboxComponent,
++   InputChipComponent,
 +   InputChipsComponent,
 +   InputDatepickerComponent,
 +   InputDropdownComponent,
-+   InputRadioModule,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
 +   InputTextareaComponent,
 +   InputTimepickerComponent,
 +   InputToggleComponent,
diff --git a/package-lock.json b/package-lock.json
index c45f195..1b72b25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "ng-packagr": "^19.1.2",
         "npm-check-updates": "^17.1.11",
         "prettier": "^3.4.1",
+        "tslib": "^2.3.0",
         "typescript": "~5.7.2"
       },
       "engines": {
@@ -66,7 +67,6 @@
         "@types/luxon": "^3.4.2",
         "luxon": "^3.5.0",
         "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       }
     },
diff --git a/package.json b/package.json
index d841153..6e3b08c 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,6 @@
     "@types/luxon": "^3.4.2",
     "luxon": "^3.5.0",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
@@ -75,6 +74,7 @@
     "ng-packagr": "^19.1.2",
     "npm-check-updates": "^17.1.11",
     "prettier": "^3.4.1",
+    "tslib": "^2.3.0",
     "typescript": "~5.7.2"
   },
   "contributors": [
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index a40af9b..31c4ed4 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -8,14 +8,20 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { FormDirective } from '../public/form.directive';
 import { InputCheckboxComponent } from '../public/input-checkbox/input-checkbox.component';
-import { InputChipsModule } from '../public/input-chips/input-chips.module';
 import { InputDatepickerComponent } from '../public/input-datepicker/input-datepicker.component';
-import { InputDropdownModule } from '../public/input-dropdown/input-dropdown.module';
-import { InputRadioModule } from '../public/input-radio/input-radio.module';
+import { InputDropdownOptionGroupComponent } from '../public/input-dropdown/input-dropdown-option-group.component';
+import { InputDropdownOptionComponent } from '../public/input-dropdown/input-dropdown-option.component';
+import { InputRadioComponent } from '../public/input-radio/input-radio.component';
 import { InputTextareaComponent } from '../public/input-textarea/input-textarea.component';
 import { InputTimepickerComponent } from '../public/input-timepicker/input-timepicker.component';
 import { InputToggleComponent } from '../public/input-toggle/input-toggle.component';
 import { InputComponent } from '../public/input/input.component';
+import {
+  InputChipComponent,
+  InputChipsComponent,
+  InputDropdownComponent,
+  InputRadioOptionComponent,
+} from '../public/public';
 import { Option } from '../public/types';
 import {
   FormGroupExample,
@@ -29,11 +35,15 @@ import {
   imports: [
     CommonModule,
     InputCheckboxComponent,
-    InputChipsModule,
+    InputChipComponent,
+    InputChipsComponent,
     InputComponent,
     InputDatepickerComponent,
-    InputDropdownModule,
-    InputRadioModule,
+    InputDropdownComponent,
+    InputDropdownOptionComponent,
+    InputDropdownOptionGroupComponent,
+    InputRadioComponent,
+    InputRadioOptionComponent,
     InputTextareaComponent,
     InputTimepickerComponent,
     InputToggleComponent,
@@ -95,14 +105,18 @@ export class FormComponent extends FormDirective<FormGroupExample> {
     if (this.formGroup.invalid) {
       this.highlightInvalidControls();
       this.scrollToFirstInvalidControl();
-      this.snackBar.open('Form invalid!', 'Dismiss', {
-        duration: 3000,
-      });
+      this.snackBar.open(
+        'Form invalid! Please fix the displayed errors and try again.',
+        'Dismiss',
+        {
+          duration: 3000,
+        },
+      );
 
       return;
     }
 
-    this.snackBar.open('Form submitted!', 'Dismiss', {
+    this.snackBar.open('Form valid! Submitted successfully.', 'Dismiss', {
       duration: 3000,
     });
     this.formGroup.reset();
diff --git a/src/app/public/form.directive.ts b/src/app/public/form.directive.ts
index 32157e8..1892392 100644
--- a/src/app/public/form.directive.ts
+++ b/src/app/public/form.directive.ts
@@ -108,8 +108,12 @@ export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
     this.formGroup.reset();
   }
 
-  /** Scroll to the first invalid control in the form. */
-  public scrollToFirstInvalidControl(): void {
+  /** 
+   * Scroll to the first invalid control in the form.
+   * 
+   * @returns The label of the first invalid control.
+   */
+  public scrollToFirstInvalidControl(): string | null {
     if (this.formInputs.length === 0) {
       throw new Error('No form inputs provided to scroll to!');
     }
@@ -128,8 +132,10 @@ export class FormDirective<T extends { [K in keyof T]: AbstractControl }>
           behavior: 'smooth',
           block: 'center',
         });
-        break;
+        return input.label;
       }
     }
+
+    return null;
   }
 }
diff --git a/src/app/public/input-chips/input-chip.component.ts b/src/app/public/input-chips/input-chip.component.ts
index e98e90c..fef77ac 100644
--- a/src/app/public/input-chips/input-chip.component.ts
+++ b/src/app/public/input-chips/input-chip.component.ts
@@ -5,7 +5,7 @@ import { MatChip } from '@angular/material/chips';
 @Component({
   selector: 'pro-input-chip',
   template: `<ng-content></ng-content>`,
-  standalone: false,
+  standalone: true,
 })
 export class InputChipComponent extends MatChip {
   public constructor(private readonly elementRef: ElementRef<HTMLElement>) {
diff --git a/src/app/public/input-chips/input-chips.component.ts b/src/app/public/input-chips/input-chips.component.ts
index 2c0b56f..6eb7912 100644
--- a/src/app/public/input-chips/input-chips.component.ts
+++ b/src/app/public/input-chips/input-chips.component.ts
@@ -1,15 +1,25 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList, ViewChild } from '@angular/core';
 import { InputDirective } from '../input.directive';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatChipListbox } from '@angular/material/chips';
+import { MatChipListbox, MatChipsModule } from '@angular/material/chips';
 import { InputChipComponent } from './input-chip.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'pro-input-chips',
   templateUrl: './input-chips.component.html',
   styleUrl: './input-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+  ],
+  standalone: true,
 })
 export class InputChipsComponent extends InputDirective<string> {
   @ContentChildren(InputChipComponent)
diff --git a/src/app/public/input-chips/input-chips.module.ts b/src/app/public/input-chips/input-chips.module.ts
deleted file mode 100644
index f472089..0000000
--- a/src/app/public/input-chips/input-chips.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { InputChipComponent } from './input-chip.component';
-import { InputChipsComponent } from './input-chips.component';
-
-@NgModule({
-  declarations: [InputChipComponent, InputChipsComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatChipsModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-  ],
-  exports: [InputChipComponent, InputChipsComponent],
-})
-export class InputChipsModule {}
diff --git a/src/app/public/input-datepicker/input-datepicker.component.ts b/src/app/public/input-datepicker/input-datepicker.component.ts
index 3aeaf13..99694d3 100644
--- a/src/app/public/input-datepicker/input-datepicker.component.ts
+++ b/src/app/public/input-datepicker/input-datepicker.component.ts
@@ -16,7 +16,7 @@ import { LoadingInputComponent } from '../utilities/loading-input.component';
 @Component({
   selector: 'pro-input-datepicker',
   templateUrl: './input-datepicker.component.html',
-  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
     DateTimePipe,
@@ -27,7 +27,7 @@ import { LoadingInputComponent } from '../utilities/loading-input.component';
     ReactiveFormsModule,
   ],
   providers: [provideLuxonDateAdapter()],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class InputDatepickerComponent extends InputDirective<DateTime> {
   @Input({ required: false }) public appearance: InputAppearance = 'outline';
diff --git a/src/app/public/input-dropdown/input-dropdown-option-group.component.ts b/src/app/public/input-dropdown/input-dropdown-option-group.component.ts
index a89296d..b77ac74 100644
--- a/src/app/public/input-dropdown/input-dropdown-option-group.component.ts
+++ b/src/app/public/input-dropdown/input-dropdown-option-group.component.ts
@@ -4,8 +4,8 @@ import { InputDropdownOptionComponent } from './input-dropdown-option.component'
 @Component({
   selector: 'pro-input-dropdown-option-group',
   template: `<ng-content></ng-content>`,
-  standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class InputDropdownOptionGroupComponent {
   @Input({ required: true }) public label!: string;
diff --git a/src/app/public/input-dropdown/input-dropdown-option.component.ts b/src/app/public/input-dropdown/input-dropdown-option.component.ts
index 5753247..aa81e3e 100644
--- a/src/app/public/input-dropdown/input-dropdown-option.component.ts
+++ b/src/app/public/input-dropdown/input-dropdown-option.component.ts
@@ -7,8 +7,8 @@ import { MatOption } from '@angular/material/core';
 @Component({
   selector: 'pro-input-dropdown-option',
   template: `<ng-content></ng-content>`,
-  standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class InputDropdownOptionComponent extends MatOption {
   public constructor(private readonly elementRef: ElementRef<HTMLElement>) {
diff --git a/src/app/public/input-dropdown/input-dropdown.component.ts b/src/app/public/input-dropdown/input-dropdown.component.ts
index 92668a9..8beaa4c 100644
--- a/src/app/public/input-dropdown/input-dropdown.component.ts
+++ b/src/app/public/input-dropdown/input-dropdown.component.ts
@@ -4,15 +4,27 @@ import { InputDirective } from '../input.directive';
 import { InputAppearance } from '../types';
 import { InputDropdownOptionComponent } from './input-dropdown-option.component';
 import { InputDropdownOptionGroupComponent } from './input-dropdown-option-group.component';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect, MatSelectModule } from '@angular/material/select';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LoadingInputComponent } from '../utilities/loading-input.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'pro-input-dropdown',
   templateUrl: './input-dropdown.component.html',
   styleUrl: './input-dropdown.component.scss',
-  standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    FormsModule,
+    LoadingInputComponent,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+  ],
+  standalone: true,
 })
 export class InputDropdownComponent<T> extends InputDirective<T> {
   @ContentChildren(InputDropdownOptionComponent) 
diff --git a/src/app/public/input-dropdown/input-dropdown.module.ts b/src/app/public/input-dropdown/input-dropdown.module.ts
deleted file mode 100644
index 0c84089..0000000
--- a/src/app/public/input-dropdown/input-dropdown.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { InputDropdownComponent } from './input-dropdown.component';
-import { InputDropdownOptionComponent } from './input-dropdown-option.component';
-import { InputDropdownOptionGroupComponent } from './input-dropdown-option-group.component';
-import { LoadingInputComponent } from '../utilities/loading-input.component';
-
-@NgModule({
-  declarations: [
-    InputDropdownComponent,
-    InputDropdownOptionComponent,
-    InputDropdownOptionGroupComponent,
-  ],
-  exports: [
-    InputDropdownComponent,
-    InputDropdownOptionComponent,
-    InputDropdownOptionGroupComponent,
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    LoadingInputComponent,
-    MatFormFieldModule,
-    MatSelectModule,
-    ReactiveFormsModule,
-  ],
-})
-export class InputDropdownModule {}
diff --git a/src/app/public/input-radio/input-radio-option.component.ts b/src/app/public/input-radio/input-radio-option.component.ts
index d656f03..16d13c9 100644
--- a/src/app/public/input-radio/input-radio-option.component.ts
+++ b/src/app/public/input-radio/input-radio-option.component.ts
@@ -9,8 +9,8 @@ import {
 @Component({
   selector: 'pro-input-radio-option',
   template: `<ng-content></ng-content>`,
-  standalone: false,
   changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
 })
 export class InputRadioOptionComponent<T> {
   public constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
diff --git a/src/app/public/input-radio/input-radio.component.ts b/src/app/public/input-radio/input-radio.component.ts
index aba5137..3c62ea9 100644
--- a/src/app/public/input-radio/input-radio.component.ts
+++ b/src/app/public/input-radio/input-radio.component.ts
@@ -8,13 +8,23 @@ import {
 import { InputDirective } from '../input.directive';
 
 import { InputRadioOptionComponent } from './input-radio-option.component';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'pro-input-radio',
   templateUrl: './input-radio.component.html',
   styleUrls: ['./input-radio.component.scss'],
-  standalone: false,
   changeDetection: ChangeDetectionStrategy.Default,
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    ReactiveFormsModule,
+  ],
+  standalone: true,
 })
 export class InputRadioComponent<T> extends InputDirective<T> {
   @ContentChildren(InputRadioOptionComponent)
diff --git a/src/app/public/input-radio/input-radio.module.ts b/src/app/public/input-radio/input-radio.module.ts
deleted file mode 100644
index 61a4cfc..0000000
--- a/src/app/public/input-radio/input-radio.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatRadioModule } from '@angular/material/radio';
-
-import { InputRadioOptionComponent } from './input-radio-option.component';
-import { InputRadioComponent } from './input-radio.component';
-
-@NgModule({
-  declarations: [InputRadioComponent, InputRadioOptionComponent],
-  exports: [InputRadioComponent, InputRadioOptionComponent],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatRadioModule,
-    ReactiveFormsModule,
-  ],
-})
-export class InputRadioModule {}
diff --git a/src/app/public/public.ts b/src/app/public/public.ts
index ca2a9c4..b74a8cb 100644
--- a/src/app/public/public.ts
+++ b/src/app/public/public.ts
@@ -1,9 +1,13 @@
 // Components
-export { InputComponent } from './input/input.component';
 export { InputCheckboxComponent } from './input-checkbox/input-checkbox.component';
+export { InputChipComponent } from './input-chips/input-chip.component';
+export { InputChipsComponent } from './input-chips/input-chips.component';
+export { InputComponent } from './input/input.component';
 export { InputDatepickerComponent } from './input-datepicker/input-datepicker.component';
+export { InputDropdownComponent } from './input-dropdown/input-dropdown.component';
+export { InputDropdownOptionComponent } from './input-dropdown/input-dropdown-option.component';
+export { InputDropdownOptionGroupComponent } from './input-dropdown/input-dropdown-option-group.component';
 export { InputRadioComponent } from './input-radio/input-radio.component';
-export { InputRadioModule } from './input-radio/input-radio.module';
 export { InputRadioOptionComponent } from './input-radio/input-radio-option.component';
 export { InputTextareaComponent } from './input-textarea/input-textarea.component';
 export { InputTimepickerComponent } from './input-timepicker/input-timepicker.component';
@@ -25,5 +29,5 @@ export type {
   InputAppearance,
   InputAutocomplete, 
   InputType,
-  RadioOption,
+  Option,
 } from './types';