[v19.0.2] Add Chips and Dropdown components support

README.md

@@ -82,15 +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.
+- **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
@@ -145,9 +150,14 @@ application where used:
 + import {
 +   InputComponent,
 +   InputCheckboxComponent,
++   InputChipComponent,
++   InputChipsComponent,
 +   InputDatepickerComponent,
 +   InputDropdownComponent,
-+   InputRadioModule,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
 +   InputTextareaComponent,
 +   InputTimepickerComponent,
 +   InputToggleComponent,
@@ -158,34 +168,58 @@ application where used:
   ...
   imports: [
 +   InputComponent,
++   InputCheckboxComponent,
++   InputChipComponent,
++   InputChipsComponent,
++   InputDatepickerComponent,
++   InputDropdownComponent,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
++   InputTextareaComponent,
++   InputTimepickerComponent,
++   InputToggleComponent,
     ...
   ],
 })
 
 ...
 
-// Or import to component
+// Or import to a standalone component
 @Component({
   ...
   imports: [
 +   InputComponent,
++   InputCheckboxComponent,
++   InputChipComponent,
++   InputChipsComponent,
++   InputDatepickerComponent,
++   InputDropdownComponent,
++   InputDropdownOptionComponent,
++   InputDropdownOptionGroupComponent,
++   InputRadioComponent,
++   InputRadioOptionComponent,
++   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>
 ```
 

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": [

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'],

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, [

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"

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%;