carriera-intern 0.0.0 → 1.1.76

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

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

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

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

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

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

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