ca-components 2.1.152 → 2.1.161

package/lib/components/ca-pickup-delivery-block/components/ca-load/components/ca-load-list/ca-load-list.component.scss

@@ -1,135 +0,0 @@
-@import 'scss/font-family.scss';
-@import 'theme/variables.scss';
-
-.wrapper-container {
-    max-height: 308px;
-    overflow-y: auto;
-    font-family: $font-family;
-
-    &.inside {
-        margin-top: 4px;
-    }
-
-    &::-webkit-scrollbar {
-        width: 2px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: $muted;
-        border-radius: 1px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $ta-black-2;
-    }
-}
-
-.wrapper {
-    border-radius: 3px;
-    transition: background-color 0.3s ease;
-    padding: 2px 0px 2px 0px;
-    margin-right: 2px;
-    gap: 2px;
-
-    &:hover,
-    &.active {
-        background-color: $black;
-        cursor: pointer;
-    }
-}
-
-.stops {
-    padding: 0px 2px;
-    gap: 4px;
-    font-size: 14px;
-
-    .stops-side {
-        min-width: 0;
-        height: 26px;
-
-        &.right {
-            justify-content: end;
-        }
-
-        .date-location {
-            width: 100%;
-            min-width: 0;
-
-            &.left {
-                margin-left: 4px;
-            }
-
-            &.right {
-                margin-right: 4px;
-            }
-
-            .location {
-                font-size: 11px;
-                line-height: 14px;
-                color: $white-2;
-
-                width: 90%;
-                min-width: 0;
-            }
-
-            .date {
-                font-size: 11px;
-                line-height: 14px;
-                color: $grey;
-            }
-        }
-
-        &:first-child {
-            color: $ta-green-4;
-
-            .line-left {
-                border-right: solid 2px $ta-green-5;
-                width: 22px;
-                height: 18px;
-            }
-        }
-
-        &:last-child {
-            color: $ta-red-13;
-
-            .line-right {
-                border-left: solid 2px $ta-orange-8;
-                width: 22px;
-                height: 18px;
-            }
-        }
-    }
-}
-
-.load-num {
-    font-size: 11px;
-    line-height: 14px;
-    text-align: left;
-    padding: 0 2px 0 6px;
-    width: 100%;
-
-    .loadNumber {
-        gap: 4px;
-        padding-right: 4px;
-    }
-
-    .price {
-        margin-right: 4px;
-    }
-}
-
-.dispatch-stops {
-    color: white;
-    text-align: left;
-}
-
-.focused-load-template {
-    max-height: 340px;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-    .no-active-load-message {
-        padding-top: 4px;
-        padding-bottom: 4px;
-    }
-}

package/lib/components/ca-pickup-delivery-block/components/ca-load/components/ca-load-list/ca-load-list.component.spec.ts

