ca-components 2.1.142 → 2.1.151

package/lib/components/ca-vehicle-list/utils/constants/vehicle-list.constants.ts

@@ -0,0 +1,40 @@
+// models
+import { VehicleListResponse } from '../../models';
+
+export class VehicleListConstants {
+    static VEHICLE_LIST_HEADER_ITEMS: string[] = ['UNIT', 'TYPE', '', 'COST'];
+
+    // story list example
+    static STORY_LIST_EXAMPLE: VehicleListResponse[] = [
+        {
+            unitId: 300,
+            unitType: 'Truck',
+            unitNumber: 'Truck 1',
+            totalCount: 2,
+            vehicleTypeId: 1,
+            vehicleName: 'Semi Truck',
+            logoName: 'ic_truck_semi-truck.svg',
+            totalCost: 9413,
+        },
+        {
+            unitId: 265,
+            unitType: 'Truck',
+            unitNumber: 'Truck 2',
+            totalCount: 1,
+            vehicleTypeId: 6,
+            vehicleName: 'Dump Truck',
+            logoName: 'ic_truck_dump.svg',
+            totalCost: 7959,
+        },
+        {
+            unitId: 254,
+            unitType: 'Truck',
+            unitNumber: 'Truck 3',
+            totalCount: 1,
+            vehicleTypeId: 11,
+            vehicleName: 'Spotter',
+            logoName: 'ic_truck_spotter.svg',
+            totalCost: 12052,
+        },
+    ];
+}

package/lib/components/ca-vehicle-list/utils/svg-routes/index.ts

@@ -0,0 +1 @@
+export * from './vehicle-list-svg-routes';

package/lib/components/ca-vehicle-list/utils/svg-routes/vehicle-list-svg-routes.ts

@@ -0,0 +1,8 @@
+export class VehicleListSvgRoutes {
+    static repairedVehicleListSvgRoute: string =
+        'assets/ca-components/svg/common/ic_key-repair.svg';
+    static fuelledVehicleListSvgRoute: string =
+        'assets/ca-components/svg/common/fuel.svg';
+    static trucksRoute: string = 'assets/ca-components/svg/common/trucks/';
+    static trailersRoute: string = 'assets/ca-components/svg/common/trailers/';
+}

package/lib/directives/description-items-text-count.directive.ts

