Updating pages with all forms

projects/ngds-common-components/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@digitalspace/ngds-common-components",
+  "name": "@digitalspace/ngds-toolkit",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^16.0.0",

projects/ngds-forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalspace/ngds-forms",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0",

projects/ngds-forms/src/lib/components/input-types/ngds-input.component.ts

@@ -145,14 +145,15 @@ export class NgdsInput implements OnInit, OnDestroy {
   private _isInputInitialized = new BehaviorSubject<boolean>(false);
 
   protected subscriptions = new Subscription();
-  protected controlId = null;
+  protected static idCounter: number = 0;
+  protected controlId: number = 0;
 
   constructor(
   ) {
     // Generate 'unique' id for control so label/inputs/etc can talk to one another.
     // Basic angular controls aren't constructed with a unique identifier.
     // This is only to satisfy ARIA - open to better solutions. 
-    this.controlId = Math.floor(Math.random() * 999999);
+    this.controlId = NgdsInput.idCounter++;
   }
 
   ngOnInit(): void {
@@ -212,7 +213,7 @@ export class NgdsInput implements OnInit, OnDestroy {
       }
     }
   }
-
+  
   updateDisabledState(state) {
     if (state === true) {
       setTimeout(() => {

projects/ngds-forms/src/lib/components/input-types/text-input/text-input.component.html

@@ -10,8 +10,7 @@
     <ng-content #inputPrepend select="[ngdsInputPrepend]"></ng-content>
 
     <!-- Input -->
-    <input class="form-control border-0" [formControl]="control" [ngClass]="{'is-invalid': isInvalid}"
-      [placeholder]="placeholder ? placeholder : ''" (focus)="onFocus()" (blur)="onBlur()" [attr.id]="control?.id">
+    <input class="form-control border-0" [formControl]="control" [ngClass]="{'is-invalid': isInvalid,'disabled-input': isDisabled}" [disabled]="isDisabled || isLoading" [placeholder]="placeholder ? placeholder : ''" (focus)="onFocus()" (blur)="onBlur()" [attr.id]="control?.id">
 
     <!-- Reset control button -->
     <button *ngIf="resetButton" type="button" aria-label="reset input" class="btn btn-inline border-0"

projects/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts

@@ -41,7 +41,8 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
     this.isOpen.next(this.control?._isFocused);
     this.subscriptions.add(this.control.valueChanges.subscribe(() => {
       if (!this.editByModel) {
-        this.matchInputToControl()
+        this.isOpen.next(true);
+        this.matchInputToControl();
       }
     }))
     this.cd.detectChanges();
@@ -119,6 +120,7 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
   openDropdown() {
     if (!this.isDisabled) {
       this.isOpen.next(true);
+      this.typeaheadInput.nativeElement.focus();
       this.typeaheadInput.nativeElement.dispatchEvent(new Event(
         'input',
         {

src/app/app-routing.module.ts

@@ -9,45 +9,55 @@ import { PicklistsComponent } from './forms/picklists/picklists.component';
 import { TypeaheadsComponent } from './forms/typeaheads/typeaheads.component';
 import { MultiselectsComponent } from './forms/multiselects/multiselects.component';
 import { FormsHomeComponent } from './forms/forms-home/forms-home.component';
+import { appResolver } from './app.resolver';
 
 const routes: Routes = [
   {
     path: '',
+    resolve: {clear: appResolver},
     component: HomeComponent,
   },
   {
     path: 'common-components',
+    resolve: {clear: appResolver},
     component: CommonComponentsComponent
   },
   {
     path: 'forms',
+    resolve: {clear: appResolver},
     component: FormsComponent,
     children: [
       {
         path: '',
+        resolve: {clear: appResolver},
         component: FormsHomeComponent
       },
       {
         path: 'text',
+        resolve: {clear: appResolver},
         component: TextInputComponent
       },
       {
         path: 'picklist',
+        resolve: {clear: appResolver},
         component: PicklistsComponent
       },
       {
         path: 'typeahead',
+        resolve: {clear: appResolver},
         component: TypeaheadsComponent
       },
       {
         path: 'multiselect',
+        resolve: {clear: appResolver},
         component: MultiselectsComponent
       }
     ]
   },
   {
     // wildcard route
     path: '**',
+    resolve: {clear: appResolver},
     redirectTo: '/',
     pathMatch: 'full',
   },

src/app/app.component.html

@@ -2,6 +2,13 @@
   <h1 (click)="navHome()">NGDS-Toolkit</h1>
   <button class="btn btn-success my-3" (click)="navHome()">Home</button>
 </div>
-<div class="container p-3">
-  <router-outlet></router-outlet>
+<div class="p-3 row">
+  <div class="col-2 border-end">
+    <app-sidebar></app-sidebar>
+  </div>
+  <div class="col-10">
+    <div class="container">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 </div>

src/app/app.module.ts

@@ -9,9 +9,10 @@ import { RouterModule } from '@angular/router';
 import { FormsModule } from './forms/forms.module';
 import { CommonComponentsComponent } from './common-components/common-components/common-components.component';
 import { HomeComponent } from './home/home.component';
+import { SidebarComponent } from './home/sidebar/sidebar.component';
 
 @NgModule({
-  declarations: [AppComponent, CommonComponentsComponent, HomeComponent],
+  declarations: [AppComponent, CommonComponentsComponent, HomeComponent, SidebarComponent],
   imports: [BrowserModule, FormsModule, NgdsFormsModule, NgdsTabsModule, NgdsNavCardModule, AppRoutingModule, RouterModule.forRoot([])],
   providers: [
     {

src/app/app.resolver.ts

@@ -0,0 +1,8 @@
+import { inject } from "@angular/core";
+import { SidebarService } from "./home/sidebar/sidebar.service";
+import {  ResolveFn, } from "@angular/router";
+
+export const appResolver: ResolveFn<any> =
+    () => {
+      return inject(SidebarService).updateList([]);
+    };

src/app/forms/forms-home/forms-home.component.html

@@ -1,12 +1,15 @@
-<p>NGDS Forms are a collection of UI input components that enhance the existing Angular Forms functionality. At a
+<p>NGDS Forms are a collection of UI input components that enhance the existing Angular Forms functionality.
+</p>
+<pre class="border rounded px-3 py-1"><code class="p-0" [highlight]="installCode"></code></pre>
+<p>
+  NGDS Forms uses <code>bootstrap</code>, <code>bootstrap-icons</code>, and <code>ngx-bootstrap</code> as peer dependencies.
+</p>
+<pre class="border rounded px-3 py-1"><code class="p-0" [highlight]="peerDepCode"></code></pre>
+<p>At a
   minimum, you must provide every NGDS input with an Angular <code>AbstractControl</code> or derivative. All other
   attributes are optional. You can manage the value, state, and other form logic from the <code>AbstractControl</code>
   in TypeScript realm, and the NGDS Forms will adapt in HTML.</p>
-<p>Note: All of these examples assume you have the NGDS Forms module imported into your component's respective
-  <code>module.ts</code> file:</p>
-<div class="border rounded">
-  <pre><code class="p-0" [highlight]="moduleCode"></code></pre>
-</div>
+<pre class="border rounded px-3 py-1"><code class="p-0" [highlight]="moduleCode"></code></pre>
 <section>
   <div class="row my-3">
     <div class="col">

src/app/forms/forms-home/forms-home.component.ts

@@ -7,8 +7,13 @@ import { Component } from '@angular/core';
 })
 export class FormsHomeComponent {
 
-  public moduleCode = `
-  import { NgdsFormsModule } from '@digitalspace/ngds-toolkit';
+  public installCode = `  yarn add @digitalspace/ngds-forms`;
+
+  public peerDepCode = `  yarn add bootstrap
+  yarn add bootstrap-icons
+  yarn add ngx-bootstrap`
+
+  public moduleCode = `  import { NgdsFormsModule } from '@digitalspace/ngds-toolkit';
 
   @NgModule({
     ...
@@ -18,7 +23,6 @@ export class FormsHomeComponent {
     ...
   ])
   export class ComponentModule {}
-  }
-  `
+  }`
 
 }

src/app/forms/forms.component.html

@@ -1,4 +1,4 @@
-<div class="navbar bg-light p-3">
+<div class="navbar bg-light p-3 mb-3">
   <h2 (click)="navTo('forms')">NGDS Forms</h2>
   <ul>
       <button class="btn btn-dark me-2" (click)="navTo('forms/text')">Text</button>
@@ -7,7 +7,6 @@ <h2 (click)="navTo('forms')">NGDS Forms</h2>
       <button class="btn btn-dark me-2" (click)="navTo('forms/multiselect')">Multiselect</button>
   </ul>
 </div>
-<hr>
-<section>
+<section class="max-height">
 <router-outlet></router-outlet>
 </section>

src/app/forms/forms.component.scss

@@ -0,0 +1,4 @@
+.max-height {
+  max-height: 85vh;
+  overflow-y: scroll;
+}