From 03647f6697a2e5bf0276eb9afb9a13b62f529912 Mon Sep 17 00:00:00 2001
From: Wojciech Duda <69160975+wojd0@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:36:28 +0100
Subject: [PATCH] [AAE-15206] apply design tokens for
 TaskAssignmentFilterCloudComponent (#9172)

* [AAE-15295] added design tokens to PeopleCloudComponent

* [AAE-15295] re-add initials picture background

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15294] replaced reference variables with theme

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] apply design tokens for TaskAssignmentFilterCloudComponent

* [AAE-15206] add tokens for label

* [AAE-15206] replaced reference variables with theme values

* [AAE-15206] remove last remaining reference colors

* [AAE-19026] Fix app permissions (#9171)

* [AAE-15295] added design tokens to PeopleCloudComponent (#9162)

* [AAE-15295] added design tokens to PeopleCloudComponent

* [AAE-15294] separate component variables

* [AAE-15294] fix rebase

* [AAE-15294] readded background color to cloud pic

* [AAE-15294] rebase

* [AAE-15294] remove duplicate theme pick

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15294] applied design tokens for GroupCloudComponent

* [AAE-15206] apply design tokens for TaskAssignmentFilterCloudComponent

* [AAE-15206] replaced reference variables with theme values

* [AAE-19026] Fix app permissions (#9171)

* [AAE-15294] separate component variables

* [AAE-15206] remove duplicate palette pick
---
 .../src/lib/styles/_components-variables.scss |  7 +++++-
 .../components/people-cloud.component.html    |  1 -
 .../task-assignment-filter.component.html     |  6 +++--
 .../task-assignment-filter.component.scss     | 24 +++++++++++++++----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index 6c746dd22a..ed226f0082 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -83,7 +83,12 @@
         --adf-group-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
         --adf-group-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
         --adf-group-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
-        --adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn)
+        --adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
+
+        --adf-task-assignment-filter-option-default-color: mat.get-color-from-palette($foreground, text),
+        --adf-task-assignment-filter-option-selected-color: mat.get-color-from-palette($primary),
+        --adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
+        --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary)
     );
 
     // propagates SCSS variables into the CSS variables scope
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
index 29bee9e0c4..0f5d82cee5 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -18,7 +18,6 @@
                 </mat-icon>
             </mat-chip>
             <input *ngIf="!isReadonly()" matInput
-                   #chipInput
                    [formControl]="searchUserCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="userMultipleChipList"
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
index f1842d2434..fd213e5a9d 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
@@ -1,12 +1,14 @@
 <div class="adf-cloud-assignment-container">
-    <mat-form-field [floatLabel]="'auto'">
+    <mat-form-field floatLabel="auto" class="adf-task-assignment-filter-container">
         <mat-select class="adf-task-assignment-filter"
                     placeholder="{{ 'ADF_CLOUD_TASK_ASSIGNMENT_FILTER.ASSIGNMENT_TYPE' | translate }}"
                     [(ngModel)]="assignmentType"
                     [attr.data-automation-id]="'adf-task-assignment-filter-select'"
                     (selectionChange)="onAssignmentTypeChange($event)">
             <mat-option *ngFor="let assignmentType of assignmentTypeOptions"
-                [value]="assignmentType.value"
+                class="adf-task-assignment-filter-option"
+                [ngClass]="{'adf-task-assignment-filter-option--selected': filterOption.selected}"
+                [value]="assignmentType.value" #filterOption
                 [attr.data-automation-id]="'adf-task-assignment-filter-' + assignmentType.value">
                 {{ assignmentType.label | translate }}
             </mat-option>
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss
index 60a39d7795..9df37c187c 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss
@@ -1,14 +1,30 @@
 .adf-cloud-assignment-container {
     display: flex;
     flex-wrap: wrap;
-
-    mat-form-field {
-        width: 100%;
-    }
 }
 
 .adf-task-assignment-filter {
     margin-right: 10px;
+
+    &-container {
+        width: 100%;
+    }
+
+    &-label {
+        color: var(--adf-task-assignment-filter-label-default-color);
+
+        &.adf-task-assignment-filter-label--focus {
+            color: var(--adf-task-assignment-filter-label-focus-color);
+        }
+    }
+
+    &-option {
+        color: var(--adf-task-assignment-filter-option-default-color);
+
+        &.adf-task-assignment-filter-option--selected:not(&:disabled) {
+            color: var(--adf-task-assignment-filter-option-selected-color);
+        }
+    }
 }
 
 .adf-group-cloud-filter {