carriera-intern 0.0.0 → 1.1.76

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

@@ -1,2669 +0,0 @@
-<!-- #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 -->