carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/input/pipes/error-message.pipe.ts

@@ -1,54 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { ValidationErrors } from '@angular/forms';
-import { NumberFormatPipe } from '../../../pipes/number-format.pipe';
-import { CustomError } from '../models/input.model';
-
-@Pipe({
-  name: 'errorMessage',
-})
-export class ErrorMessagePipe implements PipeTransform {
-  numberFormatPipe = new NumberFormatPipe();
-
-  transform(
-    errors: ValidationErrors | null | undefined,
-    customErrors?: CustomError[] // custom error messages to be displayed in the input
-  ): string[] {
-    if (!errors) return [];
-
-    // Create a map of custom errors for quick lookup
-    const customErrorMap = new Map<string, string | null>();
-    if (customErrors) {
-      customErrors.forEach((error) => {
-        customErrorMap.set(error.name, error.message);
-      });
-    }
-
-    const defaultMessages: Record<string, (value?: any) => string> = {
-      required: () => 'Required',
-      minlength: (value: any) => `${value.requiredLength} Characters Min`,
-      maxlength: (value: any) => `${value.requiredLength} Characters Max`,
-      min: (value: any) =>
-        `Min ${this.numberFormatPipe.transform(String(value.min))}`,
-      max: (value: any) =>
-        `Max ${this.numberFormatPipe.transform(String(value.max))}`,
-      hasUppercase: () => 'Must contain at least one uppercase letter',
-      hasNumber: () => 'Must contain at least one number',
-      hasSymbol: () => 'Must contain at least one symbol',
-      passwordDontMatch: () => "Passwords don't match",
-    };
-
-    return Object.entries(errors)
-      .map(([key, value]) => {
-        // Check if there's a custom error for this key
-        if (customErrorMap.has(key)) {
-          const customMessage = customErrorMap.get(key);
-          return customMessage || '';
-        }
-
-        // Fall back to default message
-        const getMessage = defaultMessages[key];
-        return getMessage ? getMessage(value) : 'Invalid';
-      })
-      .filter((message): message is string => message !== null); // Remove null values
-  }
-}

package/projects/carriera-intern-components/src/app/components/input/pipes/highlight-search.pipe.ts

@@ -1,42 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'highlightSearch',
-})
-export class HighlightSearchPipe implements PipeTransform {
-  /**
-   * Formats an option for the dropdown by highlighting the search value if it exists in the option.
-   * @param option - The option to format.
-   * @param searchValue - The value to search and highlight within the option.
-   * @returns The formatted option.
-   */
-  transform(
-    option: string,
-    searchValue: string | undefined | null,
-    forDocuments?: boolean,
-  ): string {
-    if (
-      !searchValue ||
-      typeof searchValue !== 'string' ||
-      searchValue.trim() === ''
-    ) {
-      return option;
-    }
-
-    const escapedSearchValue = searchValue.replace(
-      /[.*+?^${}()|[\]\\]/g,
-      '\\$&',
-    );
-
-    const regex = new RegExp(escapedSearchValue, 'gi');
-    const highlightClass = forDocuments
-      ? 'cai-documents-highlight'
-      : 'cai-highlight';
-
-    if (option.toLowerCase().includes(searchValue.toLowerCase())) {
-      return option.replace(regex, `<span class="${highlightClass}">$&</span>`);
-    }
-
-    return option;
-  }
-}

package/projects/carriera-intern-components/src/app/components/input/pipes/index.ts

@@ -1,6 +0,0 @@
-export * from './broker-progress.pipe';
-export * from './clear-tooltip.pipe';
-export * from './remap-pm-icons.pipe';
-export * from './error-message.pipe';
-export * from './highlight-search.pipe';
-export * from './input-class.pipe';

package/projects/carriera-intern-components/src/app/components/input/pipes/input-class.pipe.ts