@@ -1,24 +0,0 @@
-// Angular testing modules
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-// Application-specific component
-import { LoadListComponent } from '../../../../../ca-pickup-delivery-block/components/ca-load/components/ca-load-list/ca-load-list.component';
-
-describe('ClosedLoadComponent', () => {
-    let component: LoadListComponent;
-    let fixture: ComponentFixture<LoadListComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [LoadListComponent],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(LoadListComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/lib/components/ca-pickup-delivery-block/components/ca-load/components/ca-load-list/ca-load-list.component.ts

@@ -1,130 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-//Models
-import { LoadShortResponse, StatusTypeEnum } from '../../../../models';
-
-//Modules
-import { AngularSvgIconModule } from 'angular-svg-icon';
-
-//Components
-import { ActiveLoadComponent } from '../../../../../ca-pickup-delivery-block/components/ca-load/components/ca-load-single/ca-load-single.component';
-import { CaDropdownMenuComponent } from '../../../../../../components/ca-dropdown-menu/ca-dropdown-menu.component';
-
-//Svg routes
-import { PickupDeliverySvgRoutes } from '../../../../utils/svg-routes';
-
-//Pipes
-import { FormatCurrencyPipe } from '../../../../../../pipes/format-currency.pipe';
-import { DateFromStringPipe } from '../../../../../../pipes/date-from-string.pipe';
-import { ToLowerCasePipe } from '../../../../../../pipes/to-lower-case.pipe';
-import { FormatCityStatePipe } from '../../../../../../pipes/format-city-state.pipe';
-
-// Interfaces
-import {
-    IDropdownMenuOptionEmit,
-    IDropdownMenuItem,
-} from '../../../../../ca-dropdown-menu/interfaces';
-
-// Enums
-import { eDropdownMenu } from '../../../../../ca-dropdown-menu/enums';
-
-// Helpers
-import { DropdownMenuContentHelper } from '../../../../../../utils/helpers';
-
-@Component({
-    selector: 'app-ca-load-list',
-    templateUrl: './ca-load-list.component.html',
-    styleUrls: ['./ca-load-list.component.scss'],
-    providers: [FormatCurrencyPipe, ToLowerCasePipe],
-    imports: [
-        // modules
-        CommonModule,
-        AngularSvgIconModule,
-
-        // components
-        ActiveLoadComponent,
-        CaDropdownMenuComponent,
-
-        // pipes
-        DateFromStringPipe,
-        FormatCurrencyPipe,
-        ToLowerCasePipe,
-        FormatCityStatePipe,
-    ],
-})
-export class LoadListComponent {
-    @Input() loads!: Array<LoadShortResponse>;
-    @Input() focusedTab!: StatusTypeEnum;
-    @Input() isFocusingLoad: boolean = false;
-    @Input() isAllDispatchBoardsSelected: boolean = true;
-
-    @Output() focusLoadEmitter = new EventEmitter<boolean>();
-
-    @Output() dropdownMenuAction: EventEmitter<IDropdownMenuOptionEmit> =
-        new EventEmitter<IDropdownMenuOptionEmit>();
-
-    public focusedLoad!: Array<LoadShortResponse>;
-
-    // dropdown
-    public dropdownOptions: IDropdownMenuItem[] = [];
-
-    public selectedLoadDropdownId: number = 0;
-
-    constructor(public formatCurrencyPipe: FormatCurrencyPipe) {}
-
-    private setDropdownOptions(id: number): void {
-        this.selectedLoadDropdownId = id;
-
-        this.dropdownOptions =
-            DropdownMenuContentHelper.getPickupDeliveryDropdownContent(
-                this.focusedTab,
-                this.isAllDispatchBoardsSelected
-            );
-    }
-
-    public focusLoad(load: LoadShortResponse): void {
-        this.isFocusingLoad = !this.isFocusingLoad;
-
-        this.focusLoadEmitter.emit(this.isFocusingLoad);
-
-        this.focusedLoad = [{ ...load }];
-
-        this.selectedLoadDropdownId = 0;
-    }
-
-    public getSvgPath(
-        propertyName: keyof typeof PickupDeliverySvgRoutes
-    ): string {
-        return PickupDeliverySvgRoutes[propertyName] as string;
-    }
-
-    public onDropdownMenuAction(
-        action: IDropdownMenuOptionEmit,
-        id: number
-    ): void {
-        const eventAction = { id, ...action };
-
-        this.dropdownMenuAction.emit(eventAction);
-    }
-
-    public onToggleDropdownMenuActions(
-        action: IDropdownMenuOptionEmit,
-        id: number
-    ): void {
-        const { type } = action;
-
-        switch (type) {
-            case eDropdownMenu.CLOSE:
-                break;
-            case eDropdownMenu.OPEN:
-                this.setDropdownOptions(id!);
-
-                break;
-            default:
-                this.onDropdownMenuAction(action, id);
-
-                break;
-        }
-    }
-}

package/lib/components/ca-pickup-delivery-block/components/ca-load/components/ca-load-single/ca-load-single.component.html

@@ -1,372 +0,0 @@
-@if (activeLoad && activeLoad.length) {
-    <div
-        class="load-details d-flex"
-        (mouseenter)="onLoadDetailsHover()"
-        (mouseleave)="onLoadDetailsHover()"
-    >
-        <ng-container
-            *ngTemplateOutlet="
-                loadDetailsTemplate;
-                context: { load: activeLoad[0] }
-            "
-        ></ng-container>
-
-        <div class="button-container">
-            <ca-dropdown-menu
-                [type]="'dots-menu-type'"
-                [placement]="'end-top'"
-                [popoverClass]="'ca-pickup-delivery-dropdown-popover'"
-                [isDarkBackground]="true"
-                [isLeftSideIconPosition]="true"
-                [options]="dropdownOptions"
-                (dropdownOptionEmitter)="
-                    onToggleDropdownMenuActions($event, activeLoad[0]?.id!)
-                "
-            >
-            </ca-dropdown-menu>
-        </div>
-    </div>
-
-    <div class="stops d-flex justify-content-between w-100">
-        <ng-container
-            *ngTemplateOutlet="stopsTemplate; context: { load: activeLoad[0] }"
-        ></ng-container>
-    </div>
-
-    <div class="dispatch-stops">
-        @let isComboLoad = activeLoad[0].type?.name === 'Combo';
-
-        @if (isComboLoad) {
-            @let comboChildLoads = activeLoad[0].childLoads!;
-
-            @for (
-                comboChildLoad of comboChildLoads;
-                let first = $first;
-                track comboChildLoad.id
-            ) {
-                @let isBrokerCardOpen =
-                    openBrokerCardIds.has(comboChildLoad.id);
-
-                @let brokerCardClass =
-                    {
-                        'p-t-2': first,
-                        'border-top p-t-6': !first,
-                        active: isBrokerCardOpen,
-                    };
-
-                @let loadNumber = comboChildLoad.loadNumber!;
-                @let brokerName = comboChildLoad.broker?.businessName!;
-
-                <div
-                    class="d-flex flex-column p-b-6 p-r-4 p-l-2 c-pointer broker-card"
-                    [ngClass]="brokerCardClass"
-                    (click)="onToggleBrokerCard(comboChildLoad.id)"
-                >
-                    <div
-                        class="d-flex align-items-center justify-content-between"
-                    >
-                        <div class="d-flex align-items-center">
-                            <p class="ca-font-bold text-size-11 load-number">
-                                {{ loadNumber }}
-                            </p>
-
-                            @if (comboChildLoad.referenceNumber) {
-                                <span
-                                    class="m-l-4 text-size-11 ref-number"
-                                >
-                                    ({{ comboChildLoad.referenceNumber }})</span
-                                >
-                            }
-                        </div>
-
-                        <div class="d-flex align-items-center max-w-159">
-                            @if (!isBrokerCardOpen) {
-                                <p
-                                    class="text-size-11 text-color-muted text-truncate m-r-4"
-                                >
-                                    {{ brokerName }}
-                                </p>
-                            }
-
-                            <svg-icon
-                                class="svg-size-14 card-arrow"
-                                [class.arrow-rotated]="isBrokerCardOpen"
-                                [src]="getSvgPath('arrowDown')"
-                            ></svg-icon>
-                        </div>
-                    </div>
-
-                    <div
-                        class="d-flex align-items-center broker-card-dropdown-content"
-                    >
-                        <ng-container
-                            *ngTemplateOutlet="
-                                brokerItemTemplate;
-                                context: { load: comboChildLoad }
-                            "
-                        ></ng-container>
-                    </div>
-                </div>
-            }
-        } @else {
-            <span class="bussiness-name ca-font-bold"> BROKER </span>
-
-            <ng-container
-                *ngTemplateOutlet="
-                    brokerItemTemplate;
-                    context: { load: activeLoad[0] }
-                "
-            ></ng-container>
-        }
-    </div>
-
-    @if (activeLoad[0]?.driverMessage) {
-        <div class="driverMessage">
-            <h3 class="ca-font-bold">DRIVER MESSAGE</h3>
-            <span
-                class="message ca-font-regular text-start"
-                [innerHTML]="activeLoad[0].driverMessage"
-            ></span>
-        </div>
-    }
-} @else {
-    <div class="no-active-load-message">
-        <h2>No active load</h2>
-    </div>
-}
-
-<ng-template #loadDetailsTemplate let-load="load">
-    @let isSplitLoad = load.type?.name === 'Split';
-    @let isComboLoad = load.type?.name === 'Combo';
-
-    <div class="details-container d-flex flex-column justify-content-between">
-        <div class="top-details d-flex justify-content-between">
-            <div class="d-flex align-items-center">
-                <span class="price ca-font-bold m-r-4">
-                    {{ load.loadNumber }}
-                </span>
-
-                @if (isSplitLoad) {
-                    <svg-icon
-                        class="svg-size-14"
-                        [src]="getSvgPath('splitLoad')"
-                    ></svg-icon>
-                }
-
-                @if (isComboLoad) {
-                    <svg-icon
-                        class="svg-size-14 position-relative bottom-1"
-                        [src]="getSvgPath('comboLoad')"
-                    ></svg-icon>
-                }
-            </div>
-
-            <span class="load ca-font-medium">{{
-                load.totalRate! | formatCurrency
-            }}</span>
-        </div>
-
-        <div class="bottom-details d-flex justify-content-between h-14">
-            <div class="d-flex align-items-center">
-                @if (isLoadDetailsHovered) {
-                    <svg-icon
-                        class="svg-size-14 m-r-4"
-                        [src]="getSvgPath('miles')"
-                    ></svg-icon>
-
-                    <p class="text-color-white">
-                        {{ load.totalMiles }}
-
-                        mi
-                    </p>
-                } @else {
-                    <span class="ref-text ca-font-bold m-r-4">Ref.</span>
-
-                    <p class="miles-ref">
-                        {{ load.referenceNumber }}
-                    </p>
-                }
-            </div>
-
-            <div class="d-flex align-items-center">
-                @let isClosedLoad = load.statusType?.name === 'Closed';
-
-                @if (!isClosedLoad) {
-                    @let hasAdjustedRate = !!load.totalAdjustedRate;
-
-                    @if (isLoadDetailsHovered) {
-                        <p class="ref-text ca-font-bold m-r-4">RPM</p>
-
-                        <span class="ca-font-semi-bold text-color-white">
-                            {{ load.rpm | formatCurrency }}
-                        </span>
-                    } @else {
-                        <p class="ref-text ca-font-bold m-r-4">
-                            {{ hasAdjustedRate ? 'Adj.' : 'RPM' }}
-                        </p>
-
-                        <span
-                            class="ca-font-semi-bold"
-                            [class]="
-                                hasAdjustedRate
-                                    ? 'text-color-purple-2'
-                                    : 'text-color-white'
-                            "
-                        >
-                            {{
-                                (hasAdjustedRate
-                                    ? load.totalAdjustedRate
-                                    : load.rpm
-                                ) | formatCurrency
-                            }}
-                        </span>
-                    }
-                }
-            </div>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #stopsTemplate let-load="load">
-    @let isSplitLoad = load.type?.name === 'Split';
-
-    @let pickupStopNumber = isSplitLoad ? 'S' : load.pickup?.stopOrder;
-
-    <div class="stops-side d-flex align-items-center flex-basis-50">
-        <span
-            class="line-left d-flex justify-content-center align-items-center ca-font-bold"
-            [class]="isSplitLoad ? 'text-color-yellow-4' : 'text-color-green-4'"
-            [class.split-load]="isSplitLoad"
-        >
-            {{ pickupStopNumber }}
-        </span>
-
-        <div class="date-location left d-flex flex-column align-items-start">
-            <span
-                class="location ca-font-semi-bold text-start text-truncate d-block"
-            >
-                {{
-                    load.pickup?.shipper?.address?.city
-                        | formatCityStatePipe
-                            : load.pickup?.shipper?.address?.stateShortName
-                }}
-            </span>
-
-            <span class="date ca-font-regular">
-                {{ load.pickup?.dateFrom | dateFromStringPipe }},
-                {{ load.pickup?.dateFrom | dateFromStringPipe: 'time' }}
-            </span>
-        </div>
-    </div>
-
-    <span class="arrow d-flex justify-content-center align-items-center">
-        <svg-icon
-            class="svg-size-10"
-            [src]="getSvgPath('arrowRight')"
-        ></svg-icon>
-    </span>
-
-    <div class="stops-side right d-flex align-items-center flex-basis-50">
-        <div class="date-location right d-flex flex-column align-items-end">
-            <span
-                class="location ca-font-semi-bold text-end text-truncate d-block"
-            >
-                {{
-                    load.delivery?.shipper?.address?.city
-                        | formatCityStatePipe
-                            : load.delivery?.shipper?.address?.stateShortName
-                }}
-            </span>
-            <span class="date ca-font-regular">
-                {{ load.delivery?.dateFrom | dateFromStringPipe }},
-                {{ load.delivery?.dateFrom | dateFromStringPipe: 'time' }}
-            </span>
-        </div>
-        <span
-            class="line-right d-flex justify-content-center align-items-center ca-font-bold"
-        >
-            {{ load.delivery?.stopOrder }}
-        </span>
-    </div>
-</ng-template>
-
-<ng-template #brokerItemTemplate let-load="load">
-    <div class="broker ca-font-regular">
-        @let isFraudCheck = load?.broker?.fraudCheck;
-
-        <div class="d-flex align-items-center">
-            @if (isFraudCheck) {
-                <div
-                    ngbTooltip
-                    [mainCaTooltip]="'Fraud check'"
-                    [tooltipBackground]="eColor.LIGHT_GREY"
-                    [tooltipColor]="eColor.DARK_GREY"
-                    [position]="ePosition.BOTTOM"
-                >
-                    <svg-icon
-                        class="svg-size-14 m-r-4 svg-hover-yellow-4"
-                        [src]="getSvgPath('fraudCheck')"
-                    ></svg-icon>
-                </div>
-            }
-
-            <p class="text-truncate">
-                {{ load.broker?.businessName }}
-            </p>
-        </div>
-
-        <div
-            class="d-flex align-items-center justify-content-between m-t-8"
-        >
-            @let hasBrokerContact = !!load.broker?.contactName;
-
-            <p
-                class="text-color-muted text-truncate"
-                [class.text-decoration-line-through]="!hasBrokerContact"
-            >
-                <svg-icon
-                    class="svg-size-14 position-relative bottom-1"
-                    [src]="getSvgPath('userIcon')"
-                ></svg-icon>
-
-                {{ load.broker?.contactName ?? 'No Contact' }}
-            </p>
-
-            <div class="d-flex align-items-center">
-                <cai-copy
-                    [value]="load.broker?.phone!"
-                    [copyArea]="'full'"
-                    [hasNoIcon]="true"
-                    [inverse]="true"
-                    [tooltipPlacement]="'top'"
-                >
-                    <div
-                        class="d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9 m-r-4"
-                    >
-                        <svg-icon
-                            class="svg-size-14 position-relative bottom-1"
-                            [src]="getSvgPath('phoneIcon')"
-                        ></svg-icon>
-                    </div>
-                </cai-copy>
-
-                <cai-copy
-                    [value]="load.broker?.email!"
-                    [copyArea]="'full'"
-                    [hasNoIcon]="true"
-                    [inverse]="true"
-                    [tooltipPlacement]="'top'"
-                >
-                    <div
-                        class="d-flex align-items-center justify-content-center br-1 c-pointer w-18 h-18 background-hover-dark-3 svg-hover-bw-9"
-                    >
-                        <svg-icon
-                            class="svg-size-14 position-relative bottom-1"
-                            [src]="getSvgPath('mailIcon')"
-                        ></svg-icon>
-                    </div>
-                </cai-copy>
-            </div>
-        </div>
-    </div>
-</ng-template>