feat(design): add input component

apps/design-land/src/app/form/form.component.html

@@ -2,8 +2,7 @@
     <daff-form-field>
       <input daff-input type="text"
         placeholder="Daff Input Demo"
-        [formControl]="form.controls['inputTest1']"
-        [formSubmitted]="ngForm.submitted">
+        [formControl]="form.controls['inputTest1']">
       <daff-error-message *ngIf="form.controls['inputTest1'].errors && (form.controls['inputTest1'].touched || ngForm.submitted)">This is a required field >:(</daff-error-message>
       <div class="form__error-placeholder" *ngIf="!(form.controls['inputTest1'].errors && (form.controls['inputTest1'].touched || ngForm.submitted))"></div>
     </daff-form-field>

apps/design-land/src/app/input/input.component.html

@@ -1,24 +1,23 @@
 <h1>Input</h1>
-<p>Input is a form control element that can be used in forms.</p>
+<p>The input component allows a native HTML input element to work with the form field component.</p>
 
-<h2>Examples</h2>
-
-<h3>Basic</h3>
-<p>A basic input without using the <code>DaffFormFieldComponent</code>.</p>
-
-<design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
-
-<h3>With <code>DaffFormFieldComponent</code></h3>
-<p>An input using <code>DaffFormField</code></p>
+<h2>Overview</h2>
+<p>The input component has the same functionality as a native HTML <code>&lt;input&gt;</code> element, with additional custom styling and functionality. It can't be used by itself and must be contained within a <code>&lt;daff-form-field&gt;</code>.</p>
 
+<h2>Basic input with form field</h2>
 <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
 
-<h3>Disabled</h3>
+<h2>Disabled input</h2>
 <p>The input in this example is disabled using the native HTML disabled attribute.</p>
 
 <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
 
-<h3>With Reactive Forms</h3>
+<h2>Input with error messages</h2>
 <p>The input in this example uses the <code>ReactiveFormsModule</code> to display errors.</p>
 
-<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+
+<h3>Input with hint</h3>
+<p>The input in this example has a hint.</p>
+
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>

libs/design/input/examples/src/basic-input/basic-input.component.ts

@@ -11,8 +11,8 @@ import { DaffInputModule } from '@daffodil/design';
   templateUrl: './basic-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffInputModule],
+  imports: [
+    DaffInputModule,
+  ],
 })
-export class BasicInputComponent {
-
-}
+export class BasicInputComponent { }

libs/design/input/examples/src/examples.ts

@@ -1,11 +1,15 @@
 import { BasicInputComponent } from './basic-input/basic-input.component';
 import { InputDisabledComponent } from './input-disabled/input-disabled.component';
 import { InputErrorComponent } from './input-error/input-error.component';
