From 58a5d6b293f6a0c6ac9dc344df96a51f5c3295c7 Mon Sep 17 00:00:00 2001
From: tomson <nastalytomasz@gmail.com>
Date: Wed, 27 Mar 2024 12:57:01 +0100
Subject: [PATCH] [ACS-7631] Fix broken filters (#3735)

---
 .../search-input-control.component.html            |  2 +-
 .../search-input-control.component.scss            | 14 +++++++++++++-
 .../search-input/search-input.component.html       |  4 ++--
 .../search-input/search-input.component.scss       |  7 ++-----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
index aac5450bd..acaa667c7 100644
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
+++ b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
@@ -8,7 +8,7 @@
   >
     <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
-  <mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
+  <mat-form-field class="app-input-form-field" floatLabel="auto">
     <input
       matInput
       #searchInput
diff --git a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
index 51193eeea..beaef67e0 100644
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
+++ b/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
@@ -48,8 +48,20 @@ $top-margin: 12px;
     }
   }
 
+  .mat-mdc-form-field-flex {
+    background: #fff;
+  }
+
   .mat-mdc-text-field-wrapper {
-    background-color: var(--theme-search-background-color);
+    height: 44px;
+    padding-left: 0;
+  }
+
+  .app-input-form-field-readonly {
+    .mat-mdc-text-field-wrapper,
+    .mat-mdc-form-field-flex {
+      background-color: var(--theme-search-background-color);
+    }
   }
 
   .app-search-button {
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
index 7c19ead89..4c1d4c90b 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
+++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
@@ -7,13 +7,13 @@
   <button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
     <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
-  <mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
+  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
       class="app-input-form-field-input"
       [type]="'text'"
-      [disabled]="true"
+      [readonly]="true"
       [value]="searchedWord"
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
index d959f8cc7..d639a57c6 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
+++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
@@ -30,10 +30,6 @@ $top-margin: 12px;
 
     &-input {
       caret-color: var(--theme-text-color);
-
-      &:disabled {
-        color: var(--theme-text-color);
-      }
     }
   }
 
@@ -44,7 +40,8 @@ $top-margin: 12px;
   }
 }
 
-.app-search-options-menu {
+/* stylelint-disable-next-line */
+.app-search-options-menu.mat-mdc-menu-panel {
   background-color: var(--theme-dialog-background-color);
   width: $search-width;
   max-width: unset;