[ACS-7555] column filters (#9576)

* Changed ng version before material migration

* migration for material'

* Upgrading NX and start fixing styles

* Make all the part build

* Fixed core unit test and excluded instable ones

* Fixed most of unit tests failing

* Fixed unit tests

* Fixed last unit tests

* fixed unit test problem and some other e2e

* Fixed unit tests after rebase

* [AAE-18267] change unit test setup for auth service (#9216)

* [AAE-18267] change unit test setup for auth service

* [AAE-18267] remove exclude

* [AAE-18267] removed CoreTestingModule from imports

* remaining unit test fixes for the Angular 15 update (#9218)

* removing excludes from working tests

* test fixes for CategoriesManagementComponent

* [ci:force] reenabling tests / fixes

* fixes in process-services-cloud

* change html element type

* fix selector in StartProcessComponent

* Fixing unit test after last rebase + lint

* ACS-7555 Fixed styles for node type filters

* ACS-7555 Removed redundant padding

* ACS-7555 Outlined input for text filter

* ACS-7555 Resolved conflicts

---------

Co-authored-by: Vito Albano <[email protected]>
Co-authored-by: Wojciech Duda <[email protected]>

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-search-check-list > div {
     display: flex;
     flex-direction: column;
@@ -9,12 +11,24 @@
             text-overflow: ellipsis;
             overflow: hidden;
             width: 100%;
+            -webkit-font-smoothing: subpixel-antialiased;
+            margin-top: 1px;
         }
 
         .adf-facet-name {
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
         }
+
+        #{$mat-checkbox-box} {
+            margin-left: 4px;
+            margin-top: 5px;
+            margin-bottom: 4px;
+        }
+
+        label {
+            padding-left: 0;
+        }
     }
 }

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -1,3 +1,6 @@
+@use '@angular/material' as mat;
+@import 'styles/mat-selectors';
+
 .adf-filter {
     &-button:has(.adf-filter-icon) {
         margin-left: -7px;
@@ -23,7 +26,7 @@
     &-container {
         display: flex;
         flex-direction: column;
-        padding: 15px 15px 10px;
+        padding: 15.5px 15px 10px;
         color: var(--adf-theme-foreground-text-color-087);
 
         .adf-facet-buttons {
@@ -43,25 +46,36 @@
         font-size: 1.1em;
         padding-bottom: 5px;
         color: var(--adf-theme-foreground-text-color-087);
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
+}
+
+.adf-search-filter-menu.adf-filter-menu {
+    min-width: 260px;
+
+    @include mat.elevation(4);
+
+    > div:first-child {
+        padding: 0;
     }
 
-    &-actions {
+    .adf-filter-actions {
         display: flex;
         justify-content: flex-end;
         padding: 15px;
         background-color: var(--adf-theme-background-hover-color);
 
         > button {
             font-size: 0.9em;
-            color: var(--adf-theme-foreground-text-color-087);
-        }
-    }
-}
-
-.adf-search-filter-menu.adf-filter-menu {
-    min-width: 260px;
+            height: 36px;
+            width: auto;
+            padding-left: 16px;
+            padding-right: 16px;
+            -webkit-font-smoothing: subpixel-antialiased;
 
-    > div:first-child {
-        padding: 0;
+            #{$mat-button-label} {
+                font-weight: unset;
+            }
+        }
     }
 }

lib/content-services/src/lib/search/components/search-text/search-text.component.html

@@ -1,10 +1,17 @@
-<mat-form-field class="adf-search-text-form-field">
+<mat-form-field
+    class="adf-search-text-form-field"
+    appearance="outline">
+    <mat-label>{{ settings?.placeholder | translate }}</mat-label>
     <input
         matInput
-        placeholder="{{ settings?.placeholder | translate }}"
         [(ngModel)]="value"
         (change)="onChangedHandler($event)">
-    <button mat-button *ngIf="value" matSuffix (click)="clear()">
+    <button
+        mat-button
+        *ngIf="value"
+        matSuffix
+        (click)="clear()"
+        class="adf-search-text-form-field-clear-button">
         <mat-icon>close</mat-icon>
     </button>
 </mat-form-field>

lib/content-services/src/lib/search/components/search-text/search-text.component.scss

@@ -1,5 +1,18 @@
 .adf-search-text {
     .adf-search-text-form-field {
         width: 100%;
+        height: 58.5px;
+
+        &-clear-button {
+            min-width: unset;
+            border-radius: 50%;
+            height: 1.5em;
+            width: 1.5em;
+            margin-right: 8px;
+
+            mat-icon {
+                margin-right: 0;
+            }
+        }
     }
 }

lib/core/src/lib/styles/_mat-selectors.scss

@@ -23,6 +23,7 @@ $mat-chip: '.mat-mdc-chip';
 $mat-chip-list: '.mat-mdc-chip-list';
 $mat-chip-list-wrapper: '.mat-chip-list-wrapper';
 $mat-checkbox: '.mat-mdc-checkbox';
+$mat-checkbox-box: '.mdc-checkbox';
 $mat-checkbox-frame: '.mdc-checkbox__checkmark';
 $mat-checkbox-label: '.mdc-label';
 $mat-checkbox-checked: '.mat-mdc-checkbox-checked';