+import { InputHintComponent } from './input-hint/input-hint.component';
 import { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';
+import { PasswordWithFormFieldComponent } from './password-with-form-field/password-with-form-field.component';
 
 export const INPUT_EXAMPLES = [
   BasicInputComponent,
   InputWithFormFieldComponent,
   InputDisabledComponent,
   InputErrorComponent,
+  PasswordWithFormFieldComponent,
+  InputHintComponent,
 ];

libs/design/input/examples/src/input-disabled/input-disabled.component.html

@@ -1,3 +1,4 @@
 <daff-form-field>
-  <input disabled daff-input type="text" placeholder="Email" name="email" />
+  <label daffFormLabel for="disabled-input">Email</label>
+  <input daff-input type="text" name="email" id="disabled-input" [formControl]="disabled"/>
 </daff-form-field>

libs/design/input/examples/src/input-disabled/input-disabled.component.ts

@@ -2,6 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
 
 import {
   DaffFormFieldModule,
@@ -12,10 +16,19 @@ import {
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'input-disabled',
   templateUrl: './input-disabled.component.html',
+  styles: [`
+    daff-form-field {
+      max-width: 320px;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule],
+  imports: [
+    ReactiveFormsModule,
+    DaffFormFieldModule,
+    DaffInputModule,
+  ],
 })
 export class InputDisabledComponent {
-
+  disabled = new UntypedFormControl({ value : '' , disabled: true });
 }

libs/design/input/examples/src/input-error/input-error.component.html

@@ -1,4 +1,11 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" />
+  <label daffFormLabel for="error-input">Email</label>
+  <input daff-input type="text" name="email" [formControl]="control" id="error-input"/>
+  @if (control.errors?.required) {
+    <daff-error-message>Email is a required field.</daff-error-message>
+  }
+  @if (control.errors?.email) {
+    <daff-error-message>Email is not valid.</daff-error-message>
+  }
 </daff-form-field>
 <p>Value: {{ control.value }} </p>

libs/design/input/examples/src/input-error/input-error.component.ts

@@ -10,18 +10,25 @@ import {
 
 import {
   DaffFormFieldModule,
+  DaffHintComponent,
   DaffInputModule,
 } from '@daffodil/design';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'input-error',
   templateUrl: './input-error.component.html',
+  styles: [`
+    daff-form-field {
+      max-width: 320px;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     DaffFormFieldModule,
     DaffInputModule,
+    DaffHintComponent,
     ReactiveFormsModule,
   ],
 })

libs/design/input/examples/src/input-hint/input-hint.component.html

@@ -0,0 +1,5 @@
+<daff-form-field>
+  <label daffFormLabel for="input-hint">Email</label>
+  <input daff-input type="text" name="email" id="input-hint"/>
+  <daff-hint>Hint goes here.</daff-hint>
+</daff-form-field>

libs/design/input/examples/src/input-hint/input-hint.component.ts

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import {
+  DaffFormFieldModule,
+  DaffHintComponent,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'input-hint',
+  templateUrl: './input-hint.component.html',
+  styles: [`
+    daff-form-field {
+      max-width: 320px;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffFormFieldModule,
+    DaffInputModule,
+    DaffHintComponent,
+  ],
+})
+export class InputHintComponent {
+}

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html

@@ -1,3 +1,6 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" />
-</daff-form-field>
+  <fa-icon [icon]="faUser" daffPrefix></fa-icon>
+  <label daffFormLabel for="example-input">First Name</label>
+  <input daff-input type="text" name="first-name" id="example-input" />
+  <fa-icon [icon]="faCircleXmark" daffSuffix></fa-icon>
+</daff-form-field>

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts

@@ -2,20 +2,37 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  faUser,
+  faCircleXmark,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   DaffFormFieldModule,
   DaffInputModule,
+  DaffPrefixSuffixModule,
 } from '@daffodil/design';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'input-with-form-field',
   templateUrl: './input-with-form-field.component.html',
+  styles: [`
+    daff-form-field {
+      max-width: 320px;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule],
+  imports: [
+    DaffFormFieldModule,
+    DaffInputModule,
+    FaIconComponent,
+    DaffPrefixSuffixModule,
+  ],
 })
 export class InputWithFormFieldComponent {
-
+  faUser = faUser;
+  faCircleXmark = faCircleXmark;
 }

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.html

@@ -0,0 +1,4 @@
+<daff-form-field>
+  <label daffFormLabel for="password-input">Password</label>
+  <input daff-input type="password" name="password" id="password-input" />
+</daff-form-field>

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+
+import {
+  DaffFormFieldModule,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'password-with-form-field',
+  templateUrl: './password-with-form-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DaffFormFieldModule, DaffInputModule, ReactiveFormsModule],
+})
+export class PasswordWithFormFieldComponent {
+  control: UntypedFormControl = new UntypedFormControl();
+}

libs/design/scss/theme.scss

@@ -27,6 +27,7 @@
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
+@use '../src/atoms/form/hint/hint-theme' as hint;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
 @use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
@@ -75,6 +76,7 @@
 	@include underline-button.daff-underline-button-theme($theme);
 	@include breadcrumb.daff-breadcrumb-theme($theme);
 	@include error-message.daff-error-message-theme($theme);
+	@include hint.daff-hint-theme($theme);
 	@include form-field.daff-form-field-theme($theme);
 	@include input.daff-input-theme($theme);
 	@include native-select.daff-native-select-theme($theme);

libs/design/src/atoms/form/error-message/error-message.component.scss

@@ -3,5 +3,4 @@
 :host {
 	display: block;
 	font-size: t.$small-font-size;
-	margin-top: 5px;
 }

libs/design/src/atoms/form/form-field/form-field-control.ts

@@ -1,4 +1,10 @@
 import { NgControl } from '@angular/forms';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
+
+import { DaffFormFieldState } from './form-field-state';
 
 /**
  *
@@ -11,12 +17,39 @@ import { NgControl } from '@angular/forms';
  * in javascript, they get thrown out by the typescript compiler and cannot
  * be used for the necessary dependency injection.
  */
-export abstract class DaffFormFieldControl {
-  readonly ngControl: NgControl | null;
-
-  readonly controlType?: any;
+export abstract class DaffFormFieldControl<T> {
+  abstract readonly controlType?: any;
 
-  readonly focused: boolean;
+  abstract readonly focused: boolean;
 
   abstract focus(event?: Event): void;
+
+  abstract readonly value: T;
+
+  constructor(public ngControl: NgControl | null) {
+  }
+
+  get state(): DaffFormFieldState {
+    return {
+      focused: this.focused,
+      filled: !!this.value,
+      disabled: this.ngControl?.disabled,
+      error: this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+      valid: !this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+    };
+  }
+
+  _stateChanges = new BehaviorSubject({
+    focused: false,
+    filled: false,
+    disabled: false,
+    error: false,
+    valid: true,
+  });
+
+  stateChanges: Observable<DaffFormFieldState>;
+
+  emitState() {
+    this._stateChanges.next(this.state);
+  }
 };

libs/design/src/atoms/form/form-field/form-field-state.ts

@@ -0,0 +1,7 @@
+export interface DaffFormFieldState {
+  focused: boolean;
+  filled: boolean;
+  disabled: boolean;
+  error: boolean;
+  valid: boolean;
+}