fix page header width & add new search position

src/assets/styles/common-layout.scss

@@ -31,7 +31,6 @@ redaction-root {
 section.settings {
     display: flex;
 
-    .page-header,
     .content-inner {
         width: calc(100vw - 200px);
     }
@@ -43,7 +42,7 @@ section.settings {
     align-items: center;
     padding: 0 24px;
     height: 50px;
-    width: 100vw;
+    width: 100%;
     box-sizing: border-box;
     background-color: var(--iqser-background);
     border-bottom: 1px solid var(--iqser-separator);
@@ -104,7 +103,6 @@ section.settings {
 .content-inner {
     display: flex;
     flex-direction: row;
-    position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;

src/lib/listing/page-header/models/search-positions.type.ts

@@ -1,6 +1,7 @@
 export const SearchPositions = {
     beforeFilters: 'beforeFilters',
     afterFilters: 'afterFilters',
+    withActions: 'withActions',
 } as const;
 
 export type SearchPosition = keyof typeof SearchPositions;

src/lib/listing/page-header/page-header.component.html

@@ -28,7 +28,7 @@
 
         <div
             (click)="resetFilters()"
-            *ngIf="showResetFilters$ | async"
+            *ngIf="!hideResetButton && (showResetFilters$ | async) === true"
             [iqserHelpMode]="'filter_' + helpModeKey + '_list'"
             class="reset-filters"
             translate="reset-filters"
@@ -36,6 +36,8 @@
     </div>
 
     <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
+        <ng-container *ngIf="searchPosition === searchPositions.withActions" [ngTemplateOutlet]="searchBar"></ng-container>
+
         <ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
 
         <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">

src/lib/listing/page-header/page-header.component.scss

@@ -0,0 +1,3 @@
+.actions iqser-input-with-action {
+    margin-right: 16px
+}

src/lib/listing/page-header/page-header.component.ts

@@ -20,6 +20,7 @@ export class PageHeaderComponent<T extends IListable> {
 
     @Input() pageLabel?: string;
     @Input() showCloseButton = false;
+    @Input() hideResetButton = false;
     @Input() actionConfigs?: readonly ActionConfig[];
     @Input() buttonConfigs?: readonly ButtonConfig[];
     @Input() viewModeSelection?: TemplateRef<unknown>;
@@ -30,11 +31,15 @@ export class PageHeaderComponent<T extends IListable> {
     @Output() readonly closeAction = new EventEmitter();
 
     readonly filters$ = this.filterService?.filterGroups$.pipe(filterEach(f => !!f.icon));
-    readonly showResetFilters$ = this._showResetFilters$;
+    readonly showResetFilters$ = this.#showResetFilters$;
 
     constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService<T>) {}
 
-    get _showResetFilters$(): Observable<boolean> {
+    get filterHelpModeKey() {
+        return this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
+    }
+
+    get #showResetFilters$(): Observable<boolean> {
         if (!this.filterService) {
             return of(false);
         }
@@ -45,10 +50,6 @@ export class PageHeaderComponent<T extends IListable> {
         );
     }
 
-    get filterHelpModeKey() {
-        return this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
-    }
-
     resetFilters(): void {
         this.filterService.reset();
         this.searchService.reset();