carriera-intern 1.1.77 → 1.1.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4027,7 +4027,7 @@ class InputComponent {
|
|
|
4027
4027
|
}
|
|
4028
4028
|
}
|
|
4029
4029
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: InputComponent, isStandalone: true, selector: "cai-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, preselectedOptions: { classPropertyName: "preselectedOptions", publicName: "preselectedOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hideValidation: { classPropertyName: "hideValidation", publicName: "hideValidation", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, preselectedUnit: { classPropertyName: "preselectedUnit", publicName: "preselectedUnit", isSignal: true, isRequired: false, transformFunction: null }, unassignedCount: { classPropertyName: "unassignedCount", publicName: "unassignedCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocused: "onFocused", onReset: "onReset", onValueChange: "onValueChange", onOptionAdded: "onOptionAdded", onAdd: "onAdd", onSelectionChange: "onSelectionChange", onSelectedObject: "onSelectedObject", onSelectedGroup: "onSelectedGroup", onClear: "onClear", onAutofill: "onAutofill", onScrolledToBottom: "onScrolledToBottom", onScrolledToBottomGroup: "onScrolledToBottomGroup", onSearch: "onSearch", onValueAdded: "onValueAdded", onRemove: "onRemove", onHoverRemove: "onHoverRemove" }, host: { listeners: { "realValueChange": "onRealValueChange($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }, { propertyName: "PasswordDirective", first: true, predicate: PasswordDirective, descendants: true }, { propertyName: "NumberFormatDirective", first: true, predicate: NumberFormatDirective, descendants: true }, { propertyName: "MaskDirective", first: true, predicate: MaskDirective, descendants: true }], ngImport: i0, template: "<!-- #region Variables -->\r\n@let valid =\r\n ngControl?.valid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let invalid =\r\n ngControl?.invalid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let subcontent =\r\n config().subcontent ||\r\n (config().dropdown === \"subcontent\" &&\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\r\n\r\n@let name = config().name;\r\n@let password = config().type === \"password\" || config().type === \"account\";\r\n\r\n@let optionLabel = this.config().optionLabel || \"label\";\r\n@let dropdownType = this.config().dropdown;\r\n\r\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\r\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\r\n\r\n@let tooltipClass =\r\n config().inverse\r\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\r\n : \"tooltip input-tooltip\";\r\n\r\n<!-- #region Multiple selection -->\r\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\r\n <div\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"toggleHovered(true)\"\r\n (mouseleave)=\"toggleHovered(false)\"\r\n class=\"multiple-container\"\r\n [class]=\"{\r\n focused: focused(),\r\n hovered: hovered(),\r\n }\"\r\n >\r\n <label class=\"multiple-label\">{{ name }}</label>\r\n\r\n @for (option of multipleSelectedOptions(); track $index) {\r\n <div class=\"multiple-selected\">\r\n <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\r\n <button\r\n type=\"button\"\r\n class=\"\"\r\n (pointerdown)=\"handleOption(option, $event)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Clear\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n [container]=\"'body'\"\r\n >\r\n <svg-icon\r\n name=\"cai-cancel\"\r\n class=\"multiple-remove-button multiple-remove-icon bg-icon\"\r\n ></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n<!-- #endregion -->\r\n\r\n@let hasFloatingError =\r\n config().errorBehavior === \"floating\" ||\r\n (!!config().inTable && config().placeholderBehavior !== \"static\");\r\n\r\n<div\r\n class=\"app-input-container\"\r\n [class]=\"\r\n {\r\n config: config(),\r\n hideValidation: hideValidation(),\r\n isPasswordVisible: visible(),\r\n isInvalid: !!invalid,\r\n isValid: !!valid,\r\n isHovered: hovered(),\r\n hasText: hasText(),\r\n isAdding: isAdding(),\r\n selectedOption: selectedOption(),\r\n } | inputClass\r\n \"\r\n ngbDropdown\r\n [autoClose]=\"false\"\r\n #dropdown=\"ngbDropdown\"\r\n dropdownClass=\"cai-dropdown\"\r\n #containerRef\r\n [ngbTooltip]=\"errorTooltip\"\r\n [disableTooltip]=\"!hasFloatingError\"\r\n [container]=\"'body'\"\r\n [placement]=\"['bottom']\"\r\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\r\n (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\r\n>\r\n <!-- \r\n [popperOptions]=\"dropdownPopperOptions\"\r\n -->\r\n @if (config().icon && !password && !config().withButtons) {\r\n <div\r\n class=\"icon-container\"\r\n (pointerdown)=\"focus($event)\"\r\n [class]=\"{\r\n 'colored-icon': config().iconColor,\r\n }\"\r\n [style.--icon-color]=\"config().iconColor || ''\"\r\n >\r\n <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\r\n @if (!config().noSeparator) {\r\n <div class=\"separator\"></div>\r\n }\r\n </div>\r\n }\r\n @if (password) {\r\n <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\r\n <div\r\n class=\"password-icons\"\r\n [ngbTooltip]=\"passwordTooltip\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [placement]=\"'top'\"\r\n [openDelay]=\"600\"\r\n >\r\n <svg-icon\r\n class=\"icon password-key hover-icon\"\r\n name=\"cai-password-key\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-shown hover-icon\"\r\n name=\"cai-password-shown\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-hidden hover-icon\"\r\n name=\"cai-password-hidden\"\r\n ></svg-icon>\r\n </div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n <input\r\n class=\"app-input\"\r\n [tabindex]=\"isDisabled() ? '-1' : '0'\"\r\n [type]=\"\r\n password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\r\n \"\r\n [required]=\"config().required\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"dispatchOnBlur()\"\r\n [id]=\"id()\"\r\n [attr.aria-label]=\"config().label\"\r\n [attr.name]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n [placeholder]=\"config()?.placeholder || ''\"\r\n [autocomplete]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n #inputRef\r\n [appPassword]=\"password\"\r\n [appMask]=\"config().mask || ''\"\r\n [reveal]=\"config().reveal || 0\"\r\n [account]=\"config().type === 'account'\"\r\n [visible]=\"visible()\"\r\n [appNumberFormat]=\"config().type === 'number'\"\r\n [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\r\n [disableDecimals]=\"config().disableDecimals || false\"\r\n [prefix]=\"config().prefix || ''\"\r\n [max]=\"config().max\"\r\n (keydown)=\"handleKeydown($event)\"\r\n (focus)=\"onFocus($event)\"\r\n />\r\n @if (\r\n !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\r\n config().placeholderBehavior !== \"hidden\"\r\n ) {\r\n <label\r\n class=\"app-input-label\"\r\n [class.placeholder-color]=\"this.config().placeholderColor\"\r\n [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\r\n (click)=\"focus($event)\"\r\n >\r\n <!-- Truck Trailer Driver Dropdown label -->\r\n @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\r\n <p class=\"truck-item app-input-name\">Truck</p>\r\n <p class=\"trailer-item\">Trailer</p>\r\n <p>Driver</p>\r\n <p class=\"sub-label\">Rate</p>\r\n }\r\n <!-- Split Load -->\r\n @else if (dropdownType === \"split-driver\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Rate</p>\r\n } @else if (\r\n dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\r\n ) {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Location</p>\r\n }\r\n <!-- Dropdown variants -->\r\n @else if (dropdownType === \"broker\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Credit</p>\r\n } @else if (dropdownType === \"contact\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Phone</p>\r\n } @else if (dropdownType === \"shipper\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Address</p>\r\n } @else if (dropdownType === \"owner\") {\r\n <p class=\"owner-ein app-input-name\">EIN</p>\r\n <p class=\"app-input-name\">Company Name</p>\r\n } @else if (dropdownType === \"fuelcard\") {\r\n <p class=\"fuelcard-number app-input-name\">Card No.</p>\r\n <p class=\"fuelcard-brand app-input-name\">Provider</p>\r\n <p class=\"app-input-name\">Nickname</p>\r\n }\r\n <!-- Default Dropdown label -->\r\n @else {\r\n <span class=\"app-input-name\">{{ name }}</span>\r\n }\r\n </label>\r\n }\r\n @if (config().type === \"number\" && config().withButtons) {\r\n <div class=\"number-container\">\r\n <div class=\"number-buttons\">\r\n <div class=\"separator\"></div>\r\n <div\r\n class=\"plus-button-container\"\r\n ngbTooltip=\"Add\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n (pointerdown)=\"increment($event)\"\r\n >\r\n <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\r\n </div>\r\n <div\r\n class=\"minus-button-container\"\r\n ngbTooltip=\"Remove\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n (pointerdown)=\"decrement($event)\"\r\n >\r\n <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!config().inTable) {\r\n @if (!dropdownType) {\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"app-input-icon positive-icon\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-status-warning\"\r\n class=\"app-input-icon warning-icon\"\r\n ></svg-icon>\r\n }\r\n }\r\n\r\n @if (\r\n invalid &&\r\n config().errorBehavior !== \"hidden\" &&\r\n (ngControl?.errors | errorMessage: config().customErrors)[0] &&\r\n !(config().inTable && config().placeholderBehavior !== \"static\")\r\n ) {\r\n <div class=\"app-input-error\">\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n </div>\r\n }\r\n\r\n <!-- Accept button -->\r\n @if ((config().add && isAdding()) || config().isEdit) {\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon accept-button\"\r\n (pointerdown)=\"addOption()\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Confirm\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n >\r\n <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\r\n </button>\r\n }\r\n\r\n <!-- Cancel button -->\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon cancel-button\"\r\n (pointerdown)=\"reset($event)\"\r\n (mouseenter)=\"onClearHover(true)\"\r\n (mouseleave)=\"onClearHover(false)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"{{\r\n hasText()\r\n | clearTooltip\r\n : isAdding()\r\n : config().isEdit || false\r\n : config().placeholderBehavior || 'dynamic'\r\n : dropdownType === 'multiple'\r\n : config().hasResetButton\r\n : canTooltipBeVisible()\r\n }}\"\r\n [openDelay]=\"600\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n >\r\n @let iconName =\r\n config().hasResetButton\r\n ? \"cai-reset\"\r\n : config().removable\r\n ? \"cai-delete\"\r\n : \"cai-cancel\";\r\n <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\r\n <!-- Dropdown menu -->\r\n\r\n @let hasLoader = isLoading() !== undefined;\r\n\r\n @if (hasLoader) {\r\n <div class=\"loader\" [class.loading]=\"isLoading()\">\r\n <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\r\n </div>\r\n }\r\n\r\n @if (dropdownType) {\r\n @let maxHeight =\r\n ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n @let animateDropdown =\r\n dropdownType !== \"toll\" &&\r\n dropdownType !== \"fuel-stop-transaction\" &&\r\n dropdownType !== \"dispatch\" &&\r\n dropdownType !== \"ftl-dispatch\" &&\r\n dropdownType !== \"split-driver\" &&\r\n dropdownType !== \"split-truck\" &&\r\n dropdownType !== \"split-trailer\";\r\n\r\n @let unfilteredHeight =\r\n dropdownType === \"contact\" || !animateDropdown\r\n ? 244\r\n : ((options()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n <div\r\n ngbDropdownMenu\r\n class=\"dropdown-menu input-dropdown-menu\"\r\n [class]=\"{\r\n 'hide-dropdown':\r\n config().dropdownAutocomplete &&\r\n !dropdownOptions()?.length &&\r\n !(showNoResults() && value()),\r\n 'animate-dropdown': animateDropdown,\r\n 'size-22': config().size === 22,\r\n 'has-stroke': config().hasStroke,\r\n }\"\r\n [class.closing]=\"closing()\"\r\n [style.--unfiltered-height]=\"\r\n unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\r\n \"\r\n [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\r\n [style.width.px]=\"containerWidth()\"\r\n [tabindex]=\"-1\"\r\n (pointerdown)=\"onDropdownBackgroundClick($event)\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <div\r\n class=\"dropdown-menu-content\"\r\n [tabindex]=\"-1\"\r\n caiInfiniteScroll\r\n [scrollThreshold]=\"50\"\r\n (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\r\n >\r\n @if (config().add) {\r\n <button\r\n class=\"dropdown-item add-new\"\r\n [class.focused]=\"\r\n focusedOptionIndex === -1 ||\r\n groupedNavigationState?.groupIndex === -1\r\n \"\r\n (pointerdown)=\"handleAddingOption($event)\"\r\n >\r\n <p>ADD NEW</p>\r\n <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n @if (!config().dropdownAutocomplete) {\r\n <div\r\n class=\"dropdown-icon-container\"\r\n [class.open]=\"dropdown.isOpen() && !closing()\"\r\n (pointerdown)=\"onDropdownIconClick($event)\"\r\n >\r\n <svg-icon\r\n name=\"cai-arrow-secondary-down\"\r\n class=\"dropdown-icon icon\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n @let specialDropdown =\r\n dropdownType === \"dispatch\" ||\r\n dropdownType === \"ftl-dispatch\" ||\r\n dropdownType === \"broker\" ||\r\n dropdownType === \"contact\" ||\r\n dropdownType === \"shipper\" ||\r\n dropdownType === \"bank\" ||\r\n dropdownType === \"dispatcher\" ||\r\n dropdownType === \"truck\" ||\r\n dropdownType === \"trailer\" ||\r\n dropdownType === \"hazardous\" ||\r\n dropdownType === \"state\" ||\r\n dropdownType === \"owner\" ||\r\n dropdownType === \"fuelcard\" ||\r\n dropdownType === \"pm\" ||\r\n dropdownType === \"color\" ||\r\n dropdownType === \"make\" ||\r\n dropdownType === \"toll\" ||\r\n dropdownType === \"provider\" ||\r\n dropdownType === \"split-driver\" ||\r\n dropdownType === \"split-truck\" ||\r\n dropdownType === \"split-trailer\";\r\n <!-- Placeholder -->\r\n @if (specialDropdown) {\r\n <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\r\n } @else if (\r\n (config().add || config().search) &&\r\n !inputRef.value &&\r\n !this.isAdding() &&\r\n dropdownType !== \"subcontent\"\r\n ) {\r\n <div class=\"dropdown-selected\">\r\n @if (config().placeholderBehavior === \"static\") {\r\n <p class=\"selected-label-hidden\">\r\n {{ name + (config().required ? \" *\" : \"\") }}\r\n </p>\r\n <p class=\"selected-text\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n @if (\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ] === \"Hazardous\"\r\n ) {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n } @else if (config().isEdit && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ name }}</p>\r\n </div>\r\n }\r\n @if (config().passwordRequirements) {\r\n <div\r\n class=\"dropdown-menu password-requirement\"\r\n ngbDropdownMenu\r\n [style.width.px]=\"containerWidth()\"\r\n [class.closing]=\"closing()\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\r\n </div>\r\n }\r\n @if (subcontent) {\r\n <p class=\"subcontent\">\r\n @if (!(config().alignment === \"right\")) {\r\n <span class=\"subcontent-hide\"\r\n >{{\r\n config().search\r\n ? selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n : inputRef.value\r\n }}\r\n </span>\r\n }\r\n {{ subcontent }}\r\n </p>\r\n }\r\n</div>\r\n\r\n<!-- #region Templates -->\r\n\r\n<!-- #region Password requirements -->\r\n<ng-template #passwordRequirementsRef>\r\n @let isMinLengthValid =\r\n !this.ngControl?.errors?.[\"minlength\"] && this.value();\r\n @let isHasNumberValid =\r\n !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\r\n @let isHasSymbolValid =\r\n !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\r\n @let isHasUppercaseValid =\r\n !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\r\n\r\n <p>Strong Password Requirement</p>\r\n <ul>\r\n <li [class.valid]=\"isMinLengthValid\">\r\n <svg-icon\r\n [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\r\n class=\"icon\"\r\n ></svg-icon\r\n ><span>Minimum 8 characters</span>\r\n </li>\r\n <li [class.valid]=\"isHasNumberValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One number</span>\r\n </li>\r\n <li [class.valid]=\"isHasSymbolValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One symbol</span>\r\n </li>\r\n <li [class.valid]=\"isHasUppercaseValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One upper-case letter</span>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n<!-- #endregion -->\r\n@let search = config().search;\r\n\r\n<ng-template #dropdownMenuRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\r\n }\r\n @case (\"multiple\") {\r\n <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\r\n }\r\n @case (\"fuel-stop-transaction\") {\r\n <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\r\n }\r\n @case (\"subcontent\") {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOptionRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- Standard dropdown -->\r\n<ng-template #dropdownOptionsRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n >\r\n @if (dropdownOption[optionLabel] === \"Hazardous\") {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #multipleRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n [class]=\"{\r\n selected: isSelectedOption(dropdownOption),\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bankRef>\r\n @if (dropdownOptions().length) {\r\n @for (bank of dropdownOptions(); track $index; let index = $index) {\r\n @let bankOption = cast(bank, \"bank\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ bankOption.id }}\"\r\n (pointerdown)=\"handleOption(bankOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (bankOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"bankOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (bankOption.name || '' | highlightSearch: value())\r\n : bankOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #makeRef>\r\n @if (dropdownOptions().length) {\r\n @for (make of dropdownOptions(); track $index; let index = $index) {\r\n @let makeOption = cast(make, \"make\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ makeOption.id }}\"\r\n (pointerdown)=\"handleOption(makeOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'make')?.id === makeOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (makeOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"makeOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (makeOption.name || '' | highlightSearch: value())\r\n : makeOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Broker -->\r\n<ng-template #brokerRef>\r\n @if (dropdownOptions().length) {\r\n @for (broker of dropdownOptions(); track $index; let index = $index) {\r\n @let brokerOption = cast(broker, \"broker\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"broker-{{ brokerOption.id }}\"\r\n (pointerdown)=\"\r\n !(brokerOption.dnu || brokerOption.ban) &&\r\n handleOption(brokerOption, $event)\r\n \"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\r\n focused: focusedOptionIndex === index,\r\n banned: brokerOption.dnu || brokerOption.ban,\r\n dnu: brokerOption.dnu,\r\n }\"\r\n >\r\n @if (brokerOption?.dnu || brokerOption?.ban) {\r\n <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\r\n } @else if (brokerOption?.fraudCheck) {\r\n <svg-icon\r\n name=\"cai-status-warning-lite\"\r\n class=\"icon fraud\"\r\n ></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content\"\r\n [innerHTML]=\"\r\n search\r\n ? (brokerOption.businessName || '' | highlightSearch: value())\r\n : brokerOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n @if (!brokerOption.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ brokerOption.loadsCount }} |\r\n {{ brokerOption.availableCredit || 0 | currency }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Contact dropdown -->\r\n<ng-template #contactRef>\r\n @if (dropdownOptions().length) {\r\n @for (contact of dropdownOptions(); track $index; let index = $index) {\r\n @let contactOption = cast(contact, \"contact\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"contact-{{ contact.id }}\"\r\n (pointerdown)=\"handleOption(contact, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'contact')?.id === contact.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (contactOption.contactName || '' | highlightSearch: value())\r\n : contactOption.contactName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p>{{ contactOption.department?.name }}</p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ contactOption.phone }}\r\n </p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Owner dropdown -->\r\n<ng-template #ownerRef>\r\n @if (dropdownOptions().length) {\r\n @for (owner of dropdownOptions(); track $index; let index = $index) {\r\n @let ownerOption = cast(owner, \"owner\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"owner-{{ ownerOption?.id }}\"\r\n (pointerdown)=\"handleOption(ownerOption!, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"owner-ein\"\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.ein || '' | highlightSearch: value())\r\n : ownerOption?.ein\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.name || '' | highlightSearch: value())\r\n : ownerOption?.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Fuelcard dropdown -->\r\n<ng-template #fuelcardRef>\r\n @if (dropdownOptions().length) {\r\n @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\r\n @let fuelcardOption = cast(fuelcard, \"fuelCard\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"fuelcard-{{ fuelcardOption?.id }}\"\r\n (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"fuelcard-number\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.number || '' | highlightSearch: value())\r\n : fuelcardOption?.number\r\n \"\r\n ></p>\r\n <p\r\n class=\"fuelcard-brand\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.brand || '' | highlightSearch: value())\r\n : fuelcardOption?.brand\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.account || '' | highlightSearch: value())\r\n : fuelcardOption?.account\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Shipper dropdown -->\r\n<ng-template #shipperRef>\r\n @if (dropdownOptions().length) {\r\n @for (shipper of dropdownOptions(); track $index; let index = $index) {\r\n @let shipperOption = cast(shipper, \"shipper\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"shipper-{{ shipperOption.id }}\"\r\n (pointerdown)=\"handleOption(shipperOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.businessName || '' | highlightSearch: value())\r\n : shipperOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.address?.address || ''\r\n | highlightSearch: value())\r\n : shipperOption.address?.address\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ shipperOption.pickupCount }} Pickup |\r\n {{ shipperOption.deliveryCount }} Delivery\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatch dropdown -->\r\n<ng-template #dispatchesRef>\r\n @if (dropdownOptions().length) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"reset()\"\r\n [class]=\"{\r\n selected: !selectedOption(),\r\n }\"\r\n >\r\n <p>Unassigned</p>\r\n <div class=\"unassigned-ltl\">\r\n <p>{{ unassignedCount() }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </button>\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n <!-- Temporary variant since BE doesn't support boards -->\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base dispatch-ltl\">\r\n <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- ftl dispatch dropdown -->\r\n<ng-template #ftlDispatchRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <!-- Load Status -->\r\n @if (dispatch.status?.statusString) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatch.status?.statusString\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatch.status?.statusString }}\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (dispatch.status?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ dispatch.status?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n <!-- Pending Load Count -->\r\n <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\r\n 0\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitDriverRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\r\n @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(driverBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (driverBoard.drivers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (driver of driverBoard.drivers || []; track driver.id) {\r\n @let driverOption = cast(driver, \"splitDriver\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(driverOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem\">\r\n <div class=\"dropdown-avatar\">\r\n <cai-avatar\r\n [driver]=\"driverOption\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n </div>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n driverOption.firstName + ' ' + driverOption.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n driverOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (driverOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ driverOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ driverOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ driverOption.payTypeValue }}</p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTruckRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\r\n @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(truckBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (truckBoard.trucks?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (truck of truckBoard.trucks || []; track truck.id) {\r\n @let truckOption = cast(truck, \"splitTruck\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [style.--truck-color]=\"truckOption.color?.code || ''\"\r\n [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n truckOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (truckOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ truckOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ truckOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n truckOption.location?.city &&\r\n truckOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ truckOption.location?.city }},\r\n {{ truckOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTrailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\r\n @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(trailerBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n trailerBoard.isTeamBoard\r\n ? \"Team Board\"\r\n : trailerBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (trailer of trailerBoard.trailers || []; track trailer.id) {\r\n @let trailerOption = cast(trailer, \"splitTrailer\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [style.--trailer-color]=\"trailerOption.color?.code || ''\"\r\n [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n trailerOption.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n trailerOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ trailerOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n trailerOption.location?.city &&\r\n trailerOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ trailerOption.location?.city }},\r\n {{ trailerOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #tollRef>\r\n @if (dropdownOptions().length) {\r\n @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\r\n @let tollOption = cast(toll, \"tollOption\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item pe-none\"\r\n [class]=\"{\r\n unfolded: tollOption.tollTransponders?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{ tollOption.groupName }}\r\n </p>\r\n </button>\r\n @let tollTransponders = tollOption.tollTransponders || [];\r\n @for (\r\n tollTransponder of tollTransponders;\r\n track tollTransponder.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(tollTransponder, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'tollTransponderOption')?.id ===\r\n tollTransponder.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (tollTransponder.name || '' | highlightSearch: value())\r\n : tollTransponder.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatcher dropdown -->\r\n\r\n<ng-template #dispatcherRef>\r\n @if (dropdownOptions().length) {\r\n @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\r\n @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dispatcherOption.id }}\"\r\n (pointerdown)=\"handleOption(dispatcherOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (dispatcherOption.fullName || '' | highlightSearch: value())\r\n : dispatcherOption.fullName\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #truckRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let truckOption = cast(truck, \"truckOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ truckOption.id }}\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'truckOption')?.id === truckOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (truckOption.name || '' | highlightSearch: value())\r\n : truckOption.name\r\n \"\r\n ></p>\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"truckOption.logoName.slice(0, -4)\"\r\n [name]=\"truckOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #trailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let trailerOption = cast(truck, \"trailerOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ trailerOption.id }}\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (trailerOption.name || '' | highlightSearch: value())\r\n : trailerOption.name\r\n \"\r\n ></p>\r\n\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"trailerOption.logoName.slice(0, -4)\"\r\n [name]=\"trailerOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #providerRef>\r\n @if (dropdownOptions().length) {\r\n @for (provider of dropdownOptions(); track $index; let index = $index) {\r\n @let providerOption = cast(provider, \"provider\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ providerOption?.id }}\"\r\n (pointerdown)=\"handleOption(providerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'provider')?.id === providerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Hazardous dropdown -->\r\n<ng-template #hazardousRef>\r\n @if (dropdownOptions().length) {\r\n @for (hazardous of dropdownOptions(); track $index; let index = $index) {\r\n @let hazardousOption = cast(hazardous, \"hazardous\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ hazardousOption.id }}\"\r\n (pointerdown)=\"handleOption(hazardousOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (hazardousOption.description || '' | highlightSearch: value())\r\n : hazardousOption.description\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #pmRef>\r\n @if (dropdownOptions().length) {\r\n @for (pm of dropdownOptions(); track $index; let index = $index) {\r\n @let pmOption = cast(pm, \"pmOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ pmOption.id }}\"\r\n (pointerdown)=\"handleOption(pmOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"pmOption.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (pmOption.title || '' | highlightSearch: value())\r\n : pmOption.title\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #colorRef>\r\n @if (dropdownOptions().length) {\r\n @for (color of dropdownOptions(); track $index; let index = $index) {\r\n @let colorOption = cast(color, \"colorOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item color-item\"\r\n id=\"option-{{ colorOption.id }}\"\r\n (pointerdown)=\"handleOption(colorOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'colorOption')?.id === colorOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (colorOption.name || '' | highlightSearch: value())\r\n : colorOption.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #stateRef>\r\n @if (dropdownOptions().length) {\r\n @for (state of dropdownOptions(); track $index; let index = $index) {\r\n @let stateOption = cast(state, \"state\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ stateOption.id }}\"\r\n (pointerdown)=\"handleOption(stateOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'state')?.id === stateOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState\r\n ? ' (' + stateOption?.stateName + ')'\r\n : '') || '' | highlightSearch: value())\r\n : stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fuelStopTransactionRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n franchise of dropdownOptions();\r\n track franchise.id;\r\n let groupIndex = $index\r\n ) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let franchiseOption = cast(franchise, \"franchise\")!;\r\n @if (franchiseOption?.count !== null) {\r\n <div\r\n class=\"dropdown-group\"\r\n [class.no-items]=\"!franchiseOption?.count\"\r\n [class]=\"{\r\n active: openGroup() === franchiseOption.id,\r\n }\"\r\n [style.--max-height]=\"\r\n openGroup() === franchiseOption.id\r\n ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\r\n : '26px'\r\n \"\r\n >\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\r\n [class]=\"{\r\n unfolded: openGroup() === franchiseOption.id,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n <p class=\"counter\">{{ franchiseOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @if (openGroup() === franchiseOption.id) {\r\n @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\r\n @for (\r\n fuelStopStore of franchiseOption.fuelStopStores;\r\n track fuelStopStore.id\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === $index + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item fuel-stop-transaction-store\"\r\n [class]=\"{\r\n focused: isOptionFocused,\r\n }\"\r\n (pointerdown)=\"handleOption(fuelStopStore, $event)\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n fuelStopStore?.store ?? '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n @let city = fuelStopStore?.address?.city ?? \"\";\r\n @let state = fuelStopStore?.address?.stateShortName ?? \"\";\r\n @let zip = fuelStopStore?.address?.zipCode ?? \"\";\r\n <p\r\n class=\"fuel-stop-transaction-store-address\"\r\n [innerHTML]=\"\r\n city + (state || zip ? ', ' : '') + state + ' ' + zip\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n\r\n @if (fuelStopStore?.[\"favourite\"]) {\r\n <svg-icon\r\n name=\"cai-favorite\"\r\n class=\"favorite-icon\"\r\n ></svg-icon>\r\n }\r\n </button>\r\n }\r\n <!-- Infinite scroll trigger - emits event when item comes into view -->\r\n <div\r\n class=\"dropdown-infinite-scroll-item\"\r\n caiIntersectionObserver\r\n [threshold]=\"0.1\"\r\n (inView)=\"onDropdownScrolledToBottom(true)\"\r\n ></div>\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n [class.focused]=\"\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0\r\n \"\r\n (pointerdown)=\"handleOption(franchiseOption, $event)\"\r\n >\r\n <p\r\n class=\"fuel-stop-transaction-nostore\"\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n\r\n<!-- #region Selected options -->\r\n\r\n<!-- selected dispatch -->\r\n<ng-template #selectedDispatchRef>\r\n @let dispatchOption = cast(selectedOption(), \"dispatch\");\r\n @if (dispatchOption && !inputRef.value && !isAdding()) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ dispatchOption!.truck.truckNumber }}\r\n </p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatchOption!.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"\r\n cast(\r\n selectedOption(),\r\n 'dispatch'\r\n )!.trailer?.trailerType?.logoName?.slice(0, -4)\r\n \"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ dispatchOption!.trailer?.trailerNumber }}\r\n </p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatchOption!.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" & \" +\r\n dispatchOption!.coDriver?.firstName\r\n }}\r\n </p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatchOption!.driver\"\r\n [size]=\"18\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" \" +\r\n dispatchOption!.driver.lastName\r\n }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"selected-end-item\">\r\n {{ dispatchOption!.payType }}\r\n </p>\r\n </div>\r\n } @else {\r\n @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\r\n <p class=\"dropdown-selected\">Unassigned</p>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- selected broker -->\r\n<ng-template #selectedBrokerRef>\r\n @let brokerOption = cast(selectedOption(), \"broker\");\r\n @if (brokerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if ((brokerOption!.availableCredit || 0) < 0) {\r\n <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\r\n }\r\n <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n @if (!brokerOption!.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>\r\n {{ brokerOption!.availableCredit || 0 | currency }}\r\n </p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedContactRef>\r\n @let contactOption = cast(selectedOption(), \"contact\");\r\n @if (contactOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ contactOption?.phone }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedShipperRef>\r\n @let shipperOption = cast(selectedOption(), \"shipper\");\r\n @if (shipperOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ shipperOption?.address?.address }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOwnerRef>\r\n @let ownerOption = cast(selectedOption(), \"owner\");\r\n @if (ownerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\r\n <p class=\"\">{{ ownerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedFuelcardRef>\r\n @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\r\n @if (fuelcardOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"fuelcard-number\">\r\n {{ fuelcardOption?.number }}\r\n </p>\r\n <p class=\"fuelcard-brand\">\r\n {{ fuelcardOption?.brand }}\r\n </p>\r\n <p class=\"\">\r\n {{ fuelcardOption?.account }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedBankRef>\r\n @let bankOption = cast(selectedOption(), \"bank\");\r\n @if (bankOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (bankOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedProviderRef>\r\n @let providerOption = cast(selectedOption(), \"provider\");\r\n @if (providerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedMakeRef>\r\n @let makeOption = cast(selectedOption(), \"make\");\r\n @if (makeOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (makeOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedStateRef>\r\n @let stateOption = cast(selectedOption(), \"state\");\r\n @if (stateOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ stateOption?.stateShortName }}\r\n {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedDispatcherRef>\r\n @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\r\n @if (dispatcherOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n ></cai-avatar>\r\n <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTruckRef>\r\n @let truckOption = cast(selectedOption(), \"truckOption\");\r\n @if (truckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"truckOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTrailerRef>\r\n @let trailerOption = cast(selectedOption(), \"trailerOption\");\r\n @if (trailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"trailerOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedHazardousRef>\r\n @let hazardousOption = cast(selectedOption(), \"hazardous\");\r\n @if (hazardousOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"hazard-icon\"\r\n [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\r\n {{ hazardousOption?.description }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedPmRef>\r\n @let pmOption = cast(selectedOption(), \"pmOption\");\r\n @if (pmOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"pmOption?.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ pmOption?.title }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedColorRef>\r\n @let colorOption = cast(selectedOption(), \"colorOption\");\r\n @if (colorOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ colorOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTollRef>\r\n @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\r\n @if (tollOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">\r\n {{ tollOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitDriverRef>\r\n @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\r\n @if (splitDriverOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem\">\r\n <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <p class=\"selected-end-item\">\r\n {{ splitDriverOption.payTypeValue }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTruckRef>\r\n @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\r\n @if (splitTruckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ splitTruckOption!.truckNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTruckOption!.location?.city &&\r\n splitTruckOption!.location?.stateShortName\r\n ) {\r\n {{ splitTruckOption!.location?.city }},\r\n {{ splitTruckOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTrailerRef>\r\n @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\r\n @if (splitTrailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ splitTrailerOption!.trailerNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTrailerOption!.location?.city &&\r\n splitTrailerOption!.location?.stateShortName\r\n ) {\r\n {{ splitTrailerOption!.location?.city }},\r\n {{ splitTrailerOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #passwordTooltip>\r\n {{ visible() ? \"Hide\" : \"Show\" }}\r\n</ng-template>\r\n\r\n<ng-template #errorTooltip>\r\n @if (\r\n (config().errorBehavior === \"floating\" ||\r\n (config().errorBehavior === \"static\" && hasText()) ||\r\n config().inTable) &&\r\n invalid &&\r\n !dropdown.isOpen()\r\n ) {\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button .bg-icon{opacity:1!important;color:#c20c0c!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover){background-color:transparent!important}.removable:has(.cancel-button:hover) .separator{background-color:var(--color-icon-neutral)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type:
|
|
4030
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: InputComponent, isStandalone: true, selector: "cai-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, preselectedOptions: { classPropertyName: "preselectedOptions", publicName: "preselectedOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hideValidation: { classPropertyName: "hideValidation", publicName: "hideValidation", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, preselectedUnit: { classPropertyName: "preselectedUnit", publicName: "preselectedUnit", isSignal: true, isRequired: false, transformFunction: null }, unassignedCount: { classPropertyName: "unassignedCount", publicName: "unassignedCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocused: "onFocused", onReset: "onReset", onValueChange: "onValueChange", onOptionAdded: "onOptionAdded", onAdd: "onAdd", onSelectionChange: "onSelectionChange", onSelectedObject: "onSelectedObject", onSelectedGroup: "onSelectedGroup", onClear: "onClear", onAutofill: "onAutofill", onScrolledToBottom: "onScrolledToBottom", onScrolledToBottomGroup: "onScrolledToBottomGroup", onSearch: "onSearch", onValueAdded: "onValueAdded", onRemove: "onRemove", onHoverRemove: "onHoverRemove" }, host: { listeners: { "realValueChange": "onRealValueChange($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }, { propertyName: "PasswordDirective", first: true, predicate: PasswordDirective, descendants: true }, { propertyName: "NumberFormatDirective", first: true, predicate: NumberFormatDirective, descendants: true }, { propertyName: "MaskDirective", first: true, predicate: MaskDirective, descendants: true }], ngImport: i0, template: "<!-- #region Variables -->\r\n@let valid =\r\n ngControl?.valid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let invalid =\r\n ngControl?.invalid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let subcontent =\r\n config().subcontent ||\r\n (config().dropdown === \"subcontent\" &&\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\r\n\r\n@let name = config().name;\r\n@let password = config().type === \"password\" || config().type === \"account\";\r\n\r\n@let optionLabel = this.config().optionLabel || \"label\";\r\n@let dropdownType = this.config().dropdown;\r\n\r\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\r\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\r\n\r\n@let tooltipClass =\r\n config().inverse\r\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\r\n : \"tooltip input-tooltip\";\r\n\r\n<!-- #region Multiple selection -->\r\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\r\n <div\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"toggleHovered(true)\"\r\n (mouseleave)=\"toggleHovered(false)\"\r\n class=\"multiple-container\"\r\n [class]=\"{\r\n focused: focused(),\r\n hovered: hovered(),\r\n }\"\r\n >\r\n <label class=\"multiple-label\">{{ name }}</label>\r\n\r\n @for (option of multipleSelectedOptions(); track $index) {\r\n <div class=\"multiple-selected\">\r\n <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\r\n <button\r\n type=\"button\"\r\n class=\"\"\r\n (pointerdown)=\"handleOption(option, $event)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Clear\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n [container]=\"'body'\"\r\n >\r\n <svg-icon\r\n name=\"cai-cancel\"\r\n class=\"multiple-remove-button multiple-remove-icon bg-icon\"\r\n ></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n<!-- #endregion -->\r\n\r\n@let hasFloatingError =\r\n config().errorBehavior === \"floating\" ||\r\n (!!config().inTable && config().placeholderBehavior !== \"static\");\r\n\r\n<div\r\n class=\"app-input-container\"\r\n [class]=\"\r\n {\r\n config: config(),\r\n hideValidation: hideValidation(),\r\n isPasswordVisible: visible(),\r\n isInvalid: !!invalid,\r\n isValid: !!valid,\r\n isHovered: hovered(),\r\n hasText: hasText(),\r\n isAdding: isAdding(),\r\n selectedOption: selectedOption(),\r\n } | inputClass\r\n \"\r\n ngbDropdown\r\n [autoClose]=\"false\"\r\n #dropdown=\"ngbDropdown\"\r\n dropdownClass=\"cai-dropdown\"\r\n #containerRef\r\n [ngbTooltip]=\"errorTooltip\"\r\n [disableTooltip]=\"!hasFloatingError\"\r\n [container]=\"'body'\"\r\n [placement]=\"['bottom']\"\r\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\r\n (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\r\n>\r\n <!-- \r\n [popperOptions]=\"dropdownPopperOptions\"\r\n -->\r\n @if (config().icon && !password && !config().withButtons) {\r\n <div\r\n class=\"icon-container\"\r\n (pointerdown)=\"focus($event)\"\r\n [class]=\"{\r\n 'colored-icon': config().iconColor,\r\n }\"\r\n [style.--icon-color]=\"config().iconColor || ''\"\r\n >\r\n <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\r\n @if (!config().noSeparator) {\r\n <div class=\"separator\"></div>\r\n }\r\n </div>\r\n }\r\n @if (password) {\r\n <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\r\n <div\r\n class=\"password-icons\"\r\n [ngbTooltip]=\"passwordTooltip\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [placement]=\"'top'\"\r\n [openDelay]=\"600\"\r\n >\r\n <svg-icon\r\n class=\"icon password-key hover-icon\"\r\n name=\"cai-password-key\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-shown hover-icon\"\r\n name=\"cai-password-shown\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-hidden hover-icon\"\r\n name=\"cai-password-hidden\"\r\n ></svg-icon>\r\n </div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n <input\r\n class=\"app-input\"\r\n [tabindex]=\"isDisabled() ? '-1' : '0'\"\r\n [type]=\"\r\n password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\r\n \"\r\n [required]=\"config().required\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"dispatchOnBlur()\"\r\n [id]=\"id()\"\r\n [attr.aria-label]=\"config().label\"\r\n [attr.name]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n [placeholder]=\"config()?.placeholder || ''\"\r\n [autocomplete]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n #inputRef\r\n [appPassword]=\"password\"\r\n [appMask]=\"config().mask || ''\"\r\n [reveal]=\"config().reveal || 0\"\r\n [account]=\"config().type === 'account'\"\r\n [visible]=\"visible()\"\r\n [appNumberFormat]=\"config().type === 'number'\"\r\n [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\r\n [disableDecimals]=\"config().disableDecimals || false\"\r\n [prefix]=\"config().prefix || ''\"\r\n [max]=\"config().max\"\r\n (keydown)=\"handleKeydown($event)\"\r\n (focus)=\"onFocus($event)\"\r\n />\r\n @if (\r\n !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\r\n config().placeholderBehavior !== \"hidden\"\r\n ) {\r\n <label\r\n class=\"app-input-label\"\r\n [class.placeholder-color]=\"this.config().placeholderColor\"\r\n [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\r\n (click)=\"focus($event)\"\r\n >\r\n <!-- Truck Trailer Driver Dropdown label -->\r\n @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\r\n <p class=\"truck-item app-input-name\">Truck</p>\r\n <p class=\"trailer-item\">Trailer</p>\r\n <p>Driver</p>\r\n <p class=\"sub-label\">Rate</p>\r\n }\r\n <!-- Split Load -->\r\n @else if (dropdownType === \"split-driver\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Rate</p>\r\n } @else if (\r\n dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\r\n ) {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Location</p>\r\n }\r\n <!-- Dropdown variants -->\r\n @else if (dropdownType === \"broker\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Credit</p>\r\n } @else if (dropdownType === \"contact\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Phone</p>\r\n } @else if (dropdownType === \"shipper\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Address</p>\r\n } @else if (dropdownType === \"owner\") {\r\n <p class=\"owner-ein app-input-name\">EIN</p>\r\n <p class=\"app-input-name\">Company Name</p>\r\n } @else if (dropdownType === \"fuelcard\") {\r\n <p class=\"fuelcard-number app-input-name\">Card No.</p>\r\n <p class=\"fuelcard-brand app-input-name\">Provider</p>\r\n <p class=\"app-input-name\">Nickname</p>\r\n }\r\n <!-- Default Dropdown label -->\r\n @else {\r\n <span class=\"app-input-name\">{{ name }}</span>\r\n }\r\n </label>\r\n }\r\n @if (config().type === \"number\" && config().withButtons) {\r\n <div class=\"number-container\">\r\n <div class=\"number-buttons\">\r\n <div class=\"separator\"></div>\r\n <div\r\n class=\"plus-button-container\"\r\n ngbTooltip=\"Add\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n (pointerdown)=\"increment($event)\"\r\n >\r\n <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\r\n </div>\r\n <div\r\n class=\"minus-button-container\"\r\n ngbTooltip=\"Remove\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n (pointerdown)=\"decrement($event)\"\r\n >\r\n <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!config().inTable) {\r\n @if (!dropdownType) {\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"app-input-icon positive-icon\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-status-warning\"\r\n class=\"app-input-icon warning-icon\"\r\n ></svg-icon>\r\n }\r\n }\r\n\r\n @if (\r\n invalid &&\r\n config().errorBehavior !== \"hidden\" &&\r\n (ngControl?.errors | errorMessage: config().customErrors)[0] &&\r\n !(config().inTable && config().placeholderBehavior !== \"static\")\r\n ) {\r\n <div class=\"app-input-error\">\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n </div>\r\n }\r\n\r\n <!-- Accept button -->\r\n @if ((config().add && isAdding()) || config().isEdit) {\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon accept-button\"\r\n (pointerdown)=\"addOption()\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Confirm\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n >\r\n <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\r\n </button>\r\n }\r\n\r\n <!-- Cancel button -->\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon cancel-button\"\r\n (pointerdown)=\"reset($event)\"\r\n (mouseenter)=\"onClearHover(true)\"\r\n (mouseleave)=\"onClearHover(false)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"{{\r\n hasText()\r\n | clearTooltip\r\n : isAdding()\r\n : config().isEdit || false\r\n : config().placeholderBehavior || 'dynamic'\r\n : dropdownType === 'multiple'\r\n : config().hasResetButton\r\n : canTooltipBeVisible()\r\n }}\"\r\n [openDelay]=\"600\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n >\r\n @let iconName =\r\n config().hasResetButton\r\n ? \"cai-reset\"\r\n : config().removable\r\n ? \"cai-delete\"\r\n : \"cai-cancel\";\r\n <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\r\n <!-- Dropdown menu -->\r\n\r\n @let hasLoader = isLoading() !== undefined;\r\n\r\n @if (hasLoader) {\r\n <div class=\"loader\" [class.loading]=\"isLoading()\">\r\n <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\r\n </div>\r\n }\r\n\r\n @if (dropdownType) {\r\n @let maxHeight =\r\n ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n @let animateDropdown =\r\n dropdownType !== \"toll\" &&\r\n dropdownType !== \"fuel-stop-transaction\" &&\r\n dropdownType !== \"dispatch\" &&\r\n dropdownType !== \"ftl-dispatch\" &&\r\n dropdownType !== \"split-driver\" &&\r\n dropdownType !== \"split-truck\" &&\r\n dropdownType !== \"split-trailer\";\r\n\r\n @let unfilteredHeight =\r\n dropdownType === \"contact\" || !animateDropdown\r\n ? 244\r\n : ((options()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n <div\r\n ngbDropdownMenu\r\n class=\"dropdown-menu input-dropdown-menu\"\r\n [class]=\"{\r\n 'hide-dropdown':\r\n config().dropdownAutocomplete &&\r\n !dropdownOptions()?.length &&\r\n !(showNoResults() && value()),\r\n 'animate-dropdown': animateDropdown,\r\n 'size-22': config().size === 22,\r\n 'has-stroke': config().hasStroke,\r\n }\"\r\n [class.closing]=\"closing()\"\r\n [style.--unfiltered-height]=\"\r\n unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\r\n \"\r\n [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\r\n [style.width.px]=\"containerWidth()\"\r\n [tabindex]=\"-1\"\r\n (pointerdown)=\"onDropdownBackgroundClick($event)\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <div\r\n class=\"dropdown-menu-content\"\r\n [tabindex]=\"-1\"\r\n caiInfiniteScroll\r\n [scrollThreshold]=\"50\"\r\n (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\r\n >\r\n @if (config().add) {\r\n <button\r\n class=\"dropdown-item add-new\"\r\n [class.focused]=\"\r\n focusedOptionIndex === -1 ||\r\n groupedNavigationState?.groupIndex === -1\r\n \"\r\n (pointerdown)=\"handleAddingOption($event)\"\r\n >\r\n <p>ADD NEW</p>\r\n <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n @if (!config().dropdownAutocomplete) {\r\n <div\r\n class=\"dropdown-icon-container\"\r\n [class.open]=\"dropdown.isOpen() && !closing()\"\r\n (pointerdown)=\"onDropdownIconClick($event)\"\r\n >\r\n <svg-icon\r\n name=\"cai-arrow-secondary-down\"\r\n class=\"dropdown-icon icon\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n @let specialDropdown =\r\n dropdownType === \"dispatch\" ||\r\n dropdownType === \"ftl-dispatch\" ||\r\n dropdownType === \"broker\" ||\r\n dropdownType === \"contact\" ||\r\n dropdownType === \"shipper\" ||\r\n dropdownType === \"bank\" ||\r\n dropdownType === \"dispatcher\" ||\r\n dropdownType === \"truck\" ||\r\n dropdownType === \"trailer\" ||\r\n dropdownType === \"hazardous\" ||\r\n dropdownType === \"state\" ||\r\n dropdownType === \"owner\" ||\r\n dropdownType === \"fuelcard\" ||\r\n dropdownType === \"pm\" ||\r\n dropdownType === \"color\" ||\r\n dropdownType === \"make\" ||\r\n dropdownType === \"toll\" ||\r\n dropdownType === \"provider\" ||\r\n dropdownType === \"split-driver\" ||\r\n dropdownType === \"split-truck\" ||\r\n dropdownType === \"split-trailer\";\r\n <!-- Placeholder -->\r\n @if (specialDropdown) {\r\n <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\r\n } @else if (\r\n (config().add || config().search) &&\r\n !inputRef.value &&\r\n !this.isAdding() &&\r\n dropdownType !== \"subcontent\"\r\n ) {\r\n <div class=\"dropdown-selected\">\r\n @if (config().placeholderBehavior === \"static\") {\r\n <p class=\"selected-label-hidden\">\r\n {{ name + (config().required ? \" *\" : \"\") }}\r\n </p>\r\n <p class=\"selected-text\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n @if (\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ] === \"Hazardous\"\r\n ) {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n } @else if (config().isEdit && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ name }}</p>\r\n </div>\r\n }\r\n @if (config().passwordRequirements) {\r\n <div\r\n class=\"dropdown-menu password-requirement\"\r\n ngbDropdownMenu\r\n [style.width.px]=\"containerWidth()\"\r\n [class.closing]=\"closing()\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\r\n </div>\r\n }\r\n @if (subcontent) {\r\n <p class=\"subcontent\">\r\n @if (!(config().alignment === \"right\")) {\r\n <span class=\"subcontent-hide\"\r\n >{{\r\n config().search\r\n ? selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n : inputRef.value\r\n }}\r\n </span>\r\n }\r\n {{ subcontent }}\r\n </p>\r\n }\r\n</div>\r\n\r\n<!-- #region Templates -->\r\n\r\n<!-- #region Password requirements -->\r\n<ng-template #passwordRequirementsRef>\r\n @let isMinLengthValid =\r\n !this.ngControl?.errors?.[\"minlength\"] && this.value();\r\n @let isHasNumberValid =\r\n !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\r\n @let isHasSymbolValid =\r\n !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\r\n @let isHasUppercaseValid =\r\n !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\r\n\r\n <p>Strong Password Requirement</p>\r\n <ul>\r\n <li [class.valid]=\"isMinLengthValid\">\r\n <svg-icon\r\n [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\r\n class=\"icon\"\r\n ></svg-icon\r\n ><span>Minimum 8 characters</span>\r\n </li>\r\n <li [class.valid]=\"isHasNumberValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One number</span>\r\n </li>\r\n <li [class.valid]=\"isHasSymbolValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One symbol</span>\r\n </li>\r\n <li [class.valid]=\"isHasUppercaseValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One upper-case letter</span>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n<!-- #endregion -->\r\n@let search = config().search;\r\n\r\n<ng-template #dropdownMenuRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\r\n }\r\n @case (\"multiple\") {\r\n <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\r\n }\r\n @case (\"fuel-stop-transaction\") {\r\n <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\r\n }\r\n @case (\"subcontent\") {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOptionRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- Standard dropdown -->\r\n<ng-template #dropdownOptionsRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n >\r\n @if (dropdownOption[optionLabel] === \"Hazardous\") {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #multipleRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n [class]=\"{\r\n selected: isSelectedOption(dropdownOption),\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bankRef>\r\n @if (dropdownOptions().length) {\r\n @for (bank of dropdownOptions(); track $index; let index = $index) {\r\n @let bankOption = cast(bank, \"bank\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ bankOption.id }}\"\r\n (pointerdown)=\"handleOption(bankOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (bankOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"bankOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (bankOption.name || '' | highlightSearch: value())\r\n : bankOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #makeRef>\r\n @if (dropdownOptions().length) {\r\n @for (make of dropdownOptions(); track $index; let index = $index) {\r\n @let makeOption = cast(make, \"make\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ makeOption.id }}\"\r\n (pointerdown)=\"handleOption(makeOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'make')?.id === makeOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (makeOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"makeOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (makeOption.name || '' | highlightSearch: value())\r\n : makeOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Broker -->\r\n<ng-template #brokerRef>\r\n @if (dropdownOptions().length) {\r\n @for (broker of dropdownOptions(); track $index; let index = $index) {\r\n @let brokerOption = cast(broker, \"broker\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"broker-{{ brokerOption.id }}\"\r\n (pointerdown)=\"\r\n !(brokerOption.dnu || brokerOption.ban) &&\r\n handleOption(brokerOption, $event)\r\n \"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\r\n focused: focusedOptionIndex === index,\r\n banned: brokerOption.dnu || brokerOption.ban,\r\n dnu: brokerOption.dnu,\r\n }\"\r\n >\r\n @if (brokerOption?.dnu || brokerOption?.ban) {\r\n <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\r\n } @else if (brokerOption?.fraudCheck) {\r\n <svg-icon\r\n name=\"cai-status-warning-lite\"\r\n class=\"icon fraud\"\r\n ></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content\"\r\n [innerHTML]=\"\r\n search\r\n ? (brokerOption.businessName || '' | highlightSearch: value())\r\n : brokerOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n @if (!brokerOption.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ brokerOption.loadsCount }} |\r\n {{ brokerOption.availableCredit || 0 | currency }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Contact dropdown -->\r\n<ng-template #contactRef>\r\n @if (dropdownOptions().length) {\r\n @for (contact of dropdownOptions(); track $index; let index = $index) {\r\n @let contactOption = cast(contact, \"contact\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"contact-{{ contact.id }}\"\r\n (pointerdown)=\"handleOption(contact, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'contact')?.id === contact.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (contactOption.contactName || '' | highlightSearch: value())\r\n : contactOption.contactName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p>{{ contactOption.department?.name }}</p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ contactOption.phone }}\r\n </p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Owner dropdown -->\r\n<ng-template #ownerRef>\r\n @if (dropdownOptions().length) {\r\n @for (owner of dropdownOptions(); track $index; let index = $index) {\r\n @let ownerOption = cast(owner, \"owner\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"owner-{{ ownerOption?.id }}\"\r\n (pointerdown)=\"handleOption(ownerOption!, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"owner-ein\"\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.ein || '' | highlightSearch: value())\r\n : ownerOption?.ein\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.name || '' | highlightSearch: value())\r\n : ownerOption?.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Fuelcard dropdown -->\r\n<ng-template #fuelcardRef>\r\n @if (dropdownOptions().length) {\r\n @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\r\n @let fuelcardOption = cast(fuelcard, \"fuelCard\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"fuelcard-{{ fuelcardOption?.id }}\"\r\n (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"fuelcard-number\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.number || '' | highlightSearch: value())\r\n : fuelcardOption?.number\r\n \"\r\n ></p>\r\n <p\r\n class=\"fuelcard-brand\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.brand || '' | highlightSearch: value())\r\n : fuelcardOption?.brand\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.account || '' | highlightSearch: value())\r\n : fuelcardOption?.account\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Shipper dropdown -->\r\n<ng-template #shipperRef>\r\n @if (dropdownOptions().length) {\r\n @for (shipper of dropdownOptions(); track $index; let index = $index) {\r\n @let shipperOption = cast(shipper, \"shipper\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"shipper-{{ shipperOption.id }}\"\r\n (pointerdown)=\"handleOption(shipperOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.businessName || '' | highlightSearch: value())\r\n : shipperOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.address?.address || ''\r\n | highlightSearch: value())\r\n : shipperOption.address?.address\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ shipperOption.pickupCount }} Pickup |\r\n {{ shipperOption.deliveryCount }} Delivery\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatch dropdown -->\r\n<ng-template #dispatchesRef>\r\n @if (dropdownOptions().length) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"reset()\"\r\n [class]=\"{\r\n selected: !selectedOption(),\r\n }\"\r\n >\r\n <p>Unassigned</p>\r\n <div class=\"unassigned-ltl\">\r\n <p>{{ unassignedCount() }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </button>\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n <!-- Temporary variant since BE doesn't support boards -->\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base dispatch-ltl\">\r\n <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- ftl dispatch dropdown -->\r\n<ng-template #ftlDispatchRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <!-- Load Status -->\r\n @if (dispatch.status?.statusString) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatch.status?.statusString\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatch.status?.statusString }}\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (dispatch.status?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ dispatch.status?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n <!-- Pending Load Count -->\r\n <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\r\n 0\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitDriverRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\r\n @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(driverBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (driverBoard.drivers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (driver of driverBoard.drivers || []; track driver.id) {\r\n @let driverOption = cast(driver, \"splitDriver\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(driverOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem\">\r\n <div class=\"dropdown-avatar\">\r\n <cai-avatar\r\n [driver]=\"driverOption\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n </div>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n driverOption.firstName + ' ' + driverOption.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n driverOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (driverOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ driverOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ driverOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ driverOption.payTypeValue }}</p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTruckRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\r\n @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(truckBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (truckBoard.trucks?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (truck of truckBoard.trucks || []; track truck.id) {\r\n @let truckOption = cast(truck, \"splitTruck\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [style.--truck-color]=\"truckOption.color?.code || ''\"\r\n [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n truckOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (truckOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ truckOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ truckOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n truckOption.location?.city &&\r\n truckOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ truckOption.location?.city }},\r\n {{ truckOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTrailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\r\n @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(trailerBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n trailerBoard.isTeamBoard\r\n ? \"Team Board\"\r\n : trailerBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (trailer of trailerBoard.trailers || []; track trailer.id) {\r\n @let trailerOption = cast(trailer, \"splitTrailer\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [style.--trailer-color]=\"trailerOption.color?.code || ''\"\r\n [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n trailerOption.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n trailerOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ trailerOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n trailerOption.location?.city &&\r\n trailerOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ trailerOption.location?.city }},\r\n {{ trailerOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #tollRef>\r\n @if (dropdownOptions().length) {\r\n @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\r\n @let tollOption = cast(toll, \"tollOption\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item pe-none\"\r\n [class]=\"{\r\n unfolded: tollOption.tollTransponders?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{ tollOption.groupName }}\r\n </p>\r\n </button>\r\n @let tollTransponders = tollOption.tollTransponders || [];\r\n @for (\r\n tollTransponder of tollTransponders;\r\n track tollTransponder.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(tollTransponder, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'tollTransponderOption')?.id ===\r\n tollTransponder.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (tollTransponder.name || '' | highlightSearch: value())\r\n : tollTransponder.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatcher dropdown -->\r\n\r\n<ng-template #dispatcherRef>\r\n @if (dropdownOptions().length) {\r\n @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\r\n @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dispatcherOption.id }}\"\r\n (pointerdown)=\"handleOption(dispatcherOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (dispatcherOption.fullName || '' | highlightSearch: value())\r\n : dispatcherOption.fullName\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #truckRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let truckOption = cast(truck, \"truckOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ truckOption.id }}\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'truckOption')?.id === truckOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (truckOption.name || '' | highlightSearch: value())\r\n : truckOption.name\r\n \"\r\n ></p>\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"truckOption.logoName.slice(0, -4)\"\r\n [name]=\"truckOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #trailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let trailerOption = cast(truck, \"trailerOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ trailerOption.id }}\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (trailerOption.name || '' | highlightSearch: value())\r\n : trailerOption.name\r\n \"\r\n ></p>\r\n\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"trailerOption.logoName.slice(0, -4)\"\r\n [name]=\"trailerOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #providerRef>\r\n @if (dropdownOptions().length) {\r\n @for (provider of dropdownOptions(); track $index; let index = $index) {\r\n @let providerOption = cast(provider, \"provider\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ providerOption?.id }}\"\r\n (pointerdown)=\"handleOption(providerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'provider')?.id === providerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Hazardous dropdown -->\r\n<ng-template #hazardousRef>\r\n @if (dropdownOptions().length) {\r\n @for (hazardous of dropdownOptions(); track $index; let index = $index) {\r\n @let hazardousOption = cast(hazardous, \"hazardous\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ hazardousOption.id }}\"\r\n (pointerdown)=\"handleOption(hazardousOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (hazardousOption.description || '' | highlightSearch: value())\r\n : hazardousOption.description\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #pmRef>\r\n @if (dropdownOptions().length) {\r\n @for (pm of dropdownOptions(); track $index; let index = $index) {\r\n @let pmOption = cast(pm, \"pmOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ pmOption.id }}\"\r\n (pointerdown)=\"handleOption(pmOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"pmOption.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (pmOption.title || '' | highlightSearch: value())\r\n : pmOption.title\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #colorRef>\r\n @if (dropdownOptions().length) {\r\n @for (color of dropdownOptions(); track $index; let index = $index) {\r\n @let colorOption = cast(color, \"colorOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item color-item\"\r\n id=\"option-{{ colorOption.id }}\"\r\n (pointerdown)=\"handleOption(colorOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'colorOption')?.id === colorOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (colorOption.name || '' | highlightSearch: value())\r\n : colorOption.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #stateRef>\r\n @if (dropdownOptions().length) {\r\n @for (state of dropdownOptions(); track $index; let index = $index) {\r\n @let stateOption = cast(state, \"state\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ stateOption.id }}\"\r\n (pointerdown)=\"handleOption(stateOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'state')?.id === stateOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState\r\n ? ' (' + stateOption?.stateName + ')'\r\n : '') || '' | highlightSearch: value())\r\n : stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fuelStopTransactionRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n franchise of dropdownOptions();\r\n track franchise.id;\r\n let groupIndex = $index\r\n ) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let franchiseOption = cast(franchise, \"franchise\")!;\r\n @if (franchiseOption?.count !== null) {\r\n <div\r\n class=\"dropdown-group\"\r\n [class.no-items]=\"!franchiseOption?.count\"\r\n [class]=\"{\r\n active: openGroup() === franchiseOption.id,\r\n }\"\r\n [style.--max-height]=\"\r\n openGroup() === franchiseOption.id\r\n ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\r\n : '26px'\r\n \"\r\n >\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\r\n [class]=\"{\r\n unfolded: openGroup() === franchiseOption.id,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n <p class=\"counter\">{{ franchiseOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @if (openGroup() === franchiseOption.id) {\r\n @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\r\n @for (\r\n fuelStopStore of franchiseOption.fuelStopStores;\r\n track fuelStopStore.id\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === $index + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item fuel-stop-transaction-store\"\r\n [class]=\"{\r\n focused: isOptionFocused,\r\n }\"\r\n (pointerdown)=\"handleOption(fuelStopStore, $event)\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n fuelStopStore?.store ?? '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n @let city = fuelStopStore?.address?.city ?? \"\";\r\n @let state = fuelStopStore?.address?.stateShortName ?? \"\";\r\n @let zip = fuelStopStore?.address?.zipCode ?? \"\";\r\n <p\r\n class=\"fuel-stop-transaction-store-address\"\r\n [innerHTML]=\"\r\n city + (state || zip ? ', ' : '') + state + ' ' + zip\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n\r\n @if (fuelStopStore?.[\"favourite\"]) {\r\n <svg-icon\r\n name=\"cai-favorite\"\r\n class=\"favorite-icon\"\r\n ></svg-icon>\r\n }\r\n </button>\r\n }\r\n <!-- Infinite scroll trigger - emits event when item comes into view -->\r\n <div\r\n class=\"dropdown-infinite-scroll-item\"\r\n caiIntersectionObserver\r\n [threshold]=\"0.1\"\r\n (inView)=\"onDropdownScrolledToBottom(true)\"\r\n ></div>\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n [class.focused]=\"\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0\r\n \"\r\n (pointerdown)=\"handleOption(franchiseOption, $event)\"\r\n >\r\n <p\r\n class=\"fuel-stop-transaction-nostore\"\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n\r\n<!-- #region Selected options -->\r\n\r\n<!-- selected dispatch -->\r\n<ng-template #selectedDispatchRef>\r\n @let dispatchOption = cast(selectedOption(), \"dispatch\");\r\n @if (dispatchOption && !inputRef.value && !isAdding()) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ dispatchOption!.truck.truckNumber }}\r\n </p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatchOption!.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"\r\n cast(\r\n selectedOption(),\r\n 'dispatch'\r\n )!.trailer?.trailerType?.logoName?.slice(0, -4)\r\n \"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ dispatchOption!.trailer?.trailerNumber }}\r\n </p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatchOption!.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" & \" +\r\n dispatchOption!.coDriver?.firstName\r\n }}\r\n </p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatchOption!.driver\"\r\n [size]=\"18\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" \" +\r\n dispatchOption!.driver.lastName\r\n }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"selected-end-item\">\r\n {{ dispatchOption!.payType }}\r\n </p>\r\n </div>\r\n } @else {\r\n @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\r\n <p class=\"dropdown-selected\">Unassigned</p>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- selected broker -->\r\n<ng-template #selectedBrokerRef>\r\n @let brokerOption = cast(selectedOption(), \"broker\");\r\n @if (brokerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if ((brokerOption!.availableCredit || 0) < 0) {\r\n <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\r\n }\r\n <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n @if (!brokerOption!.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>\r\n {{ brokerOption!.availableCredit || 0 | currency }}\r\n </p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedContactRef>\r\n @let contactOption = cast(selectedOption(), \"contact\");\r\n @if (contactOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ contactOption?.phone }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedShipperRef>\r\n @let shipperOption = cast(selectedOption(), \"shipper\");\r\n @if (shipperOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ shipperOption?.address?.address }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOwnerRef>\r\n @let ownerOption = cast(selectedOption(), \"owner\");\r\n @if (ownerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\r\n <p class=\"\">{{ ownerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedFuelcardRef>\r\n @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\r\n @if (fuelcardOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"fuelcard-number\">\r\n {{ fuelcardOption?.number }}\r\n </p>\r\n <p class=\"fuelcard-brand\">\r\n {{ fuelcardOption?.brand }}\r\n </p>\r\n <p class=\"\">\r\n {{ fuelcardOption?.account }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedBankRef>\r\n @let bankOption = cast(selectedOption(), \"bank\");\r\n @if (bankOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (bankOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedProviderRef>\r\n @let providerOption = cast(selectedOption(), \"provider\");\r\n @if (providerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedMakeRef>\r\n @let makeOption = cast(selectedOption(), \"make\");\r\n @if (makeOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (makeOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedStateRef>\r\n @let stateOption = cast(selectedOption(), \"state\");\r\n @if (stateOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ stateOption?.stateShortName }}\r\n {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedDispatcherRef>\r\n @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\r\n @if (dispatcherOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n ></cai-avatar>\r\n <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTruckRef>\r\n @let truckOption = cast(selectedOption(), \"truckOption\");\r\n @if (truckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"truckOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTrailerRef>\r\n @let trailerOption = cast(selectedOption(), \"trailerOption\");\r\n @if (trailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"trailerOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedHazardousRef>\r\n @let hazardousOption = cast(selectedOption(), \"hazardous\");\r\n @if (hazardousOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"hazard-icon\"\r\n [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\r\n {{ hazardousOption?.description }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedPmRef>\r\n @let pmOption = cast(selectedOption(), \"pmOption\");\r\n @if (pmOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"pmOption?.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ pmOption?.title }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedColorRef>\r\n @let colorOption = cast(selectedOption(), \"colorOption\");\r\n @if (colorOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ colorOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTollRef>\r\n @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\r\n @if (tollOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">\r\n {{ tollOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitDriverRef>\r\n @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\r\n @if (splitDriverOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem\">\r\n <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <p class=\"selected-end-item\">\r\n {{ splitDriverOption.payTypeValue }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTruckRef>\r\n @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\r\n @if (splitTruckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ splitTruckOption!.truckNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTruckOption!.location?.city &&\r\n splitTruckOption!.location?.stateShortName\r\n ) {\r\n {{ splitTruckOption!.location?.city }},\r\n {{ splitTruckOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTrailerRef>\r\n @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\r\n @if (splitTrailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ splitTrailerOption!.trailerNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTrailerOption!.location?.city &&\r\n splitTrailerOption!.location?.stateShortName\r\n ) {\r\n {{ splitTrailerOption!.location?.city }},\r\n {{ splitTrailerOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #passwordTooltip>\r\n {{ visible() ? \"Hide\" : \"Show\" }}\r\n</ng-template>\r\n\r\n<ng-template #errorTooltip>\r\n @if (\r\n (config().errorBehavior === \"floating\" ||\r\n (config().errorBehavior === \"static\" && hasText()) ||\r\n config().inTable) &&\r\n invalid &&\r\n !dropdown.isOpen()\r\n ) {\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-neutral)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"], dependencies: [{ kind: "directive", type:
|
|
4031
4031
|
// Directives
|
|
4032
4032
|
PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "account", "reveal", "appMask", "max"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat", "max", "isNumberFormattingDisabled", "disableDecimals", "prefix"] }, { kind: "directive", type: MaskDirective, selector: "[appMask]", inputs: ["appMask", "reveal"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[caiInfiniteScroll]", inputs: ["scrollThreshold", "debounceTime"], outputs: ["scrolledToBottom"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[caiIntersectionObserver]", inputs: ["threshold", "rootMargin"], outputs: ["inView"] }, { kind: "ngmodule", type:
|
|
4033
4033
|
// Bootstrap
|
|
@@ -4061,7 +4061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
4061
4061
|
// Components
|
|
4062
4062
|
SvgIconComponent,
|
|
4063
4063
|
AvatarComponent,
|
|
4064
|
-
], template: "<!-- #region Variables -->\r\n@let valid =\r\n ngControl?.valid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let invalid =\r\n ngControl?.invalid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let subcontent =\r\n config().subcontent ||\r\n (config().dropdown === \"subcontent\" &&\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\r\n\r\n@let name = config().name;\r\n@let password = config().type === \"password\" || config().type === \"account\";\r\n\r\n@let optionLabel = this.config().optionLabel || \"label\";\r\n@let dropdownType = this.config().dropdown;\r\n\r\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\r\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\r\n\r\n@let tooltipClass =\r\n config().inverse\r\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\r\n : \"tooltip input-tooltip\";\r\n\r\n<!-- #region Multiple selection -->\r\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\r\n <div\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"toggleHovered(true)\"\r\n (mouseleave)=\"toggleHovered(false)\"\r\n class=\"multiple-container\"\r\n [class]=\"{\r\n focused: focused(),\r\n hovered: hovered(),\r\n }\"\r\n >\r\n <label class=\"multiple-label\">{{ name }}</label>\r\n\r\n @for (option of multipleSelectedOptions(); track $index) {\r\n <div class=\"multiple-selected\">\r\n <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\r\n <button\r\n type=\"button\"\r\n class=\"\"\r\n (pointerdown)=\"handleOption(option, $event)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Clear\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n [container]=\"'body'\"\r\n >\r\n <svg-icon\r\n name=\"cai-cancel\"\r\n class=\"multiple-remove-button multiple-remove-icon bg-icon\"\r\n ></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n<!-- #endregion -->\r\n\r\n@let hasFloatingError =\r\n config().errorBehavior === \"floating\" ||\r\n (!!config().inTable && config().placeholderBehavior !== \"static\");\r\n\r\n<div\r\n class=\"app-input-container\"\r\n [class]=\"\r\n {\r\n config: config(),\r\n hideValidation: hideValidation(),\r\n isPasswordVisible: visible(),\r\n isInvalid: !!invalid,\r\n isValid: !!valid,\r\n isHovered: hovered(),\r\n hasText: hasText(),\r\n isAdding: isAdding(),\r\n selectedOption: selectedOption(),\r\n } | inputClass\r\n \"\r\n ngbDropdown\r\n [autoClose]=\"false\"\r\n #dropdown=\"ngbDropdown\"\r\n dropdownClass=\"cai-dropdown\"\r\n #containerRef\r\n [ngbTooltip]=\"errorTooltip\"\r\n [disableTooltip]=\"!hasFloatingError\"\r\n [container]=\"'body'\"\r\n [placement]=\"['bottom']\"\r\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\r\n (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\r\n>\r\n <!-- \r\n [popperOptions]=\"dropdownPopperOptions\"\r\n -->\r\n @if (config().icon && !password && !config().withButtons) {\r\n <div\r\n class=\"icon-container\"\r\n (pointerdown)=\"focus($event)\"\r\n [class]=\"{\r\n 'colored-icon': config().iconColor,\r\n }\"\r\n [style.--icon-color]=\"config().iconColor || ''\"\r\n >\r\n <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\r\n @if (!config().noSeparator) {\r\n <div class=\"separator\"></div>\r\n }\r\n </div>\r\n }\r\n @if (password) {\r\n <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\r\n <div\r\n class=\"password-icons\"\r\n [ngbTooltip]=\"passwordTooltip\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [placement]=\"'top'\"\r\n [openDelay]=\"600\"\r\n >\r\n <svg-icon\r\n class=\"icon password-key hover-icon\"\r\n name=\"cai-password-key\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-shown hover-icon\"\r\n name=\"cai-password-shown\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-hidden hover-icon\"\r\n name=\"cai-password-hidden\"\r\n ></svg-icon>\r\n </div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n <input\r\n class=\"app-input\"\r\n [tabindex]=\"isDisabled() ? '-1' : '0'\"\r\n [type]=\"\r\n password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\r\n \"\r\n [required]=\"config().required\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"dispatchOnBlur()\"\r\n [id]=\"id()\"\r\n [attr.aria-label]=\"config().label\"\r\n [attr.name]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n [placeholder]=\"config()?.placeholder || ''\"\r\n [autocomplete]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n #inputRef\r\n [appPassword]=\"password\"\r\n [appMask]=\"config().mask || ''\"\r\n [reveal]=\"config().reveal || 0\"\r\n [account]=\"config().type === 'account'\"\r\n [visible]=\"visible()\"\r\n [appNumberFormat]=\"config().type === 'number'\"\r\n [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\r\n [disableDecimals]=\"config().disableDecimals || false\"\r\n [prefix]=\"config().prefix || ''\"\r\n [max]=\"config().max\"\r\n (keydown)=\"handleKeydown($event)\"\r\n (focus)=\"onFocus($event)\"\r\n />\r\n @if (\r\n !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\r\n config().placeholderBehavior !== \"hidden\"\r\n ) {\r\n <label\r\n class=\"app-input-label\"\r\n [class.placeholder-color]=\"this.config().placeholderColor\"\r\n [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\r\n (click)=\"focus($event)\"\r\n >\r\n <!-- Truck Trailer Driver Dropdown label -->\r\n @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\r\n <p class=\"truck-item app-input-name\">Truck</p>\r\n <p class=\"trailer-item\">Trailer</p>\r\n <p>Driver</p>\r\n <p class=\"sub-label\">Rate</p>\r\n }\r\n <!-- Split Load -->\r\n @else if (dropdownType === \"split-driver\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Rate</p>\r\n } @else if (\r\n dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\r\n ) {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Location</p>\r\n }\r\n <!-- Dropdown variants -->\r\n @else if (dropdownType === \"broker\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Credit</p>\r\n } @else if (dropdownType === \"contact\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Phone</p>\r\n } @else if (dropdownType === \"shipper\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Address</p>\r\n } @else if (dropdownType === \"owner\") {\r\n <p class=\"owner-ein app-input-name\">EIN</p>\r\n <p class=\"app-input-name\">Company Name</p>\r\n } @else if (dropdownType === \"fuelcard\") {\r\n <p class=\"fuelcard-number app-input-name\">Card No.</p>\r\n <p class=\"fuelcard-brand app-input-name\">Provider</p>\r\n <p class=\"app-input-name\">Nickname</p>\r\n }\r\n <!-- Default Dropdown label -->\r\n @else {\r\n <span class=\"app-input-name\">{{ name }}</span>\r\n }\r\n </label>\r\n }\r\n @if (config().type === \"number\" && config().withButtons) {\r\n <div class=\"number-container\">\r\n <div class=\"number-buttons\">\r\n <div class=\"separator\"></div>\r\n <div\r\n class=\"plus-button-container\"\r\n ngbTooltip=\"Add\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n (pointerdown)=\"increment($event)\"\r\n >\r\n <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\r\n </div>\r\n <div\r\n class=\"minus-button-container\"\r\n ngbTooltip=\"Remove\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n (pointerdown)=\"decrement($event)\"\r\n >\r\n <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!config().inTable) {\r\n @if (!dropdownType) {\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"app-input-icon positive-icon\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-status-warning\"\r\n class=\"app-input-icon warning-icon\"\r\n ></svg-icon>\r\n }\r\n }\r\n\r\n @if (\r\n invalid &&\r\n config().errorBehavior !== \"hidden\" &&\r\n (ngControl?.errors | errorMessage: config().customErrors)[0] &&\r\n !(config().inTable && config().placeholderBehavior !== \"static\")\r\n ) {\r\n <div class=\"app-input-error\">\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n </div>\r\n }\r\n\r\n <!-- Accept button -->\r\n @if ((config().add && isAdding()) || config().isEdit) {\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon accept-button\"\r\n (pointerdown)=\"addOption()\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Confirm\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n >\r\n <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\r\n </button>\r\n }\r\n\r\n <!-- Cancel button -->\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon cancel-button\"\r\n (pointerdown)=\"reset($event)\"\r\n (mouseenter)=\"onClearHover(true)\"\r\n (mouseleave)=\"onClearHover(false)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"{{\r\n hasText()\r\n | clearTooltip\r\n : isAdding()\r\n : config().isEdit || false\r\n : config().placeholderBehavior || 'dynamic'\r\n : dropdownType === 'multiple'\r\n : config().hasResetButton\r\n : canTooltipBeVisible()\r\n }}\"\r\n [openDelay]=\"600\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n >\r\n @let iconName =\r\n config().hasResetButton\r\n ? \"cai-reset\"\r\n : config().removable\r\n ? \"cai-delete\"\r\n : \"cai-cancel\";\r\n <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\r\n <!-- Dropdown menu -->\r\n\r\n @let hasLoader = isLoading() !== undefined;\r\n\r\n @if (hasLoader) {\r\n <div class=\"loader\" [class.loading]=\"isLoading()\">\r\n <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\r\n </div>\r\n }\r\n\r\n @if (dropdownType) {\r\n @let maxHeight =\r\n ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n @let animateDropdown =\r\n dropdownType !== \"toll\" &&\r\n dropdownType !== \"fuel-stop-transaction\" &&\r\n dropdownType !== \"dispatch\" &&\r\n dropdownType !== \"ftl-dispatch\" &&\r\n dropdownType !== \"split-driver\" &&\r\n dropdownType !== \"split-truck\" &&\r\n dropdownType !== \"split-trailer\";\r\n\r\n @let unfilteredHeight =\r\n dropdownType === \"contact\" || !animateDropdown\r\n ? 244\r\n : ((options()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n <div\r\n ngbDropdownMenu\r\n class=\"dropdown-menu input-dropdown-menu\"\r\n [class]=\"{\r\n 'hide-dropdown':\r\n config().dropdownAutocomplete &&\r\n !dropdownOptions()?.length &&\r\n !(showNoResults() && value()),\r\n 'animate-dropdown': animateDropdown,\r\n 'size-22': config().size === 22,\r\n 'has-stroke': config().hasStroke,\r\n }\"\r\n [class.closing]=\"closing()\"\r\n [style.--unfiltered-height]=\"\r\n unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\r\n \"\r\n [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\r\n [style.width.px]=\"containerWidth()\"\r\n [tabindex]=\"-1\"\r\n (pointerdown)=\"onDropdownBackgroundClick($event)\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <div\r\n class=\"dropdown-menu-content\"\r\n [tabindex]=\"-1\"\r\n caiInfiniteScroll\r\n [scrollThreshold]=\"50\"\r\n (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\r\n >\r\n @if (config().add) {\r\n <button\r\n class=\"dropdown-item add-new\"\r\n [class.focused]=\"\r\n focusedOptionIndex === -1 ||\r\n groupedNavigationState?.groupIndex === -1\r\n \"\r\n (pointerdown)=\"handleAddingOption($event)\"\r\n >\r\n <p>ADD NEW</p>\r\n <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n @if (!config().dropdownAutocomplete) {\r\n <div\r\n class=\"dropdown-icon-container\"\r\n [class.open]=\"dropdown.isOpen() && !closing()\"\r\n (pointerdown)=\"onDropdownIconClick($event)\"\r\n >\r\n <svg-icon\r\n name=\"cai-arrow-secondary-down\"\r\n class=\"dropdown-icon icon\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n @let specialDropdown =\r\n dropdownType === \"dispatch\" ||\r\n dropdownType === \"ftl-dispatch\" ||\r\n dropdownType === \"broker\" ||\r\n dropdownType === \"contact\" ||\r\n dropdownType === \"shipper\" ||\r\n dropdownType === \"bank\" ||\r\n dropdownType === \"dispatcher\" ||\r\n dropdownType === \"truck\" ||\r\n dropdownType === \"trailer\" ||\r\n dropdownType === \"hazardous\" ||\r\n dropdownType === \"state\" ||\r\n dropdownType === \"owner\" ||\r\n dropdownType === \"fuelcard\" ||\r\n dropdownType === \"pm\" ||\r\n dropdownType === \"color\" ||\r\n dropdownType === \"make\" ||\r\n dropdownType === \"toll\" ||\r\n dropdownType === \"provider\" ||\r\n dropdownType === \"split-driver\" ||\r\n dropdownType === \"split-truck\" ||\r\n dropdownType === \"split-trailer\";\r\n <!-- Placeholder -->\r\n @if (specialDropdown) {\r\n <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\r\n } @else if (\r\n (config().add || config().search) &&\r\n !inputRef.value &&\r\n !this.isAdding() &&\r\n dropdownType !== \"subcontent\"\r\n ) {\r\n <div class=\"dropdown-selected\">\r\n @if (config().placeholderBehavior === \"static\") {\r\n <p class=\"selected-label-hidden\">\r\n {{ name + (config().required ? \" *\" : \"\") }}\r\n </p>\r\n <p class=\"selected-text\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n @if (\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ] === \"Hazardous\"\r\n ) {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n } @else if (config().isEdit && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ name }}</p>\r\n </div>\r\n }\r\n @if (config().passwordRequirements) {\r\n <div\r\n class=\"dropdown-menu password-requirement\"\r\n ngbDropdownMenu\r\n [style.width.px]=\"containerWidth()\"\r\n [class.closing]=\"closing()\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\r\n </div>\r\n }\r\n @if (subcontent) {\r\n <p class=\"subcontent\">\r\n @if (!(config().alignment === \"right\")) {\r\n <span class=\"subcontent-hide\"\r\n >{{\r\n config().search\r\n ? selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n : inputRef.value\r\n }}\r\n </span>\r\n }\r\n {{ subcontent }}\r\n </p>\r\n }\r\n</div>\r\n\r\n<!-- #region Templates -->\r\n\r\n<!-- #region Password requirements -->\r\n<ng-template #passwordRequirementsRef>\r\n @let isMinLengthValid =\r\n !this.ngControl?.errors?.[\"minlength\"] && this.value();\r\n @let isHasNumberValid =\r\n !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\r\n @let isHasSymbolValid =\r\n !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\r\n @let isHasUppercaseValid =\r\n !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\r\n\r\n <p>Strong Password Requirement</p>\r\n <ul>\r\n <li [class.valid]=\"isMinLengthValid\">\r\n <svg-icon\r\n [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\r\n class=\"icon\"\r\n ></svg-icon\r\n ><span>Minimum 8 characters</span>\r\n </li>\r\n <li [class.valid]=\"isHasNumberValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One number</span>\r\n </li>\r\n <li [class.valid]=\"isHasSymbolValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One symbol</span>\r\n </li>\r\n <li [class.valid]=\"isHasUppercaseValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One upper-case letter</span>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n<!-- #endregion -->\r\n@let search = config().search;\r\n\r\n<ng-template #dropdownMenuRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\r\n }\r\n @case (\"multiple\") {\r\n <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\r\n }\r\n @case (\"fuel-stop-transaction\") {\r\n <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\r\n }\r\n @case (\"subcontent\") {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOptionRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- Standard dropdown -->\r\n<ng-template #dropdownOptionsRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n >\r\n @if (dropdownOption[optionLabel] === \"Hazardous\") {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #multipleRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n [class]=\"{\r\n selected: isSelectedOption(dropdownOption),\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bankRef>\r\n @if (dropdownOptions().length) {\r\n @for (bank of dropdownOptions(); track $index; let index = $index) {\r\n @let bankOption = cast(bank, \"bank\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ bankOption.id }}\"\r\n (pointerdown)=\"handleOption(bankOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (bankOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"bankOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (bankOption.name || '' | highlightSearch: value())\r\n : bankOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #makeRef>\r\n @if (dropdownOptions().length) {\r\n @for (make of dropdownOptions(); track $index; let index = $index) {\r\n @let makeOption = cast(make, \"make\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ makeOption.id }}\"\r\n (pointerdown)=\"handleOption(makeOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'make')?.id === makeOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (makeOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"makeOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (makeOption.name || '' | highlightSearch: value())\r\n : makeOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Broker -->\r\n<ng-template #brokerRef>\r\n @if (dropdownOptions().length) {\r\n @for (broker of dropdownOptions(); track $index; let index = $index) {\r\n @let brokerOption = cast(broker, \"broker\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"broker-{{ brokerOption.id }}\"\r\n (pointerdown)=\"\r\n !(brokerOption.dnu || brokerOption.ban) &&\r\n handleOption(brokerOption, $event)\r\n \"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\r\n focused: focusedOptionIndex === index,\r\n banned: brokerOption.dnu || brokerOption.ban,\r\n dnu: brokerOption.dnu,\r\n }\"\r\n >\r\n @if (brokerOption?.dnu || brokerOption?.ban) {\r\n <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\r\n } @else if (brokerOption?.fraudCheck) {\r\n <svg-icon\r\n name=\"cai-status-warning-lite\"\r\n class=\"icon fraud\"\r\n ></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content\"\r\n [innerHTML]=\"\r\n search\r\n ? (brokerOption.businessName || '' | highlightSearch: value())\r\n : brokerOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n @if (!brokerOption.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ brokerOption.loadsCount }} |\r\n {{ brokerOption.availableCredit || 0 | currency }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Contact dropdown -->\r\n<ng-template #contactRef>\r\n @if (dropdownOptions().length) {\r\n @for (contact of dropdownOptions(); track $index; let index = $index) {\r\n @let contactOption = cast(contact, \"contact\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"contact-{{ contact.id }}\"\r\n (pointerdown)=\"handleOption(contact, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'contact')?.id === contact.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (contactOption.contactName || '' | highlightSearch: value())\r\n : contactOption.contactName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p>{{ contactOption.department?.name }}</p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ contactOption.phone }}\r\n </p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Owner dropdown -->\r\n<ng-template #ownerRef>\r\n @if (dropdownOptions().length) {\r\n @for (owner of dropdownOptions(); track $index; let index = $index) {\r\n @let ownerOption = cast(owner, \"owner\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"owner-{{ ownerOption?.id }}\"\r\n (pointerdown)=\"handleOption(ownerOption!, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"owner-ein\"\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.ein || '' | highlightSearch: value())\r\n : ownerOption?.ein\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.name || '' | highlightSearch: value())\r\n : ownerOption?.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Fuelcard dropdown -->\r\n<ng-template #fuelcardRef>\r\n @if (dropdownOptions().length) {\r\n @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\r\n @let fuelcardOption = cast(fuelcard, \"fuelCard\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"fuelcard-{{ fuelcardOption?.id }}\"\r\n (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"fuelcard-number\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.number || '' | highlightSearch: value())\r\n : fuelcardOption?.number\r\n \"\r\n ></p>\r\n <p\r\n class=\"fuelcard-brand\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.brand || '' | highlightSearch: value())\r\n : fuelcardOption?.brand\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.account || '' | highlightSearch: value())\r\n : fuelcardOption?.account\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Shipper dropdown -->\r\n<ng-template #shipperRef>\r\n @if (dropdownOptions().length) {\r\n @for (shipper of dropdownOptions(); track $index; let index = $index) {\r\n @let shipperOption = cast(shipper, \"shipper\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"shipper-{{ shipperOption.id }}\"\r\n (pointerdown)=\"handleOption(shipperOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.businessName || '' | highlightSearch: value())\r\n : shipperOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.address?.address || ''\r\n | highlightSearch: value())\r\n : shipperOption.address?.address\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ shipperOption.pickupCount }} Pickup |\r\n {{ shipperOption.deliveryCount }} Delivery\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatch dropdown -->\r\n<ng-template #dispatchesRef>\r\n @if (dropdownOptions().length) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"reset()\"\r\n [class]=\"{\r\n selected: !selectedOption(),\r\n }\"\r\n >\r\n <p>Unassigned</p>\r\n <div class=\"unassigned-ltl\">\r\n <p>{{ unassignedCount() }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </button>\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n <!-- Temporary variant since BE doesn't support boards -->\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base dispatch-ltl\">\r\n <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- ftl dispatch dropdown -->\r\n<ng-template #ftlDispatchRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <!-- Load Status -->\r\n @if (dispatch.status?.statusString) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatch.status?.statusString\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatch.status?.statusString }}\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (dispatch.status?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ dispatch.status?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n <!-- Pending Load Count -->\r\n <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\r\n 0\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitDriverRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\r\n @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(driverBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (driverBoard.drivers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (driver of driverBoard.drivers || []; track driver.id) {\r\n @let driverOption = cast(driver, \"splitDriver\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(driverOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem\">\r\n <div class=\"dropdown-avatar\">\r\n <cai-avatar\r\n [driver]=\"driverOption\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n </div>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n driverOption.firstName + ' ' + driverOption.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n driverOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (driverOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ driverOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ driverOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ driverOption.payTypeValue }}</p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTruckRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\r\n @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(truckBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (truckBoard.trucks?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (truck of truckBoard.trucks || []; track truck.id) {\r\n @let truckOption = cast(truck, \"splitTruck\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [style.--truck-color]=\"truckOption.color?.code || ''\"\r\n [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n truckOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (truckOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ truckOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ truckOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n truckOption.location?.city &&\r\n truckOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ truckOption.location?.city }},\r\n {{ truckOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTrailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\r\n @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(trailerBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n trailerBoard.isTeamBoard\r\n ? \"Team Board\"\r\n : trailerBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (trailer of trailerBoard.trailers || []; track trailer.id) {\r\n @let trailerOption = cast(trailer, \"splitTrailer\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [style.--trailer-color]=\"trailerOption.color?.code || ''\"\r\n [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n trailerOption.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n trailerOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ trailerOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n trailerOption.location?.city &&\r\n trailerOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ trailerOption.location?.city }},\r\n {{ trailerOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #tollRef>\r\n @if (dropdownOptions().length) {\r\n @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\r\n @let tollOption = cast(toll, \"tollOption\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item pe-none\"\r\n [class]=\"{\r\n unfolded: tollOption.tollTransponders?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{ tollOption.groupName }}\r\n </p>\r\n </button>\r\n @let tollTransponders = tollOption.tollTransponders || [];\r\n @for (\r\n tollTransponder of tollTransponders;\r\n track tollTransponder.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(tollTransponder, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'tollTransponderOption')?.id ===\r\n tollTransponder.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (tollTransponder.name || '' | highlightSearch: value())\r\n : tollTransponder.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatcher dropdown -->\r\n\r\n<ng-template #dispatcherRef>\r\n @if (dropdownOptions().length) {\r\n @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\r\n @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dispatcherOption.id }}\"\r\n (pointerdown)=\"handleOption(dispatcherOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (dispatcherOption.fullName || '' | highlightSearch: value())\r\n : dispatcherOption.fullName\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #truckRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let truckOption = cast(truck, \"truckOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ truckOption.id }}\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'truckOption')?.id === truckOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (truckOption.name || '' | highlightSearch: value())\r\n : truckOption.name\r\n \"\r\n ></p>\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"truckOption.logoName.slice(0, -4)\"\r\n [name]=\"truckOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #trailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let trailerOption = cast(truck, \"trailerOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ trailerOption.id }}\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (trailerOption.name || '' | highlightSearch: value())\r\n : trailerOption.name\r\n \"\r\n ></p>\r\n\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"trailerOption.logoName.slice(0, -4)\"\r\n [name]=\"trailerOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #providerRef>\r\n @if (dropdownOptions().length) {\r\n @for (provider of dropdownOptions(); track $index; let index = $index) {\r\n @let providerOption = cast(provider, \"provider\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ providerOption?.id }}\"\r\n (pointerdown)=\"handleOption(providerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'provider')?.id === providerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Hazardous dropdown -->\r\n<ng-template #hazardousRef>\r\n @if (dropdownOptions().length) {\r\n @for (hazardous of dropdownOptions(); track $index; let index = $index) {\r\n @let hazardousOption = cast(hazardous, \"hazardous\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ hazardousOption.id }}\"\r\n (pointerdown)=\"handleOption(hazardousOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (hazardousOption.description || '' | highlightSearch: value())\r\n : hazardousOption.description\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #pmRef>\r\n @if (dropdownOptions().length) {\r\n @for (pm of dropdownOptions(); track $index; let index = $index) {\r\n @let pmOption = cast(pm, \"pmOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ pmOption.id }}\"\r\n (pointerdown)=\"handleOption(pmOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"pmOption.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (pmOption.title || '' | highlightSearch: value())\r\n : pmOption.title\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #colorRef>\r\n @if (dropdownOptions().length) {\r\n @for (color of dropdownOptions(); track $index; let index = $index) {\r\n @let colorOption = cast(color, \"colorOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item color-item\"\r\n id=\"option-{{ colorOption.id }}\"\r\n (pointerdown)=\"handleOption(colorOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'colorOption')?.id === colorOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (colorOption.name || '' | highlightSearch: value())\r\n : colorOption.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #stateRef>\r\n @if (dropdownOptions().length) {\r\n @for (state of dropdownOptions(); track $index; let index = $index) {\r\n @let stateOption = cast(state, \"state\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ stateOption.id }}\"\r\n (pointerdown)=\"handleOption(stateOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'state')?.id === stateOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState\r\n ? ' (' + stateOption?.stateName + ')'\r\n : '') || '' | highlightSearch: value())\r\n : stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fuelStopTransactionRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n franchise of dropdownOptions();\r\n track franchise.id;\r\n let groupIndex = $index\r\n ) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let franchiseOption = cast(franchise, \"franchise\")!;\r\n @if (franchiseOption?.count !== null) {\r\n <div\r\n class=\"dropdown-group\"\r\n [class.no-items]=\"!franchiseOption?.count\"\r\n [class]=\"{\r\n active: openGroup() === franchiseOption.id,\r\n }\"\r\n [style.--max-height]=\"\r\n openGroup() === franchiseOption.id\r\n ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\r\n : '26px'\r\n \"\r\n >\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\r\n [class]=\"{\r\n unfolded: openGroup() === franchiseOption.id,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n <p class=\"counter\">{{ franchiseOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @if (openGroup() === franchiseOption.id) {\r\n @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\r\n @for (\r\n fuelStopStore of franchiseOption.fuelStopStores;\r\n track fuelStopStore.id\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === $index + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item fuel-stop-transaction-store\"\r\n [class]=\"{\r\n focused: isOptionFocused,\r\n }\"\r\n (pointerdown)=\"handleOption(fuelStopStore, $event)\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n fuelStopStore?.store ?? '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n @let city = fuelStopStore?.address?.city ?? \"\";\r\n @let state = fuelStopStore?.address?.stateShortName ?? \"\";\r\n @let zip = fuelStopStore?.address?.zipCode ?? \"\";\r\n <p\r\n class=\"fuel-stop-transaction-store-address\"\r\n [innerHTML]=\"\r\n city + (state || zip ? ', ' : '') + state + ' ' + zip\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n\r\n @if (fuelStopStore?.[\"favourite\"]) {\r\n <svg-icon\r\n name=\"cai-favorite\"\r\n class=\"favorite-icon\"\r\n ></svg-icon>\r\n }\r\n </button>\r\n }\r\n <!-- Infinite scroll trigger - emits event when item comes into view -->\r\n <div\r\n class=\"dropdown-infinite-scroll-item\"\r\n caiIntersectionObserver\r\n [threshold]=\"0.1\"\r\n (inView)=\"onDropdownScrolledToBottom(true)\"\r\n ></div>\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n [class.focused]=\"\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0\r\n \"\r\n (pointerdown)=\"handleOption(franchiseOption, $event)\"\r\n >\r\n <p\r\n class=\"fuel-stop-transaction-nostore\"\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n\r\n<!-- #region Selected options -->\r\n\r\n<!-- selected dispatch -->\r\n<ng-template #selectedDispatchRef>\r\n @let dispatchOption = cast(selectedOption(), \"dispatch\");\r\n @if (dispatchOption && !inputRef.value && !isAdding()) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ dispatchOption!.truck.truckNumber }}\r\n </p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatchOption!.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"\r\n cast(\r\n selectedOption(),\r\n 'dispatch'\r\n )!.trailer?.trailerType?.logoName?.slice(0, -4)\r\n \"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ dispatchOption!.trailer?.trailerNumber }}\r\n </p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatchOption!.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" & \" +\r\n dispatchOption!.coDriver?.firstName\r\n }}\r\n </p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatchOption!.driver\"\r\n [size]=\"18\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" \" +\r\n dispatchOption!.driver.lastName\r\n }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"selected-end-item\">\r\n {{ dispatchOption!.payType }}\r\n </p>\r\n </div>\r\n } @else {\r\n @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\r\n <p class=\"dropdown-selected\">Unassigned</p>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- selected broker -->\r\n<ng-template #selectedBrokerRef>\r\n @let brokerOption = cast(selectedOption(), \"broker\");\r\n @if (brokerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if ((brokerOption!.availableCredit || 0) < 0) {\r\n <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\r\n }\r\n <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n @if (!brokerOption!.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>\r\n {{ brokerOption!.availableCredit || 0 | currency }}\r\n </p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedContactRef>\r\n @let contactOption = cast(selectedOption(), \"contact\");\r\n @if (contactOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ contactOption?.phone }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedShipperRef>\r\n @let shipperOption = cast(selectedOption(), \"shipper\");\r\n @if (shipperOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ shipperOption?.address?.address }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOwnerRef>\r\n @let ownerOption = cast(selectedOption(), \"owner\");\r\n @if (ownerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\r\n <p class=\"\">{{ ownerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedFuelcardRef>\r\n @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\r\n @if (fuelcardOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"fuelcard-number\">\r\n {{ fuelcardOption?.number }}\r\n </p>\r\n <p class=\"fuelcard-brand\">\r\n {{ fuelcardOption?.brand }}\r\n </p>\r\n <p class=\"\">\r\n {{ fuelcardOption?.account }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedBankRef>\r\n @let bankOption = cast(selectedOption(), \"bank\");\r\n @if (bankOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (bankOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedProviderRef>\r\n @let providerOption = cast(selectedOption(), \"provider\");\r\n @if (providerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedMakeRef>\r\n @let makeOption = cast(selectedOption(), \"make\");\r\n @if (makeOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (makeOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedStateRef>\r\n @let stateOption = cast(selectedOption(), \"state\");\r\n @if (stateOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ stateOption?.stateShortName }}\r\n {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedDispatcherRef>\r\n @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\r\n @if (dispatcherOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n ></cai-avatar>\r\n <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTruckRef>\r\n @let truckOption = cast(selectedOption(), \"truckOption\");\r\n @if (truckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"truckOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTrailerRef>\r\n @let trailerOption = cast(selectedOption(), \"trailerOption\");\r\n @if (trailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"trailerOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedHazardousRef>\r\n @let hazardousOption = cast(selectedOption(), \"hazardous\");\r\n @if (hazardousOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"hazard-icon\"\r\n [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\r\n {{ hazardousOption?.description }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedPmRef>\r\n @let pmOption = cast(selectedOption(), \"pmOption\");\r\n @if (pmOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"pmOption?.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ pmOption?.title }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedColorRef>\r\n @let colorOption = cast(selectedOption(), \"colorOption\");\r\n @if (colorOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ colorOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTollRef>\r\n @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\r\n @if (tollOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">\r\n {{ tollOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitDriverRef>\r\n @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\r\n @if (splitDriverOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem\">\r\n <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <p class=\"selected-end-item\">\r\n {{ splitDriverOption.payTypeValue }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTruckRef>\r\n @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\r\n @if (splitTruckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ splitTruckOption!.truckNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTruckOption!.location?.city &&\r\n splitTruckOption!.location?.stateShortName\r\n ) {\r\n {{ splitTruckOption!.location?.city }},\r\n {{ splitTruckOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTrailerRef>\r\n @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\r\n @if (splitTrailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ splitTrailerOption!.trailerNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTrailerOption!.location?.city &&\r\n splitTrailerOption!.location?.stateShortName\r\n ) {\r\n {{ splitTrailerOption!.location?.city }},\r\n {{ splitTrailerOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #passwordTooltip>\r\n {{ visible() ? \"Hide\" : \"Show\" }}\r\n</ng-template>\r\n\r\n<ng-template #errorTooltip>\r\n @if (\r\n (config().errorBehavior === \"floating\" ||\r\n (config().errorBehavior === \"static\" && hasText()) ||\r\n config().inTable) &&\r\n invalid &&\r\n !dropdown.isOpen()\r\n ) {\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button .bg-icon{opacity:1!important;color:#c20c0c!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .icon-container .icon,.has-right.static-placeholder.removable:hover:not(:has(.app-input:focus-visible)).has-text .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover){background-color:transparent!important}.removable:has(.cancel-button:hover) .separator{background-color:var(--color-icon-neutral)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"] }]
|
|
4064
|
+
], template: "<!-- #region Variables -->\r\n@let valid =\r\n ngControl?.valid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let invalid =\r\n ngControl?.invalid &&\r\n (ngControl?.touched || ngControl?.dirty) &&\r\n !isAdding() &&\r\n !isDisabled();\r\n@let subcontent =\r\n config().subcontent ||\r\n (config().dropdown === \"subcontent\" &&\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![config().optionLabel || \"label\"]);\r\n\r\n@let name = config().name;\r\n@let password = config().type === \"password\" || config().type === \"account\";\r\n\r\n@let optionLabel = this.config().optionLabel || \"label\";\r\n@let dropdownType = this.config().dropdown;\r\n\r\n@let focusedOptionIndex = keyboardNavigationState().singleIndex;\r\n@let groupedNavigationState = keyboardNavigationState().groupedNavigationState;\r\n\r\n@let tooltipClass =\r\n config().inverse\r\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\r\n : \"tooltip input-tooltip\";\r\n\r\n<!-- #region Multiple selection -->\r\n@if (config().dropdown === \"multiple\" && !!multipleSelectedOptions().length) {\r\n <div\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"toggleHovered(true)\"\r\n (mouseleave)=\"toggleHovered(false)\"\r\n class=\"multiple-container\"\r\n [class]=\"{\r\n focused: focused(),\r\n hovered: hovered(),\r\n }\"\r\n >\r\n <label class=\"multiple-label\">{{ name }}</label>\r\n\r\n @for (option of multipleSelectedOptions(); track $index) {\r\n <div class=\"multiple-selected\">\r\n <p>{{ cast(option, \"dropdownOption\")![optionLabel || \"label\"] }}</p>\r\n <button\r\n type=\"button\"\r\n class=\"\"\r\n (pointerdown)=\"handleOption(option, $event)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Clear\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n [container]=\"'body'\"\r\n >\r\n <svg-icon\r\n name=\"cai-cancel\"\r\n class=\"multiple-remove-button multiple-remove-icon bg-icon\"\r\n ></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n<!-- #endregion -->\r\n\r\n@let hasFloatingError =\r\n config().errorBehavior === \"floating\" ||\r\n (!!config().inTable && config().placeholderBehavior !== \"static\");\r\n\r\n<div\r\n class=\"app-input-container\"\r\n [class]=\"\r\n {\r\n config: config(),\r\n hideValidation: hideValidation(),\r\n isPasswordVisible: visible(),\r\n isInvalid: !!invalid,\r\n isValid: !!valid,\r\n isHovered: hovered(),\r\n hasText: hasText(),\r\n isAdding: isAdding(),\r\n selectedOption: selectedOption(),\r\n } | inputClass\r\n \"\r\n ngbDropdown\r\n [autoClose]=\"false\"\r\n #dropdown=\"ngbDropdown\"\r\n dropdownClass=\"cai-dropdown\"\r\n #containerRef\r\n [ngbTooltip]=\"errorTooltip\"\r\n [disableTooltip]=\"!hasFloatingError\"\r\n [container]=\"'body'\"\r\n [placement]=\"['bottom']\"\r\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\r\n (pointerdown)=\"focus($event)\"\r\n (mouseenter)=\"dropdownType === 'multiple' && toggleHovered(true)\"\r\n (mouseleave)=\"dropdownType === 'multiple' && toggleHovered(false)\"\r\n>\r\n <!-- \r\n [popperOptions]=\"dropdownPopperOptions\"\r\n -->\r\n @if (config().icon && !password && !config().withButtons) {\r\n <div\r\n class=\"icon-container\"\r\n (pointerdown)=\"focus($event)\"\r\n [class]=\"{\r\n 'colored-icon': config().iconColor,\r\n }\"\r\n [style.--icon-color]=\"config().iconColor || ''\"\r\n >\r\n <svg-icon class=\"icon\" [name]=\"config().icon || ''\"></svg-icon>\r\n @if (!config().noSeparator) {\r\n <div class=\"separator\"></div>\r\n }\r\n </div>\r\n }\r\n @if (password) {\r\n <div class=\"icon-container\" (pointerdown)=\"toggleVisibility($event)\">\r\n <div\r\n class=\"password-icons\"\r\n [ngbTooltip]=\"passwordTooltip\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [placement]=\"'top'\"\r\n [openDelay]=\"600\"\r\n >\r\n <svg-icon\r\n class=\"icon password-key hover-icon\"\r\n name=\"cai-password-key\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-shown hover-icon\"\r\n name=\"cai-password-shown\"\r\n ></svg-icon>\r\n <svg-icon\r\n class=\"icon password-hidden hover-icon\"\r\n name=\"cai-password-hidden\"\r\n ></svg-icon>\r\n </div>\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n <input\r\n class=\"app-input\"\r\n [tabindex]=\"isDisabled() ? '-1' : '0'\"\r\n [type]=\"\r\n password && !config().reveal ? (visible() ? 'text' : 'password') : 'text'\r\n \"\r\n [required]=\"config().required\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"dispatchOnBlur()\"\r\n [id]=\"id()\"\r\n [attr.aria-label]=\"config().label\"\r\n [attr.name]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n [placeholder]=\"config()?.placeholder || ''\"\r\n [autocomplete]=\"\r\n config().autocomplete ? config().autocomplete : randomAutocomplete()\r\n \"\r\n #inputRef\r\n [appPassword]=\"password\"\r\n [appMask]=\"config().mask || ''\"\r\n [reveal]=\"config().reveal || 0\"\r\n [account]=\"config().type === 'account'\"\r\n [visible]=\"visible()\"\r\n [appNumberFormat]=\"config().type === 'number'\"\r\n [isNumberFormattingDisabled]=\"config().isNumberFormattingDisabled || false\"\r\n [disableDecimals]=\"config().disableDecimals || false\"\r\n [prefix]=\"config().prefix || ''\"\r\n [max]=\"config().max\"\r\n (keydown)=\"handleKeydown($event)\"\r\n (focus)=\"onFocus($event)\"\r\n />\r\n @if (\r\n !(dropdownType === \"multiple\" && !!multipleSelectedOptions().length) &&\r\n config().placeholderBehavior !== \"hidden\"\r\n ) {\r\n <label\r\n class=\"app-input-label\"\r\n [class.placeholder-color]=\"this.config().placeholderColor\"\r\n [style.--placeholder-color]=\"this.config().placeholderColor || ''\"\r\n (click)=\"focus($event)\"\r\n >\r\n <!-- Truck Trailer Driver Dropdown label -->\r\n @if (dropdownType === \"dispatch\" || dropdownType === \"ftl-dispatch\") {\r\n <p class=\"truck-item app-input-name\">Truck</p>\r\n <p class=\"trailer-item\">Trailer</p>\r\n <p>Driver</p>\r\n <p class=\"sub-label\">Rate</p>\r\n }\r\n <!-- Split Load -->\r\n @else if (dropdownType === \"split-driver\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Rate</p>\r\n } @else if (\r\n dropdownType === \"split-truck\" || dropdownType === \"split-trailer\"\r\n ) {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Location</p>\r\n }\r\n <!-- Dropdown variants -->\r\n @else if (dropdownType === \"broker\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Credit</p>\r\n } @else if (dropdownType === \"contact\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Phone</p>\r\n } @else if (dropdownType === \"shipper\") {\r\n <p class=\"app-input-name\">{{ name }}</p>\r\n <p class=\"sub-label\">Address</p>\r\n } @else if (dropdownType === \"owner\") {\r\n <p class=\"owner-ein app-input-name\">EIN</p>\r\n <p class=\"app-input-name\">Company Name</p>\r\n } @else if (dropdownType === \"fuelcard\") {\r\n <p class=\"fuelcard-number app-input-name\">Card No.</p>\r\n <p class=\"fuelcard-brand app-input-name\">Provider</p>\r\n <p class=\"app-input-name\">Nickname</p>\r\n }\r\n <!-- Default Dropdown label -->\r\n @else {\r\n <span class=\"app-input-name\">{{ name }}</span>\r\n }\r\n </label>\r\n }\r\n @if (config().type === \"number\" && config().withButtons) {\r\n <div class=\"number-container\">\r\n <div class=\"number-buttons\">\r\n <div class=\"separator\"></div>\r\n <div\r\n class=\"plus-button-container\"\r\n ngbTooltip=\"Add\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n (pointerdown)=\"increment($event)\"\r\n >\r\n <svg-icon name=\"cai-plus\" class=\"bg-icon plus-icon\"></svg-icon>\r\n </div>\r\n <div\r\n class=\"minus-button-container\"\r\n ngbTooltip=\"Remove\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [autoClose]=\"true\"\r\n [openDelay]=\"600\"\r\n (pointerdown)=\"decrement($event)\"\r\n >\r\n <svg-icon name=\"cai-minus\" class=\"bg-icon minus-icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @if (!config().inTable) {\r\n @if (!dropdownType) {\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"app-input-icon positive-icon\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-status-warning\"\r\n class=\"app-input-icon warning-icon\"\r\n ></svg-icon>\r\n }\r\n }\r\n\r\n @if (\r\n invalid &&\r\n config().errorBehavior !== \"hidden\" &&\r\n (ngControl?.errors | errorMessage: config().customErrors)[0] &&\r\n !(config().inTable && config().placeholderBehavior !== \"static\")\r\n ) {\r\n <div class=\"app-input-error\">\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n </div>\r\n }\r\n\r\n <!-- Accept button -->\r\n @if ((config().add && isAdding()) || config().isEdit) {\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon accept-button\"\r\n (pointerdown)=\"addOption()\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"Confirm\"\r\n [openDelay]=\"600\"\r\n [placement]=\"'top'\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n >\r\n <svg-icon class=\"bg-icon\" name=\"cai-checkmark\"></svg-icon>\r\n </button>\r\n }\r\n\r\n <!-- Cancel button -->\r\n <button\r\n type=\"button\"\r\n class=\"app-input-icon button-icon cancel-button\"\r\n (pointerdown)=\"reset($event)\"\r\n (mouseenter)=\"onClearHover(true)\"\r\n (mouseleave)=\"onClearHover(false)\"\r\n [tabIndex]=\"-1\"\r\n ngbTooltip=\"{{\r\n hasText()\r\n | clearTooltip\r\n : isAdding()\r\n : config().isEdit || false\r\n : config().placeholderBehavior || 'dynamic'\r\n : dropdownType === 'multiple'\r\n : config().hasResetButton\r\n : canTooltipBeVisible()\r\n }}\"\r\n [openDelay]=\"600\"\r\n [tooltipClass]=\"tooltipClass\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n #closeTooltip=\"ngbTooltip\"\r\n >\r\n @let iconName =\r\n config().hasResetButton\r\n ? \"cai-reset\"\r\n : config().removable\r\n ? \"cai-delete\"\r\n : \"cai-cancel\";\r\n <svg-icon class=\"bg-icon\" [name]=\"iconName\"></svg-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-anchor\" ngbDropdownAnchor></div>\r\n <!-- Dropdown menu -->\r\n\r\n @let hasLoader = isLoading() !== undefined;\r\n\r\n @if (hasLoader) {\r\n <div class=\"loader\" [class.loading]=\"isLoading()\">\r\n <svg-icon name=\"cai-loader\" class=\"loader-icon\"></svg-icon>\r\n </div>\r\n }\r\n\r\n @if (dropdownType) {\r\n @let maxHeight =\r\n ((dropdownOptions()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n @let animateDropdown =\r\n dropdownType !== \"toll\" &&\r\n dropdownType !== \"fuel-stop-transaction\" &&\r\n dropdownType !== \"dispatch\" &&\r\n dropdownType !== \"ftl-dispatch\" &&\r\n dropdownType !== \"split-driver\" &&\r\n dropdownType !== \"split-truck\" &&\r\n dropdownType !== \"split-trailer\";\r\n\r\n @let unfilteredHeight =\r\n dropdownType === \"contact\" || !animateDropdown\r\n ? 244\r\n : ((options()?.length || (showNoResults() ? 1 : 0)) +\r\n (config().add ? 1 : 0)) *\r\n 30 +\r\n 4;\r\n\r\n <div\r\n ngbDropdownMenu\r\n class=\"dropdown-menu input-dropdown-menu\"\r\n [class]=\"{\r\n 'hide-dropdown':\r\n config().dropdownAutocomplete &&\r\n !dropdownOptions()?.length &&\r\n !(showNoResults() && value()),\r\n 'animate-dropdown': animateDropdown,\r\n 'size-22': config().size === 22,\r\n 'has-stroke': config().hasStroke,\r\n }\"\r\n [class.closing]=\"closing()\"\r\n [style.--unfiltered-height]=\"\r\n unfilteredHeight > 244 ? '244px' : unfilteredHeight + 'px'\r\n \"\r\n [style.--max-height]=\"maxHeight > 244 ? '244px' : maxHeight + 'px'\"\r\n [style.width.px]=\"containerWidth()\"\r\n [tabindex]=\"-1\"\r\n (pointerdown)=\"onDropdownBackgroundClick($event)\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <div\r\n class=\"dropdown-menu-content\"\r\n [tabindex]=\"-1\"\r\n caiInfiniteScroll\r\n [scrollThreshold]=\"50\"\r\n (scrolledToBottom)=\"onDropdownScrolledToBottom()\"\r\n >\r\n @if (config().add) {\r\n <button\r\n class=\"dropdown-item add-new\"\r\n [class.focused]=\"\r\n focusedOptionIndex === -1 ||\r\n groupedNavigationState?.groupIndex === -1\r\n \"\r\n (pointerdown)=\"handleAddingOption($event)\"\r\n >\r\n <p>ADD NEW</p>\r\n <svg-icon name=\"cai-plus\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n <ng-container *ngTemplateOutlet=\"dropdownMenuRef\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n @if (!config().dropdownAutocomplete) {\r\n <div\r\n class=\"dropdown-icon-container\"\r\n [class.open]=\"dropdown.isOpen() && !closing()\"\r\n (pointerdown)=\"onDropdownIconClick($event)\"\r\n >\r\n <svg-icon\r\n name=\"cai-arrow-secondary-down\"\r\n class=\"dropdown-icon icon\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n @let specialDropdown =\r\n dropdownType === \"dispatch\" ||\r\n dropdownType === \"ftl-dispatch\" ||\r\n dropdownType === \"broker\" ||\r\n dropdownType === \"contact\" ||\r\n dropdownType === \"shipper\" ||\r\n dropdownType === \"bank\" ||\r\n dropdownType === \"dispatcher\" ||\r\n dropdownType === \"truck\" ||\r\n dropdownType === \"trailer\" ||\r\n dropdownType === \"hazardous\" ||\r\n dropdownType === \"state\" ||\r\n dropdownType === \"owner\" ||\r\n dropdownType === \"fuelcard\" ||\r\n dropdownType === \"pm\" ||\r\n dropdownType === \"color\" ||\r\n dropdownType === \"make\" ||\r\n dropdownType === \"toll\" ||\r\n dropdownType === \"provider\" ||\r\n dropdownType === \"split-driver\" ||\r\n dropdownType === \"split-truck\" ||\r\n dropdownType === \"split-trailer\";\r\n <!-- Placeholder -->\r\n @if (specialDropdown) {\r\n <ng-container *ngTemplateOutlet=\"selectedOptionRef\"></ng-container>\r\n } @else if (\r\n (config().add || config().search) &&\r\n !inputRef.value &&\r\n !this.isAdding() &&\r\n dropdownType !== \"subcontent\"\r\n ) {\r\n <div class=\"dropdown-selected\">\r\n @if (config().placeholderBehavior === \"static\") {\r\n <p class=\"selected-label-hidden\">\r\n {{ name + (config().required ? \" *\" : \"\") }}\r\n </p>\r\n <p class=\"selected-text\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n @if (\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ] === \"Hazardous\"\r\n ) {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">\r\n {{\r\n selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n } @else if (config().isEdit && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ name }}</p>\r\n </div>\r\n }\r\n @if (config().passwordRequirements) {\r\n <div\r\n class=\"dropdown-menu password-requirement\"\r\n ngbDropdownMenu\r\n [style.width.px]=\"containerWidth()\"\r\n [class.closing]=\"closing()\"\r\n (pointerup)=\"stopEventPropagation($event)\"\r\n (mouseup)=\"stopEventPropagation($event)\"\r\n (click)=\"stopEventPropagation($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"passwordRequirementsRef\"></ng-container>\r\n </div>\r\n }\r\n @if (subcontent) {\r\n <p class=\"subcontent\">\r\n @if (!(config().alignment === \"right\")) {\r\n <span class=\"subcontent-hide\"\r\n >{{\r\n config().search\r\n ? selectedOption() &&\r\n cast(selectedOption(), \"dropdownOption\")![\r\n optionLabel || \"label\"\r\n ]\r\n : inputRef.value\r\n }}\r\n </span>\r\n }\r\n {{ subcontent }}\r\n </p>\r\n }\r\n</div>\r\n\r\n<!-- #region Templates -->\r\n\r\n<!-- #region Password requirements -->\r\n<ng-template #passwordRequirementsRef>\r\n @let isMinLengthValid =\r\n !this.ngControl?.errors?.[\"minlength\"] && this.value();\r\n @let isHasNumberValid =\r\n !this.ngControl?.errors?.[\"hasNumber\"] && this.value();\r\n @let isHasSymbolValid =\r\n !this.ngControl?.errors?.[\"hasSymbol\"] && this.value();\r\n @let isHasUppercaseValid =\r\n !this.ngControl?.errors?.[\"hasUppercase\"] && this.value();\r\n\r\n <p>Strong Password Requirement</p>\r\n <ul>\r\n <li [class.valid]=\"isMinLengthValid\">\r\n <svg-icon\r\n [name]=\"isMinLengthValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isMinLengthValid ? 'checkmark' : 'cancel'\"\r\n class=\"icon\"\r\n ></svg-icon\r\n ><span>Minimum 8 characters</span>\r\n </li>\r\n <li [class.valid]=\"isHasNumberValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasNumberValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasNumberValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One number</span>\r\n </li>\r\n <li [class.valid]=\"isHasSymbolValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasSymbolValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasSymbolValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One symbol</span>\r\n </li>\r\n <li [class.valid]=\"isHasUppercaseValid\">\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"isHasUppercaseValid ? 'cai-checkmark' : 'cai-cancel'\"\r\n [class]=\"isHasUppercaseValid ? 'checkmark' : 'cancel'\"\r\n ></svg-icon\r\n ><span>One upper-case letter</span>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n<!-- #endregion -->\r\n@let search = config().search;\r\n\r\n<ng-template #dropdownMenuRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"dispatchesRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"ftlDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"brokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"contactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"shipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"bankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"dispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"trailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"truckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"hazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"stateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"ownerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"fuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"pmRef\"></ng-container>\r\n }\r\n @case (\"multiple\") {\r\n <ng-container *ngTemplateOutlet=\"multipleRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"makeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"tollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"colorRef\"></ng-container>\r\n }\r\n @case (\"fuel-stop-transaction\") {\r\n <ng-container *ngTemplateOutlet=\"fuelStopTransactionRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"providerRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"splitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"splitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"splitTrailerRef\"></ng-container>\r\n }\r\n @case (\"subcontent\") {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"dropdownOptionsRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOptionRef>\r\n @switch (dropdownType) {\r\n @case (\"dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"ftl-dispatch\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatchRef\"></ng-container>\r\n }\r\n @case (\"broker\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBrokerRef\"></ng-container>\r\n }\r\n @case (\"contact\") {\r\n <ng-container *ngTemplateOutlet=\"selectedContactRef\"></ng-container>\r\n }\r\n @case (\"shipper\") {\r\n <ng-container *ngTemplateOutlet=\"selectedShipperRef\"></ng-container>\r\n }\r\n @case (\"bank\") {\r\n <ng-container *ngTemplateOutlet=\"selectedBankRef\"></ng-container>\r\n }\r\n @case (\"dispatcher\") {\r\n <ng-container *ngTemplateOutlet=\"selectedDispatcherRef\"></ng-container>\r\n }\r\n @case (\"trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTrailerRef\"></ng-container>\r\n }\r\n @case (\"truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTruckRef\"></ng-container>\r\n }\r\n @case (\"hazardous\") {\r\n <ng-container *ngTemplateOutlet=\"selectedHazardousRef\"></ng-container>\r\n }\r\n @case (\"state\") {\r\n <ng-container *ngTemplateOutlet=\"selectedStateRef\"></ng-container>\r\n }\r\n @case (\"owner\") {\r\n <ng-container *ngTemplateOutlet=\"selectedOwnerRef\"></ng-container>\r\n }\r\n @case (\"fuelcard\") {\r\n <ng-container *ngTemplateOutlet=\"selectedFuelcardRef\"></ng-container>\r\n }\r\n @case (\"pm\") {\r\n <ng-container *ngTemplateOutlet=\"selectedPmRef\"></ng-container>\r\n }\r\n @case (\"make\") {\r\n <ng-container *ngTemplateOutlet=\"selectedMakeRef\"></ng-container>\r\n }\r\n @case (\"toll\") {\r\n <ng-container *ngTemplateOutlet=\"selectedTollRef\"></ng-container>\r\n }\r\n @case (\"color\") {\r\n <ng-container *ngTemplateOutlet=\"selectedColorRef\"></ng-container>\r\n }\r\n @case (\"provider\") {\r\n <ng-container *ngTemplateOutlet=\"selectedProviderRef\"></ng-container>\r\n }\r\n @case (\"split-driver\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitDriverRef\"></ng-container>\r\n }\r\n @case (\"split-truck\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTruckRef\"></ng-container>\r\n }\r\n @case (\"split-trailer\") {\r\n <ng-container *ngTemplateOutlet=\"selectedSplitTrailerRef\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- Standard dropdown -->\r\n<ng-template #dropdownOptionsRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dropdownOption')?.id === dropdownOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n >\r\n @if (dropdownOption[optionLabel] === \"Hazardous\") {\r\n <svg-icon name=\"cai-violation-hazmat\" class=\"icon\"></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #multipleRef>\r\n @if (dropdownOptions().length) {\r\n @for (option of dropdownOptions(); track $index; let index = $index) {\r\n @let dropdownOption = cast(option, \"dropdownOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dropdownOption.id }}\"\r\n (pointerdown)=\"handleOption(dropdownOption, $event)\"\r\n [class]=\"{\r\n selected: isSelectedOption(dropdownOption),\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (dropdownOption[optionLabel] | highlightSearch: value())\r\n : dropdownOption[optionLabel]\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bankRef>\r\n @if (dropdownOptions().length) {\r\n @for (bank of dropdownOptions(); track $index; let index = $index) {\r\n @let bankOption = cast(bank, \"bank\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ bankOption.id }}\"\r\n (pointerdown)=\"handleOption(bankOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'bank')?.id === bankOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (bankOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"bankOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (bankOption.name || '' | highlightSearch: value())\r\n : bankOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #makeRef>\r\n @if (dropdownOptions().length) {\r\n @for (make of dropdownOptions(); track $index; let index = $index) {\r\n @let makeOption = cast(make, \"make\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ makeOption.id }}\"\r\n (pointerdown)=\"handleOption(makeOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'make')?.id === makeOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n @if (makeOption.logoName) {\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"makeOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n } @else {\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (makeOption.name || '' | highlightSearch: value())\r\n : makeOption.name\r\n \"\r\n ></p>\r\n }\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Broker -->\r\n<ng-template #brokerRef>\r\n @if (dropdownOptions().length) {\r\n @for (broker of dropdownOptions(); track $index; let index = $index) {\r\n @let brokerOption = cast(broker, \"broker\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"broker-{{ brokerOption.id }}\"\r\n (pointerdown)=\"\r\n !(brokerOption.dnu || brokerOption.ban) &&\r\n handleOption(brokerOption, $event)\r\n \"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'broker')?.id === brokerOption.id,\r\n focused: focusedOptionIndex === index,\r\n banned: brokerOption.dnu || brokerOption.ban,\r\n dnu: brokerOption.dnu,\r\n }\"\r\n >\r\n @if (brokerOption?.dnu || brokerOption?.ban) {\r\n <svg-icon name=\"cai-minus\" class=\"round-icon\"></svg-icon>\r\n } @else if (brokerOption?.fraudCheck) {\r\n <svg-icon\r\n name=\"cai-status-warning-lite\"\r\n class=\"icon fraud\"\r\n ></svg-icon>\r\n }\r\n <p\r\n class=\"dropdown-content\"\r\n [innerHTML]=\"\r\n search\r\n ? (brokerOption.businessName || '' | highlightSearch: value())\r\n : brokerOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n @if (!brokerOption.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>{{ brokerOption.availableCredit || 0 | currency }}</p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption\r\n | brokerProgress: brokerOption.dnu || brokerOption.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ brokerOption.loadsCount }} |\r\n {{ brokerOption.availableCredit || 0 | currency }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Contact dropdown -->\r\n<ng-template #contactRef>\r\n @if (dropdownOptions().length) {\r\n @for (contact of dropdownOptions(); track $index; let index = $index) {\r\n @let contactOption = cast(contact, \"contact\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"contact-{{ contact.id }}\"\r\n (pointerdown)=\"handleOption(contact, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'contact')?.id === contact.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (contactOption.contactName || '' | highlightSearch: value())\r\n : contactOption.contactName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p>{{ contactOption.department?.name }}</p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ contactOption.phone }}\r\n </p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Owner dropdown -->\r\n<ng-template #ownerRef>\r\n @if (dropdownOptions().length) {\r\n @for (owner of dropdownOptions(); track $index; let index = $index) {\r\n @let ownerOption = cast(owner, \"owner\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"owner-{{ ownerOption?.id }}\"\r\n (pointerdown)=\"handleOption(ownerOption!, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'owner')?.id === ownerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"owner-ein\"\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.ein || '' | highlightSearch: value())\r\n : ownerOption?.ein\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (ownerOption?.name || '' | highlightSearch: value())\r\n : ownerOption?.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Fuelcard dropdown -->\r\n<ng-template #fuelcardRef>\r\n @if (dropdownOptions().length) {\r\n @for (fuelcard of dropdownOptions(); track $index; let index = $index) {\r\n @let fuelcardOption = cast(fuelcard, \"fuelCard\");\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"fuelcard-{{ fuelcardOption?.id }}\"\r\n (pointerdown)=\"handleOption(fuelcardOption!, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'fuelCard')?.id === fuelcardOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"fuelcard-number\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.number || '' | highlightSearch: value())\r\n : fuelcardOption?.number\r\n \"\r\n ></p>\r\n <p\r\n class=\"fuelcard-brand\"\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.brand || '' | highlightSearch: value())\r\n : fuelcardOption?.brand\r\n \"\r\n ></p>\r\n <p\r\n [innerHTML]=\"\r\n search\r\n ? (fuelcardOption?.account || '' | highlightSearch: value())\r\n : fuelcardOption?.account\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Shipper dropdown -->\r\n<ng-template #shipperRef>\r\n @if (dropdownOptions().length) {\r\n @for (shipper of dropdownOptions(); track $index; let index = $index) {\r\n @let shipperOption = cast(shipper, \"shipper\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"shipper-{{ shipperOption.id }}\"\r\n (pointerdown)=\"handleOption(shipperOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'shipper')?.id === shipperOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.businessName || '' | highlightSearch: value())\r\n : shipperOption.businessName\r\n \"\r\n ></p>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-base\">\r\n <p\r\n class=\"max-w-280 text-truncate\"\r\n [innerHTML]=\"\r\n search\r\n ? (shipperOption.address?.address || ''\r\n | highlightSearch: value())\r\n : shipperOption.address?.address\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"end-item-hover\">\r\n <p>\r\n {{ shipperOption.pickupCount }} Pickup |\r\n {{ shipperOption.deliveryCount }} Delivery\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatch dropdown -->\r\n<ng-template #dispatchesRef>\r\n @if (dropdownOptions().length) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"reset()\"\r\n [class]=\"{\r\n selected: !selectedOption(),\r\n }\"\r\n >\r\n <p>Unassigned</p>\r\n <div class=\"unassigned-ltl\">\r\n <p>{{ unassignedCount() }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </button>\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n <!-- Temporary variant since BE doesn't support boards -->\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base dispatch-ltl\">\r\n <p>{{ dispatch.numberOfSingleLtlLoads }}</p>\r\n <svg-icon name=\"cai-ltl-single\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- ftl dispatch dropdown -->\r\n<ng-template #ftlDispatchRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n dispatchBoard of dropdownOptions();\r\n track dispatchBoard.id;\r\n let groupIndex = $index\r\n ) {\r\n @let dispatchBoardOption = cast(dispatchBoard, \"dispatchBoard\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let isNoBoardsVariant =\r\n dispatchBoardOption.dispatcher === \"NOBOARDSVARIANT\";\r\n @if (dispatchBoardOption.count > 0) {\r\n @if (!isNoBoardsVariant) {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(dispatchBoardOption.id, $event)\"\r\n [class]=\"{\r\n unfolded: dispatchBoardOption.dispatches?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n dispatchBoardOption.teamBoard\r\n ? \"Team Board\"\r\n : dispatchBoardOption.dispatcher\r\n }}\r\n </p>\r\n <p class=\"counter\">{{ dispatchBoardOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n @if (\r\n dispatchBoardOption.dispatches &&\r\n dispatchBoardOption.dispatches.length > 0\r\n ) {\r\n @for (\r\n dispatch of dispatchBoardOption.dispatches;\r\n track dispatch.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(dispatch, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatch')?.id === dispatch.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"\r\n dispatch.truck.truckNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatch.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon truck-trailer-icon-colors\"\r\n [class]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n [name]=\"dispatch.trailer.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n dispatch.trailer.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatch.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName +\r\n ' & ' +\r\n dispatch.coDriver.firstName | highlightSearch: value()\r\n \"\r\n ></p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatch.driver\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n dispatch.driver.firstName + ' ' + dispatch.driver.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n <!-- Load Status -->\r\n @if (dispatch.status?.statusString) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatch.status?.statusString\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatch.status?.statusString }}\r\n @if (\r\n dispatch.status?.statusString?.toLowerCase() ===\r\n \"repair\"\r\n ) {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (dispatch.status?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ dispatch.status?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n <!-- Pending Load Count -->\r\n <!-- TODO: WAITING ON BE FOR PENDING LOAD COUNT -->\r\n 0\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ dispatch.payType }}</p>\r\n <svg-icon name=\"cai-driver\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n } @else if (isNoBoardsVariant) {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitDriverRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitDriverBoard of dropdownOptions(); track splitDriverBoard.id) {\r\n @let driverBoard = cast(splitDriverBoard, \"splitDriverBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(driverBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (driverBoard.drivers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n driverBoard.isTeamBoard ? \"Team Board\" : driverBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ driverBoard.drivers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (driver of driverBoard.drivers || []; track driver.id) {\r\n @let driverOption = cast(driver, \"splitDriver\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(driverOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitDriver')?.id === driverOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem\">\r\n <div class=\"dropdown-avatar\">\r\n <cai-avatar\r\n [driver]=\"driverOption\"\r\n [size]=\"18\"\r\n [inverse]=\"true\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n </div>\r\n <p\r\n class=\"driver-name\"\r\n [innerHTML]=\"\r\n driverOption.firstName + ' ' + driverOption.lastName\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n driverOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (driverOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ driverOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ driverOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n <p>{{ driverOption.payTypeValue }}</p>\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTruckRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTruckBoard of dropdownOptions(); track splitTruckBoard.id) {\r\n @let truckBoard = cast(splitTruckBoard, \"splitTruckBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(truckBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (truckBoard.trucks?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n truckBoard.isTeamBoard ? \"Team Board\" : truckBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ truckBoard.trucks?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (truck of truckBoard.trucks || []; track truck.id) {\r\n @let truckOption = cast(truck, \"splitTruck\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTruck')?.id === truckOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [style.--truck-color]=\"truckOption.color?.code || ''\"\r\n [name]=\"truckOption.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"truck-number\"\r\n [innerHTML]=\"truckOption.truckNumber | highlightSearch: value()\"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n truckOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (truckOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ truckOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ truckOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n truckOption.location?.city &&\r\n truckOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ truckOption.location?.city }},\r\n {{ truckOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #splitTrailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (splitTrailerBoard of dropdownOptions(); track splitTrailerBoard.id) {\r\n @let trailerBoard = cast(splitTrailerBoard, \"splitTrailerBoard\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(trailerBoard.id, $event)\"\r\n [class]=\"{\r\n unfolded: (trailerBoard.trailers?.length ?? 0) > 0,\r\n }\"\r\n >\r\n <p>\r\n {{\r\n trailerBoard.isTeamBoard\r\n ? \"Team Board\"\r\n : trailerBoard.dispatcherName\r\n }}\r\n </p>\r\n <!-- TODO: Change to count once BE is fixed -->\r\n <p class=\"counter\">{{ trailerBoard.trailers?.length || 0 }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @for (trailer of trailerBoard.trailers || []; track trailer.id) {\r\n @let trailerOption = cast(trailer, \"splitTrailer\")!;\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'splitTrailer')?.id === trailerOption.id,\r\n }\"\r\n >\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [style.--trailer-color]=\"trailerOption.color?.code || ''\"\r\n [name]=\"trailerOption.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p\r\n class=\"trailer-number\"\r\n [innerHTML]=\"\r\n trailerOption.trailerNumber | highlightSearch: value()\r\n \"\r\n ></p>\r\n </div>\r\n <div class=\"dropdown-subitem-end\">\r\n <div class=\"end-item-hover\">\r\n @let dispatchStatus =\r\n trailerOption.dispatchStatus?.statusValue?.name;\r\n @if (dispatchStatus) {\r\n <div\r\n class=\"dispatch-status\"\r\n [class]=\"\r\n 'status-' +\r\n dispatchStatus\r\n ?.toLowerCase()\r\n ?.replaceAll(' ', '')\r\n ?.replaceAll('.', '')\r\n \"\r\n >\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block blue\">D</p>\r\n <p class=\"status-block green\">L</p>\r\n }\r\n {{ dispatchStatus }}\r\n @if (dispatchStatus?.toLowerCase() === \"repair\") {\r\n <p class=\"status-block green\">P</p>\r\n <p class=\"status-block orange\">D</p>\r\n }\r\n @if (trailerOption.dispatchStatus?.statusCheckInNumber) {\r\n <p class=\"status-block\">\r\n {{ trailerOption.dispatchStatus?.statusCheckInNumber }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"dispatch-separator\">|</p>\r\n }\r\n <p class=\"dispatch-load-count\">\r\n {{ trailerOption.pendingLoadsCount }}\r\n </p>\r\n <svg-icon name=\"cai-load\" class=\"icon-sm\"></svg-icon>\r\n </div>\r\n <div class=\"end-item-base\">\r\n @if (\r\n trailerOption.location?.city &&\r\n trailerOption.location?.stateShortName\r\n ) {\r\n <p>\r\n {{ trailerOption.location?.city }},\r\n {{ trailerOption.location?.stateShortName }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #tollRef>\r\n @if (dropdownOptions().length) {\r\n @for (toll of dropdownOptions(); track $index; let groupIndex = $index) {\r\n @let tollOption = cast(toll, \"tollOption\")!;\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item pe-none\"\r\n [class]=\"{\r\n unfolded: tollOption.tollTransponders?.length || 0 > 0,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p>\r\n {{ tollOption.groupName }}\r\n </p>\r\n </button>\r\n @let tollTransponders = tollOption.tollTransponders || [];\r\n @for (\r\n tollTransponder of tollTransponders;\r\n track tollTransponder.id;\r\n let optionIndex = $index\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === optionIndex + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n class=\"dropdown-item\"\r\n (pointerdown)=\"handleOption(tollTransponder, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'tollTransponderOption')?.id ===\r\n tollTransponder.id,\r\n focused: isOptionFocused,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (tollTransponder.name || '' | highlightSearch: value())\r\n : tollTransponder.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Dispatcher dropdown -->\r\n\r\n<ng-template #dispatcherRef>\r\n @if (dropdownOptions().length) {\r\n @for (dispatcher of dropdownOptions(); track $index; let index = $index) {\r\n @let dispatcherOption = cast(dispatcher, \"dispatcher\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ dispatcherOption.id }}\"\r\n (pointerdown)=\"handleOption(dispatcherOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'dispatcher')?.id === dispatcherOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (dispatcherOption.fullName || '' | highlightSearch: value())\r\n : dispatcherOption.fullName\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #truckRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let truckOption = cast(truck, \"truckOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ truckOption.id }}\"\r\n (pointerdown)=\"handleOption(truckOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'truckOption')?.id === truckOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (truckOption.name || '' | highlightSearch: value())\r\n : truckOption.name\r\n \"\r\n ></p>\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"truckOption.logoName.slice(0, -4)\"\r\n [name]=\"truckOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #trailerRef>\r\n @if (dropdownOptions().length) {\r\n @for (truck of dropdownOptions(); track $index; let index = $index) {\r\n @let trailerOption = cast(truck, \"trailerOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ trailerOption.id }}\"\r\n (pointerdown)=\"handleOption(trailerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'trailerOption')?.id === trailerOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (trailerOption.name || '' | highlightSearch: value())\r\n : trailerOption.name\r\n \"\r\n ></p>\r\n\r\n <svg-icon\r\n class=\"truck-trailer-option truck-trailer-icon-colors\"\r\n [class]=\"trailerOption.logoName.slice(0, -4)\"\r\n [name]=\"trailerOption.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <svg-icon\r\n name=\"cai-checkmark\"\r\n class=\"dropdown-item-icon no-margin\"\r\n ></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #providerRef>\r\n @if (dropdownOptions().length) {\r\n @for (provider of dropdownOptions(); track $index; let index = $index) {\r\n @let providerOption = cast(provider, \"provider\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ providerOption?.id }}\"\r\n (pointerdown)=\"handleOption(providerOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'provider')?.id === providerOption?.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"full-icon\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- Hazardous dropdown -->\r\n<ng-template #hazardousRef>\r\n @if (dropdownOptions().length) {\r\n @for (hazardous of dropdownOptions(); track $index; let index = $index) {\r\n @let hazardousOption = cast(hazardous, \"hazardous\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ hazardousOption.id }}\"\r\n (pointerdown)=\"handleOption(hazardousOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'hazardous')?.id === hazardousOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon [name]=\"hazardousOption.logoName?.slice(0, -4)\"></svg-icon>\r\n <p\r\n class=\"dropdown-content-hazardous\"\r\n [innerHTML]=\"\r\n search\r\n ? (hazardousOption.description || '' | highlightSearch: value())\r\n : hazardousOption.description\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #pmRef>\r\n @if (dropdownOptions().length) {\r\n @for (pm of dropdownOptions(); track $index; let index = $index) {\r\n @let pmOption = cast(pm, \"pmOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ pmOption.id }}\"\r\n (pointerdown)=\"handleOption(pmOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'pmOption')?.id === pmOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"pmOption.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (pmOption.title || '' | highlightSearch: value())\r\n : pmOption.title\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #colorRef>\r\n @if (dropdownOptions().length) {\r\n @for (color of dropdownOptions(); track $index; let index = $index) {\r\n @let colorOption = cast(color, \"colorOption\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item color-item\"\r\n id=\"option-{{ colorOption.id }}\"\r\n (pointerdown)=\"handleOption(colorOption, $event)\"\r\n [class]=\"{\r\n selected:\r\n cast(selectedOption(), 'colorOption')?.id === colorOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (colorOption.name || '' | highlightSearch: value())\r\n : colorOption.name\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #stateRef>\r\n @if (dropdownOptions().length) {\r\n @for (state of dropdownOptions(); track $index; let index = $index) {\r\n @let stateOption = cast(state, \"state\")!;\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n id=\"option-{{ stateOption.id }}\"\r\n (pointerdown)=\"handleOption(stateOption, $event)\"\r\n [class]=\"{\r\n selected: cast(selectedOption(), 'state')?.id === stateOption.id,\r\n focused: focusedOptionIndex === index,\r\n }\"\r\n >\r\n <svg-icon\r\n class=\"icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p\r\n class=\"dropdown-content-with-icon\"\r\n [innerHTML]=\"\r\n search\r\n ? (stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState\r\n ? ' (' + stateOption?.stateName + ')'\r\n : '') || '' | highlightSearch: value())\r\n : stateOption.stateShortName +\r\n ' ' +\r\n (config().fullState ? ' (' + stateOption?.stateName + ')' : '')\r\n \"\r\n ></p>\r\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\r\n </button>\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fuelStopTransactionRef>\r\n @if (dropdownOptions().length) {\r\n @for (\r\n franchise of dropdownOptions();\r\n track franchise.id;\r\n let groupIndex = $index\r\n ) {\r\n @let isGroupFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0;\r\n @let franchiseOption = cast(franchise, \"franchise\")!;\r\n @if (franchiseOption?.count !== null) {\r\n <div\r\n class=\"dropdown-group\"\r\n [class.no-items]=\"!franchiseOption?.count\"\r\n [class]=\"{\r\n active: openGroup() === franchiseOption.id,\r\n }\"\r\n [style.--max-height]=\"\r\n openGroup() === franchiseOption.id\r\n ? 30 * ((franchiseOption.fuelStopStores?.length || 0) + 1) + 'px'\r\n : '26px'\r\n \"\r\n >\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item group-item\"\r\n (pointerdown)=\"fold(franchiseOption.id, $event, franchiseOption)\"\r\n [class]=\"{\r\n unfolded: openGroup() === franchiseOption.id,\r\n focused: isGroupFocused,\r\n }\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n <p class=\"counter\">{{ franchiseOption.count }}</p>\r\n <svg-icon\r\n name=\"cai-arrow-primary-up\"\r\n class=\"group-icon icon\"\r\n ></svg-icon>\r\n </button>\r\n @if (openGroup() === franchiseOption.id) {\r\n @if (franchiseOption.fuelStopStores?.length || 0 > 0) {\r\n @for (\r\n fuelStopStore of franchiseOption.fuelStopStores;\r\n track fuelStopStore.id\r\n ) {\r\n @let isOptionFocused =\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === $index + 1;\r\n <!-- +1 since optionIndex is 0 for the group item header -->\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item fuel-stop-transaction-store\"\r\n [class]=\"{\r\n focused: isOptionFocused,\r\n }\"\r\n (pointerdown)=\"handleOption(fuelStopStore, $event)\"\r\n >\r\n <p\r\n [innerHTML]=\"\r\n fuelStopStore?.store ?? '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n @let city = fuelStopStore?.address?.city ?? \"\";\r\n @let state = fuelStopStore?.address?.stateShortName ?? \"\";\r\n @let zip = fuelStopStore?.address?.zipCode ?? \"\";\r\n <p\r\n class=\"fuel-stop-transaction-store-address\"\r\n [innerHTML]=\"\r\n city + (state || zip ? ', ' : '') + state + ' ' + zip\r\n | highlightSearch: value()\r\n \"\r\n ></p>\r\n\r\n @if (fuelStopStore?.[\"favourite\"]) {\r\n <svg-icon\r\n name=\"cai-favorite\"\r\n class=\"favorite-icon\"\r\n ></svg-icon>\r\n }\r\n </button>\r\n }\r\n <!-- Infinite scroll trigger - emits event when item comes into view -->\r\n <div\r\n class=\"dropdown-infinite-scroll-item\"\r\n caiIntersectionObserver\r\n [threshold]=\"0.1\"\r\n (inView)=\"onDropdownScrolledToBottom(true)\"\r\n ></div>\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <button\r\n tabindex=\"-1\"\r\n class=\"dropdown-item\"\r\n [class.focused]=\"\r\n groupedNavigationState?.groupIndex === groupIndex &&\r\n groupedNavigationState?.optionIndex === 0\r\n \"\r\n (pointerdown)=\"handleOption(franchiseOption, $event)\"\r\n >\r\n <p\r\n class=\"fuel-stop-transaction-nostore\"\r\n [innerHTML]=\"\r\n franchiseOption?.businessName || '' | highlightSearch: value()\r\n \"\r\n ></p>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <p class=\"dropdown-item no-results\">No results</p>\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n\r\n<!-- #region Selected options -->\r\n\r\n<!-- selected dispatch -->\r\n<ng-template #selectedDispatchRef>\r\n @let dispatchOption = cast(selectedOption(), \"dispatch\");\r\n @if (dispatchOption && !inputRef.value && !isAdding()) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"dispatchOption!.truck.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ dispatchOption!.truck.truckNumber }}\r\n </p>\r\n </div>\r\n <div class=\"dropdown-subitem trailer-item\">\r\n @if (dispatchOption!.trailer) {\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"\r\n cast(\r\n selectedOption(),\r\n 'dispatch'\r\n )!.trailer?.trailerType?.logoName?.slice(0, -4)\r\n \"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ dispatchOption!.trailer?.trailerNumber }}\r\n </p>\r\n }\r\n </div>\r\n <div class=\"dropdown-subitem\">\r\n @if (dispatchOption!.coDriver) {\r\n <svg-icon class=\"dispatch-icon\" name=\"cai-people\"></svg-icon>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" & \" +\r\n dispatchOption!.coDriver?.firstName\r\n }}\r\n </p>\r\n } @else {\r\n <cai-avatar\r\n [driver]=\"dispatchOption!.driver\"\r\n [size]=\"18\"\r\n [hover]=\"false\"\r\n ></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{\r\n dispatchOption!.driver.firstName +\r\n \" \" +\r\n dispatchOption!.driver.lastName\r\n }}\r\n </p>\r\n }\r\n </div>\r\n <p class=\"selected-end-item\">\r\n {{ dispatchOption!.payType }}\r\n </p>\r\n </div>\r\n } @else {\r\n @if (!inputRef.value && this.config().dropdown == \"dispatch\") {\r\n <p class=\"dropdown-selected\">Unassigned</p>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<!-- selected broker -->\r\n<ng-template #selectedBrokerRef>\r\n @let brokerOption = cast(selectedOption(), \"broker\");\r\n @if (brokerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if ((brokerOption!.availableCredit || 0) < 0) {\r\n <svg-icon name=\"cai-status-warning-lite\" class=\"icon fraud\"></svg-icon>\r\n }\r\n <p class=\"dropdown-selected-content\">{{ brokerOption!.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n @if (!brokerOption!.creditLimit) {\r\n <p>Unlimited</p>\r\n } @else {\r\n <p>\r\n {{ brokerOption!.availableCredit || 0 | currency }}\r\n </p>\r\n <div\r\n class=\"progress-bar\"\r\n [style.--progress]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).activePercentageOfPaid + '%'\r\n \"\r\n [class]=\"\r\n (\r\n brokerOption!\r\n | brokerProgress: brokerOption!.dnu || brokerOption!.ban\r\n ).status\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedContactRef>\r\n @let contactOption = cast(selectedOption(), \"contact\");\r\n @if (contactOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ contactOption?.contactName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ contactOption?.phone }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedShipperRef>\r\n @let shipperOption = cast(selectedOption(), \"shipper\");\r\n @if (shipperOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">{{ shipperOption?.businessName }}</p>\r\n <div class=\"selected-end-item\">\r\n <p>{{ shipperOption?.address?.address }}</p>\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedOwnerRef>\r\n @let ownerOption = cast(selectedOption(), \"owner\");\r\n @if (ownerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"owner-ein\">{{ ownerOption?.ein }}</p>\r\n <p class=\"\">{{ ownerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedFuelcardRef>\r\n @let fuelcardOption = cast(selectedOption(), \"fuelCard\");\r\n @if (fuelcardOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"fuelcard-number\">\r\n {{ fuelcardOption?.number }}\r\n </p>\r\n <p class=\"fuelcard-brand\">\r\n {{ fuelcardOption?.brand }}\r\n </p>\r\n <p class=\"\">\r\n {{ fuelcardOption?.account }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedBankRef>\r\n @let bankOption = cast(selectedOption(), \"bank\");\r\n @if (bankOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (bankOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"bankOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ bankOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedProviderRef>\r\n @let providerOption = cast(selectedOption(), \"provider\");\r\n @if (providerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"'cai-' + providerOption?.name?.toLowerCase()\"\r\n ></svg-icon>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedMakeRef>\r\n @let makeOption = cast(selectedOption(), \"make\");\r\n @if (makeOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n @if (makeOption?.logoName) {\r\n <svg-icon\r\n class=\"option-icon full-size\"\r\n [name]=\"makeOption?.logoName?.slice(0, -4) || ''\"\r\n ></svg-icon>\r\n } @else {\r\n <p class=\"dropdown-selected-content\">{{ makeOption?.name }}</p>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedStateRef>\r\n @let stateOption = cast(selectedOption(), \"state\");\r\n @if (stateOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"\r\n 'cai-' +\r\n stateOption?.countryType?.name?.toLowerCase() +\r\n '-' +\r\n stateOption?.stateShortName?.toLowerCase()\r\n \"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ stateOption?.stateShortName }}\r\n {{ config().fullState ? \" (\" + stateOption?.stateName + \")\" : \"\" }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedDispatcherRef>\r\n @let dispatcherOption = cast(selectedOption(), \"dispatcher\");\r\n @if (dispatcherOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <cai-avatar\r\n [driver]=\"{\r\n id: dispatcherOption?.id || 0,\r\n firstName: (dispatcherOption?.fullName || ' ').split(' ')[0] || '',\r\n lastName: (dispatcherOption?.fullName || ' ').split(' ')[1] || '',\r\n avatarFile: dispatcherOption?.avatarFile,\r\n colorFlag: dispatcherOption?.colorFlag,\r\n }\"\r\n [rounded]=\"!config().squareAvatar\"\r\n ></cai-avatar>\r\n <p class=\"dropdown-selected-content\">{{ dispatcherOption?.fullName }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTruckRef>\r\n @let truckOption = cast(selectedOption(), \"truckOption\");\r\n @if (truckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"truckOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ truckOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTrailerRef>\r\n @let trailerOption = cast(selectedOption(), \"trailerOption\");\r\n @if (trailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"trailerOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">{{ trailerOption?.name }}</p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedHazardousRef>\r\n @let hazardousOption = cast(selectedOption(), \"hazardous\");\r\n @if (hazardousOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"hazard-icon\"\r\n [name]=\"hazardousOption?.logoName?.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content dropdown-selected-hazardous\">\r\n {{ hazardousOption?.description }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedPmRef>\r\n @let pmOption = cast(selectedOption(), \"pmOption\");\r\n @if (pmOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon\"\r\n [name]=\"pmOption?.title | remapPmIcons\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ pmOption?.title }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedColorRef>\r\n @let colorOption = cast(selectedOption(), \"colorOption\");\r\n @if (colorOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <svg-icon\r\n class=\"option-icon cai-color\"\r\n [name]=\"'cai-color'\"\r\n [style.--color]=\"colorOption?.code\"\r\n [style.--hover-color]=\"colorOption?.hoverCode\"\r\n ></svg-icon>\r\n <p class=\"dropdown-selected-content\">\r\n {{ colorOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedTollRef>\r\n @let tollOption = cast(selectedOption(), \"tollTransponderOption\");\r\n @if (tollOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <p class=\"dropdown-selected-content\">\r\n {{ tollOption?.name }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitDriverRef>\r\n @let splitDriverOption = cast(selectedOption(), \"splitDriver\");\r\n @if (splitDriverOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem\">\r\n <cai-avatar [driver]=\"splitDriverOption\" [size]=\"18\"></cai-avatar>\r\n <p class=\"driver-name\">\r\n {{ splitDriverOption.firstName + \" \" + splitDriverOption.lastName }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <p class=\"selected-end-item\">\r\n {{ splitDriverOption.payTypeValue }}\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTruckRef>\r\n @let splitTruckOption = cast(selectedOption(), \"splitTruck\");\r\n @if (splitTruckOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem trailer-item\">\r\n <svg-icon\r\n class=\"trailer-icon\"\r\n [name]=\"splitTruckOption!.truckType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"trailer-number\">\r\n {{ splitTruckOption!.truckNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTruckOption!.location?.city &&\r\n splitTruckOption!.location?.stateShortName\r\n ) {\r\n {{ splitTruckOption!.location?.city }},\r\n {{ splitTruckOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #selectedSplitTrailerRef>\r\n @let splitTrailerOption = cast(selectedOption(), \"splitTrailer\");\r\n @if (splitTrailerOption && !inputRef.value) {\r\n <div class=\"dropdown-selected\">\r\n <div class=\"dropdown-selected-content\">\r\n <div class=\"dropdown-subitem truck-item\">\r\n <svg-icon\r\n class=\"truck-icon\"\r\n [name]=\"splitTrailerOption!.trailerType.logoName.slice(0, -4)\"\r\n ></svg-icon>\r\n <p class=\"truck-number\">\r\n {{ splitTrailerOption!.trailerNumber }}\r\n </p>\r\n </div>\r\n </div>\r\n <p class=\"selected-end-item\">\r\n @if (\r\n splitTrailerOption!.location?.city &&\r\n splitTrailerOption!.location?.stateShortName\r\n ) {\r\n {{ splitTrailerOption!.location?.city }},\r\n {{ splitTrailerOption!.location?.stateShortName }}\r\n }\r\n </p>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #passwordTooltip>\r\n {{ visible() ? \"Hide\" : \"Show\" }}\r\n</ng-template>\r\n\r\n<ng-template #errorTooltip>\r\n @if (\r\n (config().errorBehavior === \"floating\" ||\r\n (config().errorBehavior === \"static\" && hasText()) ||\r\n config().inTable) &&\r\n invalid &&\r\n !dropdown.isOpen()\r\n ) {\r\n {{ (ngControl?.errors | errorMessage: config().customErrors)[0] }}\r\n }\r\n</ng-template>\r\n\r\n<!-- #endregion -->\r\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon,.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon,.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .icon-sm{color:#919191!important}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse.is-empty:has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse.has-text:has(.app-input:disabled) .app-input-label{color:#424242!important}.app-input-container:hover,.app-input-container.hovered{background-color:var(--color-surface-neutral-hover)}.app-input-container:hover:not(:has(.app-input:disabled)) .sub-label,.app-input-container.hovered:not(:has(.app-input:disabled)) .sub-label{margin-right:44px}.app-input-container.has-text .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container.has-text.fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container.has-text .subcontent{opacity:1!important}.app-input-container.has-text.static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text)}.app-input-container.has-text.is-address:hover .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:hover .bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral-hover)}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-text.is-address:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .subcontent{opacity:1!important;color:#ffffffb2;left:unset!important;right:4px!important}.app-input-container:has(.app-input:focus-visible).has-text .subcontent{right:26px!important}.app-input-container:has(.app-input:focus-visible) .sub-label{margin-right:44px}.app-input-container:has(.app-input:focus-visible).fade-placeholder .app-input-label{transform:translateY(0);opacity:0}.app-input-container:has(.app-input:focus-visible).static-placeholder .app-input-label{transform:translateY(0);opacity:1;color:var(--color-text-inverse)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover,.app-input-container:has(.app-input:disabled).hovered{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:disabled) .dropdown-icon-container{opacity:0}.app-input-container:has(.app-input:disabled):not(.disabled-removable) .cancel-button{display:none!important}.app-input-container:has(.app-input:required):not(:has(.app-input:disabled)) .app-input-name:after{content:\" *\";color:var(--color-text-negative)}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .dropdown-icon-container:hover .dropdown-icon{color:#424242!important}.app-input-container:not(.has-error).is-empty:not(:has(.app-input:focus-visible)) .hover-icon:hover{color:#424242!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error).is-empty:has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.subcontent{pointer-events:none;position:absolute;left:6px;color:#919191;-webkit-user-select:none;user-select:none;top:50%;transform:translateY(-50%);transition:right .1s ease-in-out,left .1s ease-in-out,transform .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);opacity:0;font-family:Montserrat;font-weight:400;font-style:Regular;font-size:14px;line-height:18px;letter-spacing:0%;height:18px;overflow:hidden}.subcontent .subcontent-hide{opacity:0!important}.app-input-label{position:absolute;display:flex;gap:4px;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.app-input-label.placeholder-color{color:var(--placeholder-color)!important}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error:hover:not(.has-right) .app-input,.app-input-container.has-error:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-error.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-error:hover,.app-input-container.has-error.hovered{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover.has-text .button-icon,.app-input-container.has-error.hovered.has-text .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover.has-text .bg-icon,.app-input-container.has-error.hovered.has-text .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible).has-text .button-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible).has-text .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:focus-visible).is-empty,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .app-input-error,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible).is-empty .bg-icon,.app-input-container.has-error:has(.app-input:focus-visible).has-dropdown:not(.has-selected) .bg-icon{color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error.is-empty:has(.app-input:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:#ffffff4d}.app-input-container.has-error .icon-container .separator,.app-input-container.has-error .dropdown-icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon,.app-input-container.has-error .icon-container .icon-sm,.app-input-container.has-error .dropdown-icon-container .icon,.app-input-container.has-error .dropdown-icon-container .icon-sm{color:var(--color-icon-negative)}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#c20c0c!important}.app-input-container.has-error:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#c20c0c!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-error:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.app-input-container.has-valid:not(.has-icon):not(.has-password):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid:hover:not(.has-right) .app-input,.app-input-container.has-valid:has(.app-input:focus-visible):not(.has-right) .app-input{padding-right:26px}.app-input-container.has-valid.has-right .app-input{padding-right:6px;padding-left:26px}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.in-table),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.in-table),.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.in-table){background-color:var(--color-surface-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .button-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):hover .bg-icon,.app-input-container.has-valid.has-text:not(.has-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):hover .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown).hovered .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:hover .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text.hovered .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible),.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .button-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:focus-visible) .bg-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid.has-text:not(.has-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid.has-text:not(.has-dropdown) .app-input::selection,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .app-input::selection,.app-input-container.has-valid.has-multiple-dropdown.has-text .app-input::selection{background-color:#ffffff4d}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .separator,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .separator,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .separator,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .icon-sm,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .icon-sm,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .icon-sm{color:var(--color-icon-positive)}.app-input-container.has-valid.has-text:not(.has-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-text:not(.has-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .icon-container .password-key,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown) .dropdown-icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .icon-container .password-key,.app-input-container.has-valid.has-multiple-dropdown.has-text .dropdown-icon-container .password-key{opacity:0;pointer-events:none}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .bg-icon:hover{background-color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .dropdown-icon-container:hover .dropdown-icon{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) .hover-icon:hover{color:#0b49d1!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .bg-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.app-input-container.has-valid.has-text:not(.has-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-dropdown.has-selected:not(.has-multiple-dropdown):not(.removable):has(.app-input:focus-visible) .hover-icon:hover,.app-input-container.has-valid.has-multiple-dropdown.has-text:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.in-table,.in-table.has-error,.in-table.has-valid.has-text{background-color:transparent}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)) .app-input{color:var(--color-text-negative)}.in-table.has-error:not(:hover).in-table:not(.app-input-container:has(.app-input:focus-visible)):not(.static-placeholder) .app-input-label{color:var(--color-text-negative)}.in-table .dropdown-icon-container{opacity:0}.in-table:hover .dropdown-icon-container{opacity:1}.in-table:has(.app-input:focus-visible) .dropdown-icon-container{opacity:1}.app-input-icon{position:absolute;right:4px;top:4px;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.button-icon{opacity:0;pointer-events:none}.button-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),transform .1s cubic-bezier(.46,.03,.51,.95);transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.bg-icon:hover{transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.round-icon{background-color:#919191;color:#2f2f2f;border-radius:50%;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) .app-input{color:#3b73ed}.floating-error .app-input-error{opacity:0!important}.static-error .app-input-error{pointer-events:none!important;transform:translateY(calc(-100% - 4px))!important;transition:margin .1s ease-in-out,opacity .1s ease-in-out}.static-error.has-icon .app-input-error{margin-right:26px!important}.static-error:has(.app-input:not(:focus-visible)) .app-input-error{opacity:1}.static-error.has-text .app-input-error{opacity:0!important}.static-placeholder .app-input-label{position:relative;white-space:nowrap;font-size:11px;font-weight:600}.static-placeholder .dropdown-selected{overflow:hidden;display:flex!important;justify-content:left!important}.static-placeholder .dropdown-selected .selected-label-hidden{width:max-content;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.static-placeholder .dropdown-selected .selected-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}.static-placeholder .app-input{padding-left:0!important}.static-placeholder.has-dropdown .cancel-button{display:none}.static-placeholder.has-dropdown .dropdown-icon-container .dropdown-icon{opacity:0;pointer-events:none}.static-placeholder.has-dropdown:hover .icon-container .icon,.static-placeholder.has-dropdown:hover .icon-container .icon-sm,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm{opacity:0}.static-placeholder.has-dropdown:hover .dropdown-icon-container,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container{z-index:5;pointer-events:auto;cursor:pointer}.static-placeholder.has-dropdown:hover .dropdown-icon-container .dropdown-icon,.static-placeholder.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .dropdown-icon{opacity:1!important}.static-placeholder.has-dropdown .dropdown-icon-container{right:4px!important;left:auto!important}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-icon:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon-sm,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .dropdown-icon-container .icon-sm{color:var(--color-icon-inverse)!important}.app-input-container.has-icon.colored-icon .icon-container .icon,.app-input-container.has-icon.colored-icon .icon-container .icon-sm,.app-input-container.has-password.colored-icon .icon-container .icon,.app-input-container.has-password.colored-icon .icon-container .icon-sm,.app-input-container.has-dropdown.colored-icon .icon-container .icon,.app-input-container.has-dropdown.colored-icon .icon-container .icon-sm{color:var(--icon-color)}.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-icon.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-password.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .icon-container .icon-sm,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon,.app-input-container.has-dropdown.is-empty:has(.app-input:disabled) .dropdown-icon-container .icon-sm{color:var(--color-icon-disable)!important}.app-input-container.has-icon .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-dropdown .warning-icon{display:none!important}.app-input-container.has-icon .icon,.app-input-container.has-icon .icon-sm,.app-input-container.has-password .icon,.app-input-container.has-password .icon-sm,.app-input-container.has-dropdown .icon,.app-input-container.has-dropdown .icon-sm{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);opacity:1}.app-input-container.has-icon:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-icon:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-password:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:hover:not(:has(.app-input:disabled)):not(.static-placeholder) .dropdown-selected,.app-input-container.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder) .dropdown-selected{width:calc(100% - 48px)!important}.icon-sm{height:14px;width:14px}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .subcontent,.app-input-container.has-password .subcontent{left:32px}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:27px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon,.has-password .password-icons .icon-sm{position:absolute;opacity:0}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password.is-empty:has(.app-input:not(:focus-visible)) .password-icons{pointer-events:none}.has-password:has(.app-input:disabled) .password-icons{pointer-events:none}.has-password.has-text .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password.has-text .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible.has-text .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible.has-text .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible.has-text .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important;pointer-events:none}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .button-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-number:has(.app-input:focus-visible) .subcontent{right:52px!important}.has-number:has(.app-input:focus-visible).has-text .subcontent{right:52px!important}.colored-icon .icon,.colored-icon .icon-sm{color:var(--icon-color)!important}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.dropdown-infinite-scroll-item{width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;height:0}.dropdown-menu{min-width:0px!important;width:100%;border:0;margin-top:4px;top:30px;height:var(--unfiltered-height);min-height:var(--unfiltered-height);padding:0!important;overflow:hidden;border-radius:0!important;background:transparent!important}.dropdown-menu.has-stroke .dropdown-menu-content{outline:1px solid #6c6c6c;outline-offset:-1px}.dropdown-menu .dropdown-menu-content{position:absolute;width:100%;background-color:#2f2f2f;border-radius:3px;padding:4px 0 4px 4px;max-height:244px;z-index:1100!important;overflow-y:scroll;margin-top:auto!important;scroll-padding:6px 0}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:4px}.dropdown-menu .dropdown-menu-content::-webkit-scrollbar-thumb{width:4px;background:#2f2f2f;border-left:2px solid #919191;background-clip:padding-box;border-radius:1px 3px 3px 1px}@supports (-moz-appearance: none){.dropdown-menu .dropdown-menu-content{padding-right:4px;scrollbar-width:4px;scrollbar-color:#919191 transparent;scrollbar-gutter:stable!important}.dropdown-menu .dropdown-menu-content:hover{scrollbar-color:#919191 transparent;scrollbar-width:4px!important;scrollbar-gutter:stable!important}}@-moz-document url-prefix(){.dropdown-menu .dropdown-menu-content{overflow:-moz-scrollbars-vertical;scrollbar-width:4px;scrollbar-color:#919191 transparent}}.option-icon{color:#6c6c6c;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.option-icon.full-size{width:max-content;min-width:100%;height:18px!important;min-height:18px;flex-shrink:0;overflow:hidden}.option-icon.full-size svg{height:18px;width:max-content}.cai-color{color:var(--color)!important;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.color-item:hover .cai-color{color:var(--hover-color)!important}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;scroll-margin:6px 0;outline:1px solid transparent;outline-offset:-1px;display:flex;align-items:center;justify-content:left;gap:4px;background-color:#2f2f2f;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),outline .1s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item.focused{outline:1px solid #6c6c6c!important}.dropdown-item.focused .end-item-base{opacity:0}.dropdown-item.focused .end-item-hover{opacity:1}.dropdown-item.focused .full-icon{color:#ffffffb2}.dropdown-item.focused .truck-trailer-option{opacity:1}.dropdown-item .icon,.dropdown-item .icon-sm{color:#919191}.dropdown-item .dropdown-content-with-icon{max-width:calc(100% - 22px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content-hazardous{max-width:calc(100% - 40px);overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item .dropdown-content{max-width:70%;overflow-x:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover:not(.no-hover){background-color:#424242}.dropdown-item:hover:not(.no-hover) .end-item-base{opacity:0}.dropdown-item:hover:not(.no-hover) .end-item-hover{opacity:1}.dropdown-item:hover:not(.no-hover) .full-icon{color:#ffffffb2}.dropdown-item:hover:not(.no-hover) .truck-trailer-option{opacity:1}.dropdown-item.no-hover{cursor:default;pointer-events:none}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item:not(:first-child){margin-top:4px}.dropdown-item.banned{color:#919191;cursor:default}.dropdown-item.banned:hover{color:#919191;background-color:#2f2f2f}.dropdown-item.banned:hover .end-item-base{opacity:0}.dropdown-item.banned:hover .end-item-hover{opacity:1}.dropdown-item.dnu .round-icon{background-color:#e66767}.dropdown-item .fraud{color:#fab15c!important}.dropdown-item.selected .dispatch-load-count,.dropdown-item.selected .unassigned-ltl,.dropdown-item.selected .unassigned-ltl .icon,.dropdown-item.selected .unassigned-ltl .icon-sm{color:#92b1f5}.dropdown-item:not(:hover):not(.focused):not(.selected) .truck-icon{color:#919191}.dropdown-item:not(:hover):not(.focused):not(.selected) .trailer-icon{color:#919191}.dropdown-avatar:hover{z-index:20}.no-results{color:#919191;font-weight:700;cursor:default;pointer-events:none}.add-new{color:#92b1f5!important;font-weight:700;font-size:11px}.add-new .dropdown-item-icon{opacity:1}.add-new:hover{background-color:#3b73ed66!important;color:#fff!important}.selected{font-weight:700}.selected .dropdown-item-icon{opacity:1}.selected .dropdown-item-count{color:#fff;background-color:#3b73ed}.selected .full-icon{color:#fff}.selected .end-item-base,.selected .end-item-hover{font-weight:700;color:#92b1f5}.selected .end-item-base .icon,.selected .end-item-base .icon-sm,.selected .end-item-hover .icon,.selected .end-item-hover .icon-sm{color:#92b1f5}.dropdown-item-icon{opacity:0;color:#92b1f5;width:14px;height:14px;margin-left:auto}.dropdown-item-icon.no-margin{margin-left:0}.dropdown-item-count{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 5px;border-radius:10px;background-color:#424242;color:#ffffffb2;min-width:18px;line-height:14px;font-weight:600;font-size:11px;text-align:center}.dropdown-icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-icon-container.open .dropdown-icon{transform:rotateX(180deg)}.dropdown-icon{transition:transform .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)!important;transform:rotateX(0);cursor:pointer}.has-dropdown .app-input-icon{right:26px}.has-dropdown:has(.app-input:focus-visible) .subcontent{right:26px!important}.has-dropdown:has(.app-input:focus-visible).has-text .subcontent,.has-dropdown:has(.app-input:focus-visible).has-selected .subcontent{right:48px!important}.has-dropdown:hover:not(.static-placeholder):not(.is-adding) .app-input,.has-dropdown:has(.app-input:focus-visible):not(.static-placeholder):not(.is-adding) .app-input{padding-right:48px!important}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .cancel-button{z-index:1}.has-right.has-number .plus-button-container{order:2}.has-right.has-number .minus-button-container{order:1}.has-right.static-placeholder .app-input-icon{right:4px!important;left:auto!important;opacity:0!important}.has-right.static-placeholder:has(.app-input:focus-visible) .cancel-button{opacity:0!important;pointer-events:none!important}.has-right.static-placeholder.removable .cancel-button .bg-icon{background-color:transparent!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon{color:var(--color-icon-positive)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover.has-valid.has-text:has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon{color:var(--color-icon-neutral)!important}.has-right.static-placeholder.removable:hover:not(.has-text) .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon{color:var(--color-icon-inverse)!important}.has-right.static-placeholder.removable:hover:not(.has-text):has(.app-input:focus-visible) .cancel-button .bg-icon:hover{color:#fff!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon{color:var(--color-icon-negative)!important}.has-right.static-placeholder.removable:hover.has-error .cancel-button .bg-icon:hover{color:#c20c0c!important}.has-right.static-placeholder.removable:hover .cancel-button{opacity:1!important}.has-right.static-placeholder.removable:hover .cancel-button .bg-icon{opacity:1!important;pointer-events:auto!important}.has-right.static-placeholder.removable:hover .icon-container .icon,.has-right.static-placeholder.removable:hover .icon-container .icon-sm{opacity:0!important}.has-right.static-placeholder:hover:not(:has(.app-input:focus-visible)).has-text .cancel-button{opacity:1!important}.has-right .app-input{order:1}.has-right.has-subcontent .app-input{flex:1;min-width:0;word-break:none}.has-right .dropdown-selected{margin-left:0!important;text-align:right!important;right:0!important;left:0!important;justify-content:flex-end!important;width:100%!important}.has-right .subcontent{position:relative!important;order:1;display:grid;place-items:center;padding-right:4px;height:unset!important;transform:translateY(0)!important;left:0!important;right:unset!important}.has-right .subcontent .subcontent-hide{display:none!important}.has-right.has-text .subcontent{left:0!important;right:unset!important}.has-right:has(.app-input:focus-visible) .subcontent{left:0!important;right:unset!important}.has-right.has-icon .subcontent,.has-right.has-password .subcontent{padding-right:0!important;padding-left:4px}.has-right.has-icon .dropdown-selected,.has-right.has-password .dropdown-selected{width:calc(100% - 24px)!important}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon.fade-placeholder .app-input-label,.has-right.has-password.fade-placeholder .app-input-label{left:auto!important;right:24px!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-icon .icon-container .icon-sm,.has-right.has-password .icon-container .icon,.has-right.has-password .icon-container .icon-sm{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .dropdown-icon-container{left:4px}.has-right .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right.has-number.app-input-container:has(.app-input:focus-visible) .app-input{padding-left:4px}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}.has-right.fade-placeholder .app-input-label{right:0!important;left:auto!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:after{content:none!important}.has-right.fade-placeholder:has(.app-input:required) .app-input-name:before{content:\"* \";color:var(--color-text-negative)}.removable:has(.cancel-button:hover).in-table{background-color:transparent!important}.removable:has(.cancel-button:hover).in-table .separator{background-color:var(--color-icon-neutral)!important}.removable:has(.cancel-button:hover):not(.in-table){background-color:var(--color-surface-negative-hover)!important}.removable:has(.cancel-button:hover):not(.in-table) .separator{background-color:var(--color-icon-negative)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus)!important}.removable:has(.cancel-button:hover):has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.no-clear .cancel-button{display:none!important}.is-adding{padding-right:20px}.is-adding .dropdown-icon{opacity:0!important}.is-adding .accept-button{pointer-events:none;opacity:0!important}.is-adding:not(.removable):has(.app-input:focus-visible) .bg-icon:hover{background-color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .dropdown-icon-container:hover .dropdown-icon{color:#fff!important}.is-adding:not(.removable):has(.app-input:focus-visible) .hover-icon:hover{color:#fff!important}.is-adding:hover,.is-adding:has(.app-input:focus-visible){padding-right:48px!important}.is-adding.has-right{padding-left:26px}.is-adding.has-right.has-right:hover,.is-adding.has-right.has-right:has(.app-input:focus-visible){padding-left:40px}.is-adding .app-input-icon{right:4px}.is-adding.has-text:hover .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:hover .accept-button{pointer-events:auto;opacity:1!important}.is-adding.has-text:has(.app-input:focus-visible) .button-icon{opacity:1;pointer-events:auto!important}.is-adding.has-text:has(.app-input:focus-visible) .accept-button{pointer-events:auto;opacity:1!important}.is-adding .cancel-button{opacity:1!important;pointer-events:auto}.is-adding .dropdown-icon-container{pointer-events:none}.is-adding .accept-button{right:26px;pointer-events:auto}.dropdown-selected{-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%);left:0;width:calc(100% - 22px);pointer-events:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break:break-all;padding:.25rem 6px;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95),width .1s ease-in-out;color:var(--color-text);display:flex;gap:4px}.dropdown-selected .dropdown-selected-content{overflow:hidden;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.dropdown-selected .dropdown-selected-hazardous{max-width:calc(100% - 22px)}p.dropdown-selected{-webkit-user-select:none;user-select:none;display:block}.app-input-container:has(.app-input:focus-visible) .dropdown-selected{color:#fff;opacity:.7}.app-input-container:has(.app-input:focus-visible) .dropdown-selected .option-icon{color:#fff!important}.has-icon .positive-icon,.has-icon .warning-icon{display:none}.has-icon .dropdown-selected{left:27px;width:calc(100% - 49px)}.has-icon:hover .dropdown-selected{width:calc(100% - 71px)}.has-icon.app-input-container:has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 71px)}.hazard-icon{height:18px;width:max-content}.has-dispatch .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.dispatch-load-count{color:#dadada;font-weight:700}.dispatch-separator{color:#919191;font-weight:400}.dispatch-status{font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:14px;letter-spacing:0%;text-transform:uppercase;color:#ffffffb2;border-radius:2px;padding:2px 4px;display:flex;justify-content:center;align-items:center;gap:4px}.dispatch-status.status-available{background-color:#50ac2533}.dispatch-status.status-dispatched{background-color:#3b73ed33}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-loading,.dispatch-status.status-loaded{background-color:#259f9433}.dispatch-status.status-arrived,.dispatch-status.status-checked-in,.dispatch-status.status-offloading,.dispatch-status.status-offloaded{background-color:#ff704333}.dispatch-status.status-canceled{background-color:#df3c3c33}.dispatch-status.status-tonu{background-color:#df3d8533}.dispatch-status.status-off,.dispatch-status.status-deadhead,.dispatch-status.status-dheading{background-color:#91919133}.dispatch-status.status-towing{background-color:#9e47ec33}.dispatch-status.status-repair{background-color:#865e3a33}.dispatch-status .status-block{border-radius:1px;background-color:#aaa;padding-left:2px;padding-right:2px;font-family:Montserrat;font-weight:700;font-style:Bold;font-size:11px;line-height:12px;text-align:center;color:#2f2f2f;min-width:12px;height:12px}.dispatch-status .status-block.blue{background-color:#6692f1}.dispatch-status .status-block.green{background-color:#56b4ac}.dispatch-status .status-block.orange{background-color:#ff906d}.has-ftl-dispatch,.has-dispatch{min-width:600px}.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-ftl-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .dispatch-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .trailer-icon,.has-dispatch:has(.app-input:focus-visible) .dropdown-selected .truck-icon{color:#fff}.dropdown-subitem{display:flex;justify-content:left;align-items:center;gap:4px}.truck-item{width:128px}.trailer-item{width:138px}.truck-trailer-option{opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);margin-left:auto}.truck-trailer-icon-colors.ic_truck_semi-truck,.truck-trailer-icon-colors.ic_truck_semi-wSleeper{color:#92b1f5}.truck-trailer-icon-colors.ic_truck_box-truck,.truck-trailer-icon-colors.ic_truck_reefer,.truck-trailer-icon-colors.ic_truck_cargo-van{color:#fbc88b}.truck-trailer-icon-colors.ic_truck_cement,.truck-trailer-icon-colors.ic_truck_dump,.truck-trailer-icon-colors.ic_truck_garbage{color:#ed9292}.truck-trailer-icon-colors.ic_truck_tow-truck,.truck-trailer-icon-colors.ic_truck_car-hauler,.truck-trailer-icon-colors.ic_truck_spotter{color:#86c9c3}.truck-trailer-icon-colors.ic_trailer_flatbed,.truck-trailer-icon-colors.ic_trailer_low-boy,.truck-trailer-icon-colors.ic_trailer_step-deck{color:#92b1f5}.truck-trailer-icon-colors.ic_trailer_chassis,.truck-trailer-icon-colors.ic_trailer_container{color:#80d6f1}.truck-trailer-icon-colors.ic_trailer_conestoga,.truck-trailer-icon-colors.ic_trailer_side-kit{color:#8785e8}.truck-trailer-icon-colors.ic_trailer_dryvan,.truck-trailer-icon-colors.ic_trailer_reefer{color:#fbc88b}.truck-trailer-icon-colors.ic_trailer_end-dump,.truck-trailer-icon-colors.ic_trailer_bottom-dump,.truck-trailer-icon-colors.ic_trailer_hopper{color:#ed9292}.truck-trailer-icon-colors.ic_trailer_tanker,.truck-trailer-icon-colors.ic_trailer_tanker-pneumatic{color:#ed93bb}.truck-trailer-icon-colors.ic_trailer_carhauler,.truck-trailer-icon-colors.ic_trailer_carhauler-stinger{color:#86c9c3}.sub-label{margin-left:auto;margin-right:22px;opacity:0;transition:margin .1s ease-in-out,opacity .1s ease-in-out;color:#6c6c6c}.app-input-label:has(.sub-label){width:100%}.has-selected .sub-label{opacity:1}.dispatch-icon,.trailer-icon,.truck-icon{color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.truck-icon,.trailer-icon{width:42px}.truck-number{width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.trailer-number{width:90px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.driver-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dropdown-subitem-end{margin-left:auto;position:relative;height:26px;width:auto;display:flex;justify-content:right;align-items:center;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;vertical-align:bottom}.end-item-base{position:absolute;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);text-align:right}.dispatch-ltl{font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.unassigned-ltl{margin-left:auto;display:flex;justify-content:right;align-items:center;width:max-content;gap:4px;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);font-family:Montserrat;font-weight:700;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right}.end-item-hover{position:absolute;display:flex;justify-content:right;align-items:center;gap:4px;width:max-content;opacity:0;color:#919191;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95)}.selected-end-item{margin-left:auto;font-family:Montserrat;font-weight:400;font-size:11px;line-height:18px;letter-spacing:0%;text-align:right;display:flex;justify-content:right;align-items:center;gap:4px}.group-item{font-family:Montserrat;font-weight:700!important;font-size:11px!important;line-height:18px;letter-spacing:0%;vertical-align:middle;text-transform:uppercase;background-color:#2f2f2f;color:#aaa!important}.group-item:not(:first-child){border-top:1px solid #424242}.group-item .group-icon{margin-left:auto;transform:rotate(180deg);transition:transform .1s cubic-bezier(.46,.03,.51,.95)}.group-item.unfolded{color:#fff!important}.group-item.unfolded .group-icon{transform:rotate(0)}.counter{background-color:#424242;padding:1px 4px;border-radius:60px;font-family:Montserrat;font-weight:600;font-size:11px;min-width:18px;line-height:14px;letter-spacing:0%;text-align:center;vertical-align:middle;color:#ffffffb2;transition:color .1s cubic-bezier(.46,.03,.51,.95)}.password-requirement{padding:6px;background-color:#fffffff2!important;box-shadow:0 0 4px #0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:hidden}.password-requirement p{font-family:Montserrat;font-weight:600;font-size:11px;line-height:14px;letter-spacing:0%;vertical-align:middle;color:#6c6c6c;font-style:italic}.password-requirement .icon,.password-requirement .icon-sm{width:14px!important;height:14px!important}.password-requirement .icon.checkmark,.password-requirement .checkmark.icon-sm{color:#ccc}.password-requirement .icon.cancel,.password-requirement .cancel.icon-sm{color:#e66767}.password-requirement ul{list-style-type:none;margin:6px 0 0;padding:0}.password-requirement ul li{color:#424242;font-size:11px;font-style:italic;font-weight:500;line-height:14px;display:flex;gap:4px}.password-requirement ul li.valid{color:#919191!important}.password-requirement ul li:not(:first-child){margin-top:6px}.has-end-item:not(:has(.app-input:disabled)):hover .dropdown-selected{width:calc(100% - 44px)}.has-end-item:not(:has(.app-input:disabled)):has(.app-input:focus-visible) .dropdown-selected{width:calc(100% - 44px)}.progress-bar{width:24px;height:8px;border-radius:2px;position:relative;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar:after{content:\"\";position:absolute;top:0;width:var(--progress);height:100%;transition:background-color .1s cubic-bezier(.46,.03,.51,.95)}.progress-bar.low{background-color:#df3c3c33}.progress-bar.low:after{background-color:#e66767}.progress-bar.medium{background-color:#f89b2e33}.progress-bar.medium:after{background-color:#fab15c}.progress-bar.high{background-color:#56b4ac33}.progress-bar.high:after{background-color:#56b4ac}.progress-bar.disable{background-color:#91919133}.progress-bar.disable:after{display:none}.app-input-container:has(.app-input:focus-visible) .selected-end-item .progress-bar{background-color:#fff!important}.full-icon{color:#919191}.fuelcard-number{width:216px}.fuelcard-brand{width:132px}.owner-ein{width:118px}.has-multiple-dropdown.has-text{border-top-left-radius:0!important;border-top-right-radius:0!important}.multiple-container{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-top-left-radius:2px;border-top-right-radius:2px;position:relative;transition:background-color .1s ease-in-out;background-color:#e9effd}.multiple-container.hovered{background-color:#bed0f9}.multiple-container.hovered .multiple-selected{background-color:#e9effd}.multiple-container.focused{background-color:#0b49d1}.multiple-container.focused .multiple-selected{background-color:#3b73ed;color:#fff}.multiple-selected{background-color:#bed0f9;color:#2f2f2f;transition:background-color .1s ease-in-out,color .1s ease-in-out;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:2px 4px;-webkit-user-select:none;user-select:none;font-family:Montserrat;font-size:14px;font-weight:400;line-height:18px;width:209px;height:22px;border-radius:1px}.multiple-selected p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.multiple-selected:hover{color:#2f2f2f!important;background-color:#fff!important}.multiple-selected:hover .multiple-remove-button{opacity:1}.multiple-selected .multiple-remove-button{opacity:0;background-color:#6692f1;color:#fff;width:14px;height:14px}.multiple-selected .multiple-remove-button .multiple-remove-icon{width:12px;height:12px}.multiple-label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:0;left:6px;transform:translateY(-14px)}.dropdown-group{border-radius:2px;transition:background-color .1s cubic-bezier(.46,.03,.51,.95),max-height .1s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;margin-top:4px;max-height:var(--max-height);height:var(--max-height);overflow:hidden}.dropdown-group.no-items{cursor:default;pointer-events:none}.dropdown-group .group-item{outline:none;color:#fff!important;font-weight:400!important;font-size:14px!important;display:flex;transition:font-weight .1s ease-in-out,background-color .1s cubic-bezier(.46,.03,.51,.95),color .1s cubic-bezier(.46,.03,.51,.95);padding-left:6px;padding-right:6px}.dropdown-group .group-item:hover .counter,.dropdown-group .group-item.unfolded .counter{color:#fff}.dropdown-group .group-item.unfolded{font-weight:700!important}.dropdown-group .group-item .counter{margin-left:auto}.dropdown-group .group-item .group-icon{margin-left:0}.dropdown-group:hover:not(.no-items),.dropdown-group.active{background-color:#424242}.dropdown-group:hover:not(.no-items) .group-item:hover,.dropdown-group.active .group-item:hover{background-color:#424242}.dropdown-group:hover:not(.no-items) .dropdown-item,.dropdown-group.active .dropdown-item{background-color:#424242}.dropdown-group.active{padding:4px;padding-top:0!important}.dropdown-group.active .group-item{position:relative!important;padding-left:2px!important;padding-right:2px!important}.dropdown-group .dropdown-item:not(.group-item):hover{background-color:#6c6c6c!important}.fuel-stop-transaction-store{display:flex;gap:4px}.fuel-stop-transaction-store .fuel-stop-transaction-store-address{font-size:11px;color:#ccc;margin-left:auto}.fuel-stop-transaction-store .favorite-icon{color:#92b1f5;width:14px;height:14px}.fuel-stop-transaction-nostore{padding-left:2px;padding-right:2px}.hide-dropdown{opacity:0;pointer-events:none;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown) .dropdown-menu-content{transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s ease-in-out;animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95)}.dropdown-menu:not(.hide-dropdown).animate-dropdown .dropdown-menu-content{max-height:var(--max-height);height:var(--max-height)}.closing:not(.hide-dropdown) .dropdown-menu-content{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:244px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:244px;opacity:1}to{max-height:0;opacity:0}}.app-input-container:has(.app-input:focus-visible).has-dropdown .loader.loading,.app-input-container:has(.app-input:focus-visible).has-text .loader.loading{opacity:1!important}.app-input-container:has(.app-input:focus-visible).has-dropdown.has-text .loader{transform:translate(-48px)}.loader{position:absolute;top:4px;right:0;transform:translate(-26px);pointer-events:none;z-index:1000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:opacity .1s ease-in-out,transform .1s ease-in-out;opacity:0}.loader-icon{width:14px;height:14px;animation:spin .8s ease-in-out infinite;transform-origin:center;display:flex;align-items:center;justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-22{height:22px}.size-22 .icon,.size-22 .icon-sm{height:14px!important;width:14px!important}.size-22 .bg-icon{height:14px!important;width:14px!important;padding:2px!important}.size-22 .icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.size-22 .app-input,.size-22 .app-input-label{padding-top:2px;padding-bottom:2px;padding-left:4px}.size-22.has-icon .app-input-label{padding-left:0!important}.size-22 .app-input-icon{height:14px!important;width:14px!important}.size-22.has-text .app-input-label,.size-22:has(.app-input:focus-visible) .app-input-label{transform:translateY(-18px)}.size-22 .loader{top:2px;transform:translate(-22px)!important}.strikethrough .app-input,.strikethrough .dropdown-selected-content{text-decoration:line-through}.max-w-280{max-width:280px}\n"] }]
|
|
4065
4065
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
4066
4066
|
type: Optional
|
|
4067
4067
|
}, {
|
|
@@ -4905,13 +4905,8 @@ class DropZoneComponent {
|
|
|
4905
4905
|
}));
|
|
4906
4906
|
const validNewFiles = newlyProcessed.filter(Boolean) || [];
|
|
4907
4907
|
if (validNewFiles.length > 0) {
|
|
4908
|
-
|
|
4909
|
-
|
|
4910
|
-
? validNewFiles
|
|
4911
|
-
: [...this.docs(), ...validNewFiles];
|
|
4912
|
-
this.docs.set(updatedDocs);
|
|
4913
|
-
console.log('this.docs()', this.docs());
|
|
4914
|
-
this.setImagePreviewUrl(updatedDocs[0]?.imagePreviewUrl || '');
|
|
4908
|
+
this.docs.set(validNewFiles);
|
|
4909
|
+
this.setImagePreviewUrl(validNewFiles[0]?.imagePreviewUrl || '');
|
|
4915
4910
|
}
|
|
4916
4911
|
if (this.crop()) {
|
|
4917
4912
|
this.submitCrop(true);
|
|
@@ -5088,7 +5083,6 @@ class DropZoneComponent {
|
|
|
5088
5083
|
return;
|
|
5089
5084
|
}
|
|
5090
5085
|
const previewUrl = URL.createObjectURL(this.cropperResultFile);
|
|
5091
|
-
console.log('temporaryImageFile', this.temporaryImageFile);
|
|
5092
5086
|
if (this.temporaryImageFile) {
|
|
5093
5087
|
this.temporaryImageFile.file = this.cropperResultFile;
|
|
5094
5088
|
this.temporaryImageFile.imagePreviewUrl = previewUrl;
|
|
@@ -5109,7 +5103,6 @@ class DropZoneComponent {
|
|
|
5109
5103
|
this.temporaryImageFile = null;
|
|
5110
5104
|
this.cropperResultFile = null;
|
|
5111
5105
|
this.onCropPendingChange.emit(false);
|
|
5112
|
-
console.log('iz update', this.docs());
|
|
5113
5106
|
return;
|
|
5114
5107
|
}
|
|
5115
5108
|
const lastIndex = this.docs().length - 1;
|
|
@@ -5126,7 +5119,6 @@ class DropZoneComponent {
|
|
|
5126
5119
|
this.clearInvalid();
|
|
5127
5120
|
this.showCropper.set(false);
|
|
5128
5121
|
}
|
|
5129
|
-
console.log('updatedDocs', this.docs());
|
|
5130
5122
|
this.setImagePreviewUrl(previewUrl);
|
|
5131
5123
|
this.cropDimensions();
|
|
5132
5124
|
if (!initial)
|
|
@@ -5393,7 +5385,6 @@ class DropZoneComponent {
|
|
|
5393
5385
|
else {
|
|
5394
5386
|
this.docs.update((docs) => [...docs, ...valid]);
|
|
5395
5387
|
}
|
|
5396
|
-
console.log('this.docs()', this.docs());
|
|
5397
5388
|
const isSupportedImage = valid[0].file?.type.startsWith('image/') &&
|
|
5398
5389
|
valid[0].type &&
|
|
5399
5390
|
supportedTypes.includes(valid[0].type);
|
|
@@ -8584,11 +8575,11 @@ class SelectedBusinessFieldComponent {
|
|
|
8584
8575
|
this.onAction.emit(action);
|
|
8585
8576
|
}
|
|
8586
8577
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SelectedBusinessFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8587
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SelectedBusinessFieldComponent, isStandalone: true, selector: "cai-selected-business-field", inputs: { business: { classPropertyName: "business", publicName: "business", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "@let isDisabled = business().isDisabled; @let email = business().email;\r\n@let phone = business().phone; @let address = business().address;\r\n@let name = business().name; @let isFavorite = business().isFavorite;\r\n@let isRequired = business().isRequired; @let label = business().label;\r\n\r\n<div class=\"container\" [class.disabled]=\"isDisabled\">\r\n <p class=\"label\" [class.required]=\"isRequired\">\r\n {{ label }}\r\n </p>\r\n <div class=\"title-row\">\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <p class=\"title\">{{ name }}</p>\r\n\r\n @if (isFavorite) {\r\n <svg-icon [name]=\"'cai-favorite'\" class=\"icon\"></svg-icon>\r\n }\r\n </div>\r\n\r\n @if (!isDisabled) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <button\r\n (click)=\"handleAction(eGeneralActions.EDIT)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Edit\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-edit'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n <button\r\n (click)=\"handleAction(eGeneralActions.CLEAR)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Cancel\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-cancel'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (phone || email || address) {\r\n <div class=\"details-row\">\r\n @let isDisabledColor = isDisabled ? null : \"blue\";\r\n @if (phone) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"phone\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-phone'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ phone }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (email) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"email\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-email'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ email }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (address) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"address\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-address'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ address }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:-16px;left:6px}.label.required:after{content:\"* \";color:#df3c3c}.container{position:relative;width:100%;padding:4px 4px 6px 6px;margin:0;border-radius:2px;background-color:#e9effd;transition:background-color .2s ease-in-out}.container:hover:not(.disabled){background-color:#bed0f9}.container:hover:not(.disabled) .bg-icon{opacity:1;color:#bed0f9}.container:has(.action-button:focus-visible) .bg-icon{opacity:1!important}.container.disabled{background-color:#f7f7f7}.container.disabled .icon{color:#919191}.container .title-row{display:flex;align-items:center;justify-content:space-between}.container .details-row{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin-top:6px}.title{color:#424242;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:700;line-height:18px;text-transform:uppercase}.detail{color:#2f2f2f;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:400;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.icon{height:14px;width:14px;display:flex;align-items:center;justify-content:center;color:#6692f1}.detail-container{min-width:0;flex:1;max-width:max-content}.bg-icon{opacity:0;background-color:#6692f1;color:#e9effd;border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s ease-in-out}.bg-icon:hover{background-color:#0b49d1;transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.bg-icon svg{width:14px;height:14px}.action-button{transition:outline .1s ease-in-out;outline:2px solid transparent;border-radius:1px}.action-button:focus-visible{outline:2px solid #424242!important}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: CopyComponent, selector: "cai-copy", inputs: ["value", "alignment", "copyTooltip", "copyArea", "icon", "iconSize", "iconColor", "tooltipClass", "tooltipPlacement", "inverse", "hasNoIcon"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
|
|
8578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SelectedBusinessFieldComponent, isStandalone: true, selector: "cai-selected-business-field", inputs: { business: { classPropertyName: "business", publicName: "business", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "@let isDisabled = business().isDisabled; @let email = business().email;\r\n@let phone = business().phone; @let address = business().address;\r\n@let name = business().name; @let isFavorite = business().isFavorite;\r\n@let isRequired = business().isRequired; @let label = business().label;\r\n\r\n<div class=\"container\" [class.disabled]=\"isDisabled\">\r\n <p class=\"label\" [class.required]=\"isRequired\">\r\n {{ label }}\r\n </p>\r\n <div class=\"title-row\">\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <p class=\"title\">{{ name }}</p>\r\n\r\n @if (isFavorite) {\r\n <svg-icon [name]=\"'cai-favorite'\" class=\"icon\"></svg-icon>\r\n }\r\n </div>\r\n\r\n @if (!isDisabled) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <button\r\n (click)=\"handleAction(eGeneralActions.EDIT)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Edit\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-edit'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n <button\r\n (click)=\"handleAction(eGeneralActions.CLEAR)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Cancel\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-cancel'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (phone || email || address) {\r\n <div class=\"details-row\">\r\n @let isDisabledColor = isDisabled ? null : \"blue\";\r\n @if (phone) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"phone\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-phone'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ phone }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (email) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"email\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-email'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ email }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (address) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"address\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-address'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ address }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:-16px;left:6px}.label.required:after{content:\"* \";color:#df3c3c}.container{position:relative;width:100%;padding:4px 4px 6px 6px;margin:0;border-radius:2px;background-color:#e9effd;transition:background-color .2s ease-in-out}.container:hover:not(.disabled){background-color:#bed0f9}.container:hover:not(.disabled) .bg-icon{opacity:1;color:#bed0f9}.container:has(.action-button:focus-visible) .bg-icon{opacity:1!important}.container.disabled{background-color:#f7f7f7}.container.disabled .icon{color:#919191}.container .title-row{display:flex;align-items:center;justify-content:space-between}.container .details-row{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin-top:6px}.title{color:#424242;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:700;line-height:18px;text-transform:uppercase;-webkit-user-select:none;user-select:none}.detail{color:#2f2f2f;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:400;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.icon{height:14px;width:14px;display:flex;align-items:center;justify-content:center;color:#6692f1}.detail-container{min-width:0;flex:1;max-width:max-content}.bg-icon{opacity:0;background-color:#6692f1;color:#e9effd;border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s ease-in-out}.bg-icon:hover{background-color:#0b49d1;transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.bg-icon svg{width:14px;height:14px}.action-button{transition:outline .1s ease-in-out;outline:2px solid transparent;border-radius:1px}.action-button:focus-visible{outline:2px solid #424242!important}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: CopyComponent, selector: "cai-copy", inputs: ["value", "alignment", "copyTooltip", "copyArea", "icon", "iconSize", "iconColor", "tooltipClass", "tooltipPlacement", "inverse", "hasNoIcon"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
|
|
8588
8579
|
}
|
|
8589
8580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SelectedBusinessFieldComponent, decorators: [{
|
|
8590
8581
|
type: Component,
|
|
8591
|
-
args: [{ selector: 'cai-selected-business-field', imports: [NgbTooltip, CopyComponent, SvgIconComponent], template: "@let isDisabled = business().isDisabled; @let email = business().email;\r\n@let phone = business().phone; @let address = business().address;\r\n@let name = business().name; @let isFavorite = business().isFavorite;\r\n@let isRequired = business().isRequired; @let label = business().label;\r\n\r\n<div class=\"container\" [class.disabled]=\"isDisabled\">\r\n <p class=\"label\" [class.required]=\"isRequired\">\r\n {{ label }}\r\n </p>\r\n <div class=\"title-row\">\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <p class=\"title\">{{ name }}</p>\r\n\r\n @if (isFavorite) {\r\n <svg-icon [name]=\"'cai-favorite'\" class=\"icon\"></svg-icon>\r\n }\r\n </div>\r\n\r\n @if (!isDisabled) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <button\r\n (click)=\"handleAction(eGeneralActions.EDIT)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Edit\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-edit'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n <button\r\n (click)=\"handleAction(eGeneralActions.CLEAR)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Cancel\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-cancel'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (phone || email || address) {\r\n <div class=\"details-row\">\r\n @let isDisabledColor = isDisabled ? null : \"blue\";\r\n @if (phone) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"phone\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-phone'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ phone }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (email) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"email\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-email'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ email }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (address) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"address\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-address'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ address }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:-16px;left:6px}.label.required:after{content:\"* \";color:#df3c3c}.container{position:relative;width:100%;padding:4px 4px 6px 6px;margin:0;border-radius:2px;background-color:#e9effd;transition:background-color .2s ease-in-out}.container:hover:not(.disabled){background-color:#bed0f9}.container:hover:not(.disabled) .bg-icon{opacity:1;color:#bed0f9}.container:has(.action-button:focus-visible) .bg-icon{opacity:1!important}.container.disabled{background-color:#f7f7f7}.container.disabled .icon{color:#919191}.container .title-row{display:flex;align-items:center;justify-content:space-between}.container .details-row{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin-top:6px}.title{color:#424242;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:700;line-height:18px;text-transform:uppercase}.detail{color:#2f2f2f;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:400;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.icon{height:14px;width:14px;display:flex;align-items:center;justify-content:center;color:#6692f1}.detail-container{min-width:0;flex:1;max-width:max-content}.bg-icon{opacity:0;background-color:#6692f1;color:#e9effd;border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s ease-in-out}.bg-icon:hover{background-color:#0b49d1;transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.bg-icon svg{width:14px;height:14px}.action-button{transition:outline .1s ease-in-out;outline:2px solid transparent;border-radius:1px}.action-button:focus-visible{outline:2px solid #424242!important}\n"] }]
|
|
8582
|
+
args: [{ selector: 'cai-selected-business-field', imports: [NgbTooltip, CopyComponent, SvgIconComponent], template: "@let isDisabled = business().isDisabled; @let email = business().email;\r\n@let phone = business().phone; @let address = business().address;\r\n@let name = business().name; @let isFavorite = business().isFavorite;\r\n@let isRequired = business().isRequired; @let label = business().label;\r\n\r\n<div class=\"container\" [class.disabled]=\"isDisabled\">\r\n <p class=\"label\" [class.required]=\"isRequired\">\r\n {{ label }}\r\n </p>\r\n <div class=\"title-row\">\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <p class=\"title\">{{ name }}</p>\r\n\r\n @if (isFavorite) {\r\n <svg-icon [name]=\"'cai-favorite'\" class=\"icon\"></svg-icon>\r\n }\r\n </div>\r\n\r\n @if (!isDisabled) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <button\r\n (click)=\"handleAction(eGeneralActions.EDIT)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Edit\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-edit'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n <button\r\n (click)=\"handleAction(eGeneralActions.CLEAR)\"\r\n [disabled]=\"isDisabled\"\r\n ngbTooltip=\"Cancel\"\r\n [openDelay]=\"600\"\r\n tooltipClass=\"tooltip input-tooltip\"\r\n [placement]=\"'top'\"\r\n [container]=\"'body'\"\r\n [autoClose]=\"true\"\r\n [class]=\"'action-button'\"\r\n >\r\n <svg-icon [name]=\"'cai-cancel'\" class=\"bg-icon\"></svg-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (phone || email || address) {\r\n <div class=\"details-row\">\r\n @let isDisabledColor = isDisabled ? null : \"blue\";\r\n @if (phone) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"phone\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-phone'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ phone }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (email) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"email\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-email'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ email }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n @if (address) {\r\n <div class=\"detail-container\">\r\n <cai-copy\r\n [alignment]=\"eAlignment.LEFT\"\r\n [value]=\"address\"\r\n [copyArea]=\"'full'\"\r\n [icon]=\"'cai-address'\"\r\n [iconSize]=\"14\"\r\n [iconColor]=\"isDisabledColor\"\r\n [tooltipClass]=\"'tooltip-m-t-4'\"\r\n >\r\n <p class=\"detail\">{{ address }}</p>\r\n </cai-copy>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.label{color:#424242;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:600;position:absolute;top:-16px;left:6px}.label.required:after{content:\"* \";color:#df3c3c}.container{position:relative;width:100%;padding:4px 4px 6px 6px;margin:0;border-radius:2px;background-color:#e9effd;transition:background-color .2s ease-in-out}.container:hover:not(.disabled){background-color:#bed0f9}.container:hover:not(.disabled) .bg-icon{opacity:1;color:#bed0f9}.container:has(.action-button:focus-visible) .bg-icon{opacity:1!important}.container.disabled{background-color:#f7f7f7}.container.disabled .icon{color:#919191}.container .title-row{display:flex;align-items:center;justify-content:space-between}.container .details-row{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin-top:6px}.title{color:#424242;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:700;line-height:18px;text-transform:uppercase;-webkit-user-select:none;user-select:none}.detail{color:#2f2f2f;font-family:Montserrat;font-size:11px;font-style:normal;font-weight:400;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.icon{height:14px;width:14px;display:flex;align-items:center;justify-content:center;color:#6692f1}.detail-container{min-width:0;flex:1;max-width:max-content}.bg-icon{opacity:0;background-color:#6692f1;color:#e9effd;border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.bg-icon svg{transition:transform .1s ease-in-out}.bg-icon:hover{background-color:#0b49d1;transform:scale(1.2222222222)}.bg-icon:hover svg{transform:scale(.8181818182)}.bg-icon:active{transform:scale(1)}.bg-icon svg{width:14px;height:14px}.action-button{transition:outline .1s ease-in-out;outline:2px solid transparent;border-radius:1px}.action-button:focus-visible{outline:2px solid #424242!important}\n"] }]
|
|
8592
8583
|
}], propDecorators: { business: [{ type: i0.Input, args: [{ isSignal: true, alias: "business", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
|
|
8593
8584
|
|
|
8594
8585
|
var ReviewType;
|
|
@@ -10210,11 +10201,11 @@ class StickyScrollbarComponent {
|
|
|
10210
10201
|
this.updateScrollState(this.calculateScrollState());
|
|
10211
10202
|
}
|
|
10212
10203
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: StickyScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10213
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { hideThumb: "hideThumb", hideTrack: "hideTrack", alwaysVisible: "alwaysVisible", stickyOffset: "stickyOffset" }, outputs: { scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }], ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\r\n <div\r\n #scrollContainer\r\n class=\"sticky-scrollbar-container\"\r\n cdkScrollable\r\n tabindex=\"-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (alwaysVisible && !isContainerInView()) {\r\n <div class=\"sticky-scrollbar-placeholder\"></div>\r\n }\r\n <div\r\n class=\"sticky-scrollbar-track\"\r\n [class.hidden]=\"hideTrack\"\r\n [class.always-visible]=\"alwaysVisible\"\r\n [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\r\n [style.bottom.px]=\"stickyOffset\"\r\n >\r\n <div\r\n #scrollThumb\r\n class=\"sticky-scrollbar-thumb\"\r\n [class.dragging]=\"isDragging\"\r\n [class.hidden-thumb]=\"hideThumb\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (mouseup)=\"onThumbMouseUp()\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#424242b2}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#424242b2;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10204
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { hideThumb: "hideThumb", hideTrack: "hideTrack", alwaysVisible: "alwaysVisible", stickyOffset: "stickyOffset" }, outputs: { scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }], ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\r\n <div\r\n #scrollContainer\r\n class=\"sticky-scrollbar-container\"\r\n cdkScrollable\r\n tabindex=\"-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (alwaysVisible && !isContainerInView()) {\r\n <div class=\"sticky-scrollbar-placeholder\"></div>\r\n }\r\n <div\r\n class=\"sticky-scrollbar-track\"\r\n [class.hidden]=\"hideTrack\"\r\n [class.always-visible]=\"alwaysVisible\"\r\n [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\r\n [style.bottom.px]=\"stickyOffset\"\r\n >\r\n <div\r\n #scrollThumb\r\n class=\"sticky-scrollbar-thumb\"\r\n [class.dragging]=\"isDragging\"\r\n [class.hidden-thumb]=\"hideThumb\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (mouseup)=\"onThumbMouseUp()\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#424242b2}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#424242b2;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10214
10205
|
}
|
|
10215
10206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: StickyScrollbarComponent, decorators: [{
|
|
10216
10207
|
type: Component,
|
|
10217
|
-
args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule, CdkScrollable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sticky-scrollbar-wrapper\">\r\n <div\r\n #scrollContainer\r\n class=\"sticky-scrollbar-container\"\r\n cdkScrollable\r\n tabindex=\"-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (alwaysVisible && !isContainerInView()) {\r\n <div class=\"sticky-scrollbar-placeholder\"></div>\r\n }\r\n <div\r\n class=\"sticky-scrollbar-track\"\r\n [class.hidden]=\"hideTrack\"\r\n [class.always-visible]=\"alwaysVisible\"\r\n [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\r\n [style.bottom.px]=\"stickyOffset\"\r\n >\r\n <div\r\n #scrollThumb\r\n class=\"sticky-scrollbar-thumb\"\r\n [class.dragging]=\"isDragging\"\r\n [class.hidden-thumb]=\"hideThumb\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (mouseup)=\"onThumbMouseUp()\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#424242b2}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#424242b2;height:6px}\n"] }]
|
|
10208
|
+
args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule, CdkScrollable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sticky-scrollbar-wrapper\">\r\n <div\r\n #scrollContainer\r\n class=\"sticky-scrollbar-container\"\r\n cdkScrollable\r\n tabindex=\"-1\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n @if (alwaysVisible && !isContainerInView()) {\r\n <div class=\"sticky-scrollbar-placeholder\"></div>\r\n }\r\n <div\r\n class=\"sticky-scrollbar-track\"\r\n [class.hidden]=\"hideTrack\"\r\n [class.always-visible]=\"alwaysVisible\"\r\n [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\r\n [style.bottom.px]=\"stickyOffset\"\r\n >\r\n <div\r\n #scrollThumb\r\n class=\"sticky-scrollbar-thumb\"\r\n [class.dragging]=\"isDragging\"\r\n [class.hidden-thumb]=\"hideThumb\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (mouseup)=\"onThumbMouseUp()\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column;overscroll-behavior-x:none}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:none;contain:layout style paint;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-container:focus-visible{outline:none!important}.sticky-scrollbar-placeholder{height:14px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;height:14px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-track:hover .sticky-scrollbar-thumb{height:6px;background-color:#424242b2}.sticky-scrollbar-thumb{position:relative;height:2px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,opacity .1s ease-in-out,height .1s ease-in-out;min-width:30px;will-change:transform,width,opacity;transform:translateZ(0);opacity:1}@starting-style{.sticky-scrollbar-thumb{opacity:0}}.sticky-scrollbar-thumb.hidden-thumb{opacity:0}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;inset:-6px -4px;pointer-events:auto}.sticky-scrollbar-thumb:hover,.sticky-scrollbar-thumb.dragging{background-color:#424242b2;height:6px}\n"] }]
|
|
10218
10209
|
}], propDecorators: { scrollContainer: [{
|
|
10219
10210
|
type: ViewChild,
|
|
10220
10211
|
args: ['scrollContainer', { static: false }]
|