@@ -1,109 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { CaiInputConfig, DropdownOptions } from '../models';
-
-export interface InputClassContext {
-  config: CaiInputConfig;
-  hideValidation: boolean;
-  isPasswordVisible: boolean;
-  isInvalid: boolean;
-  isValid: boolean;
-  isHovered: boolean;
-  hasText: boolean;
-  isAdding: boolean;
-  selectedOption: DropdownOptions | null;
-}
-
-@Pipe({
-  name: 'inputClass',
-})
-export class InputClassPipe implements PipeTransform {
-  transform(
-    context: InputClassContext | null | undefined,
-  ): Record<string, boolean> {
-    if (!context) {
-      return {};
-    }
-
-    const {
-      isInvalid,
-      isValid,
-      isHovered,
-      hasText,
-      hideValidation,
-      config,
-      isPasswordVisible,
-      isAdding,
-      selectedOption,
-    } = context;
-
-    const {
-      isEdit,
-      icon,
-      type,
-      withButtons,
-      alignment,
-      inverse,
-      inTable,
-      dropdownAutocomplete,
-      add,
-      placeholderBehavior,
-      errorBehavior,
-      removable,
-      isRemovableWhenDisabled,
-      textColor,
-      subcontent,
-      isAddress,
-      size,
-      strikethrough,
-      hasNoClearButton,
-    } = config;
-    const dropdownType = config.dropdown;
-    const isPassword = type === 'password' || type === 'account';
-    const number = type === 'number';
-
-    const hasEndItem =
-      dropdownType === 'broker' ||
-      dropdownType === 'contact' ||
-      dropdownType === 'dispatch' ||
-      dropdownType === 'ftl-dispatch' ||
-      dropdownType === 'shipper';
-
-    return {
-      'has-text': hasText,
-      'is-empty': !hasText,
-      hovered: isHovered && dropdownType === 'multiple',
-      'has-error': isInvalid && !isEdit && !hideValidation,
-      'has-valid': isValid && !isEdit && !hideValidation,
-      'has-icon': !!icon,
-      'has-password': isPassword,
-      'has-visible': isPassword && isPasswordVisible,
-      'has-number': number && !!withButtons,
-      'has-right': alignment === 'right',
-      inverse: !!inverse,
-      'has-dropdown': !!dropdownType && !dropdownAutocomplete,
-      'is-adding': (add && isAdding) || !!isEdit,
-      'has-ftl-dispatch': dropdownType === 'ftl-dispatch',
-      'has-dispatch': dropdownType === 'dispatch',
-      'fade-placeholder':
-        placeholderBehavior === 'fade' ||
-        (!!inTable && placeholderBehavior !== 'static'),
-      'static-placeholder': placeholderBehavior === 'static',
-      'floating-error':
-        errorBehavior === 'floating' ||
-        (!!inTable && placeholderBehavior !== 'static'),
-      'static-error': errorBehavior === 'static',
-      'has-selected': !!selectedOption,
-      'has-end-item': hasEndItem,
-      removable: !!removable,
-      'disabled-removable': !!isRemovableWhenDisabled,
-      'in-table': !!inTable,
-      'text-color-positive': textColor === 'positive',
-      'has-multiple-dropdown': dropdownType === 'multiple',
-      'is-address': !!isAddress,
-      'has-subcontent': !!subcontent,
-      'size-22': size === 22,
-      strikethrough: !!strikethrough,
-      'no-clear': !!hasNoClearButton,
-    };
-  }
-}

package/projects/carriera-intern-components/src/app/components/input/pipes/remap-pm-icons.pipe.ts

@@ -1,49 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'remapPmIcons',
-})
-export class RemapPmIconsPipe implements PipeTransform {
-  transform(pm: string | null | undefined): string {
-    if (!pm) return 'cai-pm-base';
-
-    switch (pm) {
-      case 'Reefer Unit':
-        return 'cai-repair-reefer';
-      case 'Alignment':
-        return 'cai-pm-alignment';
-      case 'PTO Pump':
-        return 'cai-pm-pto-pump';
-      case 'Engine Oil & Filter':
-        return 'cai-pm-engine-oil-filter';
-      case 'Air Filter':
-        return 'cai-pm-air-filter';
-      case 'Belts':
-        return 'cai-pm-belts';
-      case 'Transmission Fluid':
-        return 'cai-pm-transmission-fluid';
-      case 'Engine Tune-Up':
-        return 'cai-pm-engine-tune-up';
-      case 'Oil Pump':
-        return 'cai-pm-engine-oil-filter';
-      case 'AC Compressor':
-        return 'cai-pm-engine-tune-up';
-      case 'Battery':
-        return 'cai-pm-battery';
-      case 'Turbo':
-        return 'cai-pm-turbo';
-      case 'Radiator':
-        return 'cai-pm-radiator';
-      case 'Air Compressor':
-        return 'cai-pm-transmission-fluid';
-      case 'Fuel Pump':
-        return 'cai-pm-belts';
-      case 'Water Pump':
-        return 'cai-pm-air-filter';
-      case 'Brake Chamber':
-        return 'cai-pm-brake-chamber';
-      default:
-        return 'cai-pm-base';
-    }
-  }
-}

