Merged PR 1867: #4769 Remi 3.0 - Remission – Scannen und Suchen

- feat(remission-list): Zwischencommit
- feat(ui-input-controls): Adjusted Dropdown Styling and Added Droption Option Disable Class, Refs: #4769
- feat(remission): implement remission list feature shell and category select
- Merge branch 'develop' into feature/4769-Remission-Liste

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

@@ -49,12 +49,13 @@
     @apply bg-isa-neutral-500;
   }
 
-  &:active {
-    @apply border-isa-accent-blue text-isa-accent-blue bg-isa-white;
+  &:active,
+  &.has-value {
+    @apply border-isa-accent-blue text-isa-accent-blue;
   }
 
   &.open {
-    @apply border-isa-neutral-900 text-isa-neutral-900;
+    @apply border-isa-neutral-900 text-isa-neutral-900 bg-isa-white;
   }
 }
 
@@ -95,5 +96,15 @@
     &.selected {
       @apply text-isa-accent-blue;
     }
+
+    &.disabled {
+      @apply text-isa-neutral-400;
+
+      &.active,
+      &:focus,
+      &:hover {
+        @apply bg-isa-white;
+      }
+    }
   }
 }

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

@@ -7,6 +7,7 @@ import {
   effect,
   ElementRef,
   inject,
+  Input,
   input,
   model,
   signal,
@@ -24,8 +25,9 @@ import { DropdownAppearance } from './dropdown.types';
   selector: 'ui-dropdown-option',
   template: '<ng-content></ng-content>',
   host: {
-    '[class]': '["ui-dropdown-option", activeClass(), selectedClass()]',
-    role: 'option',
+    '[class]':
+      '["ui-dropdown-option", activeClass(), selectedClass(), disabledClass()]',
+    'role': 'option',
     '[attr.aria-selected]': 'selected()',
     '[attr.tabindex]': '-1',
     '(click)': 'select()',
@@ -37,6 +39,19 @@ export class DropdownOptionComponent<T> implements Highlightable {
 
   active = signal(false);
 
+  readonly _disabled = signal<boolean>(false);
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled();
+  }
+
+  set disabled(value: boolean) {
+    this._disabled.set(value);
+  }
+
+  disabledClass = computed(() => (this.disabled ? 'disabled' : ''));
+
   activeClass = computed(() => (this.active() ? 'active' : ''));
 
   setActiveStyles(): void {
@@ -62,6 +77,9 @@ export class DropdownOptionComponent<T> implements Highlightable {
   value = input.required<T>();
 
   select() {
+    if (this.disabled) {
+      return;
+    }
     this.host.select(this);
     this.host.close();
   }
@@ -83,8 +101,8 @@ export class DropdownOptionComponent<T> implements Highlightable {
   ],
   host: {
     '[class]':
-      '["ui-dropdown", appearanceClass(), isOpenClass(), disabledClass()]',
-    role: 'combobox',
+      '["ui-dropdown", appearanceClass(), isOpenClass(), disabledClass(), valueClass()]',
+    'role': 'combobox',
     'aria-haspopup': 'listbox',
     '[attr.id]': 'id()',
     '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
@@ -112,6 +130,8 @@ export class DropdownButtonComponent<T>
 
   disabledClass = computed(() => (this.disabled() ? 'disabled' : ''));
 
+  valueClass = computed(() => (this.value() ? 'has-value' : ''));
+
   id = input<string>();
 
   value = model<T>();
@@ -173,7 +193,9 @@ export class DropdownButtonComponent<T>
       this.keyManger?.destroy();
       this.keyManger = new ActiveDescendantKeyManager<
         DropdownOptionComponent<T>
-      >(this.options()).withWrap();
+      >(this.options())
+        .withWrap()
+        .skipPredicate((option) => option.disabled);
     });
   }