Merge branch 'main' into rename-route-interface

Author: arjunlalb

package-lock.json

@@ -58,7 +58,7 @@
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
     "graphql": "^15.5.0",
-    "graphql-tag": "^2.12.4",
+    "graphql-tag": "^2.12.5",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "rxjs": "~6.6.7",

package.json

@@ -3,6 +3,11 @@
 
 :host {
   ::ng-deep {
+    &.disabled {
+      background-color: $gray-2;
+      cursor: not-allowed;
+    }
+
     .border {
       &.mat-form-field {
         height: inherit;

projects/components/src/input/input.component.scss

@@ -18,6 +18,7 @@ describe('Input Component', () => {
 
     spectator.tick();
     expect(spectator.query(MatInput)!.disabled).toBe(true);
+    expect(spectator.query('mat-form-field')).toHaveClass('disabled');
   }));
 
   test('should emit number values for inputs of type number', () => {

projects/components/src/input/input.component.test.ts

@@ -7,7 +7,7 @@ import { InputAppearance } from './input-appearance';
   styleUrls: ['./input.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-form-field [ngClass]="this.appearance" floatLabel="never">
+    <mat-form-field [ngClass]="this.getStyleClasses()" floatLabel="never">
       <input
         matInput
         [type]="this.type"
@@ -66,4 +66,8 @@ export class InputComponent<T extends string | number> implements OnChanges {
         return value as T | undefined;
     }
   }
+
+  public getStyleClasses(): string[] {
+    return [this.appearance, this.disabled ? 'disabled' : ''];
+  }
 }

projects/components/src/input/input.component.ts

@@ -26,9 +26,7 @@ describe('Menu dropdown Component', () => {
 
   test('should display trigger content as expected', () => {
     spectator = createHost(
-      `
-    <ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}">
-        </ht-menu-dropdown>`
+      `<ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}"><ht-menu-item label="Option 1"></ht-menu-item></ht-menu-dropdown>`
     );
 
     expect(spectator.query('.trigger-content')).toExist();
@@ -78,4 +76,10 @@ describe('Menu dropdown Component', () => {
 
     expect(onClickSpy).not.toHaveBeenCalled();
   });
+
+  test('should not show the dropdown if no items to show.', () => {
+    spectator = createHost(`<ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}"></ht-menu-dropdown>`);
+
+    expect(spectator.query('ht-popover-trigger')).not.toExist();
+  });
 });

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

@@ -9,7 +9,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ht-event-blocker event="click" [enabled]="true">
-      <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
+      <ht-popover [closeOnClick]="true" [disabled]="this.disabled" *ngIf="this.items?.length > 0">
         <ht-popover-trigger>
           <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: !!this.label }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>