fix(stark-ui): minimap - fix `[class.open]="minimapMenuTrigger.menuOp…

…en"` not changing when menu closed

packages/stark-ui/src/modules/minimap/components/minimap.component.spec.ts

@@ -1,7 +1,7 @@
 // tslint:disable:completed-docs
 import { StarkMinimapComponent } from "./minimap.component";
 import { StarkMinimapItemProperties } from "./item-properties.intf";
-import { ComponentFixture, inject, TestBed, waitForAsync } from "@angular/core/testing";
+import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { HAMMER_LOADER } from "@angular/platform-browser";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
@@ -106,6 +106,14 @@ describe("MinimapComponent", () => {
 			expect(menuItemLabels.length).withContext("menu should show a label for all items").toBe(items.length);
 		});
 
+		it("clicking outside menu should close it", fakeAsync(() => {
+			const backdrop = <HTMLElement>overlayContainerElement.querySelector(".cdk-overlay-backdrop");
+			backdrop.click();
+			hostFixture.detectChanges();
+			tick(500);
+			expect(hostFixture.nativeElement.querySelector("mat-icon").classList).not.toContain("open");
+		}));
+
 		it("correct items should be checked", () => {
 			expect(menuItemLabels.length).toBe(items.length);
 			menuItemLabels.forEach((labelElement: HTMLLabelElement) => {

packages/stark-ui/src/modules/minimap/components/minimap.component.ts

@@ -1,4 +1,19 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewEncapsulation } from "@angular/core";
+import {
+	AfterViewInit,
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
+	Component,
+	ElementRef,
+	EventEmitter,
+	Input,
+	OnDestroy,
+	Output,
+	Renderer2,
+	ViewChild,
+	ViewEncapsulation
+} from "@angular/core";
+import { MatMenuTrigger } from "@angular/material/menu";
+import { Subscription } from "rxjs";
 import { StarkMinimapItemProperties } from "./item-properties.intf";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 
@@ -23,7 +38,7 @@ const componentName = "stark-minimap";
 		class: componentName
 	}
 })
-export class StarkMinimapComponent extends AbstractStarkUiComponent {
+export class StarkMinimapComponent extends AbstractStarkUiComponent implements AfterViewInit, OnDestroy {
 	/**
 	 * Array of {@link StarkMinimapItemProperties} objects which define the items to display in the minimap.
 	 */
@@ -48,16 +63,42 @@ export class StarkMinimapComponent extends AbstractStarkUiComponent {
 	@Output()
 	public readonly showHideItem = new EventEmitter<StarkMinimapItemProperties>();
 
+	@ViewChild(MatMenuTrigger, { static: true })
+	public menuTrigger!: MatMenuTrigger;
+
+	/**
+	 * @ignore
+	 * @internal
+	 */
+	private menuTriggerClosedSubscription!: Subscription;
+
 	/**
 	 * Class constructor
 	 * @param renderer - Angular `Renderer2` wrapper for DOM manipulations.
 	 * @param elementRef - Reference to the DOM element where this component is attached to.
+	 * @param cdRef - Reference to the change detector attached to this component.
 	 */
-	// tslint:disable-next-line:unnecessary-constructor
-	public constructor(renderer: Renderer2, elementRef: ElementRef) {
+	public constructor(renderer: Renderer2, elementRef: ElementRef, private cdRef: ChangeDetectorRef) {
 		super(renderer, elementRef);
 	}
 
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngAfterViewInit(): void {
+		// Change detection has to be triggered manually to update `minimapMenuTrigger.menuOpen` value
+		this.menuTriggerClosedSubscription = this.menuTrigger.menuClosed.subscribe(() => {
+			this.cdRef.detectChanges();
+		});
+	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnDestroy(): void {
+		this.menuTriggerClosedSubscription.unsubscribe();
+	}
+
 	/**
 	 * Return true/false if the given item is already visible or if the priority (if specified) for such item is not "hidden"
 	 * Otherwise, the item is considered to be hidden by default