feat: support for disabling a menu item (#506)

Author: arjunlalb

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

@@ -2,4 +2,9 @@
 
 .menu-item {
   @include popover-menu-item;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 }

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

@@ -27,4 +27,24 @@ describe('Menu Item Component', () => {
     expect(spectator.query(IconComponent)?.icon).toBe(IconType.MoreHorizontal);
     expect(spectator.query(IconComponent)?.color).toBe(Color.Gray1);
   }));
+
+  test('should disable menu item as expected', fakeAsync(() => {
+    const spectator = createHost(
+      '<ht-menu-item [icon]="icon" [label]="label" [iconColor]="iconColor" [disabled]="disabled"></ht-menu-item>',
+      {
+        hostProps: {
+          icon: IconType.MoreHorizontal,
+          label: 'Item',
+          iconColor: Color.Gray1,
+          disabled: true
+        }
+      }
+    );
+    expect(spectator.query('.menu-item')).toExist();
+    expect(spectator.query('.icon')).toExist();
+    expect(spectator.query('.label')).toHaveText('Item');
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.MoreHorizontal);
+    expect(spectator.query(IconComponent)?.color).toBe(Color.Gray1);
+    expect(spectator.query('.menu-item')?.classList.contains('disabled')).toBe(true);
+  }));
 });

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

@@ -6,16 +6,18 @@ import { IconSize } from '../../icon/icon-size';
   selector: 'ht-menu-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./menu-item.component.scss'],
-  template: `<div class="menu-item">
-    <ht-icon
-      class="icon"
-      *ngIf="this.icon"
-      [icon]="this.icon"
-      size="${IconSize.Small}"
-      [color]="this.iconColor"
-    ></ht-icon>
-    <span class="label">{{ this.label }}</span>
-  </div>`
+  template: `<ht-event-blocker event="click" class="menu-item-container" [enabled]="this.disabled"
+    ><div class="menu-item" [ngClass]="this.getStyleClasses()">
+      <ht-icon
+        class="icon"
+        *ngIf="this.icon"
+        [icon]="this.icon"
+        size="${IconSize.Small}"
+        [color]="this.iconColor"
+      ></ht-icon>
+      <span class="label">{{ this.label }}</span>
+    </div></ht-event-blocker
+  >`
 })
 export class MenuItemComponent {
   @Input()
@@ -26,4 +28,11 @@ export class MenuItemComponent {
 
   @Input()
   public iconColor?: string;
+
+  @Input()
+  public disabled?: boolean;
+
+  public getStyleClasses(): string[] {
+    return this.disabled ? ['disabled'] : [];
+  }
 }