From 7744c5c948dbf293add905c4d9d8128c445c7e6d Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 10 May 2021 12:34:11 +0200
Subject: [PATCH] [Patch] fix #312 Fixing select required

---
 projects/dxc-ngx-cdk/src/lib/dxc-select/select.html   | 5 ++++-
 projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts     | 4 ++++
 projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
index 6aaf71a00..0c412d2cf 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.html
@@ -8,7 +8,10 @@
  See https://github.com/angular/components/issues/20694
 -->
 <span class="assistiveText">{{assistiveText}}</span>
-<label class="selectLabel">{{label}}</label>
+<label class="selectLabel">
+  <span *ngIf="required" class="select-required">*</span>
+  <span>{{label}}</span>
+</label>
 <div cdk-overlay-origin
      [tabIndex]="disabled ? -1 : tabIndexValue"
      [attr.aria-owns]="panelOpen ? id + '-panel' : null"
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
index 5b1a64a48..25b380440 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
@@ -1373,6 +1373,10 @@ export abstract class _MatSelectBase<C>
           left 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
           top 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
           width 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+
+        .select-required {
+          color: var(--select-required);
+        }
       }
 
       dxc-option.mat-active,
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
index a357404a1..767817b9b 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
@@ -203,6 +203,7 @@ export const componentTokens = {
   "--select-selectedOptionBackgroundColor": globalTokens.lightGrey,
   "--select-color": globalTokens.black,
   "--select-error": globalTokens.darkRed,
+  "--select-required": globalTokens.darkRed,
   "--select-focusColor": globalTokens.blue,
   "--select-disabledColor": globalTokens.lighterBlack,
   "--select-scrollBarThumbColor": globalTokens.darkGrey,