carriera-intern 0.0.0

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

@@ -0,0 +1,409 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+// Components
+import { DispatchDropdownComponent } from './dispatch-dropdown.component';
+
+// Mock Data
+import parkingLots from './mock/parking-data.json';
+
+const meta: Meta<DispatchDropdownComponent> = {
+  title: 'Components/DispatchDropdown',
+  component: DispatchDropdownComponent,
+  argTypes: {
+    hasNoRemoveButton: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    isLocked: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    disabledTooltip: {
+      control: 'text',
+      defaultValue: '',
+    },
+    config: {
+      control: 'object',
+      defaultValue: {
+        summary: {},
+      },
+    },
+  },
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    config: {
+      placeholder: 'Unit No.',
+    },
+  },
+  globals: {
+    backgrounds: { value: 'table' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DispatchDropdownComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    data: null,
+
+    config: {
+      placeholder: 'Unit No.',
+      optionLabel: 'unitNumber',
+    },
+    options: [
+      { id: 1, unitNumber: 'TR-1234' },
+      { id: 2, unitNumber: 'TR-5678' },
+      { id: 3, unitNumber: 'TR-9012' },
+      { id: 4, unitNumber: 'TR-3456' },
+      { id: 5, unitNumber: 'TR-7890' },
+      { id: 6, unitNumber: 'TR-1111' },
+      { id: 7, unitNumber: 'TR-2222' },
+      { id: 8, unitNumber: 'TR-3333' },
+      { id: 9, unitNumber: 'TR-4444' },
+      { id: 10, unitNumber: 'TR-5555' },
+      { id: 11, unitNumber: 'TR-6666' },
+      { id: 12, unitNumber: 'TR-7777' },
+      { id: 13, unitNumber: 'TR-8888' },
+      { id: 14, unitNumber: 'TR-9999' },
+      { id: 15, unitNumber: 'TR-0000' },
+    ],
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="display: flex; gap: 2px; flex-direction: column;">
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                  <cai-dispatch-dropdown [hasNoRemoveButton]="hasNoRemoveButton" [isLocked]="isLocked" [data]="data" [options]="options" [config]="config">
+                  </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+    </div>
+    `,
+  }),
+};
+
+export const AutoPlacementTest: Story = {
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    data: null,
+    config: {
+      placeholder: 'Unit No.',
+      optionLabel: 'unitNumber',
+    },
+    options: [
+      { id: 1, unitNumber: 'TR-1234' },
+      { id: 2, unitNumber: 'TR-5678' },
+      { id: 3, unitNumber: 'TR-9012' },
+      { id: 4, unitNumber: 'TR-3456' },
+      { id: 5, unitNumber: 'TR-7890' },
+      { id: 6, unitNumber: 'TR-1111' },
+      { id: 7, unitNumber: 'TR-2222' },
+      { id: 8, unitNumber: 'TR-3333' },
+      { id: 9, unitNumber: 'TR-4444' },
+      { id: 10, unitNumber: 'TR-5555' },
+    ],
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #e0e0e0; padding: 48px; box-sizing: border-box;">
+      <!-- Top section -->
+      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;">
+        <div style="padding: 12px; background: #fff; border-radius: 6px;">
+          <p style="margin: 0 0 8px 0; font-weight: 600; color: #333;">Drop down</p>
+          <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
+                <cai-dispatch-dropdown [hasNoRemoveButton]="hasNoRemoveButton" [isLocked]="isLocked" [data]="data" [options]="options" [config]="config">
+                </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom section -->
+      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;">
+        <div style="padding: 12px; background: #fff; border-radius: 6px;">
+          <p style="margin: 0 0 8px 0; font-weight: 600; color: #333;">Drop up</p>
+          <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
+                <cai-dispatch-dropdown [hasNoRemoveButton]="hasNoRemoveButton" [isLocked]="isLocked" [data]="data" [options]="options" [config]="config">
+                </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    `,
+  }),
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const WithTemplate: Story = {
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    isDisabled: true,
+    disabledTooltip: 'Active Load',
+    data: {
+      unitNumber: 'TR-1234',
+      driver: 'John Doe',
+      status: 'Active',
+    },
+    options: [
+      { id: 1, name: 'TR-1234' },
+      { id: 2, name: 'TR-5678' },
+      { id: 3, name: 'TR-9012' },
+      { id: 4, name: 'TR-3456' },
+      { id: 5, name: 'TR-7890' },
+    ],
+    config: {
+      placeholder: 'Unit No.',
+      optionLabel: 'unitNumber',
+    },
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <ng-template #contentTpl let-data>
+      <div style="display: flex; align-items: center; gap: 8px; padding: 4px 8px; height: 100%; width: 100%; background-color: red;">
+        <div style="font-weight: 600; color: #333;">{{data.unitNumber}}</div>    
+      </div>
+    </ng-template>
+
+    <div style="display: flex; gap: 2px; flex-direction: column;">
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
+                  <cai-dispatch-dropdown 
+                    [hasNoRemoveButton]="hasNoRemoveButton" 
+                    [isLocked]="isLocked" 
+                    [isDisabled]="isDisabled"
+                    [disabledTooltip]="disabledTooltip"
+                    [data]="data" 
+                    [options]="options" 
+                    [config]="config"
+                    [contentTemplate]="contentTpl"
+                  >
+                  </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+        </div>
+    </div>
+    `,
+  }),
+};
+
+export const WithNoContentTemplate: Story = {
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    data: null,
+    config: {
+      placeholder: 'Unit No.',
+      optionLabel: 'unitNumber',
+    },
+    options: [
+      { id: 1, unitNumber: 'TR-1234' },
+      { id: 2, unitNumber: 'TR-5678' },
+      { id: 3, unitNumber: 'TR-9012' },
+      { id: 4, unitNumber: 'TR-3456' },
+      { id: 5, unitNumber: 'TR-7890' },
+      { id: 6, unitNumber: 'TR-1111' },
+      { id: 7, unitNumber: 'TR-2222' },
+      { id: 8, unitNumber: 'TR-3333' },
+      { id: 9, unitNumber: 'TR-4444' },
+      { id: 10, unitNumber: 'TR-5555' },
+      { id: 11, unitNumber: 'TR-6666' },
+      { id: 12, unitNumber: 'TR-7777' },
+      { id: 13, unitNumber: 'TR-8888' },
+      { id: 14, unitNumber: 'TR-9999' },
+      { id: 15, unitNumber: 'TR-0000' },
+    ],
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="display: flex; gap: 2px; flex-direction: column;">
+      <ng-template #noContentTpl>
+        <div>Hi</div>
+      </ng-template>
+    
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                  <cai-dispatch-dropdown [hasNoRemoveButton]="hasNoRemoveButton" [isLocked]="isLocked" [data]="data" [options]="options" [config]="config" [noContentTemplate]="noContentTpl">
+                  </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+    </div>
+    `,
+  }),
+};
+
+export const WithGroupedOptions: Story = {
+  args: {
+    hasNoRemoveButton: false,
+    isLocked: false,
+    data: null,
+
+    config: {
+      placeholder: 'Slot',
+      optionLabel: 'slotNumber',
+      groupLabel: 'name',
+      groupOptions: 'parkingSlots',
+      isGrouped: true,
+    },
+    options: parkingLots.parkingLots,
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="display: flex; gap: 2px; flex-direction: column;">
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; position: relative;">
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                  <cai-dispatch-dropdown [hasNoRemoveButton]="hasNoRemoveButton" [isLocked]="isLocked" [data]="data" [options]="options" [config]="config">
+                  </cai-dispatch-dropdown>
+              </div>
+              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
+            </div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+        <div style="display: flex; gap: 2px;">
+            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 120px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
+
+        </div>
+    </div>
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/helpers/dispatch-dropdown.helper.ts

@@ -0,0 +1,248 @@
+// Interfaces
+import {
+  IDispatchDropdownConfig,
+  IDispatchDropdownOption,
+} from '../interfaces';
+
+export class DispatchDropdownHelper {
+  /**
+   * Calculate the max height for grouped options dropdown menu
+   */
+  static calculateGroupMaxHeight(
+    groups: Array<{
+      highlightedOptions?: unknown[];
+      isCollapsed?: boolean;
+    }>,
+    hasNoAddNew?: boolean,
+  ): string {
+    const hasNoAddNewFlag = hasNoAddNew ?? false;
+
+    // Calculate total count for grouped options
+    const groupedCount = groups.length
+      ? groups
+          .filter((group) => !group.isCollapsed)
+          .reduce((total, group) => {
+            const count = group.highlightedOptions?.length
+              ? group.highlightedOptions.length
+              : hasNoAddNewFlag
+                ? 1
+                : 2;
+            return total + count;
+          }, 0)
+      : 0;
+
+    const height =
+      6 +
+      (groups.length ? groups.length * 34 - 4 : hasNoAddNewFlag ? 30 : 60) +
+      groupedCount * 30;
+
+    return height > 244 ? '244px' : `${height}px`;
+  }
+
+  /**
+   * Calculate the max height for regular options dropdown menu
+   */
+  static calculateMaxHeight(
+    optionsLength: number,
+    hasNoAddNew?: boolean,
+  ): string {
+    const hasNoAddNewFlag = hasNoAddNew ?? false;
+    const height = 6 + (optionsLength || (hasNoAddNewFlag ? 1 : 2)) * 30;
+    return height > 244 ? '244px' : `${height}px`;
+  }
+
+  /**
+   * Filter grouped options based on search value
+   * Searches both group labels and option labels
+   * Never removes groups - instead sorts by relevancy
+   */
+  static filterGroupedOptions(
+    options: IDispatchDropdownOption[],
+    searchValue: string,
+    config: IDispatchDropdownConfig,
+  ): IDispatchDropdownOption[] {
+    const groupLabel = config.groupLabel ?? 'name';
+    const groupOptionsKey = config.groupOptions ?? 'options';
+    const optionLabel = config.optionLabel ?? 'name';
+
+    if (!searchValue) return options;
+
+    const lowerSearch = searchValue.toLowerCase();
+
+    // Separate groups into relevant and irrelevant
+    const relevantGroups: IDispatchDropdownOption[] = [];
+    const irrelevantGroups: IDispatchDropdownOption[] = [];
+
+    options.forEach((group) => {
+      const groupName = group[groupLabel] ?? '';
+      const groupOptions = group[groupOptionsKey] ?? [];
+
+      // Check if group name matches
+      const groupMatches = groupName.toLowerCase().includes(lowerSearch);
+
+      // If group matches, include all options and mark as relevant
+      if (groupMatches) {
+        relevantGroups.push({
+          ...group,
+          _isRelevant: true,
+        });
+        return;
+      }
+
+      // Filter options within the group
+      const filteredGroupOptions = groupOptions.filter(
+        (option: IDispatchDropdownOption) => {
+          const optionText = String(option[optionLabel] ?? '');
+          return optionText.toLowerCase().includes(lowerSearch);
+        },
+      );
+
+      // Group is relevant if it has matching options
+      if (filteredGroupOptions.length > 0) {
+        relevantGroups.push({
+          ...group,
+          [groupOptionsKey]: filteredGroupOptions,
+          _isRelevant: true,
+        });
+      } else {
+        // Keep the group but mark as irrelevant
+        irrelevantGroups.push({
+          ...group,
+          _isRelevant: false,
+        });
+      }
+    });
+
+    // Return relevant groups first, then irrelevant groups
+    return [...relevantGroups, ...irrelevantGroups];
+  }
+
+  /**
+   * Process filtered options and add highlighting for grouped display
+   */
+  static processGroupedOptionsWithHighlighting(
+    options: IDispatchDropdownOption[],
+    searchValue: string,
+    collapsedGroups: string[],
+    config: IDispatchDropdownConfig,
+  ) {
+    const groupLabel = config.groupLabel ?? 'name';
+    const groupOptionsKey = config.groupOptions ?? 'options';
+    const optionLabel = config.optionLabel ?? 'name';
+
+    const escapedSearchValue = searchValue
+      ? searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      : '';
+    const regex = escapedSearchValue
+      ? new RegExp(escapedSearchValue, 'gi')
+      : null;
+
+    return options.map((group) => {
+      const groupName = group[groupLabel] ?? '';
+      const groupOptions = group[groupOptionsKey] ?? [];
+      const isRelevant = group['_isRelevant'] ?? true;
+
+      // Highlight group name if it matches
+      const highlightedGroupName =
+        regex && groupName.toLowerCase().includes(searchValue.toLowerCase())
+          ? groupName.replace(regex, '<span class="cai-highlight">$&</span>')
+          : groupName;
+
+      // Highlight options
+      const highlightedOptions = groupOptions.map(
+        (option: IDispatchDropdownOption) => {
+          const text = String(option[optionLabel] ?? '');
+          const highlighted =
+            regex && text.toLowerCase().includes(searchValue.toLowerCase())
+              ? text.replace(regex, '<span class="cai-highlight">$&</span>')
+              : text;
+
+          return {
+            ...option,
+            highlighted,
+            _group: group, // Reference to parent group
+          };
+        },
+      );
+
+      // Use the collapsedGroups parameter for collapse state
+      const isCollapsed = groupName
+        ? collapsedGroups.includes(groupName)
+        : false;
+
+      return {
+        ...group,
+        groupName,
+        highlightedGroupName,
+        highlightedOptions,
+        isCollapsed,
+        isRelevant, // Pass through for potential UI use
+      };
+    });
+  }
+
+  /**
+   * Calculate which groups should be collapsed based on search relevancy
+   * Returns the updated collapsedGroups array
+   */
+  static calculateCollapsedGroupsForSearch(
+    options: IDispatchDropdownOption[],
+    searchValue: string,
+    config: IDispatchDropdownConfig,
+  ): string[] {
+    const groupLabel = config.groupLabel ?? 'name';
+    const isSearching = searchValue.trim().length > 0;
+
+    if (!isSearching) {
+      return [];
+    }
+
+    const collapsedGroups: string[] = [];
+
+    options.forEach((group) => {
+      const groupName = group[groupLabel] ?? '';
+      const isRelevant = group['_isRelevant'] ?? true;
+
+      // Collapse irrelevant groups
+      if (!isRelevant && groupName) {
+        collapsedGroups.push(groupName);
+      }
+    });
+
+    return collapsedGroups;
+  }
+
+  /**
+   * Add highlighting to options based on search value
+   */
+  static highlightOptions(
+    options: IDispatchDropdownOption[],
+    searchValue: string,
+    optionLabel: string,
+  ) {
+    if (!searchValue || searchValue.trim() === '') {
+      return options.map((option) => ({
+        ...option,
+        highlighted: option[optionLabel],
+      }));
+    }
+
+    const escapedSearchValue = searchValue.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      '\\$&',
+    );
+    const regex = new RegExp(escapedSearchValue, 'gi');
+
+    return options.map((option) => {
+      const text = option[optionLabel];
+      const highlighted = text.toLowerCase().includes(searchValue.toLowerCase())
+        ? text.replace(regex, '<span class="cai-highlight">$&</span>')
+        : text;
+
+      return {
+        ...option,
+        highlighted,
+      };
+    });
+  }
+}

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/interfaces/dispatch-dropdown-config.interface.ts

@@ -0,0 +1,10 @@
+export interface IDispatchDropdownConfig {
+  hasPagination?: boolean;
+  placeholder?: string;
+  hasNoAdd?: boolean;
+  hasNoAddNew?: boolean;
+  optionLabel?: string; // option label (key)
+  isGrouped?: boolean;
+  groupLabel?: string; // group label (key)
+  groupOptions?: string; // key for the options array within each group (e.g., "parkingSlots")
+}

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/interfaces/dispatch-dropdown-option.interface.ts

@@ -0,0 +1,4 @@
+export interface IDispatchDropdownOption {
+  id?: number;
+  [key: string]: any;
+}

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './dispatch-dropdown-option.interface';
+export * from './dispatch-dropdown-config.interface';