carriera-intern 0.0.0

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

@@ -0,0 +1,2669 @@
+<!-- #region Variables -->
+@let valid =
+  ngControl?.valid &&
+  (ngControl?.touched || ngControl?.dirty) &&
+  !isAdding() &&
+  !isDisabled();
+@let invalid =
+  ngControl?.invalid &&
+  (ngControl?.touched || ngControl?.dirty) &&
+  !isAdding() &&
+  !isDisabled();
+@let subcontent =
+  config().subcontent ||
+  (config().dropdown === "subcontent" &&
+    selectedOption() &&
+    cast(selectedOption(), "dropdownOption")![config().optionLabel || "label"]);
+
+@let name = config().name;
+@let password = config().type === "password" || config().type === "account";
+
+@let optionLabel = this.config().optionLabel || "label";
+@let dropdownType = this.config().dropdown;
+
+@let focusedOptionIndex = keyboardNavigationState().singleIndex;
+@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;
+
+@let tooltipClass =
+  config().inverse
+    ? "tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500"
+    : "tooltip input-tooltip";
+
+<!-- #region Multiple selection -->
+@if (config().dropdown === "multiple" && !!multipleSelectedOptions().length) {
+  <div
+    (pointerdown)="focus($event)"
+    (mouseenter)="toggleHovered(true)"
+    (mouseleave)="toggleHovered(false)"
+    class="multiple-container"
+    [class]="{
+      focused: focused(),
+      hovered: hovered(),
+    }"
+  >
+    <label class="multiple-label">{{ name }}</label>
+
+    @for (option of multipleSelectedOptions(); track $index) {
+      <div class="multiple-selected">
+        <p>{{ cast(option, "dropdownOption")![optionLabel || "label"] }}</p>
+        <button
+          type="button"
+          class=""
+          (pointerdown)="handleOption(option, $event)"
+          [tabIndex]="-1"
+          ngbTooltip="Clear"
+          [placement]="'top'"
+          [tooltipClass]="tooltipClass"
+          [autoClose]="true"
+          #closeTooltip="ngbTooltip"
+          [container]="'body'"
+        >
+          <svg-icon
+            name="cai-cancel"
+            class="multiple-remove-button multiple-remove-icon bg-icon"
+          ></svg-icon>
+        </button>
+      </div>
+    }
+  </div>
+}
+<!-- #endregion -->
+
+@let hasFloatingError =
+  config().errorBehavior === "floating" ||
+  (!!config().inTable && config().placeholderBehavior !== "static");
+
+<div
+  class="app-input-container"
+  [class]="
+    {
+      config: config(),
+      hideValidation: hideValidation(),
+      isPasswordVisible: visible(),
+      isInvalid: !!invalid,
+      isValid: !!valid,
+      isHovered: hovered(),
+      hasText: hasText(),
+      isAdding: isAdding(),
+      selectedOption: selectedOption(),
+    } | inputClass
+  "
+  ngbDropdown
+  [autoClose]="false"
+  #dropdown="ngbDropdown"
+  dropdownClass="cai-dropdown"
+  #containerRef
+  [ngbTooltip]="errorTooltip"
+  [disableTooltip]="!hasFloatingError"
+  [container]="'body'"
+  [placement]="['bottom']"
+  tooltipClass="tooltip tooltip-bg-red-500 input-tooltip "
+  (pointerdown)="focus($event)"
+  (mouseenter)="dropdownType === 'multiple' && toggleHovered(true)"
+  (mouseleave)="dropdownType === 'multiple' && toggleHovered(false)"
+>
+  <!-- 
+  [popperOptions]="dropdownPopperOptions"
+  -->
+  @if (config().icon && !password && !config().withButtons) {
+    <div
+      class="icon-container"
+      (pointerdown)="focus($event)"
+      [class]="{
+        'colored-icon': config().iconColor,
+      }"
+      [style.--icon-color]="config().iconColor || ''"
+    >
+      <svg-icon class="icon" [name]="config().icon || ''"></svg-icon>
+      @if (!config().noSeparator) {
+        <div class="separator"></div>
+      }
+    </div>
+  }
+  @if (password) {
+    <div class="icon-container" (pointerdown)="toggleVisibility($event)">
+      <div
+        class="password-icons"
+        [ngbTooltip]="passwordTooltip"
+        [container]="'body'"
+        [tooltipClass]="tooltipClass"
+        [autoClose]="true"
+        [placement]="'top'"
+        [openDelay]="600"
+      >
+        <svg-icon
+          class="icon password-key hover-icon"
+          name="cai-password-key"
+        ></svg-icon>
+        <svg-icon
+          class="icon password-shown hover-icon"
+          name="cai-password-shown"
+        ></svg-icon>
+        <svg-icon
+          class="icon password-hidden hover-icon"
+          name="cai-password-hidden"
+        ></svg-icon>
+      </div>
+      <div class="separator"></div>
+    </div>
+  }
+
+  <input
+    class="app-input"
+    [tabindex]="isDisabled() ? '-1' : '0'"
+    [type]="
+      password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'
+    "
+    [required]="config().required"
+    [disabled]="isDisabled()"
+    (input)="onInput($event)"
+    (blur)="dispatchOnBlur()"
+    [id]="id()"
+    [attr.aria-label]="config().label"
+    [attr.name]="
+      config().autocomplete ? config().autocomplete : randomAutocomplete()
+    "
+    [placeholder]="config()?.placeholder || ''"
+    [autocomplete]="
+      config().autocomplete ? config().autocomplete : randomAutocomplete()
+    "
+    #inputRef
+    [appPassword]="password"
+    [appMask]="config().mask || ''"
+    [reveal]="config().reveal || 0"
+    [account]="config().type === 'account'"
+    [visible]="visible()"
+    [appNumberFormat]="config().type === 'number'"
+    [isNumberFormattingDisabled]="config().isNumberFormattingDisabled || false"
+    [disableDecimals]="config().disableDecimals || false"
+    [prefix]="config().prefix || ''"
+    [max]="config().max"
+    (keydown)="handleKeydown($event)"
+    (focus)="onFocus($event)"
+  />
+  @if (
+    !(dropdownType === "multiple" && !!multipleSelectedOptions().length) &&
+    config().placeholderBehavior !== "hidden"
+  ) {
+    <label
+      class="app-input-label"
+      [class.placeholder-color]="this.config().placeholderColor"
+      [style.--placeholder-color]="this.config().placeholderColor || ''"
+      (click)="focus($event)"
+    >
+      <!-- Truck Trailer Driver Dropdown label -->
+      @if (dropdownType === "dispatch" || dropdownType === "ftl-dispatch") {
+        <p class="truck-item app-input-name">Truck</p>
+        <p class="trailer-item">Trailer</p>
+        <p>Driver</p>
+        <p class="sub-label">Rate</p>
+      }
+      <!-- Split Load -->
+      @else if (dropdownType === "split-driver") {
+        <p class="app-input-name">{{ name }}</p>
+        <p class="sub-label">Rate</p>
+      } @else if (
+        dropdownType === "split-truck" || dropdownType === "split-trailer"
+      ) {
+        <p class="app-input-name">{{ name }}</p>
+        <p class="sub-label">Location</p>
+      }
+      <!-- Dropdown variants -->
+      @else if (dropdownType === "broker") {
+        <p class="app-input-name">{{ name }}</p>
+        <p class="sub-label">Credit</p>
+      } @else if (dropdownType === "contact") {
+        <p class="app-input-name">{{ name }}</p>
+        <p class="sub-label">Phone</p>
+      } @else if (dropdownType === "shipper") {
+        <p class="app-input-name">{{ name }}</p>
+        <p class="sub-label">Address</p>
+      } @else if (dropdownType === "owner") {
+        <p class="owner-ein app-input-name">EIN</p>
+        <p class="app-input-name">Company Name</p>
+      } @else if (dropdownType === "fuelcard") {
+        <p class="fuelcard-number app-input-name">Card No.</p>
+        <p class="fuelcard-brand app-input-name">Provider</p>
+        <p class="app-input-name">Nickname</p>
+      }
+      <!-- Default Dropdown label -->
+      @else {
+        <span class="app-input-name">{{ name }}</span>
+      }
+    </label>
+  }
+  @if (config().type === "number" && config().withButtons) {
+    <div class="number-container">
+      <div class="number-buttons">
+        <div class="separator"></div>
+        <div
+          class="plus-button-container"
+          ngbTooltip="Add"
+          [tooltipClass]="tooltipClass"
+          [container]="'body'"
+          [autoClose]="true"
+          [openDelay]="600"
+          [placement]="'top'"
+          (pointerdown)="increment($event)"
+        >
+          <svg-icon name="cai-plus" class="bg-icon plus-icon"></svg-icon>
+        </div>
+        <div
+          class="minus-button-container"
+          ngbTooltip="Remove"
+          [placement]="'top'"
+          [container]="'body'"
+          [tooltipClass]="tooltipClass"
+          [autoClose]="true"
+          [openDelay]="600"
+          (pointerdown)="decrement($event)"
+        >
+          <svg-icon name="cai-minus" class="bg-icon minus-icon"></svg-icon>
+        </div>
+      </div>
+    </div>
+  }
+  @if (!config().inTable) {
+    @if (!dropdownType) {
+      <svg-icon
+        name="cai-checkmark"
+        class="app-input-icon positive-icon"
+      ></svg-icon>
+      <svg-icon
+        name="cai-status-warning"
+        class="app-input-icon warning-icon"
+      ></svg-icon>
+    }
+  }
+
+  @if (
+    invalid &&
+    config().errorBehavior !== "hidden" &&
+    (ngControl?.errors | errorMessage: config().customErrors)[0] &&
+    !(config().inTable && config().placeholderBehavior !== "static")
+  ) {
+    <div class="app-input-error">
+      {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}
+    </div>
+  }
+
+  <!-- Accept button -->
+  @if ((config().add && isAdding()) || config().isEdit) {
+    <button
+      type="button"
+      class="app-input-icon button-icon accept-button"
+      (pointerdown)="addOption()"
+      [tabIndex]="-1"
+      ngbTooltip="Confirm"
+      [openDelay]="600"
+      [placement]="'top'"
+      [tooltipClass]="tooltipClass"
+      [container]="'body'"
+      [autoClose]="true"
+    >
+      <svg-icon class="bg-icon" name="cai-checkmark"></svg-icon>
+    </button>
+  }
+
+  <!-- Cancel button -->
+  <button
+    type="button"
+    class="app-input-icon button-icon cancel-button"
+    (pointerdown)="reset($event)"
+    (mouseenter)="onClearHover(true)"
+    (mouseleave)="onClearHover(false)"
+    [tabIndex]="-1"
+    ngbTooltip="{{
+      hasText()
+        | clearTooltip
+          : isAdding()
+          : config().isEdit || false
+          : config().placeholderBehavior || 'dynamic'
+          : dropdownType === 'multiple'
+          : config().hasResetButton
+          : canTooltipBeVisible()
+    }}"
+    [openDelay]="600"
+    [tooltipClass]="tooltipClass"
+    [placement]="'top'"
+    [container]="'body'"
+    [autoClose]="true"
+    #closeTooltip="ngbTooltip"
+  >
+    @let iconName =
+      config().hasResetButton
+        ? "cai-reset"
+        : config().removable
+          ? "cai-delete"
+          : "cai-cancel";
+    <svg-icon class="bg-icon" [name]="iconName"></svg-icon>
+  </button>
+
+  <div class="dropdown-anchor" ngbDropdownAnchor></div>
+  <!-- Dropdown menu -->
+
+  @let hasLoader = isLoading() !== undefined;
+
+  @if (hasLoader) {
+    <div class="loader" [class.loading]="isLoading()">
+      <svg-icon name="cai-loader" class="loader-icon"></svg-icon>
+    </div>
+  }
+
+  @if (dropdownType) {
+    @let maxHeight =
+      ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +
+        (config().add ? 1 : 0)) *
+        30 +
+      4;
+
+    @let animateDropdown =
+      dropdownType !== "toll" &&
+      dropdownType !== "fuel-stop-transaction" &&
+      dropdownType !== "dispatch" &&
+      dropdownType !== "ftl-dispatch" &&
+      dropdownType !== "split-driver" &&
+      dropdownType !== "split-truck" &&
+      dropdownType !== "split-trailer";
+
+    @let unfilteredHeight =
+      dropdownType === "contact" || !animateDropdown
+        ? 244
+        : ((options()?.length || (showNoResults() ? 1 : 0)) +
+            (config().add ? 1 : 0)) *
+            30 +
+          4;
+
+    <div
+      ngbDropdownMenu
+      class="dropdown-menu input-dropdown-menu"
+      [class]="{
+        'hide-dropdown':
+          config().dropdownAutocomplete &&
+          !dropdownOptions()?.length &&
+          !(showNoResults() && value()),
+        'animate-dropdown': animateDropdown,
+        'size-22': config().size === 22,
+        'has-stroke': config().hasStroke,
+      }"
+      [class.closing]="closing()"
+      [style.--unfiltered-height]="
+        unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'
+      "
+      [style.--max-height]="maxHeight > 244 ? '244px' : maxHeight + 'px'"
+      [style.width.px]="containerWidth()"
+      [tabindex]="-1"
+      (pointerdown)="onDropdownBackgroundClick($event)"
+      (pointerup)="stopEventPropagation($event)"
+      (mouseup)="stopEventPropagation($event)"
+      (click)="stopEventPropagation($event)"
+    >
+      <div
+        class="dropdown-menu-content"
+        [tabindex]="-1"
+        caiInfiniteScroll
+        [scrollThreshold]="50"
+        (scrolledToBottom)="onDropdownScrolledToBottom()"
+      >
+        @if (config().add) {
+          <button
+            class="dropdown-item add-new"
+            [class.focused]="
+              focusedOptionIndex === -1 ||
+              groupedNavigationState?.groupIndex === -1
+            "
+            (pointerdown)="handleAddingOption($event)"
+          >
+            <p>ADD NEW</p>
+            <svg-icon name="cai-plus" class="dropdown-item-icon"></svg-icon>
+          </button>
+        }
+        <ng-container *ngTemplateOutlet="dropdownMenuRef"></ng-container>
+      </div>
+    </div>
+
+    @if (!config().dropdownAutocomplete) {
+      <div
+        class="dropdown-icon-container"
+        [class.open]="dropdown.isOpen() && !closing()"
+        (pointerdown)="onDropdownIconClick($event)"
+      >
+        <svg-icon
+          name="cai-arrow-secondary-down"
+          class="dropdown-icon icon"
+        ></svg-icon>
+      </div>
+    }
+    @let specialDropdown =
+      dropdownType === "dispatch" ||
+      dropdownType === "ftl-dispatch" ||
+      dropdownType === "broker" ||
+      dropdownType === "contact" ||
+      dropdownType === "shipper" ||
+      dropdownType === "bank" ||
+      dropdownType === "dispatcher" ||
+      dropdownType === "truck" ||
+      dropdownType === "trailer" ||
+      dropdownType === "hazardous" ||
+      dropdownType === "state" ||
+      dropdownType === "owner" ||
+      dropdownType === "fuelcard" ||
+      dropdownType === "pm" ||
+      dropdownType === "color" ||
+      dropdownType === "make" ||
+      dropdownType === "toll" ||
+      dropdownType === "provider" ||
+      dropdownType === "split-driver" ||
+      dropdownType === "split-truck" ||
+      dropdownType === "split-trailer";
+    <!-- Placeholder -->
+    @if (specialDropdown) {
+      <ng-container *ngTemplateOutlet="selectedOptionRef"></ng-container>
+    } @else if (
+      (config().add || config().search) &&
+      !inputRef.value &&
+      !this.isAdding() &&
+      dropdownType !== "subcontent"
+    ) {
+      <div class="dropdown-selected">
+        @if (config().placeholderBehavior === "static") {
+          <p class="selected-label-hidden">
+            {{ name + (config().required ? " *" : "") }}
+          </p>
+          <p class="selected-text">
+            {{
+              selectedOption() &&
+                cast(selectedOption(), "dropdownOption")![
+                  optionLabel || "label"
+                ]
+            }}
+          </p>
+        } @else {
+          @if (
+            selectedOption() &&
+            cast(selectedOption(), "dropdownOption")![
+              optionLabel || "label"
+            ] === "Hazardous"
+          ) {
+            <svg-icon name="cai-violation-hazmat" class="icon"></svg-icon>
+            <p class="dropdown-selected-content">
+              {{
+                selectedOption() &&
+                  cast(selectedOption(), "dropdownOption")![
+                    optionLabel || "label"
+                  ]
+              }}
+            </p>
+          } @else {
+            <p class="dropdown-selected-content">
+              {{
+                selectedOption() &&
+                  cast(selectedOption(), "dropdownOption")![
+                    optionLabel || "label"
+                  ]
+              }}
+            </p>
+          }
+        }
+      </div>
+    }
+  } @else if (config().isEdit && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="dropdown-selected-content">{{ name }}</p>
+    </div>
+  }
+  @if (config().passwordRequirements) {
+    <div
+      class="dropdown-menu password-requirement"
+      ngbDropdownMenu
+      [style.width.px]="containerWidth()"
+      [class.closing]="closing()"
+      (pointerup)="stopEventPropagation($event)"
+      (mouseup)="stopEventPropagation($event)"
+      (click)="stopEventPropagation($event)"
+    >
+      <ng-container *ngTemplateOutlet="passwordRequirementsRef"></ng-container>
+    </div>
+  }
+  @if (subcontent) {
+    <p class="subcontent">
+      @if (!(config().alignment === "right")) {
+        <span class="subcontent-hide"
+          >{{
+            config().search
+              ? selectedOption() &&
+                cast(selectedOption(), "dropdownOption")![
+                  optionLabel || "label"
+                ]
+              : inputRef.value
+          }}
+        </span>
+      }
+      {{ subcontent }}
+    </p>
+  }
+</div>
+
+<!-- #region Templates -->
+
+<!-- #region Password requirements -->
+<ng-template #passwordRequirementsRef>
+  @let isMinLengthValid =
+    !this.ngControl?.errors?.["minlength"] && this.value();
+  @let isHasNumberValid =
+    !this.ngControl?.errors?.["hasNumber"] && this.value();
+  @let isHasSymbolValid =
+    !this.ngControl?.errors?.["hasSymbol"] && this.value();
+  @let isHasUppercaseValid =
+    !this.ngControl?.errors?.["hasUppercase"] && this.value();
+
+  <p>Strong Password Requirement</p>
+  <ul>
+    <li [class.valid]="isMinLengthValid">
+      <svg-icon
+        [name]="isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'"
+        [class]="isMinLengthValid ? 'checkmark' : 'cancel'"
+        class="icon"
+      ></svg-icon
+      ><span>Minimum 8 characters</span>
+    </li>
+    <li [class.valid]="isHasNumberValid">
+      <svg-icon
+        class="icon"
+        [name]="isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'"
+        [class]="isHasNumberValid ? 'checkmark' : 'cancel'"
+      ></svg-icon
+      ><span>One number</span>
+    </li>
+    <li [class.valid]="isHasSymbolValid">
+      <svg-icon
+        class="icon"
+        [name]="isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'"
+        [class]="isHasSymbolValid ? 'checkmark' : 'cancel'"
+      ></svg-icon
+      ><span>One symbol</span>
+    </li>
+    <li [class.valid]="isHasUppercaseValid">
+      <svg-icon
+        class="icon"
+        [name]="isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'"
+        [class]="isHasUppercaseValid ? 'checkmark' : 'cancel'"
+      ></svg-icon
+      ><span>One upper-case letter</span>
+    </li>
+  </ul>
+</ng-template>
+<!-- #endregion -->
+@let search = config().search;
+
+<ng-template #dropdownMenuRef>
+  @switch (dropdownType) {
+    @case ("dispatch") {
+      <ng-container *ngTemplateOutlet="dispatchesRef"></ng-container>
+    }
+    @case ("ftl-dispatch") {
+      <ng-container *ngTemplateOutlet="ftlDispatchRef"></ng-container>
+    }
+    @case ("broker") {
+      <ng-container *ngTemplateOutlet="brokerRef"></ng-container>
+    }
+    @case ("contact") {
+      <ng-container *ngTemplateOutlet="contactRef"></ng-container>
+    }
+    @case ("shipper") {
+      <ng-container *ngTemplateOutlet="shipperRef"></ng-container>
+    }
+    @case ("bank") {
+      <ng-container *ngTemplateOutlet="bankRef"></ng-container>
+    }
+    @case ("dispatcher") {
+      <ng-container *ngTemplateOutlet="dispatcherRef"></ng-container>
+    }
+    @case ("trailer") {
+      <ng-container *ngTemplateOutlet="trailerRef"></ng-container>
+    }
+    @case ("truck") {
+      <ng-container *ngTemplateOutlet="truckRef"></ng-container>
+    }
+    @case ("hazardous") {
+      <ng-container *ngTemplateOutlet="hazardousRef"></ng-container>
+    }
+    @case ("state") {
+      <ng-container *ngTemplateOutlet="stateRef"></ng-container>
+    }
+    @case ("owner") {
+      <ng-container *ngTemplateOutlet="ownerRef"></ng-container>
+    }
+    @case ("fuelcard") {
+      <ng-container *ngTemplateOutlet="fuelcardRef"></ng-container>
+    }
+    @case ("pm") {
+      <ng-container *ngTemplateOutlet="pmRef"></ng-container>
+    }
+    @case ("multiple") {
+      <ng-container *ngTemplateOutlet="multipleRef"></ng-container>
+    }
+    @case ("make") {
+      <ng-container *ngTemplateOutlet="makeRef"></ng-container>
+    }
+    @case ("toll") {
+      <ng-container *ngTemplateOutlet="tollRef"></ng-container>
+    }
+    @case ("color") {
+      <ng-container *ngTemplateOutlet="colorRef"></ng-container>
+    }
+    @case ("fuel-stop-transaction") {
+      <ng-container *ngTemplateOutlet="fuelStopTransactionRef"></ng-container>
+    }
+    @case ("provider") {
+      <ng-container *ngTemplateOutlet="providerRef"></ng-container>
+    }
+    @case ("split-driver") {
+      <ng-container *ngTemplateOutlet="splitDriverRef"></ng-container>
+    }
+    @case ("split-truck") {
+      <ng-container *ngTemplateOutlet="splitTruckRef"></ng-container>
+    }
+    @case ("split-trailer") {
+      <ng-container *ngTemplateOutlet="splitTrailerRef"></ng-container>
+    }
+    @case ("subcontent") {
+      <ng-container *ngTemplateOutlet="dropdownOptionsRef"></ng-container>
+    }
+    @default {
+      <ng-container *ngTemplateOutlet="dropdownOptionsRef"></ng-container>
+    }
+  }
+</ng-template>
+
+<ng-template #selectedOptionRef>
+  @switch (dropdownType) {
+    @case ("dispatch") {
+      <ng-container *ngTemplateOutlet="selectedDispatchRef"></ng-container>
+    }
+    @case ("ftl-dispatch") {
+      <ng-container *ngTemplateOutlet="selectedDispatchRef"></ng-container>
+    }
+    @case ("broker") {
+      <ng-container *ngTemplateOutlet="selectedBrokerRef"></ng-container>
+    }
+    @case ("contact") {
+      <ng-container *ngTemplateOutlet="selectedContactRef"></ng-container>
+    }
+    @case ("shipper") {
+      <ng-container *ngTemplateOutlet="selectedShipperRef"></ng-container>
+    }
+    @case ("bank") {
+      <ng-container *ngTemplateOutlet="selectedBankRef"></ng-container>
+    }
+    @case ("dispatcher") {
+      <ng-container *ngTemplateOutlet="selectedDispatcherRef"></ng-container>
+    }
+    @case ("trailer") {
+      <ng-container *ngTemplateOutlet="selectedTrailerRef"></ng-container>
+    }
+    @case ("truck") {
+      <ng-container *ngTemplateOutlet="selectedTruckRef"></ng-container>
+    }
+    @case ("hazardous") {
+      <ng-container *ngTemplateOutlet="selectedHazardousRef"></ng-container>
+    }
+    @case ("state") {
+      <ng-container *ngTemplateOutlet="selectedStateRef"></ng-container>
+    }
+    @case ("owner") {
+      <ng-container *ngTemplateOutlet="selectedOwnerRef"></ng-container>
+    }
+    @case ("fuelcard") {
+      <ng-container *ngTemplateOutlet="selectedFuelcardRef"></ng-container>
+    }
+    @case ("pm") {
+      <ng-container *ngTemplateOutlet="selectedPmRef"></ng-container>
+    }
+    @case ("make") {
+      <ng-container *ngTemplateOutlet="selectedMakeRef"></ng-container>
+    }
+    @case ("toll") {
+      <ng-container *ngTemplateOutlet="selectedTollRef"></ng-container>
+    }
+    @case ("color") {
+      <ng-container *ngTemplateOutlet="selectedColorRef"></ng-container>
+    }
+    @case ("provider") {
+      <ng-container *ngTemplateOutlet="selectedProviderRef"></ng-container>
+    }
+    @case ("split-driver") {
+      <ng-container *ngTemplateOutlet="selectedSplitDriverRef"></ng-container>
+    }
+    @case ("split-truck") {
+      <ng-container *ngTemplateOutlet="selectedSplitTruckRef"></ng-container>
+    }
+    @case ("split-trailer") {
+      <ng-container *ngTemplateOutlet="selectedSplitTrailerRef"></ng-container>
+    }
+  }
+</ng-template>
+
+<!-- Standard dropdown -->
+<ng-template #dropdownOptionsRef>
+  @if (dropdownOptions().length) {
+    @for (option of dropdownOptions(); track $index; let index = $index) {
+      @let dropdownOption = cast(option, "dropdownOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ dropdownOption.id }}"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+        (pointerdown)="handleOption(dropdownOption, $event)"
+      >
+        @if (dropdownOption[optionLabel] === "Hazardous") {
+          <svg-icon name="cai-violation-hazmat" class="icon"></svg-icon>
+        }
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (dropdownOption[optionLabel] | highlightSearch: value())
+              : dropdownOption[optionLabel]
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #multipleRef>
+  @if (dropdownOptions().length) {
+    @for (option of dropdownOptions(); track $index; let index = $index) {
+      @let dropdownOption = cast(option, "dropdownOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ dropdownOption.id }}"
+        (pointerdown)="handleOption(dropdownOption, $event)"
+        [class]="{
+          selected: isSelectedOption(dropdownOption),
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (dropdownOption[optionLabel] | highlightSearch: value())
+              : dropdownOption[optionLabel]
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #bankRef>
+  @if (dropdownOptions().length) {
+    @for (bank of dropdownOptions(); track $index; let index = $index) {
+      @let bankOption = cast(bank, "bank")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ bankOption.id }}"
+        (pointerdown)="handleOption(bankOption, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'bank')?.id === bankOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        @if (bankOption.logoName) {
+          <svg-icon
+            class="full-icon"
+            [name]="bankOption.logoName.slice(0, -4)"
+          ></svg-icon>
+        } @else {
+          <p
+            class="dropdown-content-with-icon"
+            [innerHTML]="
+              search
+                ? (bankOption.name || '' | highlightSearch: value())
+                : bankOption.name
+            "
+          ></p>
+        }
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #makeRef>
+  @if (dropdownOptions().length) {
+    @for (make of dropdownOptions(); track $index; let index = $index) {
+      @let makeOption = cast(make, "make")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ makeOption.id }}"
+        (pointerdown)="handleOption(makeOption, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'make')?.id === makeOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        @if (makeOption.logoName) {
+          <svg-icon
+            class="full-icon"
+            [name]="makeOption.logoName.slice(0, -4)"
+          ></svg-icon>
+        } @else {
+          <p
+            class="dropdown-content-with-icon"
+            [innerHTML]="
+              search
+                ? (makeOption.name || '' | highlightSearch: value())
+                : makeOption.name
+            "
+          ></p>
+        }
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Broker -->
+<ng-template #brokerRef>
+  @if (dropdownOptions().length) {
+    @for (broker of dropdownOptions(); track $index; let index = $index) {
+      @let brokerOption = cast(broker, "broker")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="broker-{{ brokerOption.id }}"
+        (pointerdown)="
+          !(brokerOption.dnu || brokerOption.ban) &&
+            handleOption(brokerOption, $event)
+        "
+        [class]="{
+          selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,
+          focused: focusedOptionIndex === index,
+          banned: brokerOption.dnu || brokerOption.ban,
+          dnu: brokerOption.dnu,
+        }"
+      >
+        @if (brokerOption?.dnu || brokerOption?.ban) {
+          <svg-icon name="cai-minus" class="round-icon"></svg-icon>
+        } @else if (brokerOption?.fraudCheck) {
+          <svg-icon
+            name="cai-status-warning-lite"
+            class="icon fraud"
+          ></svg-icon>
+        }
+        <p
+          class="dropdown-content"
+          [innerHTML]="
+            search
+              ? (brokerOption.businessName || '' | highlightSearch: value())
+              : brokerOption.businessName
+          "
+        ></p>
+        <div class="dropdown-subitem-end">
+          <div class="end-item-base">
+            @if (!brokerOption.creditLimit) {
+              <p>Unlimited</p>
+            } @else {
+              <p>{{ brokerOption.availableCredit || 0 | currency }}</p>
+              <div
+                class="progress-bar"
+                [style.--progress]="
+                  (
+                    brokerOption
+                    | brokerProgress: brokerOption.dnu || brokerOption.ban
+                  ).activePercentageOfPaid + '%'
+                "
+                [class]="
+                  (
+                    brokerOption
+                    | brokerProgress: brokerOption.dnu || brokerOption.ban
+                  ).status
+                "
+              ></div>
+            }
+          </div>
+          <div class="end-item-hover">
+            <p>
+              {{ brokerOption.loadsCount }} |
+              {{ brokerOption.availableCredit || 0 | currency }}
+            </p>
+            <svg-icon name="cai-load" class="icon"></svg-icon>
+          </div>
+        </div>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Contact dropdown -->
+<ng-template #contactRef>
+  @if (dropdownOptions().length) {
+    @for (contact of dropdownOptions(); track $index; let index = $index) {
+      @let contactOption = cast(contact, "contact")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="contact-{{ contact.id }}"
+        (pointerdown)="handleOption(contact, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'contact')?.id === contact.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          [innerHTML]="
+            search
+              ? (contactOption.contactName || '' | highlightSearch: value())
+              : contactOption.contactName
+          "
+        ></p>
+        <div class="dropdown-subitem-end">
+          <div class="end-item-base">
+            <p>{{ contactOption.department?.name }}</p>
+          </div>
+          <div class="end-item-hover">
+            <p>
+              {{ contactOption.phone }}
+            </p>
+          </div>
+        </div>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Owner dropdown -->
+<ng-template #ownerRef>
+  @if (dropdownOptions().length) {
+    @for (owner of dropdownOptions(); track $index; let index = $index) {
+      @let ownerOption = cast(owner, "owner");
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="owner-{{ ownerOption?.id }}"
+        (pointerdown)="handleOption(ownerOption!, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="owner-ein"
+          [innerHTML]="
+            search
+              ? (ownerOption?.ein || '' | highlightSearch: value())
+              : ownerOption?.ein
+          "
+        ></p>
+        <p
+          [innerHTML]="
+            search
+              ? (ownerOption?.name || '' | highlightSearch: value())
+              : ownerOption?.name
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Fuelcard dropdown -->
+<ng-template #fuelcardRef>
+  @if (dropdownOptions().length) {
+    @for (fuelcard of dropdownOptions(); track $index; let index = $index) {
+      @let fuelcardOption = cast(fuelcard, "fuelCard");
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="fuelcard-{{ fuelcardOption?.id }}"
+        (pointerdown)="handleOption(fuelcardOption!, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="fuelcard-number"
+          [innerHTML]="
+            search
+              ? (fuelcardOption?.number || '' | highlightSearch: value())
+              : fuelcardOption?.number
+          "
+        ></p>
+        <p
+          class="fuelcard-brand"
+          [innerHTML]="
+            search
+              ? (fuelcardOption?.brand || '' | highlightSearch: value())
+              : fuelcardOption?.brand
+          "
+        ></p>
+        <p
+          [innerHTML]="
+            search
+              ? (fuelcardOption?.account || '' | highlightSearch: value())
+              : fuelcardOption?.account
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Shipper dropdown -->
+<ng-template #shipperRef>
+  @if (dropdownOptions().length) {
+    @for (shipper of dropdownOptions(); track $index; let index = $index) {
+      @let shipperOption = cast(shipper, "shipper")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="shipper-{{ shipperOption.id }}"
+        (pointerdown)="handleOption(shipperOption, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="max-w-280 text-truncate"
+          [innerHTML]="
+            search
+              ? (shipperOption.businessName || '' | highlightSearch: value())
+              : shipperOption.businessName
+          "
+        ></p>
+        <div class="dropdown-subitem-end">
+          <div class="end-item-base">
+            <p
+              class="max-w-280 text-truncate"
+              [innerHTML]="
+                search
+                  ? (shipperOption.address?.address || ''
+                    | highlightSearch: value())
+                  : shipperOption.address?.address
+              "
+            ></p>
+          </div>
+          <div class="end-item-hover">
+            <p>
+              {{ shipperOption.pickupCount }} Pickup |
+              {{ shipperOption.deliveryCount }} Delivery
+            </p>
+            <svg-icon name="cai-load" class="icon"></svg-icon>
+          </div>
+        </div>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Dispatch dropdown -->
+<ng-template #dispatchesRef>
+  @if (dropdownOptions().length) {
+    <button
+      tabindex="-1"
+      class="dropdown-item"
+      (pointerdown)="reset()"
+      [class]="{
+        selected: !selectedOption(),
+      }"
+    >
+      <p>Unassigned</p>
+      <div class="unassigned-ltl">
+        <p>{{ unassignedCount() }}</p>
+        <svg-icon name="cai-ltl-single" class="icon-sm"></svg-icon>
+      </div>
+    </button>
+    @for (
+      dispatchBoard of dropdownOptions();
+      track dispatchBoard.id;
+      let groupIndex = $index
+    ) {
+      <!-- Temporary variant since BE doesn't support boards -->
+      @let dispatchBoardOption = cast(dispatchBoard, "dispatchBoard")!;
+
+      @let isNoBoardsVariant =
+        dispatchBoardOption.dispatcher === "NOBOARDSVARIANT";
+      @if (dispatchBoardOption.count > 0) {
+        @if (!isNoBoardsVariant) {
+          @let isGroupFocused =
+            groupedNavigationState?.groupIndex === groupIndex &&
+            groupedNavigationState?.optionIndex === 0;
+          <button
+            tabindex="-1"
+            class="dropdown-item group-item"
+            (pointerdown)="fold(dispatchBoardOption.id, $event)"
+            [class]="{
+              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,
+              focused: isGroupFocused,
+            }"
+          >
+            <p>
+              {{
+                dispatchBoardOption.teamBoard
+                  ? "Team Board"
+                  : dispatchBoardOption.dispatcher
+              }}
+            </p>
+            <p class="counter">{{ dispatchBoardOption.count }}</p>
+            <svg-icon
+              name="cai-arrow-primary-up"
+              class="group-icon icon"
+            ></svg-icon>
+          </button>
+        }
+        @if (
+          dispatchBoardOption.dispatches &&
+          dispatchBoardOption.dispatches.length > 0
+        ) {
+          @for (
+            dispatch of dispatchBoardOption.dispatches;
+            track dispatch.id;
+            let optionIndex = $index
+          ) {
+            @let isOptionFocused =
+              groupedNavigationState?.groupIndex === groupIndex &&
+              groupedNavigationState?.optionIndex === optionIndex + 1;
+            <!-- +1 since optionIndex is 0 for the group item header -->
+            <button
+              tabindex="-1"
+              class="dropdown-item"
+              (pointerdown)="handleOption(dispatch, $event)"
+              [class]="{
+                selected:
+                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,
+                focused: isOptionFocused,
+              }"
+            >
+              <div class="dropdown-subitem truck-item">
+                <svg-icon
+                  class="truck-icon truck-trailer-icon-colors"
+                  [class]="dispatch.truck.truckType.logoName.slice(0, -4)"
+                  [name]="dispatch.truck.truckType.logoName.slice(0, -4)"
+                ></svg-icon>
+                <p
+                  class="truck-number"
+                  [innerHTML]="
+                    dispatch.truck.truckNumber | highlightSearch: value()
+                  "
+                ></p>
+              </div>
+              <div class="dropdown-subitem trailer-item">
+                @if (dispatch.trailer) {
+                  <svg-icon
+                    class="trailer-icon truck-trailer-icon-colors"
+                    [class]="dispatch.trailer.trailerType.logoName.slice(0, -4)"
+                    [name]="dispatch.trailer.trailerType.logoName.slice(0, -4)"
+                  ></svg-icon>
+                  <p
+                    class="trailer-number"
+                    [innerHTML]="
+                      dispatch.trailer.trailerNumber | highlightSearch: value()
+                    "
+                  ></p>
+                }
+              </div>
+              <div class="dropdown-subitem">
+                @if (dispatch.coDriver) {
+                  <svg-icon class="dispatch-icon" name="cai-people"></svg-icon>
+                  <p
+                    class="driver-name"
+                    [innerHTML]="
+                      dispatch.driver.firstName +
+                        ' & ' +
+                        dispatch.coDriver.firstName | highlightSearch: value()
+                    "
+                  ></p>
+                } @else {
+                  <cai-avatar
+                    [driver]="dispatch.driver"
+                    [size]="18"
+                    [inverse]="true"
+                    [hover]="false"
+                  ></cai-avatar>
+                  <p
+                    class="driver-name"
+                    [innerHTML]="
+                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName
+                        | highlightSearch: value()
+                    "
+                  ></p>
+                }
+              </div>
+              <div class="dropdown-subitem-end">
+                <div class="end-item-hover">
+                  <p>{{ dispatch.payType }}</p>
+                  <svg-icon name="cai-driver" class="icon-sm"></svg-icon>
+                </div>
+                <div class="end-item-base dispatch-ltl">
+                  <p>{{ dispatch.numberOfSingleLtlLoads }}</p>
+                  <svg-icon name="cai-ltl-single" class="icon-sm"></svg-icon>
+                </div>
+              </div>
+            </button>
+          }
+        } @else if (isNoBoardsVariant) {
+          <p class="dropdown-item no-results">No results</p>
+        }
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- ftl dispatch dropdown -->
+<ng-template #ftlDispatchRef>
+  @if (dropdownOptions().length) {
+    @for (
+      dispatchBoard of dropdownOptions();
+      track dispatchBoard.id;
+      let groupIndex = $index
+    ) {
+      @let dispatchBoardOption = cast(dispatchBoard, "dispatchBoard")!;
+      @let isGroupFocused =
+        groupedNavigationState?.groupIndex === groupIndex &&
+        groupedNavigationState?.optionIndex === 0;
+      @let isNoBoardsVariant =
+        dispatchBoardOption.dispatcher === "NOBOARDSVARIANT";
+      @if (dispatchBoardOption.count > 0) {
+        @if (!isNoBoardsVariant) {
+          <button
+            tabindex="-1"
+            class="dropdown-item group-item"
+            (pointerdown)="fold(dispatchBoardOption.id, $event)"
+            [class]="{
+              unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,
+              focused: isGroupFocused,
+            }"
+          >
+            <p>
+              {{
+                dispatchBoardOption.teamBoard
+                  ? "Team Board"
+                  : dispatchBoardOption.dispatcher
+              }}
+            </p>
+            <p class="counter">{{ dispatchBoardOption.count }}</p>
+            <svg-icon
+              name="cai-arrow-primary-up"
+              class="group-icon icon"
+            ></svg-icon>
+          </button>
+        }
+        @if (
+          dispatchBoardOption.dispatches &&
+          dispatchBoardOption.dispatches.length > 0
+        ) {
+          @for (
+            dispatch of dispatchBoardOption.dispatches;
+            track dispatch.id;
+            let optionIndex = $index
+          ) {
+            @let isOptionFocused =
+              groupedNavigationState?.groupIndex === groupIndex &&
+              groupedNavigationState?.optionIndex === optionIndex + 1;
+            <!-- +1 since optionIndex is 0 for the group item header -->
+            <button
+              class="dropdown-item"
+              (pointerdown)="handleOption(dispatch, $event)"
+              [class]="{
+                selected:
+                  cast(selectedOption(), 'dispatch')?.id === dispatch.id,
+                focused: isOptionFocused,
+              }"
+            >
+              <div class="dropdown-subitem truck-item">
+                <svg-icon
+                  class="truck-icon truck-trailer-icon-colors"
+                  [class]="dispatch.truck.truckType.logoName.slice(0, -4)"
+                  [name]="dispatch.truck.truckType.logoName.slice(0, -4)"
+                ></svg-icon>
+                <p
+                  class="truck-number"
+                  [innerHTML]="
+                    dispatch.truck.truckNumber | highlightSearch: value()
+                  "
+                ></p>
+              </div>
+              <div class="dropdown-subitem trailer-item">
+                @if (dispatch.trailer) {
+                  <svg-icon
+                    class="trailer-icon truck-trailer-icon-colors"
+                    [class]="dispatch.trailer.trailerType.logoName.slice(0, -4)"
+                    [name]="dispatch.trailer.trailerType.logoName.slice(0, -4)"
+                  ></svg-icon>
+                  <p
+                    class="trailer-number"
+                    [innerHTML]="
+                      dispatch.trailer.trailerNumber | highlightSearch: value()
+                    "
+                  ></p>
+                }
+              </div>
+              <div class="dropdown-subitem">
+                @if (dispatch.coDriver) {
+                  <svg-icon class="dispatch-icon" name="cai-people"></svg-icon>
+                  <p
+                    class="driver-name"
+                    [innerHTML]="
+                      dispatch.driver.firstName +
+                        ' & ' +
+                        dispatch.coDriver.firstName | highlightSearch: value()
+                    "
+                  ></p>
+                } @else {
+                  <cai-avatar
+                    [driver]="dispatch.driver"
+                    [size]="18"
+                    [inverse]="true"
+                    [hover]="false"
+                  ></cai-avatar>
+                  <p
+                    class="driver-name"
+                    [innerHTML]="
+                      dispatch.driver.firstName + ' ' + dispatch.driver.lastName
+                        | highlightSearch: value()
+                    "
+                  ></p>
+                }
+              </div>
+              <div class="dropdown-subitem-end">
+                <div class="end-item-hover">
+                  <!-- Load Status -->
+                  @if (dispatch.status?.statusString) {
+                    <div
+                      class="dispatch-status"
+                      [class]="
+                        'status-' +
+                        dispatch.status?.statusString
+                          ?.toLowerCase()
+                          ?.replaceAll(' ', '')
+                          ?.replaceAll('.', '')
+                      "
+                    >
+                      @if (
+                        dispatch.status?.statusString?.toLowerCase() ===
+                        "repair"
+                      ) {
+                        <p class="status-block blue">D</p>
+                        <p class="status-block green">L</p>
+                      }
+                      {{ dispatch.status?.statusString }}
+                      @if (
+                        dispatch.status?.statusString?.toLowerCase() ===
+                        "repair"
+                      ) {
+                        <p class="status-block green">P</p>
+                        <p class="status-block orange">D</p>
+                      }
+                      @if (dispatch.status?.statusCheckInNumber) {
+                        <p class="status-block">
+                          {{ dispatch.status?.statusCheckInNumber }}
+                        </p>
+                      }
+                    </div>
+                    <p class="dispatch-separator">|</p>
+                  }
+                  <p class="dispatch-load-count">
+                    <!-- Pending Load Count -->
+                    <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->
+                    0
+                  </p>
+                  <svg-icon name="cai-load" class="icon-sm"></svg-icon>
+                </div>
+                <div class="end-item-base">
+                  <p>{{ dispatch.payType }}</p>
+                  <svg-icon name="cai-driver" class="icon-sm"></svg-icon>
+                </div>
+              </div>
+            </button>
+          }
+        } @else if (isNoBoardsVariant) {
+          <p class="dropdown-item no-results">No results</p>
+        }
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #splitDriverRef>
+  @if (dropdownOptions().length) {
+    @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {
+      @let driverBoard = cast(splitDriverBoard, "splitDriverBoard")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item group-item"
+        (pointerdown)="fold(driverBoard.id, $event)"
+        [class]="{
+          unfolded: (driverBoard.drivers?.length ?? 0) > 0,
+        }"
+      >
+        <p>
+          {{
+            driverBoard.isTeamBoard ? "Team Board" : driverBoard.dispatcherName
+          }}
+        </p>
+        <!-- TODO: Change to count once BE is fixed -->
+        <p class="counter">{{ driverBoard.drivers?.length || 0 }}</p>
+        <svg-icon
+          name="cai-arrow-primary-up"
+          class="group-icon icon"
+        ></svg-icon>
+      </button>
+      @for (driver of driverBoard.drivers || []; track driver.id) {
+        @let driverOption = cast(driver, "splitDriver")!;
+        <button
+          class="dropdown-item"
+          (pointerdown)="handleOption(driverOption, $event)"
+          [class]="{
+            selected:
+              cast(selectedOption(), 'splitDriver')?.id === driverOption.id,
+          }"
+        >
+          <div class="dropdown-subitem">
+            <div class="dropdown-avatar">
+              <cai-avatar
+                [driver]="driverOption"
+                [size]="18"
+                [inverse]="true"
+                [hover]="false"
+              ></cai-avatar>
+            </div>
+            <p
+              class="driver-name"
+              [innerHTML]="
+                driverOption.firstName + ' ' + driverOption.lastName
+                  | highlightSearch: value()
+              "
+            ></p>
+          </div>
+          <div class="dropdown-subitem-end">
+            <div class="end-item-hover">
+              @let dispatchStatus =
+                driverOption.dispatchStatus?.statusValue?.name;
+              @if (dispatchStatus) {
+                <div
+                  class="dispatch-status"
+                  [class]="
+                    'status-' +
+                    dispatchStatus
+                      ?.toLowerCase()
+                      ?.replaceAll(' ', '')
+                      ?.replaceAll('.', '')
+                  "
+                >
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block blue">D</p>
+                    <p class="status-block green">L</p>
+                  }
+                  {{ dispatchStatus }}
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block green">P</p>
+                    <p class="status-block orange">D</p>
+                  }
+                  @if (driverOption.dispatchStatus?.statusCheckInNumber) {
+                    <p class="status-block">
+                      {{ driverOption.dispatchStatus?.statusCheckInNumber }}
+                    </p>
+                  }
+                </div>
+                <p class="dispatch-separator">|</p>
+              }
+              <p class="dispatch-load-count">
+                {{ driverOption.pendingLoadsCount }}
+              </p>
+              <svg-icon name="cai-load" class="icon-sm"></svg-icon>
+            </div>
+            <div class="end-item-base">
+              <p>{{ driverOption.payTypeValue }}</p>
+            </div>
+          </div>
+        </button>
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #splitTruckRef>
+  @if (dropdownOptions().length) {
+    @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {
+      @let truckBoard = cast(splitTruckBoard, "splitTruckBoard")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item group-item"
+        (pointerdown)="fold(truckBoard.id, $event)"
+        [class]="{
+          unfolded: (truckBoard.trucks?.length ?? 0) > 0,
+        }"
+      >
+        <p>
+          {{
+            truckBoard.isTeamBoard ? "Team Board" : truckBoard.dispatcherName
+          }}
+        </p>
+        <!-- TODO: Change to count once BE is fixed -->
+        <p class="counter">{{ truckBoard.trucks?.length || 0 }}</p>
+        <svg-icon
+          name="cai-arrow-primary-up"
+          class="group-icon icon"
+        ></svg-icon>
+      </button>
+      @for (truck of truckBoard.trucks || []; track truck.id) {
+        @let truckOption = cast(truck, "splitTruck")!;
+        <button
+          class="dropdown-item"
+          (pointerdown)="handleOption(truckOption, $event)"
+          [class]="{
+            selected:
+              cast(selectedOption(), 'splitTruck')?.id === truckOption.id,
+          }"
+        >
+          <div class="dropdown-subitem truck-item">
+            <svg-icon
+              class="truck-icon"
+              [style.--truck-color]="truckOption.color?.code || ''"
+              [name]="truckOption.truckType.logoName.slice(0, -4)"
+            ></svg-icon>
+            <p
+              class="truck-number"
+              [innerHTML]="truckOption.truckNumber | highlightSearch: value()"
+            ></p>
+          </div>
+          <div class="dropdown-subitem-end">
+            <div class="end-item-hover">
+              @let dispatchStatus =
+                truckOption.dispatchStatus?.statusValue?.name;
+              @if (dispatchStatus) {
+                <div
+                  class="dispatch-status"
+                  [class]="
+                    'status-' +
+                    dispatchStatus
+                      ?.toLowerCase()
+                      ?.replaceAll(' ', '')
+                      ?.replaceAll('.', '')
+                  "
+                >
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block blue">D</p>
+                    <p class="status-block green">L</p>
+                  }
+                  {{ dispatchStatus }}
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block green">P</p>
+                    <p class="status-block orange">D</p>
+                  }
+                  @if (truckOption.dispatchStatus?.statusCheckInNumber) {
+                    <p class="status-block">
+                      {{ truckOption.dispatchStatus?.statusCheckInNumber }}
+                    </p>
+                  }
+                </div>
+                <p class="dispatch-separator">|</p>
+              }
+              <p class="dispatch-load-count">
+                {{ truckOption.pendingLoadsCount }}
+              </p>
+              <svg-icon name="cai-load" class="icon-sm"></svg-icon>
+            </div>
+            <div class="end-item-base">
+              @if (
+                truckOption.location?.city &&
+                truckOption.location?.stateShortName
+              ) {
+                <p>
+                  {{ truckOption.location?.city }},
+                  {{ truckOption.location?.stateShortName }}
+                </p>
+              }
+            </div>
+          </div>
+        </button>
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #splitTrailerRef>
+  @if (dropdownOptions().length) {
+    @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {
+      @let trailerBoard = cast(splitTrailerBoard, "splitTrailerBoard")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item group-item"
+        (pointerdown)="fold(trailerBoard.id, $event)"
+        [class]="{
+          unfolded: (trailerBoard.trailers?.length ?? 0) > 0,
+        }"
+      >
+        <p>
+          {{
+            trailerBoard.isTeamBoard
+              ? "Team Board"
+              : trailerBoard.dispatcherName
+          }}
+        </p>
+        <!-- TODO: Change to count once BE is fixed -->
+        <p class="counter">{{ trailerBoard.trailers?.length || 0 }}</p>
+        <svg-icon
+          name="cai-arrow-primary-up"
+          class="group-icon icon"
+        ></svg-icon>
+      </button>
+      @for (trailer of trailerBoard.trailers || []; track trailer.id) {
+        @let trailerOption = cast(trailer, "splitTrailer")!;
+        <button
+          class="dropdown-item"
+          (pointerdown)="handleOption(trailerOption, $event)"
+          [class]="{
+            selected:
+              cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,
+          }"
+        >
+          <div class="dropdown-subitem trailer-item">
+            <svg-icon
+              class="trailer-icon"
+              [style.--trailer-color]="trailerOption.color?.code || ''"
+              [name]="trailerOption.trailerType.logoName.slice(0, -4)"
+            ></svg-icon>
+            <p
+              class="trailer-number"
+              [innerHTML]="
+                trailerOption.trailerNumber | highlightSearch: value()
+              "
+            ></p>
+          </div>
+          <div class="dropdown-subitem-end">
+            <div class="end-item-hover">
+              @let dispatchStatus =
+                trailerOption.dispatchStatus?.statusValue?.name;
+              @if (dispatchStatus) {
+                <div
+                  class="dispatch-status"
+                  [class]="
+                    'status-' +
+                    dispatchStatus
+                      ?.toLowerCase()
+                      ?.replaceAll(' ', '')
+                      ?.replaceAll('.', '')
+                  "
+                >
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block blue">D</p>
+                    <p class="status-block green">L</p>
+                  }
+                  {{ dispatchStatus }}
+                  @if (dispatchStatus?.toLowerCase() === "repair") {
+                    <p class="status-block green">P</p>
+                    <p class="status-block orange">D</p>
+                  }
+                  @if (trailerOption.dispatchStatus?.statusCheckInNumber) {
+                    <p class="status-block">
+                      {{ trailerOption.dispatchStatus?.statusCheckInNumber }}
+                    </p>
+                  }
+                </div>
+                <p class="dispatch-separator">|</p>
+              }
+              <p class="dispatch-load-count">
+                {{ trailerOption.pendingLoadsCount }}
+              </p>
+              <svg-icon name="cai-load" class="icon-sm"></svg-icon>
+            </div>
+            <div class="end-item-base">
+              @if (
+                trailerOption.location?.city &&
+                trailerOption.location?.stateShortName
+              ) {
+                <p>
+                  {{ trailerOption.location?.city }},
+                  {{ trailerOption.location?.stateShortName }}
+                </p>
+              }
+            </div>
+          </div>
+        </button>
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #tollRef>
+  @if (dropdownOptions().length) {
+    @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {
+      @let tollOption = cast(toll, "tollOption")!;
+      @let isGroupFocused =
+        groupedNavigationState?.groupIndex === groupIndex &&
+        groupedNavigationState?.optionIndex === 0;
+      <button
+        tabindex="-1"
+        class="dropdown-item group-item pe-none"
+        [class]="{
+          unfolded: tollOption.tollTransponders?.length || 0 > 0,
+          focused: isGroupFocused,
+        }"
+      >
+        <p>
+          {{ tollOption.groupName }}
+        </p>
+      </button>
+      @let tollTransponders = tollOption.tollTransponders || [];
+      @for (
+        tollTransponder of tollTransponders;
+        track tollTransponder.id;
+        let optionIndex = $index
+      ) {
+        @let isOptionFocused =
+          groupedNavigationState?.groupIndex === groupIndex &&
+          groupedNavigationState?.optionIndex === optionIndex + 1;
+        <!-- +1 since optionIndex is 0 for the group item header -->
+        <button
+          class="dropdown-item"
+          (pointerdown)="handleOption(tollTransponder, $event)"
+          [class]="{
+            selected:
+              cast(selectedOption(), 'tollTransponderOption')?.id ===
+              tollTransponder.id,
+            focused: isOptionFocused,
+          }"
+        >
+          <p
+            class="dropdown-content-with-icon"
+            [innerHTML]="
+              search
+                ? (tollTransponder.name || '' | highlightSearch: value())
+                : tollTransponder.name
+            "
+          ></p>
+          <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+        </button>
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Dispatcher dropdown -->
+
+<ng-template #dispatcherRef>
+  @if (dropdownOptions().length) {
+    @for (dispatcher of dropdownOptions(); track $index; let index = $index) {
+      @let dispatcherOption = cast(dispatcher, "dispatcher")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ dispatcherOption.id }}"
+        (pointerdown)="handleOption(dispatcherOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <cai-avatar
+          [driver]="{
+            id: dispatcherOption?.id || 0,
+            firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',
+            lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',
+            avatarFile: dispatcherOption?.avatarFile,
+            colorFlag: dispatcherOption?.colorFlag,
+          }"
+          [rounded]="!config().squareAvatar"
+          [hover]="false"
+        ></cai-avatar>
+        <p
+          class="dropdown-content-hazardous"
+          [innerHTML]="
+            search
+              ? (dispatcherOption.fullName || '' | highlightSearch: value())
+              : dispatcherOption.fullName
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #truckRef>
+  @if (dropdownOptions().length) {
+    @for (truck of dropdownOptions(); track $index; let index = $index) {
+      @let truckOption = cast(truck, "truckOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ truckOption.id }}"
+        (pointerdown)="handleOption(truckOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'truckOption')?.id === truckOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (truckOption.name || '' | highlightSearch: value())
+              : truckOption.name
+          "
+        ></p>
+        <svg-icon
+          class="truck-trailer-option truck-trailer-icon-colors"
+          [class]="truckOption.logoName.slice(0, -4)"
+          [name]="truckOption.logoName.slice(0, -4)"
+        ></svg-icon>
+        <svg-icon
+          name="cai-checkmark"
+          class="dropdown-item-icon no-margin"
+        ></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #trailerRef>
+  @if (dropdownOptions().length) {
+    @for (truck of dropdownOptions(); track $index; let index = $index) {
+      @let trailerOption = cast(truck, "trailerOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ trailerOption.id }}"
+        (pointerdown)="handleOption(trailerOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (trailerOption.name || '' | highlightSearch: value())
+              : trailerOption.name
+          "
+        ></p>
+
+        <svg-icon
+          class="truck-trailer-option truck-trailer-icon-colors"
+          [class]="trailerOption.logoName.slice(0, -4)"
+          [name]="trailerOption.logoName.slice(0, -4)"
+        ></svg-icon>
+        <svg-icon
+          name="cai-checkmark"
+          class="dropdown-item-icon no-margin"
+        ></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #providerRef>
+  @if (dropdownOptions().length) {
+    @for (provider of dropdownOptions(); track $index; let index = $index) {
+      @let providerOption = cast(provider, "provider")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ providerOption?.id }}"
+        (pointerdown)="handleOption(providerOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'provider')?.id === providerOption?.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <svg-icon
+          class="full-icon"
+          [name]="'cai-' + providerOption?.name?.toLowerCase()"
+        ></svg-icon>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- Hazardous dropdown -->
+<ng-template #hazardousRef>
+  @if (dropdownOptions().length) {
+    @for (hazardous of dropdownOptions(); track $index; let index = $index) {
+      @let hazardousOption = cast(hazardous, "hazardous")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ hazardousOption.id }}"
+        (pointerdown)="handleOption(hazardousOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <svg-icon [name]="hazardousOption.logoName?.slice(0, -4)"></svg-icon>
+        <p
+          class="dropdown-content-hazardous"
+          [innerHTML]="
+            search
+              ? (hazardousOption.description || '' | highlightSearch: value())
+              : hazardousOption.description
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #pmRef>
+  @if (dropdownOptions().length) {
+    @for (pm of dropdownOptions(); track $index; let index = $index) {
+      @let pmOption = cast(pm, "pmOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ pmOption.id }}"
+        (pointerdown)="handleOption(pmOption, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <svg-icon
+          class="icon"
+          [name]="pmOption.title | remapPmIcons"
+        ></svg-icon>
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (pmOption.title || '' | highlightSearch: value())
+              : pmOption.title
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #colorRef>
+  @if (dropdownOptions().length) {
+    @for (color of dropdownOptions(); track $index; let index = $index) {
+      @let colorOption = cast(color, "colorOption")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item color-item"
+        id="option-{{ colorOption.id }}"
+        (pointerdown)="handleOption(colorOption, $event)"
+        [class]="{
+          selected:
+            cast(selectedOption(), 'colorOption')?.id === colorOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <svg-icon
+          class="icon cai-color"
+          [name]="'cai-color'"
+          [style.--color]="colorOption?.code"
+          [style.--hover-color]="colorOption?.hoverCode"
+        ></svg-icon>
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (colorOption.name || '' | highlightSearch: value())
+              : colorOption.name
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #stateRef>
+  @if (dropdownOptions().length) {
+    @for (state of dropdownOptions(); track $index; let index = $index) {
+      @let stateOption = cast(state, "state")!;
+      <button
+        tabindex="-1"
+        class="dropdown-item"
+        id="option-{{ stateOption.id }}"
+        (pointerdown)="handleOption(stateOption, $event)"
+        [class]="{
+          selected: cast(selectedOption(), 'state')?.id === stateOption.id,
+          focused: focusedOptionIndex === index,
+        }"
+      >
+        <svg-icon
+          class="icon"
+          [name]="
+            'cai-' +
+            stateOption?.countryType?.name?.toLowerCase() +
+            '-' +
+            stateOption?.stateShortName?.toLowerCase()
+          "
+        ></svg-icon>
+        <p
+          class="dropdown-content-with-icon"
+          [innerHTML]="
+            search
+              ? (stateOption.stateShortName +
+                  ' ' +
+                  (config().fullState
+                    ? ' (' + stateOption?.stateName + ')'
+                    : '') || '' | highlightSearch: value())
+              : stateOption.stateShortName +
+                ' ' +
+                (config().fullState ? ' (' + stateOption?.stateName + ')' : '')
+          "
+        ></p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </button>
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<ng-template #fuelStopTransactionRef>
+  @if (dropdownOptions().length) {
+    @for (
+      franchise of dropdownOptions();
+      track franchise.id;
+      let groupIndex = $index
+    ) {
+      @let isGroupFocused =
+        groupedNavigationState?.groupIndex === groupIndex &&
+        groupedNavigationState?.optionIndex === 0;
+      @let franchiseOption = cast(franchise, "franchise")!;
+      @if (franchiseOption?.count !== null) {
+        <div
+          class="dropdown-group"
+          [class.no-items]="!franchiseOption?.count"
+          [class]="{
+            active: openGroup() === franchiseOption.id,
+          }"
+          [style.--max-height]="
+            openGroup() === franchiseOption.id
+              ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'
+              : '26px'
+          "
+        >
+          <button
+            tabindex="-1"
+            class="dropdown-item group-item"
+            (pointerdown)="fold(franchiseOption.id, $event, franchiseOption)"
+            [class]="{
+              unfolded: openGroup() === franchiseOption.id,
+              focused: isGroupFocused,
+            }"
+          >
+            <p
+              [innerHTML]="
+                franchiseOption?.businessName || '' | highlightSearch: value()
+              "
+            ></p>
+            <p class="counter">{{ franchiseOption.count }}</p>
+            <svg-icon
+              name="cai-arrow-primary-up"
+              class="group-icon icon"
+            ></svg-icon>
+          </button>
+          @if (openGroup() === franchiseOption.id) {
+            @if (franchiseOption.fuelStopStores?.length || 0 > 0) {
+              @for (
+                fuelStopStore of franchiseOption.fuelStopStores;
+                track fuelStopStore.id
+              ) {
+                @let isOptionFocused =
+                  groupedNavigationState?.groupIndex === groupIndex &&
+                  groupedNavigationState?.optionIndex === $index + 1;
+                <!-- +1 since optionIndex is 0 for the group item header -->
+                <button
+                  tabindex="-1"
+                  class="dropdown-item fuel-stop-transaction-store"
+                  [class]="{
+                    focused: isOptionFocused,
+                  }"
+                  (pointerdown)="handleOption(fuelStopStore, $event)"
+                >
+                  <p
+                    [innerHTML]="
+                      fuelStopStore?.store ?? '' | highlightSearch: value()
+                    "
+                  ></p>
+                  @let city = fuelStopStore?.address?.city ?? "";
+                  @let state = fuelStopStore?.address?.stateShortName ?? "";
+                  @let zip = fuelStopStore?.address?.zipCode ?? "";
+                  <p
+                    class="fuel-stop-transaction-store-address"
+                    [innerHTML]="
+                      city + (state || zip ? ', ' : '') + state + ' ' + zip
+                        | highlightSearch: value()
+                    "
+                  ></p>
+
+                  @if (fuelStopStore?.["favourite"]) {
+                    <svg-icon
+                      name="cai-favorite"
+                      class="favorite-icon"
+                    ></svg-icon>
+                  }
+                </button>
+              }
+              <!-- Infinite scroll trigger - emits event when item comes into view -->
+              <div
+                class="dropdown-infinite-scroll-item"
+                caiIntersectionObserver
+                [threshold]="0.1"
+                (inView)="onDropdownScrolledToBottom(true)"
+              ></div>
+            } @else {
+              <p class="dropdown-item no-results">No results</p>
+            }
+          }
+        </div>
+      } @else {
+        <button
+          tabindex="-1"
+          class="dropdown-item"
+          [class.focused]="
+            groupedNavigationState?.groupIndex === groupIndex &&
+            groupedNavigationState?.optionIndex === 0
+          "
+          (pointerdown)="handleOption(franchiseOption, $event)"
+        >
+          <p
+            class="fuel-stop-transaction-nostore"
+            [innerHTML]="
+              franchiseOption?.businessName || '' | highlightSearch: value()
+            "
+          ></p>
+        </button>
+      }
+    }
+  } @else {
+    <p class="dropdown-item no-results">No results</p>
+  }
+</ng-template>
+
+<!-- #endregion -->
+
+<!-- #region Selected options -->
+
+<!-- selected dispatch -->
+<ng-template #selectedDispatchRef>
+  @let dispatchOption = cast(selectedOption(), "dispatch");
+  @if (dispatchOption && !inputRef.value && !isAdding()) {
+    <div class="dropdown-selected">
+      <div class="dropdown-subitem truck-item">
+        <svg-icon
+          class="truck-icon"
+          [name]="dispatchOption!.truck.truckType.logoName.slice(0, -4)"
+        ></svg-icon>
+        <p class="truck-number">
+          {{ dispatchOption!.truck.truckNumber }}
+        </p>
+      </div>
+      <div class="dropdown-subitem trailer-item">
+        @if (dispatchOption!.trailer) {
+          <svg-icon
+            class="trailer-icon"
+            [name]="
+              cast(
+                selectedOption(),
+                'dispatch'
+              )!.trailer?.trailerType?.logoName?.slice(0, -4)
+            "
+          ></svg-icon>
+          <p class="trailer-number">
+            {{ dispatchOption!.trailer?.trailerNumber }}
+          </p>
+        }
+      </div>
+      <div class="dropdown-subitem">
+        @if (dispatchOption!.coDriver) {
+          <svg-icon class="dispatch-icon" name="cai-people"></svg-icon>
+          <p class="driver-name">
+            {{
+              dispatchOption!.driver.firstName +
+                " & " +
+                dispatchOption!.coDriver?.firstName
+            }}
+          </p>
+        } @else {
+          <cai-avatar
+            [driver]="dispatchOption!.driver"
+            [size]="18"
+            [hover]="false"
+          ></cai-avatar>
+          <p class="driver-name">
+            {{
+              dispatchOption!.driver.firstName +
+                " " +
+                dispatchOption!.driver.lastName
+            }}
+          </p>
+        }
+      </div>
+      <p class="selected-end-item">
+        {{ dispatchOption!.payType }}
+      </p>
+    </div>
+  } @else {
+    @if (!inputRef.value && this.config().dropdown == "dispatch") {
+      <p class="dropdown-selected">Unassigned</p>
+    }
+  }
+</ng-template>
+
+<!-- selected broker -->
+<ng-template #selectedBrokerRef>
+  @let brokerOption = cast(selectedOption(), "broker");
+  @if (brokerOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      @if ((brokerOption!.availableCredit || 0) < 0) {
+        <svg-icon name="cai-status-warning-lite" class="icon fraud"></svg-icon>
+      }
+      <p class="dropdown-selected-content">{{ brokerOption!.businessName }}</p>
+      <div class="selected-end-item">
+        @if (!brokerOption!.creditLimit) {
+          <p>Unlimited</p>
+        } @else {
+          <p>
+            {{ brokerOption!.availableCredit || 0 | currency }}
+          </p>
+          <div
+            class="progress-bar"
+            [style.--progress]="
+              (
+                brokerOption!
+                | brokerProgress: brokerOption!.dnu || brokerOption!.ban
+              ).activePercentageOfPaid + '%'
+            "
+            [class]="
+              (
+                brokerOption!
+                | brokerProgress: brokerOption!.dnu || brokerOption!.ban
+              ).status
+            "
+          ></div>
+        }
+      </div>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedContactRef>
+  @let contactOption = cast(selectedOption(), "contact");
+  @if (contactOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="dropdown-selected-content">{{ contactOption?.contactName }}</p>
+      <div class="selected-end-item">
+        <p>{{ contactOption?.phone }}</p>
+      </div>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedShipperRef>
+  @let shipperOption = cast(selectedOption(), "shipper");
+  @if (shipperOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="dropdown-selected-content">{{ shipperOption?.businessName }}</p>
+      <div class="selected-end-item">
+        <p>{{ shipperOption?.address?.address }}</p>
+      </div>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedOwnerRef>
+  @let ownerOption = cast(selectedOption(), "owner");
+  @if (ownerOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="owner-ein">{{ ownerOption?.ein }}</p>
+      <p class="">{{ ownerOption?.name }}</p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedFuelcardRef>
+  @let fuelcardOption = cast(selectedOption(), "fuelCard");
+  @if (fuelcardOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="fuelcard-number">
+        {{ fuelcardOption?.number }}
+      </p>
+      <p class="fuelcard-brand">
+        {{ fuelcardOption?.brand }}
+      </p>
+      <p class="">
+        {{ fuelcardOption?.account }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedBankRef>
+  @let bankOption = cast(selectedOption(), "bank");
+  @if (bankOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      @if (bankOption?.logoName) {
+        <svg-icon
+          class="option-icon full-size"
+          [name]="bankOption?.logoName?.slice(0, -4) || ''"
+        ></svg-icon>
+      } @else {
+        <p class="dropdown-selected-content">{{ bankOption?.name }}</p>
+      }
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedProviderRef>
+  @let providerOption = cast(selectedOption(), "provider");
+  @if (providerOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon full-size"
+        [name]="'cai-' + providerOption?.name?.toLowerCase()"
+      ></svg-icon>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedMakeRef>
+  @let makeOption = cast(selectedOption(), "make");
+  @if (makeOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      @if (makeOption?.logoName) {
+        <svg-icon
+          class="option-icon full-size"
+          [name]="makeOption?.logoName?.slice(0, -4) || ''"
+        ></svg-icon>
+      } @else {
+        <p class="dropdown-selected-content">{{ makeOption?.name }}</p>
+      }
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedStateRef>
+  @let stateOption = cast(selectedOption(), "state");
+  @if (stateOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon"
+        [name]="
+          'cai-' +
+          stateOption?.countryType?.name?.toLowerCase() +
+          '-' +
+          stateOption?.stateShortName?.toLowerCase()
+        "
+      ></svg-icon>
+      <p class="dropdown-selected-content">
+        {{ stateOption?.stateShortName }}
+        {{ config().fullState ? " (" + stateOption?.stateName + ")" : "" }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedDispatcherRef>
+  @let dispatcherOption = cast(selectedOption(), "dispatcher");
+  @if (dispatcherOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <cai-avatar
+        [driver]="{
+          id: dispatcherOption?.id || 0,
+          firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',
+          lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',
+          avatarFile: dispatcherOption?.avatarFile,
+          colorFlag: dispatcherOption?.colorFlag,
+        }"
+        [rounded]="!config().squareAvatar"
+      ></cai-avatar>
+      <p class="dropdown-selected-content">{{ dispatcherOption?.fullName }}</p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedTruckRef>
+  @let truckOption = cast(selectedOption(), "truckOption");
+  @if (truckOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon"
+        [name]="truckOption?.logoName?.slice(0, -4)"
+      ></svg-icon>
+      <p class="dropdown-selected-content">{{ truckOption?.name }}</p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedTrailerRef>
+  @let trailerOption = cast(selectedOption(), "trailerOption");
+  @if (trailerOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon"
+        [name]="trailerOption?.logoName?.slice(0, -4)"
+      ></svg-icon>
+      <p class="dropdown-selected-content">{{ trailerOption?.name }}</p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedHazardousRef>
+  @let hazardousOption = cast(selectedOption(), "hazardous");
+  @if (hazardousOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="hazard-icon"
+        [name]="hazardousOption?.logoName?.slice(0, -4)"
+      ></svg-icon>
+      <p class="dropdown-selected-content dropdown-selected-hazardous">
+        {{ hazardousOption?.description }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedPmRef>
+  @let pmOption = cast(selectedOption(), "pmOption");
+  @if (pmOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon"
+        [name]="pmOption?.title | remapPmIcons"
+      ></svg-icon>
+      <p class="dropdown-selected-content">
+        {{ pmOption?.title }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedColorRef>
+  @let colorOption = cast(selectedOption(), "colorOption");
+  @if (colorOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <svg-icon
+        class="option-icon cai-color"
+        [name]="'cai-color'"
+        [style.--color]="colorOption?.code"
+        [style.--hover-color]="colorOption?.hoverCode"
+      ></svg-icon>
+      <p class="dropdown-selected-content">
+        {{ colorOption?.name }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedTollRef>
+  @let tollOption = cast(selectedOption(), "tollTransponderOption");
+  @if (tollOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <p class="dropdown-selected-content">
+        {{ tollOption?.name }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedSplitDriverRef>
+  @let splitDriverOption = cast(selectedOption(), "splitDriver");
+  @if (splitDriverOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <div class="dropdown-selected-content">
+        <div class="dropdown-subitem">
+          <cai-avatar [driver]="splitDriverOption" [size]="18"></cai-avatar>
+          <p class="driver-name">
+            {{ splitDriverOption.firstName + " " + splitDriverOption.lastName }}
+          </p>
+        </div>
+      </div>
+
+      <p class="selected-end-item">
+        {{ splitDriverOption.payTypeValue }}
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedSplitTruckRef>
+  @let splitTruckOption = cast(selectedOption(), "splitTruck");
+  @if (splitTruckOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <div class="dropdown-selected-content">
+        <div class="dropdown-subitem trailer-item">
+          <svg-icon
+            class="trailer-icon"
+            [name]="splitTruckOption!.truckType.logoName.slice(0, -4)"
+          ></svg-icon>
+          <p class="trailer-number">
+            {{ splitTruckOption!.truckNumber }}
+          </p>
+        </div>
+      </div>
+      <p class="selected-end-item">
+        @if (
+          splitTruckOption!.location?.city &&
+          splitTruckOption!.location?.stateShortName
+        ) {
+          {{ splitTruckOption!.location?.city }},
+          {{ splitTruckOption!.location?.stateShortName }}
+        }
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #selectedSplitTrailerRef>
+  @let splitTrailerOption = cast(selectedOption(), "splitTrailer");
+  @if (splitTrailerOption && !inputRef.value) {
+    <div class="dropdown-selected">
+      <div class="dropdown-selected-content">
+        <div class="dropdown-subitem truck-item">
+          <svg-icon
+            class="truck-icon"
+            [name]="splitTrailerOption!.trailerType.logoName.slice(0, -4)"
+          ></svg-icon>
+          <p class="truck-number">
+            {{ splitTrailerOption!.trailerNumber }}
+          </p>
+        </div>
+      </div>
+      <p class="selected-end-item">
+        @if (
+          splitTrailerOption!.location?.city &&
+          splitTrailerOption!.location?.stateShortName
+        ) {
+          {{ splitTrailerOption!.location?.city }},
+          {{ splitTrailerOption!.location?.stateShortName }}
+        }
+      </p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #passwordTooltip>
+  {{ visible() ? "Hide" : "Show" }}
+</ng-template>
+
+<ng-template #errorTooltip>
+  @if (
+    (config().errorBehavior === "floating" ||
+      (config().errorBehavior === "static" && hasText()) ||
+      config().inTable) &&
+    invalid &&
+    !dropdown.isOpen()
+  ) {
+    {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}
+  }
+</ng-template>
+
+<!-- #endregion -->