@@ -0,0 +1,242 @@
+import {
+    Directive,
+    Input,
+    ElementRef,
+    Renderer2,
+    AfterViewInit,
+} from '@angular/core';
+
+// interfaces
+import { IItemsDropdownList } from '../components/ca-items-dropdown/interfaces';
+
+@Directive({
+    selector: '[appDescriptionItemsTextCount]',
+    standalone: true,
+})
+export class DescriptionItemsTextCountDirective<T extends IItemsDropdownList>
+    implements AfterViewInit
+{
+    @Input('appDescriptionItemsTextCount')
+    set items(value: T[]) {
+        this._items = value;
+
+        this.createStringArray(this._items);
+
+        this.updateItems();
+    }
+
+    @Input() itemsSpecialStylesIndexArray?: number[] = [];
+    @Input() containerWidth: number = 0;
+    @Input() separator: string = '•';
+
+    private _items: T[] | string[] = [];
+
+    constructor(
+        private element: ElementRef,
+        private renderer: Renderer2
+    ) {}
+
+    ngAfterViewInit(): void {
+        this.updateItems();
+    }
+
+    private createStringArray(value: T[]): void {
+        const isStringArray = value?.every((item) => typeof item === 'string');
+
+        if (!isStringArray && Array.isArray(value)) {
+            const objectArray = value as {
+                code?: string;
+                description?: string;
+                nickname?: string;
+                itemFuel?: {
+                    name?: string;
+                };
+            }[];
+
+            this._items = objectArray.map(
+                (item) =>
+                    item.code ||
+                    item.description ||
+                    item.nickname ||
+                    item.itemFuel?.name ||
+                    ''
+            );
+        }
+    }
+
+    private updateItems(): void {
+        const container = this.element.nativeElement;
+
+        // clear the container and set styles
+        this.renderer.setProperty(container, 'innerHTML', '');
+
+        this.renderer.setStyle(container, 'display', 'flex');
+        this.renderer.setStyle(container, 'overflow', 'hidden');
+        this.renderer.setStyle(container, 'white-space', 'nowrap');
+        this.renderer.setStyle(container, 'align-items', 'center');
+
+        if (!this._items?.length) return;
+
+        // Calculate available width for items
+        const totalItems = this._items.length;
+        let fittedItems: Array<{ element: HTMLElement; width: number }> = [];
+        let currentWidth = 0;
+        let overflowCount = 0;
+
+        // First pass: try to fit all items without reserving overflow space
+        for (let i = 0; i < totalItems; i++) {
+            const item = this._items[i];
+            const isLastItem = i === totalItems - 1;
+
+            // Calculate widths
+            const itemWidth = this.getTextWidth(item);
+            const separatorWidth = isLastItem
+                ? 0
+                : this.getTextWidth(` ${this.separator} `) + 8; // 8px for margin
+
+            // Check if current item fits
+            const totalWidthNeeded = currentWidth + itemWidth + separatorWidth;
+
+            if (totalWidthNeeded <= this.containerWidth) {
+                // Item fits, add it
+                const itemSpan = this.createSpan(item, i);
+                fittedItems.push({ element: itemSpan, width: itemWidth });
+                currentWidth += itemWidth;
+
+                // Add separator if not the last item
+                if (!isLastItem) {
+                    const separatorSpan = this.createSpan(
+                        ` ${this.separator} `
+                    );
+                    this.renderer.setStyle(
+                        separatorSpan,
+                        'margin',
+                        '0 4px 0 4px'
+                    );
+                    this.renderer.setStyle(
+                        separatorSpan,
+                        'user-select',
+                        'none'
+                    );
+                    fittedItems.push({
+                        element: separatorSpan,
+                        width: separatorWidth,
+                    });
+                    currentWidth += separatorWidth;
+                }
+            } else {
+                // Items don't fit, we need to handle overflow
+                const remainingItems = totalItems - i;
+                const estimatedOverflowWidth =
+                    this.getTextWidth(`+${remainingItems}`) + 16; // padding for margin
+
+                // Check if we can fit some items by removing the last separator and making room for overflow
+                if (fittedItems.length > 0 && !isLastItem) {
+                    // Remove last separator if it exists
+                    const lastItem = fittedItems[fittedItems.length - 1];
+                    if (
+                        lastItem.element.textContent?.includes(this.separator)
+                    ) {
+                        fittedItems.pop();
+                        currentWidth -= lastItem.width;
+                    }
+                }
+
+                // Check if we have room for overflow indicator
+                if (
+                    currentWidth + estimatedOverflowWidth <=
+                    this.containerWidth
+                ) {
+                    overflowCount = remainingItems;
+                } else {
+                    // Remove items until we have space for overflow indicator
+                    while (
+                        fittedItems.length > 0 &&
+                        currentWidth + estimatedOverflowWidth >
+                            this.containerWidth
+                    ) {
+                        const removedItem = fittedItems.pop()!;
+                        currentWidth -= removedItem.width;
+                        overflowCount++;
+                    }
+                    // Recalculate overflow count text width in case the number changed
+                    const actualOverflowWidth =
+                        this.getTextWidth(`+${overflowCount}`) + 16;
+                    if (
+                        currentWidth + actualOverflowWidth >
+                            this.containerWidth &&
+                        fittedItems.length > 0
+                    ) {
+                        const removedItem = fittedItems.pop()!;
+                        currentWidth -= removedItem.width;
+                        overflowCount++;
+                    }
+                }
+                break;
+            }
+        }
+
+        // Append fitted items to container
+        fittedItems.forEach((item) => {
+            this.renderer.appendChild(container, item.element);
+        });
+
+        // Add overflow count if necessary
+        if (overflowCount > 0) {
+            const overflowContainer = this.renderer.createElement('div');
+
+            this.renderer.addClass(overflowContainer, 'items-counter-count');
+            this.renderer.setStyle(overflowContainer, 'margin-left', '8px');
+            this.renderer.setStyle(overflowContainer, 'flex-shrink', '0');
+
+            const overflowSpan = this.createSpan(
+                `+${overflowCount}`,
+                null,
+                true
+            );
+
+            this.renderer.setStyle(overflowSpan, 'user-select', 'none');
+
+            this.renderer.appendChild(overflowContainer, overflowSpan);
+            this.renderer.appendChild(container, overflowContainer);
+        }
+    }
+
+    private createSpan(
+        text: T | string,
+        index?: number | null,
+        isOverflowCountSpan?: boolean
+    ): HTMLElement {
+        const span = this.renderer.createElement('span');
+
+        this.renderer.setProperty(span, 'textContent', text);
+
+        this.renderer.addClass(span, 'text-color-black-2');
+        this.renderer.addClass(
+            span,
+            isOverflowCountSpan ? 'text-size-11' : 'text-size-14'
+        );
+        this.renderer.addClass(
+            span,
+            isOverflowCountSpan ? 'ca-font-medium' : 'ca-font-regular'
+        );
+
+        this.renderer.setStyle(span, 'white-space', 'nowrap');
+
+        // apply special style if the index is in itemSpecialStylesIndexArray
+        if (this.itemsSpecialStylesIndexArray?.includes(index as number))
+            this.renderer.addClass(span, 'text-color-blue-18');
+
+        return span;
+    }
+
+    private getTextWidth(text: T | string): number {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d')!;
+        const style = getComputedStyle(this.element.nativeElement);
+
+        context.font = `${style.fontSize} ${style.fontFamily}`;
+
+        return context.measureText(text as string).width;
+    }
+}

