carriera-intern 0.0.0

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,190 @@
+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

@@ -0,0 +1,80 @@
+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,
+};