feat: Implement filter input mapping and related schemas

- Added filter input mapping functionality to handle different input types (Text, Checkbox, DateRange).
- Created schemas for various filter inputs including BaseFilterInput, CheckboxFilterInput, DateRangeFilterInput, and TextFilterInput.
- Developed filter mapping logic to aggregate filter groups, inputs, and order by options.
- Implemented unit tests for filter mapping, input mapping, and order by option mapping to ensure correctness.
- Introduced a dropdown component for selecting order by options with appropriate styling and functionality.

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

@@ -1,4 +1,4 @@
-.ui-dropdown.ui-dropdown__button {
+.ui-dropdown {
   display: inline-flex;
   height: 3rem;
   padding: 0rem 1.5rem;
@@ -6,13 +6,16 @@
   gap: 0.5rem;
   flex-shrink: 0;
   cursor: pointer;
-
   border-radius: 3.125rem;
-  @apply text-isa-accent-blue isa-text-body-2-bold border border-solid border-isa-accent-blue;
+  justify-content: space-between;
 
   ng-icon {
     @apply size-6;
   }
+}
+
+.ui-dropdown__accent-outline {
+  @apply text-isa-accent-blue isa-text-body-2-bold border border-solid border-isa-accent-blue;
 
   &:hover {
     @apply bg-isa-neutral-100 border-isa-secondary-700;
@@ -27,6 +30,22 @@
   }
 }
 
+.ui-dropdown__grey {
+  @apply text-isa-neutral-600 isa-text-body-2-bold bg-isa-neutral-400 border border-solid border-isa-neutral-400;
+
+  &:hover {
+    @apply bg-isa-neutral-500;
+  }
+
+  &:active {
+    @apply border-isa-accent-blue text-isa-accent-blue bg-isa-white;
+  }
+
+  &.open {
+    @apply border-isa-neutral-900 text-isa-neutral-900;
+  }
+}
+
 .ui-dropdown__options {
   // Fixed typo from ui-dorpdown__options
   display: inline-flex;
@@ -43,10 +62,11 @@
     width: 10rem;
     height: 3rem;
     padding: 0rem 1.5rem;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     gap: 0.625rem;
-    border-radius: 0.5rem;
+    border-radius: 1rem;
     word-wrap: none;
     white-space: nowrap;
     cursor: pointer;

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

@@ -10,10 +10,9 @@ import {
   input,
   model,
   signal,
-  ViewEncapsulation,
 } from '@angular/core';
 
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionChevronUp, isaActionChevronDown } from '@isa/icons';
 import { ActiveDescendantKeyManager, Highlightable } from '@angular/cdk/a11y';
@@ -74,7 +73,10 @@ export class DropdownOptionComponent<T> implements Highlightable {
   changeDetection: ChangeDetectionStrategy.OnPush,
   hostDirectives: [CdkOverlayOrigin],
   imports: [NgIconComponent, CdkConnectedOverlay],
-  providers: [provideIcons({ isaActionChevronUp, isaActionChevronDown })],
+  providers: [
+    provideIcons({ isaActionChevronUp, isaActionChevronDown }),
+    { provide: NG_VALUE_ACCESSOR, useExisting: DropdownButtonComponent, multi: true },
+  ],
   host: {
     '[class]': '["ui-dropdown", appearanceClass(), isOpenClass()]',
     'role': 'combobox',
@@ -96,7 +98,7 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
     return this.elementRef.nativeElement.offsetWidth;
   }
 
-  appearance = input<DropdownAppearance>(DropdownAppearance.Button);
+  appearance = input<DropdownAppearance>(DropdownAppearance.AccentOutline);
 
   appearanceClass = computed(() => `ui-dropdown__${this.appearance()}`);
 
@@ -110,6 +112,8 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
 
   disabled = model<boolean>(false);
 
+  showSelectedValue = input<boolean>(true);
+
   options = contentChildren(DropdownOptionComponent);
 
   cdkOverlayOrigin = inject(CdkOverlayOrigin, { self: true });
@@ -136,6 +140,10 @@ export class DropdownButtonComponent<T> implements ControlValueAccessor, AfterVi
   isOpenIcon = computed(() => (this.isOpen() ? 'isaActionChevronUp' : 'isaActionChevronDown'));
 
   viewLabel = computed(() => {
+    if (!this.showSelectedValue()) {
+      return this.label() ?? this.value();
+    }
+
     const selectedOption = this.selectedOption();
 
     if (!selectedOption) {

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

@@ -1,5 +1,6 @@
 export const DropdownAppearance = {
-  Button: 'button',
+  AccentOutline: 'accent-outline',
+  Grey: 'grey',
 } as const;
 
 export type DropdownAppearance = (typeof DropdownAppearance)[keyof typeof DropdownAppearance];