package/lib/directives/hover-svg-directives.ts

@@ -0,0 +1,49 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  Renderer2,
+} from "@angular/core";
+
+@Directive({
+  selector: "[appHoverSvg]",
+  standalone: true,
+})
+export class HoverSvgDirective {
+  @Input() set fill(value: string | null | undefined) {
+    if (value) {
+      this._fill = value;
+
+      this.renderer2.setStyle(this.elRef.nativeElement, "fill", this._fill);
+    }
+  }
+
+  @Input() set fillHover(value: string | null | undefined) {
+    if (value) {
+      this._fillHover = value;
+    }
+  }
+
+  public _fill: string = "";
+  public _fillHover: string = "";
+
+  constructor(
+    private elRef: ElementRef,
+    private renderer2: Renderer2
+  ) {}
+
+  @HostListener("mouseover")
+  onMouseOver() {
+    this.renderer2.setStyle(
+      this.elRef.nativeElement,
+      "fill",
+      this._fillHover ? this._fillHover : this._fill
+    );
+  }
+
+  @HostListener("mouseleave")
+  onMouseLeave() {
+    this.renderer2.setStyle(this.elRef.nativeElement, "fill", this._fill);
+  }
+}

package/lib/directives/index.ts

@@ -0,0 +1,3 @@
+export * from './hover-svg-directives';
+export * from './placeholder-directive';
+export * from './description-items-text-count.directive';

package/lib/directives/placeholder-directive.ts

@@ -0,0 +1,51 @@
+import {
+  Directive,
+  ElementRef,
+  Input,
+  Renderer2,
+  HostListener,
+} from "@angular/core";
+
+@Directive({
+  selector: "[Placeholder]",
+  standalone: true,
+})
+export class PlaceholderDirective {
+  @Input() placeholder: string = "";
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit() {
+    this.updatePlaceholder();
+  }
+
+  @HostListener("input") onInput() {
+    this.updatePlaceholder();
+  }
+
+  @HostListener("focus") onFocus() {
+    this.updatePlaceholder(true);
+  }
+
+  @HostListener("keydown", ["$event"]) onKeyDown(event: KeyboardEvent) {
+    this.updatePlaceholder(true);
+  }
+
+  private updatePlaceholder(focus: boolean = false): void {
+    const element = this.el.nativeElement;
+    if (!element.innerText.trim() && !focus) {
+      this.renderer.setProperty(element, "innerText", this.placeholder);
+      this.renderer.setStyle(element, "color", "#DADADA");
+    } else if (element.innerText === this.placeholder && focus) {
+      this.renderer.setProperty(element, "innerText", "");
+      this.renderer.setStyle(element, "color", "#DADADA");
+    } else if (element.innerText === this.placeholder) {
+      this.renderer.setStyle(element, "color", "#DADADA");
+    } else {
+      this.renderer.setStyle(element, "color", "#DADADA");
+    }
+  }
+}

package/lib/enums/animation-state.enum.ts

@@ -0,0 +1,4 @@
+export enum eAnimationState {
+    DEFAULT = 'default',
+    ROTATED = 'rotated',
+}

package/lib/enums/color.enum.ts

