ca-components 2.1.142 → 2.1.151

package/lib/utils/constants/gps-location.constants.ts

@@ -0,0 +1,108 @@
+import { eGpsHeadingDirection, eGpsMotionStatus } from '../../enums';
+
+export class GpsLocationConstants {
+    static GPS_DEVICE_COLORS: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: '#6692F1',
+        [eGpsMotionStatus.SHORT_STOP]: '#FAB15C',
+        [eGpsMotionStatus.EXTENDED_STOP]: '#E66767',
+        [eGpsMotionStatus.PARKING]: '#919191',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: '#91919133',
+    };
+
+    static GPS_DEVICE_HOVER_COLORS: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: '#3B73ED',
+        [eGpsMotionStatus.SHORT_STOP]: '#F89B2E',
+        [eGpsMotionStatus.EXTENDED_STOP]: '#DF3C3C',
+        [eGpsMotionStatus.PARKING]: '#6C6C6C',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: '#91919133',
+    };
+
+    static GPS_SVG_CLASSES: Record<
+        eGpsMotionStatus,
+        { fill: string; hover: string }
+    > = {
+        [eGpsMotionStatus.MOVING]: { fill: 'blue-8', hover: 'blue-14' },
+        [eGpsMotionStatus.SHORT_STOP]: { fill: 'yellow-1', hover: 'yellow-5' },
+        [eGpsMotionStatus.EXTENDED_STOP]: { fill: 'red-10', hover: 'red-11' },
+        [eGpsMotionStatus.PARKING]: { fill: 'muted', hover: 'bw6-2' },
+        [eGpsMotionStatus.NO_GPS_DEVICE]: { fill: 'dark-2', hover: 'dark-2' },
+    };
+
+    static GPS_SVG_FILL_COLORS: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: '#6692F1',
+        [eGpsMotionStatus.SHORT_STOP]: '#FAB15C',
+        [eGpsMotionStatus.EXTENDED_STOP]: '#E66767',
+        [eGpsMotionStatus.PARKING]: '#AAAAAA',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: '#6C6C6C',
+    };
+
+    static GPS_TITLES: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: 'MOVING',
+        [eGpsMotionStatus.SHORT_STOP]: 'SHORT STOP',
+        [eGpsMotionStatus.EXTENDED_STOP]: 'EXTENDED STOP',
+        [eGpsMotionStatus.PARKING]: 'PARKING',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: 'NO GPS DEVICE',
+    };
+
+    static GPS_TITLE_COLOR_CLASSES: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: 'text-color-blue-14',
+        [eGpsMotionStatus.SHORT_STOP]: 'text-color-yellow-4',
+        [eGpsMotionStatus.EXTENDED_STOP]: 'text-color-red-11',
+        [eGpsMotionStatus.PARKING]: 'text-color-muted',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: 'text-color-light-grey-2',
+    };
+
+    static GPS_TITLE_DROPDOWN_COLOR_CLASSES: Record<eGpsMotionStatus, string> =
+        {
+            [eGpsMotionStatus.MOVING]: 'text-color-blue-19',
+            [eGpsMotionStatus.SHORT_STOP]: 'text-color-yellow-5',
+            [eGpsMotionStatus.EXTENDED_STOP]: 'text-color-red-13',
+            [eGpsMotionStatus.PARKING]: 'text-color-muted',
+            [eGpsMotionStatus.NO_GPS_DEVICE]: 'text-color-light-grey-2',
+        };
+
+    static GPS_HEADING_ROTATION_ANGLE: Record<eGpsHeadingDirection, number> = {
+        [eGpsHeadingDirection.N]: 0,
+        [eGpsHeadingDirection.NE]: 45,
+        [eGpsHeadingDirection.E]: 90,
+        [eGpsHeadingDirection.SE]: 135,
+        [eGpsHeadingDirection.S]: 180,
+        [eGpsHeadingDirection.SW]: 225,
+        [eGpsHeadingDirection.W]: 270,
+        [eGpsHeadingDirection.NW]: 315,
+    };
+
+    static GPS_MOTION_TEXT: Record<
+        eGpsMotionStatus,
+        { text: string; textColorClass: string }
+    > = {
+        [eGpsMotionStatus.MOVING]: {
+            text: 'Driving',
+            textColorClass: 'text-color-blue-14',
+        },
+        [eGpsMotionStatus.SHORT_STOP]: {
+            text: 'Short Stop',
+            textColorClass: 'text-color-yellow-5',
+        },
+        [eGpsMotionStatus.EXTENDED_STOP]: {
+            text: 'Extended Stop',
+            textColorClass: 'text-color-red-11',
+        },
+        [eGpsMotionStatus.PARKING]: {
+            text: 'Parking',
+            textColorClass: 'text-color-bw6-2',
+        },
+        [eGpsMotionStatus.NO_GPS_DEVICE]: {
+            text: 'No GPS Device',
+            textColorClass: 'text-color-muted',
+        },
+    };
+
+    static GPS_IGNITION_SVG_CLASSES: Record<eGpsMotionStatus, string> = {
+        [eGpsMotionStatus.MOVING]: 'svg-fill-blue-8',
+        [eGpsMotionStatus.SHORT_STOP]: 'svg-fill-yellow-1',
+        [eGpsMotionStatus.EXTENDED_STOP]: 'svg-fill-red-10',
+        [eGpsMotionStatus.PARKING]: 'svg-fill-muted',
+        [eGpsMotionStatus.NO_GPS_DEVICE]: 'svg-fill-light-grey-6',
+    };
+}