package/projects/carriera-intern-components/src/app/components/input/stories/Documentation.mdx

@@ -1,190 +0,0 @@
-import { Meta, Primary, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-import * as Input from './input.stories';
-
-<Meta of={Input} />
-
-# Input component
-
-The Input component is a highly versatile, configurable form control designed to handle a wide range of input scenarios across the application. It supports multiple input types including `text`, `password`, `number`, and `masked` inputs, with optional icons and other styling variants. The component offers alignment control, an inverse variant for use on dark backgrounds, and seamless integration with dropdowns — including searchable and addable options. It's designed to support complex, context-specific dropdowns such as those required in modals like the load modal (`dispatch`, `label`, `broker`, ...).
-
-> This component is in development and properties are subject to change.
-
-<Primary/>
-
-## Config object overview:
-
-Configuration object for the input's behavior and appearance.
-It is provided by the parent component as an Angular `input()` signal.
-- `type`: HTML input type (`'text'`, `'password'`, `'number'`, `'account'`).
-- `name`: The HTML `name` attribute.
-- `required`: If `true`, the input is required for form submission.
-- `alignment`: Text alignment within the input (`'left'` or `'right'`).
-- `inverse`: If `true`, renders the input in a dark mode style.
-- `reveal`: For password inputs, the number of characters to reveal from the end.
-- `icon`: Name of an icon to display (e.g., `'cai-email'`).
-- `iconColor`: Color of the displayed icon (e.g., `'#FF0000'`).
-- `dropdown`: If `true`, the input is associated with a dropdown menu, can also have `'dispatch'`, `'ftl-dispatch'`, `'broker'`, `'contact'`, `'shipper'`, `'dispatcher'`, `'truck'`, `'trailer'`, `'bank'`, `'subcontent'` or `'label'` variants.
-- `options`: An array of options for the dropdown can be of type `DropdownOption[]` | `LabelOption[]` | `DispatchBoard[]` | `Broker[]` | `DepartmentContactsPair[]` | `Shipper[]` | `Bank[]` | `Dispatcher[]`.
-- `labelColors`: An array of label colors for the label picker.
-- `search`: Enables search within the dropdown.
-- `add`: Enables 'add new' functionality in the dropdown.
-- `isNumberFormattingDisabled`: If `true`, the input will not be formatted as a number.
-- `placeholderBehavior`: Defines placeholder animation (`'dynamic'` , `'fade'`, `'static'`).
-- `errorBehavior`: Defines error animation (`'static'`, `'dynamic'`, `'floating'`).
-- `label`: An `aria-label` for accessibility.
-- `list`: If `true`, the input has no validation, no background and no separators for icons
-- `inTable`: If `true`, has in-table styles
-- `mask`: A pattern string for input masking (e.g., `'(000) 000-0000'`).
-- `min`: Minimum value for number inputs.
-- `max`: Maximum value for number inputs (e.g., `999` meaning 3 characters) or maximum length for text inputs in characters.
-- `textTransform`: Text transformation for text inputs (`'capitalize'`, `'uppercase'`, `'lowercase'`).
-- `textColor`: Text color for text inputs (`'positive'`).
-- `step`: Step value for number inputs. Can also be `automatic` for automatic step calculation.
-- `withButtons`: If `true`, adds increment/decrement buttons for number inputs.
-- `autocomplete`: The HTML `autocomplete` attribute.
-- `disabled`: If `true`, the input is disabled (for use without reactive form).
-- `passwordRequirements`: If `true`, shows password requirements for password inputs.
-- `optionValue`: The key of the option to use in the formControl for the selected option in the dropdown.
-- `optionLabel`: The key of the option to use as the label in the dropdown.
-- `subContent`: An optional slot for additional content to be displayed next to the content the user is entering. (ex. lbs, months, etc.)
-- `removable`: If `true`, displays `cai-delete` icon over clear button.
-- `autofocus`: If `true`, the input will be focused when the component is initialized.
-- `canOpenModal`: If `true`, the input can open a modal for adding new options.
-- `customErrors`: An array of custom errors to be displayed in the input.
-
-<Controls/>
-
-# Generic inputs
-
-## Default variant
-
-<Canvas of={Input.Default}/>
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px'}}>
-<div>
-### Props:
-
-```
-id: 'default-input',
-config: {
-    type: 'text',
-    name: 'Default input',
-},
-```
-</div>
-<div>
-
-### Template:
-
-```
-<cai-input 
-    [id]="id" 
-    [config]="config" 
-    formControlName="input"
-></cai-input>
-```
-</div>
-
-</div>
-
-## Icon variant
-
-<Canvas of={Input.IconInput}/>
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px'}}>
-<div>
-### Props:
-
-```
-id: 'icon-input',
-config: {
-    type: 'text',
-    name: 'Icon input',
-    icon: 'cai-email'
-},
-```
-</div>
-<div>
-
-### Template:
-
-```
-<cai-input 
-    [id]="id" 
-    [config]="config" 
-    formControlName="email"
-></cai-input>
-```
-</div>
-
-</div>
-
-## Password variant with requirements
-
-<Canvas of={Input.PasswordInputWithRequirements}/>
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px'}}>
-<div>
-### Props:
-
-```
-id: 'password-input',
-config: {
-    type: 'password',
-    name: 'Password',
-    required: true,
-    passwordRequirements: true,
-},
-```
-</div>
-<div>
-
-### Template:
-
-```
-<cai-input 
-    [id]="id" 
-    [config]="config" 
-    formControlName="password"
-></cai-input>
-```
-</div>
-
-</div>
-
-## Number variant with buttons
-
-<Canvas of={Input.NumberInputWithButtons}/>
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px'}}>
-<div>
-### Props:
-
-```
-id: 'number-input',
-config: {
-    type: 'number',
-    name: 'Number input',
-    required: false,
-    alignment: 'right',
-    min: 0,
-    max: 999999,
-    withButtons: true,
-},
-```
-</div>
-<div>
-
-### Template:
-
-```
-<cai-input 
-    [id]="id" 
-    [config]="config" 
-    formControlName="number"
-></cai-input>
-```
-</div>
-
-</div>

package/projects/carriera-intern-components/src/app/components/input/stories/dropdown-options.ts

@@ -1,80 +0,0 @@
-import basicOptions from '../mock/basic.json';
-import { brokers } from '../mock/brokers.json';
-import { colors } from '../mock/colors.json';
-import { states } from '../mock/states.json';
-import { owners } from '../mock/owner.json';
-import { fuelcards } from '../mock/fuelcard.json';
-import { pm } from '../mock/pm.json';
-import { truckMakes } from '../mock/truckmakes.json';
-import { trailerMakes } from '../mock/trailermakes.json';
-import { toll } from '../mock/toll.json';
-import { hazardous } from '../mock/hazardous.json';
-import { dispatches } from '../mock/dispatches.json';
-import { dispatches as newLoadModalRes } from '../mock/new-load-modal-res.json';
-import { noboard } from '../mock/noboard.json';
-import { contacts } from '../mock/contacts.json';
-import { splitDrivers } from '../mock/split-driver.json';
-import { splitTrucks } from '../mock/split-truck.json';
-import { splitTrailers } from '../mock/split-trailer.json';
-import { banks } from '../mock/banks.json';
-import { dispatchers } from '../mock/dispatchers.json';
-import { shippers } from '../mock/shipper.json';
-import { truckTypes, trailerTypes } from '../mock/truck_trailer.json';
-import { fuelList } from '../mock/fuel-list-dropdown.json';
-import { generalCommodities } from '../mock/commodities.json';
-
-const providers = [
-  {
-    id: 0,
-    name: 'EFS',
-  },
-];
-
-const subcontent = [
-  { id: 1, name: 'Box' },
-  { id: 2, name: 'Pallet' },
-  { id: 3, name: 'Truckload' },
-  { id: 4, name: 'Trailerload' },
-  { id: 5, name: 'Container' },
-  { id: 6, name: 'Other' },
-];
-
-export const dropdownOptions = {
-  basic: basicOptions,
-
-  shipper: shippers,
-  contact: contacts,
-  broker: brokers,
-  color: colors,
-  state: states,
-  owner: owners,
-  fuelcard: fuelcards,
-  pm: pm,
-  truck: truckTypes,
-  trailer: trailerTypes,
-  truckMake: truckMakes,
-  trailerMake: trailerMakes,
-  toll: toll,
-  hazardous: hazardous,
-  bank: banks,
-  dispatcher: dispatchers,
-  provider: providers,
-
-  // Load modal
-  dispatch: dispatches,
-  dispatchNew: newLoadModalRes,
-  dispatchNoBoard: noboard,
-
-  // Load split
-  splitDriver: splitDrivers,
-  splitTruck: splitTrucks,
-  splitTrailer: splitTrailers,
-
-  // Fuel stop transaction
-  fuelStopTransaction: fuelList,
-
-  // Subcontent
-  subcontent: subcontent,
-
-  commodity: generalCommodities,
-};