@@ -0,0 +1,9 @@
+export enum eColor {
+    BLACK = '#424242',
+    TOTAL_BLACK = '#000000',
+    LIGHT_GREY = '#CCCCCC',
+    DARK_GREY = '#2F2F2F',
+    WHITE = '#FFFFFF',
+    BLUE = '#3B73ED',
+    RED = '#DF3C3C',
+}

package/lib/enums/common-element.enum.ts

@@ -0,0 +1,8 @@
+export enum eCommonElement {
+    LIST = 'List',
+    LIST_LOWERCASE = 'list',
+    CARD = 'Card',
+    CARD_LOWERCASE = 'card',
+    MAP = 'Map',
+    MAP_LOWERCASE = 'map',
+}

package/lib/enums/date-time-formats.enum.ts

@@ -0,0 +1,14 @@
+export enum eDateTimeFormats {
+    SHORT_FORMAT = 'short-format',
+    MONTH_FORMAT = 'month-format',
+    DIFFERENCE_DAYS = 'difference-days',
+    DATE_TIME = 'date-time',
+    TIME = 'time',
+    TIME_AGO = 'time-ago',
+
+    MM_DD_YY = 'MM/dd/YY',
+    HH_MM_A = 'hh:mm A',
+    HH_MM_AA = 'hh:mm aa',
+    MM_DD_YY_HH_MM_A = 'MM/DD/YY, hh:mm A',
+    YYYY_MM_DD_HH_MM_SS = 'YYYY-MM-DD HH:mm:ss',
+}

package/lib/enums/dispatch-status.enum.ts

@@ -0,0 +1,24 @@
+export enum eDispatchStatus {
+    Off = 1,
+    Available,
+    Dispatched,
+    DeadHeading,
+    Canceled,
+    Repair,
+    DispatchedRepair,
+    LoadedRepair,
+    Towing,
+    CheckedIn,
+    Loaded,
+    Empty,
+    Offloaded,
+    Loading,
+    Offloading,
+    Break,
+    ArrivedPickup,
+    ArrivedDelivery,
+    CheckedInPickup,
+    CheckedInDelivery,
+    Split
+}
+

package/lib/enums/dropdown.enum.ts

@@ -0,0 +1,20 @@
+export enum eDropdownMenu {
+    // titles
+    EDIT = 'Edit',
+    VIEW_DETAILS = 'View Details',
+    SHARE = 'Share',
+    PRINT = 'Print',
+    DELETE = 'Delete',
+    UNASSIGN = 'Unassign',
+
+    // types
+    EDIT_TYPE = 'edit',
+    VIEW_DETAILS_TYPE = 'view-details',
+    SHARE_TYPE = 'share',
+    PRINT_TYPE = 'print',
+    DELETE_TYPE = 'delete',
+    UNASSIGN_TYPE = 'unassign',
+
+    // svg classes
+    REGULAR = 'regular',
+}

package/lib/enums/filter-color.enum.ts

@@ -0,0 +1,14 @@
+export enum eFilterColor {
+    YELLOW = '#F89B2E',
+    GREEN = '#50AC25',
+    RED = '#DF3C3C',
+    BLUE = '#3B73ED',
+    PURPLE = '#9E47EC',
+    ORANGE = '#FF7043',
+    BROWN = '#865E3A',
+    DARK_BLUE = '#5755DF',
+    LIGHT_GREEN = '#259F94',
+    PINK = '#DF3D85',
+    GOLD = '#CF961D',
+    DEFAULT = '#F89B2E',
+}

package/lib/enums/general-actions.enum.ts