package/lib/utils/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './dropdown-menu-content.constants';
+export * from './gps-location.constants';
+export * from './search-multiple-states.constant';

package/lib/utils/constants/search-multiple-states.constant.ts

@@ -0,0 +1,7 @@
+export class SearchMultipleStatesConstant {
+    static COLOR_CLASSES: string[] = [
+        'chip-green',
+        'chip-yellow',
+        'chip-purple',
+    ];
+}

package/lib/utils/helpers/date-time.helper.ts

@@ -0,0 +1,22 @@
+import moment from 'moment';
+
+// enums
+import { eDateTimeFormats, eSharedString } from '../../enums';
+
+export class DateTimeHelper {
+    public static sortByCreatedAt<T extends { createdAt?: string | Date }>(
+        data: T[],
+        sortDirection: eSharedString.ASC | eSharedString.DSC,
+        dateFormat: string = eDateTimeFormats.MM_DD_YY_HH_MM_A
+    ): T[] {
+        return [...data].sort((a, b) => {
+            if (!a?.createdAt || !b?.createdAt) return 0;
+            const dateA = moment(a.createdAt, dateFormat).valueOf();
+            const dateB = moment(b.createdAt, dateFormat).valueOf();
+
+            return sortDirection === eSharedString.ASC
+                ? dateA - dateB
+                : dateB - dateA;
+        });
+    }
+}

package/lib/utils/helpers/dropdown-menu-content-conditional-items.helper.ts

@@ -0,0 +1,66 @@
+// constants
+import { DropdownMenuContentConstants } from '../../utils/constants';
+
+// enums
+import { eDropdownMenu } from '../../enums';
+import { StatusTypeEnum } from '../../components/ca-pickup-delivery-block/models';
+
+// models
+import { IDropdownMenuItem } from '../../components/ca-dropdown-menu/interfaces';
+
+export class DropdownMenuContentConditionalItemsHelper {
+    // conditional items
+    static getConditionalItems(
+        requestedItemTitles: string[],
+        isSharedConditionalItems: boolean,
+        modifiers?: Partial<IDropdownMenuItem>[]
+    ): IDropdownMenuItem[] {
+        const dropdownMenuItems = isSharedConditionalItems
+            ? DropdownMenuContentConstants.DROPDOWN_MENU_SHARED_ITEMS
+            : DropdownMenuContentConstants.DROPDOWN_MENU_CONDITIONAL_ITEMS;
+
+        // if no specific items are requested, return all items
+        const requestedItems =
+            Array.isArray(requestedItemTitles) && !requestedItemTitles.length
+                ? Object.values(dropdownMenuItems)
+                : requestedItemTitles.map((title) => dropdownMenuItems[title]);
+
+        // map requested item - optional modifiers
+        const mapDropdownMenuItems = () => {
+            return requestedItems.map((item) => {
+                const modifier = modifiers?.find(
+                    (modifier) => modifier.title === item.title
+                );
+
+                return modifier ? { ...item, ...modifier } : item;
+            });
+        };
+
+        return mapDropdownMenuItems();
+    }
+
+    // modifier items
+    // dispatchboard - pickup delivery component
+    static getPickupDeliveryModifierItems(
+        loadStatus: string,
+        isAllDispatchBoardsSelected: boolean
+    ): Partial<IDropdownMenuItem>[] {
+        return [
+            {
+                title: eDropdownMenu.EDIT,
+                hasBorder: loadStatus !== StatusTypeEnum.PENDING,
+                isDisabled: isAllDispatchBoardsSelected,
+            },
+            {
+                title: eDropdownMenu.UNASSIGN,
+                isDisabled: isAllDispatchBoardsSelected,
+            },
+            {
+                title: eDropdownMenu.DELETE,
+                isDisabled:
+                    isAllDispatchBoardsSelected ||
+                    loadStatus !== StatusTypeEnum.PENDING,
+            },
+        ];
+    }
+}

