feat: enhance return process with product category selection and update dropdown functionality

libs/ui/input-controls/src/lib/dropdown/dropdown.component.html

@@ -6,9 +6,10 @@
   [cdkConnectedOverlayOrigin]="cdkOverlayOrigin"
   [cdkConnectedOverlayOpen]="isOpen()"
   [cdkConnectedOverlayOffsetY]="12"
+  [cdkConnectedOverlayMinWidth]="overlayMinWidth"
   (detach)="isOpen.set(false)"
 >
-  <ul [class]="['ui-dorpdown__options', optionAppearanceClass()]" role="listbox">
+  <ul [class]="['ui-dorpdown__options']" role="listbox">
     <ng-content></ng-content>
   </ul>
 </ng-template>

libs/ui/input-controls/src/lib/dropdown/dropdown.component.scss

@@ -35,6 +35,7 @@
   border-radius: 1.25rem;
   background: var(--Neutral-White, #fff);
   box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+  width: 100%;
 
   .ui-dropdown-option {
     display: flex;
@@ -48,6 +49,7 @@
     word-wrap: none;
     white-space: nowrap;
     cursor: pointer;
+    width: 100%;
 
     @apply isa-text-body-2-bold;
 
@@ -61,16 +63,4 @@
       @apply text-isa-accent-blue;
     }
   }
-
-  &.ui-dropdown-option__options-text {
-    .ui-dropdown-option {
-      align-items: start;
-    }
-  }
-
-  &.ui-dropdown-option__options-number {
-    .ui-dropdown-option {
-      align-items: center;
-    }
-  }
 }

libs/ui/input-controls/src/lib/dropdown/dropdown.component.ts

@@ -16,12 +16,10 @@ import {
 import { ControlValueAccessor } from '@angular/forms';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionChevronUp, isaActionChevronDown } from '@isa/icons';
-import { SelectionModel } from '@angular/cdk/collections';
 import { ActiveDescendantKeyManager, Highlightable } from '@angular/cdk/a11y';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { isEqual } from 'lodash';
-import { DropdownAppearance, DropdownOptionAppearance } from './dropdown.types';
+import { DropdownAppearance } from './dropdown.types';
 
 @Component({
   selector: 'ui-dropdown-option',
@@ -94,15 +92,16 @@ export class DropdownOptionComponent<T> implements Highlightable {
 })
 export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterViewInit {
   readonly init = signal(false);
+  private elementRef = inject(ElementRef);
+
+  get overlayMinWidth() {
+    return this.elementRef.nativeElement.offsetWidth;
+  }
 
   appearance = input<DropdownAppearance>(DropdownAppearance.Button);
 
   appearanceClass = computed(() => `ui-dropdown__${this.appearance()}`);
 
-  optionAppearance = input<DropdownOptionAppearance>(DropdownOptionAppearance.Text);
-
-  optionAppearanceClass = computed(() => `ui-dropdown-option__options-${this.optionAppearance()}`);
-
   id = input<string>();
 
   value = model<T>();
@@ -117,13 +116,13 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
 
   cdkOverlayOrigin = inject(CdkOverlayOrigin, { self: true });
 
-  private selectionModel = new SelectionModel<DropdownOptionComponent<T>>(false);
+  selectedOption = computed(() => {
+    const options = this.options();
+    if (!options) {
+      return undefined;
+    }
 
-  selectionChanged = toSignal(this.selectionModel.changed);
-
-  selected = computed(() => {
-    this.selectionChanged();
-    return this.selectionModel.selected[0];
+    return options.find((option) => option.value() === this.value());
   });
 
   private keyManger?: ActiveDescendantKeyManager<DropdownOptionComponent<T>>;
@@ -139,11 +138,13 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
   isOpenIcon = computed(() => (this.isOpen() ? 'isaActionChevronUp' : 'isaActionChevronDown'));
 
   viewLabel = computed(() => {
-    if (!this.selected()) {
-      return this.label();
+    const selectedOption = this.selectedOption();
+
+    if (!selectedOption) {
+      return this.label() ?? this.value();
     }
 
-    return this.selected().getLabel() ?? this.value();
+    return selectedOption.getLabel();
   });
 
   constructor() {
@@ -159,7 +160,7 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
   }
 
   open() {
-    const selected = this.selected();
+    const selected = this.selectedOption();
     if (selected) {
       this.keyManger?.setActiveItem(selected);
     } else {
@@ -197,8 +198,8 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
   }
 
   select(option: DropdownOptionComponent<T>, options: { emit: boolean } = { emit: true }) {
-    this.selectionModel.select(option);
     this.value.set(option.value());
+
     if (options.emit) {
       this.onChange?.(option.value());
     }

libs/ui/input-controls/src/lib/dropdown/dropdown.types.ts

@@ -3,11 +3,3 @@ export const DropdownAppearance = {
 } as const;
 
 export type DropdownAppearance = (typeof DropdownAppearance)[keyof typeof DropdownAppearance];
-
-export const DropdownOptionAppearance = {
-  Text: 'text',
-  Number: 'number',
-} as const;
-
-export type DropdownOptionAppearance =
-  (typeof DropdownOptionAppearance)[keyof typeof DropdownOptionAppearance];