From cad7355241c36878d1c90cdb8d1b8718ce0b6257 Mon Sep 17 00:00:00 2001
From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Date: Fri, 2 Aug 2024 15:38:09 +0530
Subject: [PATCH] [ACS-8450] Fixed issue where required marker * was not
 showing up for create rule > Name field (#3984)

* [ACS-8450] Fixed issue where required marker * was not showing up for creat rule > Name field

* [ACS-8450] Fixed alignment issue

* [ACS-8450] Changed styling selectors

* [ACS-8450] Added null/undefined safety check for name
---
 .../src/rule-details/rule-details.ui-component.html         | 6 +++---
 .../src/rule-details/rule-details.ui-component.scss         | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
index e6ee0cc12..3d0485ebd 100644
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
@@ -4,11 +4,11 @@
     <div class="aca-rule-details__form__row">
       <label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
       <div>
-        <mat-form-field appearance="fill" floatLabel='auto' class="aca-rule-details__form__row__field">
+        <mat-form-field appearance="fill" floatLabel='always' class="aca-rule-details__form__row__field">
+          <mat-label *ngIf="!name.value">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate }}</mat-label>
           <input
             id="rule-details-name-input"
-            matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
-            [placeholder]="'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate">
+            matInput type="text" formControlName="name" data-automation-id="rule-details-name-input">
           <mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error>
         </mat-form-field>
       </div>
diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
index 176b59c28..a954834ad 100644
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -51,6 +51,10 @@
         max-width: 400px;
         font-size: inherit;
 
+        label[for='rule-details-name-input'] {
+          transform: translateY(-20%) scale(1);
+        }
+
         &__textarea {
           min-height: 4em;
         }