package/lib/utils/helpers/dropdown-menu-content.helper.ts

@@ -0,0 +1,69 @@
+import { DropdownMenuContentConditionalItemsHelper } from '../../utils/helpers';
+
+// enums
+import { StatusTypeEnum } from '../../components/ca-pickup-delivery-block/models';
+import { eDropdownMenu } from '../../enums';
+
+// models
+import { IDropdownMenuItem } from '../../components/ca-dropdown-menu/interfaces';
+
+export class DropdownMenuContentHelper {
+    // payroll - period content payment component
+    static getPayrollDropdownContent(
+        isOpenPayroll: boolean
+    ): IDropdownMenuItem[] {
+        // requested items
+        const requestedSharedItems = isOpenPayroll
+            ? []
+            : [
+                  eDropdownMenu.VIEW_DETAILS,
+                  eDropdownMenu.SHARE,
+                  eDropdownMenu.PRINT,
+              ];
+
+        // items
+        const sharedItems =
+            DropdownMenuContentConditionalItemsHelper.getConditionalItems(
+                requestedSharedItems,
+                true
+            );
+
+        return [...sharedItems];
+    }
+
+    // dispatchboard - pickup delivery component
+    static getPickupDeliveryDropdownContent(
+        loadStatus: string,
+        isAllDispatchBoardsSelected: boolean
+    ): IDropdownMenuItem[] {
+        const modifierItems =
+            DropdownMenuContentConditionalItemsHelper.getPickupDeliveryModifierItems(
+                loadStatus,
+                isAllDispatchBoardsSelected
+            );
+
+        const sharedItems =
+            DropdownMenuContentConditionalItemsHelper.getConditionalItems(
+                [],
+                true,
+                modifierItems
+            );
+
+        if (loadStatus === StatusTypeEnum.PENDING) {
+            const conditionalItems =
+                DropdownMenuContentConditionalItemsHelper.getConditionalItems(
+                    [eDropdownMenu.UNASSIGN],
+                    false,
+                    modifierItems
+                );
+
+            return [
+                sharedItems[0],
+                ...conditionalItems,
+                ...sharedItems.slice(1),
+            ];
+        }
+
+        return [...sharedItems];
+    }
+}

package/lib/utils/helpers/file.helpers.ts

@@ -0,0 +1,14 @@
+export class FileHelpers {
+    static base64ToFile(base64: string, filename: string): File {
+        const arr = base64.split(',');
+        const match = arr[0].match(/:(.*?);/);
+        const mime = match ? match[1] : '';
+        const binaryString = atob(arr[1]);
+        let length = binaryString.length;
+        const u8arr = new Uint8Array(length);
+
+        while (length--) u8arr[length] = binaryString.charCodeAt(length);
+
+        return new File([u8arr], filename, { type: mime });
+    }
+}

package/lib/utils/helpers/gps-location.helper.ts

