fix: fix search header layout

libs/angular-accelerator/src/lib/components/page-header/page-header.component.html

@@ -8,7 +8,7 @@
       [attr.manual]="manualBreadcrumbs"
     ></p-breadcrumb>
   </ng-container>
-  <div class="title-bar flex flex-row md:justify-content-between p-2 md:p-3">
+  <div class="title-bar flex flex-row md:justify-content-between p-3">
     <div class="title-wrap">
       <div class="figure flex h-2rem w-2rem md:h-3rem md:w-3rem" *ngIf="showFigure">
         <div #previewImage class="figure-image absolute top-0 left-0 right-0 bottom-0">

libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss

@@ -1,10 +1,6 @@
 :host(.p-button-label) {
   font-weight: 400;
 }
-:host ::ng-deep .action-button {
-  padding: 0.5rem 0.5rem;
-  font-weight: 400;
-}
 .onecx-page-header {
   display: flex;
   flex-flow: column;
@@ -76,9 +72,6 @@
       gap: 0.5rem;
       align-items: center;
       justify-content: space-between;
-      button {
-        padding: 0.5rem;
-      }
     }
   }
   .object-panel {

libs/angular-accelerator/src/lib/components/search-header/search-header.component.html

@@ -15,33 +15,35 @@
   <ng-template #additionalToolbarContent>
     <ng-container *ngIf="_additionalToolbarContent" [ngTemplateOutlet]="_additionalToolbarContent"></ng-container>
   </ng-template>
-  <div class="search-criteria-container">
-    <div #searchParameterFields>
-      <ng-content></ng-content>
-      <div class="search-criteria-buttons">
-        <p-button
-          id="resetButton"
-          *ngIf="resetted.observed"
-          (onClick)="onResetClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}"
-          icon="pi pi-eraser"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}"
-          [disabled]="resetButtonDisabled"
-        >
-        </p-button>
-
-        <p-button
-          id="searchButton"
-          (onClick)="onSearchClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}"
-          icon="pi pi-search"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
-          [disabled]="searchButtonDisabled"
-        >
-        </p-button>
+  <div class="flex row-gap-3 column-gap-6 flex-wrap align-items-center">
+    <div>
+      <div #searchParameterFields>
+        <ng-content></ng-content>
       </div>
     </div>
+    <div class="flex flex-wrap gap-2">
+      <p-button
+        id="resetButton"
+        *ngIf="resetted.observed"
+        (onClick)="onResetClicked()"
+        label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}"
+        icon="pi pi-eraser"
+        [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate"
+        title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}"
+        [disabled]="resetButtonDisabled"
+      >
+      </p-button>
+
+      <p-button
+        id="searchButton"
+        (onClick)="onSearchClicked()"
+        label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}"
+        icon="pi pi-search"
+        [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
+        title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
+        [disabled]="searchButtonDisabled"
+      >
+      </p-button>
+    </div>
   </div>
 </ocx-page-header>

libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts

@@ -21,7 +21,6 @@ import { SearchConfigInfo } from '../../model/search-config-info'
 @Component({
   selector: 'ocx-search-header',
   templateUrl: './search-header.component.html',
-  styleUrls: ['./search-header.component.scss'],
 })
 export class SearchHeaderComponent implements AfterViewInit {
   @Input() searchConfigs: SearchConfigInfo[] | undefined

libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts

@@ -0,0 +1,126 @@
+import { importProvidersFrom } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { RouterModule } from '@angular/router'
+import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { BreadcrumbModule } from 'primeng/breadcrumb'
+import { ButtonModule } from 'primeng/button'
+import { DropdownModule } from 'primeng/dropdown'
+import { InputTextModule } from 'primeng/inputtext'
+import { MenuModule } from 'primeng/menu'
+import { SkeletonModule } from 'primeng/skeleton'
+import { DynamicPipe } from '../../pipes/dynamic.pipe'
+import { StorybookTranslateModule } from '../../storybook-translate.module'
+import { PageHeaderComponent } from '../page-header/page-header.component'
+import { SearchConfigComponent } from '../search-config/search-config.component'
+import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
+import { SearchHeaderComponent } from './search-header.component'
+
+export default {
+  title: 'SearchHeaderComponent',
+  component: SearchHeaderComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+        importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
+      ],
+    }),
+    moduleMetadata({
+      declarations: [SearchHeaderComponent, DynamicPipe, PageHeaderComponent, SearchConfigComponent],
+      imports: [
+        MenuModule,
+        InputTextModule,
+        BreadcrumbModule,
+        ButtonModule,
+        DropdownModule,
+        ReactiveFormsModule,
+        SkeletonModule,
+        StorybookTranslateModule,
+        StorybookBreadcrumbModule.init([
+          { label: 'Level 1', routerLink: ['/something'] },
+          { label: 'Level 2', url: '/' },
+        ]),
+      ],
+    }),
+  ],
+} as Meta<SearchHeaderComponent>
+
+const Template: StoryFn<SearchHeaderComponent> = (args) => ({
+  props: args,
+})
+
+export const Basic = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+  },
+}
+
+const BasicSearchHeader: StoryFn<SearchHeaderComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-search-header [header]="header" (resetted)="resetted">
+        <form>
+          <div class="flex flex-wrap gap-3">
+            <span class="p-float-label">
+                <input
+                    id="name"
+                    pInputText
+                    type="text"
+                    class="w-18rem"
+                    [pTooltip]="'Name'"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                />
+                <label for="name" style="white-space: nowrap">
+                    Name
+                </label>
+            </span>
+            <span class="p-float-label">
+                <input
+                    id="name"
+                    pInputText
+                    type="text"
+                    class="w-18rem"
+                    [pTooltip]="'Name'"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                />
+                <label for="name" style="white-space: nowrap">
+                    Name
+                </label>
+            </span>
+            <span class="p-float-label">
+            <input
+                id="name"
+                pInputText
+                type="text"
+                class="w-18rem"
+                [pTooltip]="'Name'"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+            />
+            <label for="name" style="white-space: nowrap">
+                Name
+            </label>
+        </span>
+          </div>
+        </form>
+    </ocx-search-header>
+    `,
+})
+
+export const WithCustomTemplates = {
+    render: BasicSearchHeader,
+    argTypes: {
+        resetted: { action: 'resetted' },
+      },
+    args: {
+        header: 'My title',
+        resetted: ($event: any) => console.log($event),
+      },
+  }