From 24c2c1c77d603b73d733efc0b4aca736f1fde400 Mon Sep 17 00:00:00 2001
From: Nino <n.righi@paragon-data.de>
Date: Tue, 11 Mar 2025 17:49:39 +0100
Subject: [PATCH] Order By Styling Update, Search Bar Clear Added

---
 .../return-order-by-list.component.html                  | 8 ++++----
 .../return-order-by-list.component.ts                    | 9 +++++++--
 .../search-bar-input/search-bar-input.component.html     | 4 ++++
 .../search-bar-input/search-bar-input.component.ts       | 6 +++++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.html b/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.html
index 1df3e4fe3..6ffac8c47 100644
--- a/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.html
+++ b/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.html
@@ -1,8 +1,8 @@
 <ui-toolbar>
   <span class="text-isa-neutral-600 isa-text-body-1-regular">Sortieren</span>
   <div class="flex-grow"></div>
-  <button uiTextButton>Belegdatum</button>
-  <button uiTextButton>Email</button>
-  <button uiTextButton>Name</button>
-  <button uiTextButton>PLZ</button>
+  <button (click)="onClick('Belegdatum')" uiTextButton>Belegdatum</button>
+  <button (click)="onClick('Email')" uiTextButton>Email</button>
+  <button (click)="onClick('Name')" uiTextButton>Name</button>
+  <button (click)="onClick('PLZ')" uiTextButton>PLZ</button>
 </ui-toolbar>
diff --git a/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.ts b/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.ts
index 95fd9594f..7a4bac8c2 100644
--- a/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.ts
+++ b/libs/feature/return/containers/src/lib/return-order-by-list/return-order-by-list.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TextButtonComponent } from '@isa/ui/buttons';
 import { ToolbarComponent } from '@isa/ui/toolbar';
 
 @Component({
@@ -7,6 +8,10 @@ import { ToolbarComponent } from '@isa/ui/toolbar';
   styleUrls: ['./return-order-by-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [ToolbarComponent],
+  imports: [ToolbarComponent, TextButtonComponent],
 })
-export class ReturnOrderByListComponent {}
+export class ReturnOrderByListComponent {
+  onClick(label: string) {
+    console.log('Order By click -', label);
+  }
+}
diff --git a/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html
index 682aaba89..2acbd48f3 100644
--- a/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html
+++ b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html
@@ -8,6 +8,10 @@
       (keydown.enter)="onSearch()"
     />
 
+    <ui-search-bar-clear
+      [class.pr-4]="appearance() === 'results'"
+    ></ui-search-bar-clear>
+
     @if (appearance() === 'main') {
       <button
         type="submit"
diff --git a/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts
index f76630769..007be7205 100644
--- a/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts
+++ b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts
@@ -7,7 +7,10 @@ import {
   output,
   ViewEncapsulation,
 } from '@angular/core';
-import { UiSearchBarComponent } from '@isa/ui/search-bar';
+import {
+  UiSearchBarClearComponent,
+  UiSearchBarComponent,
+} from '@isa/ui/search-bar';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { IconButtonColor, IconButtonComponent } from '@isa/ui/buttons';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
@@ -29,6 +32,7 @@ import { Platform } from '@angular/cdk/platform';
     NgIconComponent,
     ReactiveFormsModule,
     IconButtonComponent,
+    UiSearchBarClearComponent,
   ],
   host: {
     '[class]': "['filter-search-bar-input', appearanceClass()]",