Merge branch 'master' into VM/RED-2614

src/assets/styles/_common-mixins.scss

@@ -46,3 +46,13 @@
 @mixin drop-shadow {
     box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover);
 }
+
+@mixin clear-btn {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}

src/assets/styles/common-tabs.scss

@@ -1,4 +1,8 @@
+@use 'common-mixins' as mixins;
+
 .red-tab {
+    @include mixins.clear-btn;
+
     &:not(:last-child) {
         margin-right: 2px;
     }
@@ -10,7 +14,7 @@
     transition: background-color 0.2s;
     cursor: pointer;
 
-    &:not(.disabled):not(.active):hover {
+    &:not([disabled]):not(.active):hover {
         background-color: var(--iqser-grey-6);
     }
 
@@ -20,7 +24,7 @@
         color: var(--iqser-primary);
     }
 
-    &.disabled {
+    &[disabled] {
         color: rgba(var(--iqser-accent-rgb), 0.3);
         cursor: not-allowed;
     }

src/lib/listing/page-header/models/action-config.model.ts

@@ -1,6 +1,8 @@
 import { BaseHeaderConfig } from './base-config.model';
+import { Observable } from 'rxjs';
 
 export interface ActionConfig extends BaseHeaderConfig {
     readonly action: ($event: MouseEvent) => void;
     readonly helpModeKey?: string;
+    readonly disabled$?: Observable<boolean>;
 }

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

@@ -1,7 +1,7 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" class="filters" [iqserHelpMode]="helpModeKey">
+    <div *ngIf="filters$ | async as filters" [iqserHelpMode]="helpModeKey" class="filters">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -12,7 +12,13 @@
 
         <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
-        <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters" iqserHelpMode="reset-filters"></div>
+        <div
+            (click)="resetFilters()"
+            *ngIf="showResetFilters$ | async"
+            class="reset-filters"
+            iqserHelpMode="reset-filters"
+            translate="reset-filters"
+        ></div>
     </div>
 
     <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
@@ -23,9 +29,9 @@
                 (action)="config.action($event)"
                 *ngIf="!config.hide"
                 [icon]="config.icon"
+                [iqserHelpMode]="config.helpModeKey"
                 [label]="config.label | translate"
                 [type]="config.type"
-                [iqserHelpMode]="config.helpModeKey"
             ></iqser-icon-button>
         </ng-container>
 
@@ -34,9 +40,10 @@
                 <iqser-circle-button
                     (action)="config.action($event)"
                     *ngIf="!config.hide"
+                    [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
-                    [tooltip]="config.label"
                     [iqserHelpMode]="config.helpModeKey"
+                    [tooltip]="config.label"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>