@@ -0,0 +1,71 @@
+export enum eGeneralActions {
+    ADD = 'Add',
+    ADD_LOWERCASE = 'add',
+    ADD_NEW = 'Add New',
+    UPDATE = 'Update',
+    UPDATE_LOWERCASE = 'update',
+    DELETE = 'Delete',
+    DELETE_LOWERCASE = 'delete',
+    EDIT = 'Edit',
+    EDIT_LOWERCASE = 'edit',
+    EDIT_UPPERCASE = 'EDIT',
+
+    SAVE = 'Save',
+    SAVE_LOWERCASE = 'save',
+    CANCEL = 'Cancel',
+    CANCEL_LOWERCASE = 'cancel',
+    ENTER = 'Enter',
+    ESCAPE = 'Escape',
+    CONFIRM = 'Confirm',
+    CONFIRM_LOWERCASE = 'confirm',
+    SET = 'Set',
+    SET_LOWERCASE = 'set',
+    REMOVE = 'Remove',
+    REMOVE_LOWERCASE = 'remove',
+
+    SELECT = 'Select',
+    SELECT_LOWERCASE = 'select',
+    SEARCH = 'Search',
+    SEARCH_LOWERCASE = 'search',
+
+    SELECT_ALL = 'Select All',
+    SELECT_REMAINING = 'Select Remaining',
+    CLEAR_SELECTED = 'Clear Selected',
+
+    ACTIVATE = 'Activate',
+    ACTIVATE_LOWERCASE = 'activate',
+    DEACTIVATE = 'deactivate',
+    DEACTIVATE_LOWERCASE = 'deactivate',
+
+    CLOSE = 'Close',
+    CLOSE_LOWERCASE = 'close',
+    CLOSE_UPPERCASE = 'CLOSE',
+    OPEN = 'Open',
+    OPEN_LOWERCASE = 'open',
+
+    NEXT = 'Next',
+    NEXT_LOWERCASE = 'next',
+    PREVIOUS = 'Previous',
+    PREVIOUS_LOWERCASE = 'previous',
+
+    CLEAR = 'Clear',
+    CLEAR_LOWERCASE = 'clear',
+    CLEAR_ALL = 'Clear All',
+
+    SHOW_MORE = 'show more',
+
+    OPEN_MODAL = 'open-modal',
+
+    EXPAND = 'Expand',
+    EXPAND_LOWERCASE = 'expand',
+    EXPAND_UPPERCASE = 'EXPAND',
+
+    COLLAPSE = 'Collapse',
+    COLLAPSE_LOWERCASE = 'collapse',
+    COLLAPSE_UPPERCASE = 'COLLAPSE',
+
+    SORT_BY = 'Sort By',
+
+    COPY = 'Copy',
+    COPIED = 'Copied',
+}

package/lib/enums/gps-heading-direction.enum.ts

@@ -0,0 +1,10 @@
+export enum eGpsHeadingDirection {
+    N = 'North',
+    NE = 'Northeast',
+    E = 'East',
+    SE = 'Southeast',
+    S = 'South',
+    SW = 'Southwest',
+    W = 'West',
+    NW = 'Northwest',
+}

package/lib/enums/gps-motion-status.enum.ts

@@ -0,0 +1,7 @@
+export enum eGpsMotionStatus {
+    MOVING = 1,
+    SHORT_STOP,
+    EXTENDED_STOP,
+    PARKING,
+    NO_GPS_DEVICE,
+}

package/lib/enums/index.ts

@@ -0,0 +1,22 @@
+export * from './position.enum';
+export * from './dropdown.enum';
+export * from './filter-color.enum';
+export * from './load-status.enum';
+export * from './trailer-name.enum';
+export * from './truck-name.enum';
+export * from './style-property.enum';
+export * from './string-placeholder.enum';
+export * from './load-filter.enum';
+export * from './position.enum';
+export * from './general-actions.enum';
+export * from './unit.enum';
+export * from './color.enum';
+export * from './styling.enum';
+export * from './common-element.enum';
+export * from './shared-string.enum';
+export * from './animation-state.enum';
+export * from './date-time-formats.enum';
+export * from './thousand-separator-format.enum';
+export * from './gps-motion-status.enum';
+export * from './gps-heading-direction.enum';
+export * from './dispatch-status.enum';

package/lib/enums/load-filter.enum.ts

@@ -0,0 +1,25 @@
+export enum eLoadFilter {
+    // Actions
+    SET = 'Set',
+    CLEAR = 'Clear',
+
+    // Filter Types
+    TIME_FILTER = 'timeFilter',
+    STATUS_FILTER = 'statusFilter',
+    USER_FILTER = 'userFilter',
+    MONEY_FILTER = 'moneyFilter',
+    LOAD_TYPE_FILTER = 'loadTypeFilter',
+
+    // Load Tabs
+    PENDING = 'pending',
+    ACTIVE = 'active',
+    CLOSED = 'closed',
+
+    // Load Types
+    FTL = 'ftl',
+    LTL = 'ltl',
+    ALL = 'all',
+
+    // Other
+    DISPATCH_DATA_UPDATE = 'dispatch-data-update',
+}