Merge branch 'main' into add-default-value-to-display-string

Author: anandtiwary

projects/components/src/menu-dropdown/menu-item/menu-item.component.test.ts

@@ -16,14 +16,15 @@ describe('Menu Item Component', () => {
 
   test('should display icon and label as expected', fakeAsync(() => {
     const spectator = createHost(
-      '<ht-menu-item [icon]="icon" [label]="label" [iconColor]="iconColor"></ht-menu-item>',
+      '<ht-menu-item [icon]="icon" [label]="label" [labelColor]="labelColor" [iconColor]="iconColor"></ht-menu-item>',
       {
-        hostProps: { icon: IconType.MoreHorizontal, label: 'Item', iconColor: Color.Gray1 }
+        hostProps: { icon: IconType.MoreHorizontal, label: 'Item', labelColor: Color.Gray1, iconColor: Color.Gray1 }
       }
     );
     expect(spectator.query('.menu-item')).toExist();
     expect(spectator.query('.icon')).toExist();
     expect(spectator.query('.label')).toHaveText('Item');
+    expect((spectator.query('.label') as HTMLSpanElement)?.style.color).toEqual('rgb(244, 245, 245)');
     expect(spectator.query(IconComponent)?.icon).toBe(IconType.MoreHorizontal);
     expect(spectator.query(IconComponent)?.color).toBe(Color.Gray1);
   }));

projects/components/src/menu-dropdown/menu-item/menu-item.component.ts

@@ -15,7 +15,7 @@ import { IconSize } from '../../icon/icon-size';
         size="${IconSize.Small}"
         [color]="this.iconColor"
       ></ht-icon>
-      <span class="label">{{ this.label }}</span>
+      <span class="label" [ngStyle]="{ color: this.labelColor ? this.labelColor : '' }">{{ this.label }}</span>
     </div></ht-event-blocker
   >`
 })
@@ -29,6 +29,9 @@ export class MenuItemComponent {
   @Input()
   public iconColor?: string;
 
+  @Input()
+  public labelColor?: string;
+
   @Input()
   public disabled?: boolean;