1. Change selected fitlers in monitor base on filters in search. 2. Add label secondary with color of monitor

src/app/monitor/monitor.component.html

@@ -1,35 +1,22 @@
-<ng-template #selected_filters_pills let-margin="margin">
-  <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">
-        <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span
-            class="filter-tag" [class.uk-margin-small-left]="margin"
-            title="Remove {{periodFilter.selectedFromAndToValues}}">
-          <i uk-icon="close"></i>
-          <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
-        </span></a>
+<ng-template #selected_filters_pills>
+   <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-width-auto">
+    <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+      <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
+      <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
+        <icon name="close" flex="true" ratio="0.7"></icon>
+      </button>
+    </span>
   </span>
   <ng-container *ngFor="let filter of filters ">
     <ng-container *ngIf="filter.countSelectedValues > 0">
-      <ng-container *ngFor="let value of filter.values; let i = index;  let end = last; ">
+      <ng-container *ngFor="let value of filter.values; let i = index;">
         <ng-container *ngIf="value.selected">
-             <span class="uk-grid-margin">
-              <span class="filter-tag" [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
-                    (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
-                    filter.countSelectedValues -1;
-                    filterChanged({value:filter}) ">
-                <a [class.uk-disabled]="loading">
-                  <span class=" clickable" aria-hidden="true">
-                    <span class="uk-icon">
-                      <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                           icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
-                                                          d="M16,16 L4,4"></path><path fill="none"
-                                                                                       stroke="#000"
-                                                                                       stroke-width="1.6"
-                                                                                       d="M16,4 L4,16"></path></svg>
-                    </span>
-                  </span>
-                  <span class="uk-margin-small-left"
-                        [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
-                </a>
+            <span class="uk-width-auto">
+              <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+                <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
+                <button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
+                  <icon name="close" flex="true" ratio="0.7"></icon>
+                </button>
               </span>
             </span>
         </ng-container>
@@ -252,7 +239,7 @@
         <a *ngIf="countSelectedFilters() > 1"
            class="uk-text-small uk-width-1-2" (click)="clearAll()"> Clear All </a>
       </div>
-      <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
+      <div class="uk-grid uk-grid-small" uk-grid>
         <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
       </div>
       <div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>

src/app/monitor/monitor.component.ts

@@ -26,7 +26,7 @@ import {Subscriber, Subscription} from "rxjs";
 import {User} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 import {RangeFilter} from "../openaireLibrary/utils/rangeFilter/rangeFilterHelperClasses.class";
-import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {Filter, Value} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
 import {properties} from "../../environments/environment";
 import {IndexInfoService} from "../openaireLibrary/utils/indexInfo.service";
@@ -247,7 +247,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
           }
         }
       } else {
-        this.clearfFilter(filter);
+        this.clearFilter(filter);
       }
     }
     
@@ -282,14 +282,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
   
   clearAll() {
     for (let filter of this.filters) {
-      this.clearfFilter(filter);
+      this.clearFilter(filter);
     }
     this.periodFilter.selectedFromValue = "";
     this.periodFilter.selectedToValue = "";
     this.validateYearRange(true)
   }
   
-  clearfFilter(filter: Filter) {
+  clearFilter(filter: Filter) {
     filter.countSelectedValues = 0;
     filter.radioValue = "";
     for (let value of filter.values) {
@@ -440,7 +440,15 @@ export class MonitorComponent implements OnInit, OnDestroy {
       this.periodFilter.selectedToValue = "";
       this.filter();
     }
+  }
   
+  clearFilterValue(filter: Filter, value: Value) {
+    value.selected = false;
+    filter.radioValue = '';
+    filter.countSelectedValues = filter.countSelectedValues - 1;
+    this.filterChanged({
+      value:filter
+    });
   }
   
   private setIndicators() {

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 7e9db1d0dec3f8abdb716f082bcbe441304b95d6
+Subproject commit 19bf9f79685fa8628cd741fbfbb07991ccabf20d

src/app/search/searchPages/advanced/searchResearchResults.component.ts

@@ -15,14 +15,14 @@ import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSe
                                [includeOnlyResultsAndFilter]="false"
                                [showSwitchSearchLink]="true"
                                [openaireLink]="'https://'+(properties.environment != 'production'?'beta.':'')+'explore.openaire.eu/search/advanced/research-outcomes'"
-                               [piwikSiteId]="piwikSiteId"
+                               [piwikSiteId]="piwikSiteId" [searchForm]="searchForm"
       ></search-research-results>
   `
 })
 export class MonitorAdvancedSearchResearchResultsComponent {
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
-  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   properties;
   piwikSiteId;
   constructor(private route: ActivatedRoute,

src/assets/monitor-dashboard-custom.css

@@ -36,6 +36,9 @@
   --text-primary-color: var(--monitor-color);
   --text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
 
+  /** Label */
+  --label-secondary: var(--monitor-color);
+
   /* List */
   --list-disc-color: var(--monitor-color);
 

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit a47c66f4802cb7af2ad12f1ad75516e94b20c328
+Subproject commit c98b39a5a5d45e3f9676be11d38b78d881f9f8d5