carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input/utilities/helpers/keyboard-navigation.helper.ts

@@ -0,0 +1,402 @@
+import { ElementRef } from '@angular/core';
+import {
+  DropdownOptions,
+  GroupedNavigationState,
+  KeyboardNavigationState,
+  DispatchBoard,
+  Franchise,
+  TollOption,
+} from '../../models';
+
+export class KeyboardNavigationHelper {
+  static focusNextInput(inputRef: ElementRef): void {
+    const focusableElements = document.querySelectorAll(
+      'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), div.datetime-input-listener',
+    );
+    const focusableArray = Array.from(focusableElements);
+    const currentIndex = focusableArray.indexOf(inputRef.nativeElement);
+
+    if (currentIndex > -1) {
+      const nextIndex = (currentIndex + 1) % focusableArray.length;
+      const nextElement = focusableArray[nextIndex];
+      (nextElement as HTMLInputElement).focus();
+    }
+  }
+
+  // TODO: Fix inconsistent scrolling behavior
+  static scrollToOption(): void {
+    requestAnimationFrame(() => {
+      const optionElement = document.querySelector(`.focused`);
+      if (optionElement) {
+        optionElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+    });
+  }
+
+  static getGroupCounts(
+    dropdownOptions: DropdownOptions[],
+    dropdownType: string,
+    groupIndex: number,
+  ): {
+    groupCount: number;
+    optionCount: number;
+    canSelectHeader: boolean;
+  } {
+    let counts = {
+      groupCount: 0,
+      optionCount: 0,
+      canSelectHeader: true,
+    };
+
+    switch (dropdownType) {
+      case 'fuel-stop-transaction':
+        counts = {
+          optionCount:
+            (dropdownOptions[groupIndex] as Franchise)?.fuelStopStores
+              ?.length || 0,
+          groupCount: dropdownOptions.length,
+          canSelectHeader: true,
+        };
+        break;
+
+      case 'ftl-dispatch':
+      case 'dispatch':
+        counts = {
+          optionCount:
+            (dropdownOptions[groupIndex] as DispatchBoard)?.dispatches
+              ?.length || 0,
+          groupCount: dropdownOptions.filter(
+            (option: DropdownOptions) => (option as DispatchBoard)?.count > 0,
+          ).length,
+          canSelectHeader:
+            (dropdownOptions[0] as DispatchBoard)?.dispatcher !==
+            'NOBOARDSVARIANT',
+        };
+
+        break;
+
+      case 'toll':
+        counts = {
+          optionCount:
+            (dropdownOptions[groupIndex] as TollOption)?.tollTransponders
+              ?.length || 0,
+          groupCount: dropdownOptions.length,
+          canSelectHeader: false,
+        };
+        break;
+    }
+
+    return counts;
+  }
+
+  static handleSingleNavigationDown(
+    index: number,
+    dropdownOptions: DropdownOptions[],
+  ): number | null {
+    const lastIndex = dropdownOptions.length - 1;
+    if (index < lastIndex) {
+      return index + 1;
+    } else {
+      return lastIndex;
+    }
+  }
+
+  static handleSingleNavigationUp(
+    index: number,
+    isAdd: boolean,
+  ): number | null {
+    if (index > (isAdd ? -1 : 0)) {
+      return index - 1;
+    }
+    return index;
+  }
+
+  static handleGroupedNavigationUp(
+    groupIndex: number,
+    optionIndex: number,
+    dropdownOptions: DropdownOptions[],
+    dropdownType: string,
+    isAdd: boolean,
+  ): GroupedNavigationState | null {
+    const previousGroupIndex = groupIndex - 1 >= 0 ? groupIndex - 1 : 0;
+    const { optionCount, canSelectHeader } = this.getGroupCounts(
+      dropdownOptions,
+      dropdownType,
+      previousGroupIndex,
+    );
+
+    let state: GroupedNavigationState = {
+      groupIndex: null,
+      optionIndex: null,
+    };
+
+    if (optionIndex > (canSelectHeader ? 0 : 1)) {
+      state = {
+        groupIndex: groupIndex,
+        optionIndex: optionIndex - 1,
+      };
+    } else if (groupIndex > (isAdd ? -1 : 0)) {
+      state = {
+        groupIndex: groupIndex - 1,
+        optionIndex: optionCount,
+      };
+    } else {
+      state = {
+        groupIndex: groupIndex,
+        optionIndex: optionIndex,
+      };
+    }
+
+    return state;
+  }
+
+  static handleGroupedNavigationDown(
+    groupIndex: number,
+    optionIndex: number,
+    dropdownOptions: DropdownOptions[],
+    dropdownType: string,
+  ): GroupedNavigationState {
+    const { optionCount, groupCount, canSelectHeader } = this.getGroupCounts(
+      dropdownOptions,
+      dropdownType,
+      groupIndex,
+    );
+
+    let state: GroupedNavigationState = {
+      groupIndex: null,
+      optionIndex: null,
+    };
+
+    if (optionIndex < optionCount) {
+      state = {
+        groupIndex: groupIndex,
+        optionIndex: optionIndex + 1,
+      };
+    } else if (groupIndex < groupCount - 1) {
+      state = {
+        groupIndex: groupIndex + 1,
+        optionIndex: canSelectHeader ? 0 : 1,
+      };
+    } else {
+      state = {
+        groupIndex,
+        optionIndex,
+      };
+    }
+
+    return state;
+  }
+
+  static getInitialGroupedNavigationState(
+    dropdownType: string,
+    dropdownOptions?: DropdownOptions[],
+  ): GroupedNavigationState {
+    if (!dropdownOptions) {
+      return {
+        groupIndex: 0,
+        optionIndex: 0,
+      };
+    }
+
+    const { optionCount } = this.getGroupCounts(
+      dropdownOptions,
+      dropdownType,
+      0,
+    );
+
+    const state = {
+      groupIndex: 0,
+      optionIndex:
+        dropdownType === 'fuel-stop-transaction' ? 0 : optionCount ? 1 : 0, // 0 for the group item header 1 for the first item in the group note that fuel stop needs to fetch the stores so we go with the header to start
+    };
+
+    return state;
+  }
+
+  static getInitialKeyboardNavigationState(
+    dropdownType: string,
+    isGroupedDropdown: boolean,
+    dropdownOptions?: DropdownOptions[],
+  ): KeyboardNavigationState {
+    const state = {
+      singleIndex: isGroupedDropdown ? null : 0,
+      groupedNavigationState: isGroupedDropdown
+        ? this.getInitialGroupedNavigationState(dropdownType, dropdownOptions)
+        : null,
+    };
+
+    return state;
+  }
+
+  static getArrowKeyNavigationState(
+    keyboardNavigationState: KeyboardNavigationState,
+    isGroupedDropdown: boolean,
+    isAdd: boolean,
+    dropdownType: string,
+    dropdownOptions: DropdownOptions[],
+    key: string,
+  ): KeyboardNavigationState {
+    const { singleIndex, groupedNavigationState } = keyboardNavigationState;
+
+    const { groupIndex, optionIndex } = groupedNavigationState || {};
+    const index = singleIndex;
+
+    if (
+      (isGroupedDropdown &&
+        keyboardNavigationState.groupedNavigationState === null) ||
+      (!isGroupedDropdown && index === null)
+    ) {
+      return this.getInitialKeyboardNavigationState(
+        dropdownType,
+        isGroupedDropdown,
+        dropdownOptions,
+      );
+    }
+
+    let state: KeyboardNavigationState = {
+      singleIndex: null,
+      groupedNavigationState: null,
+    };
+
+    if (key === 'ArrowDown') {
+      if (isGroupedDropdown) {
+        state = {
+          singleIndex: null,
+          groupedNavigationState: this.handleGroupedNavigationDown(
+            groupIndex || 0,
+            optionIndex || 0,
+            dropdownOptions,
+            dropdownType,
+          ),
+        };
+      } else {
+        state = {
+          singleIndex: this.handleSingleNavigationDown(
+            index || 0,
+            dropdownOptions,
+          ),
+          groupedNavigationState: null,
+        };
+      }
+    }
+
+    if (key === 'ArrowUp') {
+      if (isGroupedDropdown) {
+        state = {
+          singleIndex: null,
+          groupedNavigationState: this.handleGroupedNavigationUp(
+            groupIndex || 0,
+            optionIndex || 0,
+            dropdownOptions,
+            dropdownType,
+            isAdd,
+          ),
+        };
+      } else {
+        state = {
+          singleIndex: this.handleSingleNavigationUp(index || 0, isAdd),
+          groupedNavigationState: null,
+        };
+      }
+    }
+
+    return state;
+  }
+
+  static getFirstLastNavigationState(
+    keyboardNavigationState: KeyboardNavigationState,
+    isGroupedDropdown: boolean,
+    isAdd: boolean,
+    dropdownType: string,
+    dropdownOptions: DropdownOptions[],
+    key: string,
+  ): KeyboardNavigationState {
+    const { groupedNavigationState } = keyboardNavigationState;
+
+    if (key === 'Home') {
+      if (isGroupedDropdown) {
+        return {
+          groupedNavigationState: {
+            groupIndex: groupedNavigationState?.groupIndex || 0,
+            optionIndex: 1,
+          },
+          singleIndex: null,
+        };
+      } else {
+        return {
+          singleIndex: isAdd ? -1 : 0,
+          groupedNavigationState: null,
+        };
+      }
+    }
+
+    if (key === 'End') {
+      if (isGroupedDropdown) {
+        const { optionCount } = this.getGroupCounts(
+          dropdownOptions,
+          dropdownType,
+          groupedNavigationState?.groupIndex || 0,
+        );
+        const lastIndex = optionCount ? optionCount - 1 : 0;
+        return {
+          groupedNavigationState: {
+            groupIndex: groupedNavigationState?.groupIndex || 0,
+            optionIndex: lastIndex,
+          },
+          singleIndex: null,
+        };
+      } else {
+        return {
+          singleIndex: dropdownOptions.length - 1,
+          groupedNavigationState: null,
+        };
+      }
+    }
+    return {
+      singleIndex: null,
+      groupedNavigationState: null,
+    };
+  }
+
+  static getOptionFromFocusedIndex(
+    state: KeyboardNavigationState,
+    dropdownOptions: DropdownOptions[],
+    dropdownType: string,
+    isGroupedDropdown: boolean,
+  ) {
+    const singleIndex = state.singleIndex || 0;
+    const groupedGroupIndex = state.groupedNavigationState?.groupIndex || 0;
+    const groupedOptionIndex = state.groupedNavigationState?.optionIndex || 1;
+
+    if (!isGroupedDropdown) {
+      return dropdownOptions[singleIndex] || null;
+    }
+
+    let option = null;
+
+    // Focused options are 1-indexed, so we need to subtract 1 from the index
+    switch (dropdownType) {
+      case 'fuel-stop-transaction':
+        option =
+          (dropdownOptions[groupedGroupIndex] as Franchise)?.fuelStopStores?.[
+            groupedOptionIndex - 1
+          ] || null;
+        break;
+      case 'ftl-dispatch':
+      case 'dispatch':
+        option = (dropdownOptions[groupedGroupIndex] as DispatchBoard)
+          ?.dispatches?.[groupedOptionIndex - 1];
+        break;
+      case 'toll':
+        option = (dropdownOptions[groupedGroupIndex] as TollOption)
+          ?.tollTransponders?.[groupedOptionIndex - 1];
+        break;
+    }
+
+    return option;
+  }
+}

package/projects/carriera-intern-components/src/app/components/input/utilities/index.ts

@@ -0,0 +1,2 @@
+export * from './helpers';
+export * from './constants';

package/projects/carriera-intern-components/src/app/components/input-address/enums/input-address-layers-string.enum.ts

@@ -0,0 +1,4 @@
+export enum InputAddressLayersStringEnum {
+  ADDRESS = 'Address',
+  LOCALITY = 'Locality',
+}

package/projects/carriera-intern-components/src/app/components/input-address/enums/input-address-type-string.enum.ts

@@ -0,0 +1,7 @@
+export enum InputAddressTypeStringEnum {
+  LONG_ADDRESS = 'longAddress',
+  SHORT_ADDRESS = 'shortAddress',
+  ROUTING_ADDRESS = 'RoutingAddress',
+  CITY_STATE_ZIP = 'CityStateZip',
+  STREET_CITY_STATE_ZIP = 'StreetCityStateZip',
+}

package/projects/carriera-intern-components/src/app/components/input-address/input-address.component.html

@@ -0,0 +1,13 @@
+@let searching = this.getSuperControl?.value?.length >= 3;
+
+<cai-input
+  [formControl]="getSuperControl"
+  [id]="id()"
+  [config]="inputConfig()"
+  [options]="addressList"
+  (onSelectionChange)="onSelectDropdown($event)"
+  [hideValidation]="hideValidation()"
+  [showNoResults]="searching && !_activeAddress && !isLoading()"
+  [isLoading]="isLoading()"
+  (onClear)="emitOnClear()"
+></cai-input>

package/projects/carriera-intern-components/src/app/components/input-address/input-address.component.spec.ts

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