@@ -0,0 +1,159 @@
+// Enums
+import {
+    eGpsHeadingDirection,
+    eGpsMotionStatus,
+    eSharedString,
+    eStringPlaceholder,
+} from '../../enums';
+
+// Constants
+import { GpsLocationConstants } from '../constants';
+
+export class GpsLocationHelper {
+    static getGpsIcon = (
+        motionStatus: eGpsMotionStatus,
+        headingDirection: eGpsHeadingDirection,
+        isIgnition?: boolean
+    ): string => {
+        const svgInnerContent = GpsLocationHelper.getGpsSvgInnerContent(
+            motionStatus,
+            headingDirection,
+            isIgnition
+        );
+
+        const svg = GpsLocationHelper.getGpsSvg(
+            motionStatus,
+            svgInnerContent
+        );
+
+        return svg;
+    };
+
+    static getGpsCurrentLocationIcon = (
+        motionStatus: eGpsMotionStatus
+    ): string => {
+        if (motionStatus === eGpsMotionStatus.NO_GPS_DEVICE)
+            return eStringPlaceholder.EMPTY;
+
+        const classes = GpsLocationHelper.getGpsSvgClasses(motionStatus);
+
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+                    <rect class="${classes}" width="10" height="10" rx="5" fill="#6692F1"/>
+                    <rect x="3" y="3" width="4" height="4" rx="2" fill="white"/>
+                </svg>`;
+    };
+
+    static getGpsSvg = (
+        motionStatus: eGpsMotionStatus,
+        innerSvgContent: string
+    ): string => {
+        const classes = GpsLocationHelper.getGpsSvgClasses(motionStatus);
+
+        return `<svg class="gps-svg" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect class="${classes}" width="22" height="22" rx="11" />
+                    ${innerSvgContent}
+                </svg>`;
+    };
+
+    static getGpsSvgClasses = (motionStatus: eGpsMotionStatus): string => {
+        const svgClassesString =
+            GpsLocationConstants.GPS_SVG_CLASSES[motionStatus];
+
+        return `svg-rect-fill-${svgClassesString.fill} svg-rect-hover-${svgClassesString.hover}`;
+    };
+
+    static getGpsSvgInnerContent = (
+        motionStatus: eGpsMotionStatus,
+        headingDirection: eGpsHeadingDirection,
+        isIgnition?: boolean
+    ): string => {
+        let svgContent: string = eStringPlaceholder.EMPTY;
+
+        switch (motionStatus) {
+            case eGpsMotionStatus.NO_GPS_DEVICE:
+                svgContent = GpsLocationHelper.getNoGpsDeviceIconPath();
+                break;
+            case eGpsMotionStatus.MOVING:
+                svgContent =
+                    GpsLocationHelper.getMovingIconPath(headingDirection);
+                break;
+            default:
+                svgContent =
+                    GpsLocationHelper.getStoppedIconPath(isIgnition);
+                break;
+        }
+
+        return svgContent;
+    };
+
+    static getGpsTitle = (
+        motionStatus: eGpsMotionStatus,
+        headingDirection?: eGpsHeadingDirection,
+        isIgnition?: boolean
+    ): string => {
+        let gpsTitle =
+            GpsLocationConstants.GPS_TITLES[motionStatus] ??
+            eStringPlaceholder.EMPTY;
+
+        if (motionStatus === eGpsMotionStatus.MOVING && headingDirection) {
+            gpsTitle += `${eStringPlaceholder.DASH_WITH_SPACES} ${headingDirection}`;
+        }
+
+        const isStopStatus = [
+            eGpsMotionStatus.SHORT_STOP,
+            eGpsMotionStatus.EXTENDED_STOP,
+            eGpsMotionStatus.PARKING,
+        ].includes(motionStatus);
+
+        if (isStopStatus && isIgnition) {
+            gpsTitle += `${eStringPlaceholder.DASH_WITH_SPACES} ${eSharedString.IGNITION}`;
+        }
+
+        return gpsTitle;
+    };
+
+    static getGpsTitleColorClass = (
+        motionStatus: eGpsMotionStatus,
+        isDarkMode?: boolean
+    ): string => {
+        const colorClasses = isDarkMode
+            ? GpsLocationConstants.GPS_TITLE_DROPDOWN_COLOR_CLASSES
+            : GpsLocationConstants.GPS_TITLE_COLOR_CLASSES;
+
+        return colorClasses[motionStatus] ?? eStringPlaceholder.EMPTY;
+    };
+
+    static getMovingIconPath = (
+        headingDirection: eGpsHeadingDirection
+    ): string => {
+        const rotationDeg =
+            GpsLocationConstants.GPS_HEADING_ROTATION_ANGLE[
+                headingDirection
+            ];
+
+        return `<g transform="rotate(${rotationDeg ?? 0}, 11, 11)">
+                    <path d="M10.4961 5.31177L6.13156 13.9689C6.0747 14.081 6.05676 14.2089 6.08055 14.3324C6.10435 14.4558 6.16852 14.5678 6.26298 14.6508C6.35744 14.7338 6.47681 14.783 6.6023 14.7906C6.72779 14.7983 6.85227 14.764 6.95613 14.6932L10.3641 12.3789C10.5521 12.2512 10.7741 12.1829 11.0014 12.1829C11.2287 12.1829 11.4507 12.2512 11.6387 12.3789L15.0501 14.6932C15.154 14.764 15.2785 14.7983 15.404 14.7906C15.5294 14.783 15.6488 14.7338 15.7433 14.6508C15.8377 14.5678 15.9019 14.4558 15.9257 14.3324C15.9495 14.2089 15.9316 14.081 15.8747 13.9689L11.5084 5.31177C11.4611 5.21802 11.3887 5.13923 11.2993 5.08419C11.2098 5.02914 11.1069 5 11.0018 5C10.8968 5 10.7939 5.02914 10.7044 5.08419C10.615 5.13923 10.5426 5.21802 10.4953 5.31177" fill="white"/>
+                </g>`;
+    };
+
+    static getStoppedIconPath = (isIgnition?: boolean): string => {
+        return isIgnition
+            ? `<g clip-path="url(#clip0_46471_37062)">
+                    <path d="M16.3939 10.2833V13.3699C16.4085 13.5689 16.3928 13.769 16.3473 13.9633C16.2937 14.1475 16.1949 14.3154 16.0598 14.4516C15.9247 14.5879 15.7577 14.6881 15.5739 14.7433C15.335 14.7922 15.0905 14.8079 14.8473 14.7899C14.7465 14.7899 14.6498 14.7499 14.5786 14.6786C14.5073 14.6074 14.4673 14.5107 14.4673 14.4099V13.2666H13.3139V13.7833C13.3131 13.8346 13.3086 13.8859 13.3006 13.9366C13.274 14.1243 13.179 14.2956 13.0338 14.4174C12.8885 14.5392 12.7034 14.6031 12.5139 14.5966H9.82725C9.62347 14.5976 9.42374 14.5396 9.2522 14.4296C9.08066 14.3196 8.94465 14.1622 8.86059 13.9766H8.24725C8.06109 13.9654 7.88536 13.8868 7.75288 13.7556C7.62039 13.6243 7.54019 13.4493 7.52725 13.2633V12.5166H6.75392C6.75392 12.8966 6.76059 13.2699 6.75392 13.6566C6.75409 13.7259 6.73482 13.7939 6.69828 13.8528C6.66175 13.9118 6.60943 13.9593 6.54725 13.9899C6.43014 14.0331 6.30424 14.0468 6.18059 14.0299C6.0618 14.0457 5.94099 14.0343 5.82725 13.9966C5.76181 13.9663 5.70602 13.9185 5.66602 13.8585C5.62602 13.7985 5.60338 13.7286 5.60059 13.6566V10.2366C5.60278 10.1399 5.64084 10.0474 5.70736 9.97722C5.77389 9.907 5.86414 9.86401 5.96059 9.85659C6.10725 9.84993 6.25392 9.84993 6.40059 9.85659C6.49703 9.86401 6.58728 9.907 6.65381 9.97722C6.72033 10.0474 6.75839 10.1399 6.76059 10.2366V11.3766H7.52725C7.52725 10.8499 7.52059 10.3299 7.52725 9.80993C7.54129 9.62427 7.62184 9.44991 7.7541 9.31887C7.88637 9.18783 8.06147 9.1089 8.24725 9.09659C8.78059 9.08993 9.31392 9.09659 9.84059 9.09659V8.34326H8.29392C8.19211 8.34089 8.09514 8.29939 8.02313 8.22738C7.95112 8.15538 7.90962 8.0584 7.90725 7.95659V7.93659C7.90408 7.78521 7.91076 7.63378 7.92725 7.48326H7.92059C7.94618 7.39848 7.99954 7.32477 8.07209 7.27398C8.14464 7.22319 8.23217 7.19829 8.32059 7.20326H12.5333C12.6058 7.20414 12.6766 7.22519 12.7378 7.26405C12.799 7.3029 12.8482 7.35803 12.8799 7.42326C12.9131 7.51266 12.9268 7.60814 12.9199 7.70326C12.9199 7.80326 12.9199 7.90326 12.9133 8.00993C12.9015 8.1023 12.8564 8.1872 12.7864 8.2486C12.7164 8.31001 12.6264 8.34367 12.5333 8.34326H10.9999V9.09659H12.5133C12.717 9.09042 12.915 9.16452 13.0646 9.30293C13.2143 9.44134 13.3036 9.63299 13.3133 9.83659V10.6166H14.4666V9.47659C14.4669 9.40051 14.49 9.32626 14.5327 9.26332C14.5754 9.20039 14.636 9.15162 14.7066 9.12326C14.7914 9.10128 14.8791 9.09229 14.9666 9.09659C15.1451 9.08754 15.324 9.09872 15.4999 9.12993C15.669 9.16798 15.8274 9.24341 15.9636 9.3507C16.0997 9.45799 16.2101 9.5944 16.2866 9.74993C16.3621 9.91733 16.3992 10.0997 16.3939 10.2833Z" fill="white"/>
+                </g>
+                <defs>
+                    <clipPath id="clip0_46471_37062">
+                        <rect width="12" height="12" fill="white" transform="translate(5 5)"/>
+                    </clipPath>
+                </defs>`
+            : `<rect x="6" y="6" width="10" height="10" rx="5" fill="white"/>`;
+    };
+
+    static getNoGpsDeviceIconPath = (): string => {
+        return `<path d="M6.29726 11.0553L7.38313 9.9719L8.34258 10.9314L7.25525 12.016C6.92911 12.386 6.75624 12.8663 6.77183 13.3593C6.78742 13.8522 6.99031 14.3207 7.33919 14.6693C7.68806 15.018 8.15669 15.2205 8.64965 15.2357C9.14262 15.251 9.62286 15.0777 9.99259 14.7513L11.0784 13.6672L12.0352 14.624L10.9493 15.71C10.6448 16.0196 10.282 16.2658 9.88195 16.4345C9.48185 16.6032 9.05231 16.691 8.61811 16.6928C8.1839 16.6947 7.75363 16.6106 7.35211 16.4453C6.95058 16.28 6.58575 16.0369 6.27865 15.7299C5.97155 15.423 5.72827 15.0583 5.56284 14.6568C5.3974 14.2553 5.31308 13.8251 5.31475 13.3909C5.31642 12.9567 5.40403 12.5271 5.57255 12.127C5.74106 11.7268 5.98714 11.3639 6.29659 11.0593L6.29726 11.0553Z" fill="#919191" fill-opacity="0.4"/>
+                <path d="M12.6313 10.0404L10.1766 7.58565C10.3314 7.54823 10.4906 7.5299 10.6506 7.53134C11.1954 7.53187 11.718 7.7475 12.1046 8.13134C12.4776 8.50419 12.6882 9.00928 12.6906 9.53667C12.6927 9.70681 12.6727 9.87612 12.6313 10.0404Z" fill="#919191" fill-opacity="0.4"/>
+                <path d="M14.6251 12.0342L13.6703 11.0793L14.7486 10.0027C15.1012 9.64929 15.304 9.1736 15.3148 8.67452C15.3256 8.17544 15.1437 7.6914 14.8068 7.32305C14.4698 6.9547 14.0039 6.73041 13.5058 6.69681C13.0078 6.66322 12.5159 6.82291 12.1326 7.14267L11.9786 7.268L11.7999 7.17667C11.5821 7.0725 11.344 7.01742 11.1026 7.01534L11.0793 7.01534L10.9533 7.02067C10.9019 7.02362 10.8509 7.01074 10.8071 6.98378C10.7633 6.95682 10.7288 6.91708 10.7083 6.86991C10.6878 6.82274 10.6823 6.77042 10.6925 6.72001C10.7027 6.6696 10.7281 6.62353 10.7653 6.588L11.0506 6.302C11.3562 5.99655 11.719 5.75428 12.1183 5.58904C12.5175 5.42379 12.9454 5.33881 13.3775 5.33893C13.8096 5.33906 14.2375 5.42429 14.6366 5.58976C15.0358 5.75523 15.3985 5.99771 15.7039 6.30334C16.0094 6.60897 16.2516 6.97177 16.4169 7.37102C16.5821 7.77028 16.6671 8.19818 16.667 8.63028C16.6669 9.06238 16.5816 9.49023 16.4162 9.88939C16.2507 10.2886 16.0082 10.6512 15.7026 10.9567L14.6251 12.0342Z" fill="#919191" fill-opacity="0.4"/>
+                <path d="M9.27782 11.8666L10.2332 12.822L9.79592 13.2573C9.66738 13.3779 9.49684 13.4435 9.32064 13.4402C9.14443 13.4368 8.9765 13.3648 8.85263 13.2394C8.72875 13.1141 8.65873 12.9453 8.65747 12.7691C8.65622 12.5929 8.72384 12.4231 8.84592 12.296L9.27782 11.8666Z" fill="#919191" fill-opacity="0.4"/>
+                <path d="M15.972 15.0031C16.0892 14.8859 16.0892 14.6959 15.972 14.5788L7.64962 6.25636C7.53246 6.1392 7.34251 6.1392 7.22536 6.25636L6.25743 7.22428C6.14027 7.34144 6.14027 7.53139 6.25743 7.64855L14.5799 15.971C14.697 16.0881 14.887 16.0881 15.0041 15.971L15.972 15.0031Z" fill="#919191" fill-opacity="0.4"/>`;
+    };
+}

package/lib/utils/helpers/index.ts

@@ -0,0 +1,7 @@
+export * from './dropdown-menu-content.helper';
+export * from './dropdown-menu-content-conditional-items.helper';
+export * from './methods-calculations.helper';
+export * from './uuid.helper';
+export * from './user.helper';
+export * from './date-time.helper';
+export * from './gps-location.helper';

package/lib/utils/helpers/methods-calculations.helper.ts

@@ -0,0 +1,193 @@
+import { AbstractControl } from '@angular/forms';
+
+import moment from 'moment';
+
+// enums
+import { eUnit } from '../../enums';
+
+export class MethodsCalculationsHelper {
+    //------------------------------- Calculating Parking Slots -------------------------------
+    static calculateParkingSlot = (
+        value: string,
+        formControl: AbstractControl
+    ) => {
+        // First check if value exist
+        if (!value) {
+            return 0;
+        }
+        let arrayStops: any[] = value.split(',');
+        // Second check if arrayStops has ',' or ''
+        if (arrayStops.includes(',') || arrayStops.includes('')) {
+            arrayStops.pop();
+            formControl.patchValue(value.substring(0, value.lastIndexOf(',')));
+            return;
+        }
+        return arrayStops
+            .map((item: string) => {
+                // Third check if value has '-'
+                if (item.includes('-')) {
+                    const doubleValues: string[] = item.split('-');
+                    // Fourth check lentgh of doubleValues after splitting by -, must be 2
+                    if (doubleValues.length > 2) {
+                        arrayStops.pop();
+                        formControl.patchValue(
+                            value.substring(0, value.lastIndexOf(','))
+                        );
+                        return;
+                    }
+                    const foundSameElements: boolean = arrayStops.some(
+                        (array1) => doubleValues.includes(array1)
+                    );
+                    // Fifth check if values exist, denided, delete, return
+                    if (foundSameElements) {
+                        arrayStops.pop();
+                        formControl.patchValue(
+                            value.substring(0, value.lastIndexOf(','))
+                        );
+                        return;
+                    }
+                    // Sixth check if second value > first value
+                    if (!doubleValues.includes('')) {
+                        if (
+                            parseInt(doubleValues[1]) >
+                            parseInt(doubleValues[0])
+                        ) {
+                            // Seventh check if value in range
+                            arrayStops.forEach((item) => {
+                                if (
+                                    parseInt(item) >
+                                        parseInt(doubleValues[0]) &&
+                                    parseInt(item) < parseInt(doubleValues[1])
+                                ) {
+                                    arrayStops.pop();
+                                    formControl.patchValue(
+                                        value.substring(
+                                            0,
+                                            value.lastIndexOf(',')
+                                        )
+                                    );
+                                    return;
+                                }
+                            });
+                            return (
+                                parseInt(doubleValues[1]) -
+                                parseInt(doubleValues[0])
+                            );
+                        } else {
+                            arrayStops.pop();
+                            formControl.patchValue(
+                                value.substring(0, value.lastIndexOf(','))
+                            );
+                            return;
+                        }
+                    } else {
+                        arrayStops.pop();
+                        formControl.patchValue(
+                            value.substring(0, value.lastIndexOf(','))
+                        );
+                        return;
+                    }
+                } else {
+                    // Eight chech has array duplicate items
+                    if (arrayStops.length !== new Set(arrayStops).size) {
+                        arrayStops = [...new Set(arrayStops)];
+                        formControl.patchValue(arrayStops.join(','));
+                        return;
+                    } else {
+                        return 1;
+                    }
+                }
+            })
+            .reduce((accumulator, item) => {
+                return (accumulator! += item!);
+            }, 0);
+    };
+
+    //------------------------------- DATE TO BACKEND -------------------------------
+    static convertDateToBackend = (date: string) => {
+        return moment(new Date(date)).toISOString(true);
+    };
+
+    //------------------------------- DATE FROM BACKEND -------------------------------
+    static convertDateFromBackend = (date: string) => {
+        return moment.utc(date).local().format('MM/DD/YY');
+    };
+
+    //------------------------------- TIME FROM DATE FROM BACKEND -------------------------------
+    static convertDateToTimeFromBackend = (
+        date: string,
+        show_am_ap?: boolean
+    ) => {
+        if (!date) {
+            return null;
+        }
+        return moment
+            .utc(date)
+            .local()
+            .format(show_am_ap ? 'HH:mm A' : 'HH:mm:SS');
+    };
+
+    //------------------------------- TIME FROM BACKEND -------------------------------
+    static convertTimeFromBackend = (time: string) => {
+        return moment(time, 'HH:mm:SS A').toDate();
+    };
+
+    //------------------------------- DATE FROM BACKEND TO TIME -------------------------------
+    static convertDateFromBackendToTime = (date: string) => {
+        return moment(new Date(date)).format('LT');
+    };
+
+    static combineDateAndTimeToBackend = (date: string, time: string) => {
+        if (!time) {
+            return moment(new Date(date)).toISOString(true);
+        }
+        return moment(new Date(date + ' ' + time)).toISOString(true);
+    };
+
+    //------------------------------- DATE FROM BACKEND TO DATE AND TIME  -------------------------------
+    static convertDateFromBackendToDateAndTime = (date: Date | string) => {
+        return moment(new Date(date)).format('MM/DD/YY, hh:mm A');
+    };
+
+    //------------------------------- Convert thousand separator in number -------------------------------
+    static convertThousanSepInNumber = (value: string) => {
+        if (value) return parseFloat(value.toString().replace(/,/g, ''));
+        else return 0;
+    };
+
+    //------------------------------- Convert number in thousand separator -------------------------------
+    static convertNumberInThousandSep = (value: number) => {
+        if (value)
+            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        else return 0;
+    };
+
+    //------------------------------- Convert number to short format (1.000 to 1K, 1.000.000 to 1M) -------------------------------
+    static convertThousandToShortFormat = (value: number) => {
+        if (value)
+            return new Intl.NumberFormat(undefined, {
+                //@ts-ignore
+                notation: 'compact',
+                compactDisplay: 'short',
+            }).format(value);
+        else return '0';
+    };
+
+    //------------------------------- SPECIFIC PRICE CONVERTORS -------------------------------
+    static convertNumberWithCurrencyFormatterToBackend = (
+        value: number,
+        hasDollar: boolean = false
+    ) => {
+        const formatedValue = value.toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+            minimumFractionDigits: 2,
+        });
+
+        if (formatedValue.includes(eUnit.DOLLAR_SIGN) && !hasDollar) {
+            return formatedValue.slice(1);
+        }
+
+        return formatedValue;
+    };
+}