Merged PR 1856: #5144 #5141 #5099

- feat(oms-data-access, oms-return-details): add processed quantity helper and refactor item controls
- feat(ui-input-controls, oms-return-details): add disabled styling and logic for dropdowns
- feat(oms-return-details): improve dropdown accessibility and disabled state handling

Refs: #5144 #5141 #5099

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

@@ -12,6 +12,18 @@
   ng-icon {
     @apply size-6;
   }
+
+  &.disabled {
+    @apply text-isa-white bg-isa-neutral-400 border-isa-neutral-400 cursor-default;
+
+    &:hover {
+      @apply bg-isa-neutral-400 border-isa-neutral-400;
+    }
+
+    &:active {
+      @apply border-isa-neutral-400;
+    }
+  }
 }
 
 .ui-dropdown__accent-outline {

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

@@ -25,7 +25,7 @@ import { DropdownAppearance } from './dropdown.types';
   template: '<ng-content></ng-content>',
   host: {
     '[class]': '["ui-dropdown-option", activeClass(), selectedClass()]',
-    'role': 'option',
+    role: 'option',
     '[attr.aria-selected]': 'selected()',
     '[attr.tabindex]': '-1',
     '(click)': 'select()',
@@ -75,11 +75,16 @@ export class DropdownOptionComponent<T> implements Highlightable {
   imports: [NgIconComponent, CdkConnectedOverlay],
   providers: [
     provideIcons({ isaActionChevronUp, isaActionChevronDown }),
-    { provide: NG_VALUE_ACCESSOR, useExisting: DropdownButtonComponent, multi: true },
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: DropdownButtonComponent,
+      multi: true,
+    },
   ],
   host: {
-    '[class]': '["ui-dropdown", appearanceClass(), isOpenClass()]',
-    'role': 'combobox',
+    '[class]':
+      '["ui-dropdown", appearanceClass(), isOpenClass(), disabledClass()]',
+    role: 'combobox',
     'aria-haspopup': 'listbox',
     '[attr.id]': 'id()',
     '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
@@ -87,10 +92,13 @@ export class DropdownOptionComponent<T> implements Highlightable {
     '(keydown)': 'keyManger?.onKeydown($event)',
     '(keydown.enter)': 'select(keyManger.activeItem); close()',
     '(keydown.escape)': 'close()',
-    '(click)': 'isOpen() ? close() : open()',
+    '(click)':
+      'disabled() ? $event.stopImmediatePropagation() : (isOpen() ? close() : open())',
   },
 })
-export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterViewInit {
+export class DropdownButtonComponent<T>
+  implements ControlValueAccessor, AfterViewInit
+{
   readonly init = signal(false);
   private elementRef = inject(ElementRef);
 
@@ -102,6 +110,8 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
 
   appearanceClass = computed(() => `ui-dropdown__${this.appearance()}`);
 
+  disabledClass = computed(() => (this.disabled() ? 'disabled' : ''));
+
   id = input<string>();
 
   value = model<T>();
@@ -137,7 +147,9 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
 
   isOpenClass = computed(() => (this.isOpen() ? 'open' : ''));
 
-  isOpenIcon = computed(() => (this.isOpen() ? 'isaActionChevronUp' : 'isaActionChevronDown'));
+  isOpenIcon = computed(() =>
+    this.isOpen() ? 'isaActionChevronUp' : 'isaActionChevronDown',
+  );
 
   viewLabel = computed(() => {
     if (!this.showSelectedValue()) {
@@ -159,9 +171,9 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
         return;
       }
       this.keyManger?.destroy();
-      this.keyManger = new ActiveDescendantKeyManager<DropdownOptionComponent<T>>(
-        this.options(),
-      ).withWrap();
+      this.keyManger = new ActiveDescendantKeyManager<
+        DropdownOptionComponent<T>
+      >(this.options()).withWrap();
     });
   }
 
@@ -203,7 +215,10 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
     this.disabled.set(isDisabled);
   }
 
-  select(option: DropdownOptionComponent<T>, options: { emit: boolean } = { emit: true }) {
+  select(
+    option: DropdownOptionComponent<T>,
+    options: { emit: boolean } = { emit: true },
+  ) {
     this.value.set(option.value());
 
     if (options.emit) {