Merge pull request #759 from christophercr/feature/app-menu-translati…

…on-support

feat(stark-ui): integrate translation support in AppMenu component

packages/stark-ui/src/modules/app-menu/components/app-menu-config.intf.ts

@@ -1,9 +1,17 @@
 import { StarkMenuGroup } from "./app-menu-group.intf";
 import { StarkMenuSection } from "./app-menu-section.intf";
+
 /**
  * StarkMenuConfig interface
  */
 export interface StarkMenuConfig {
+	/**
+	 * Array of menu groups to include in the menu.
+	 */
 	menuGroups?: StarkMenuGroup[];
+
+	/**
+	 * Array of menu sections to include in the menu. The menu sections provide a way to group a set of menu groups.
+	 */
 	menuSections?: StarkMenuSection[];
 }

packages/stark-ui/src/modules/app-menu/components/app-menu-entry.intf.ts

@@ -2,11 +2,39 @@
  * StarkMenuEntry interface
  */
 export interface StarkMenuEntry {
+	/**
+	 * Id of the container of the menu group/entry
+	 */
 	id: string;
+
+	/**
+	 * Icon to display next to the menu group/entry label.
+	 */
 	icon?: string;
+
+	/**
+	 * Text to be displayed as the label in the header of the menu group/entry
+	 * (dynamically translated via the Translate service if the provided text is defined in the translation keys).
+	 */
 	label: string;
+
+	/**
+	 * Whether the menu group/entry should be visible or not.
+	 */
 	isVisible: boolean;
+
+	/**
+	 * Whether the menu group/entry should be enabled for user interaction or not.
+	 */
 	isEnabled: boolean;
+
+	/**
+	 * Name of the Router state that will be navigated to when the header of the menu group/entry is clicked.
+	 */
 	targetState?: string;
+
+	/**
+	 * Params object to be passed to the Router state defined as targetState.
+	 */
 	targetStateParams?: { [param: string]: any };
 }

packages/stark-ui/src/modules/app-menu/components/app-menu-group.intf.ts

@@ -4,5 +4,8 @@ import { StarkMenuEntry } from "./app-menu-entry.intf";
  * StarkMenuGroup interface
  */
 export interface StarkMenuGroup extends StarkMenuEntry {
+	/**
+	 * Array of entries described by StarkMenuGroup objects
+	 */
 	entries?: StarkMenuGroup[];
 }

packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.html

@@ -1,9 +1,19 @@
-<mat-list-item *ngIf="menuGroup.isVisible" [id]="menuGroup.id" [ngClass]="'stark-app-menu-item-level-'+level.toString()" [class.active]="isActive" [class.stark-disabled]="!menuGroup.isEnabled" [disableRipple]="!menuGroup.isEnabled" (click)="onClick()">
-	<mat-icon *ngIf="menuGroup.icon" [color]="isActive?'primary':''" starkSvgViewBox [svgIcon]="menuGroup.icon" class="stark-small-icon"></mat-icon>
-	<span matLine>{{ menuGroup.label }}</span>
+<mat-list-item *ngIf="menuGroup.isVisible"
+			   [id]="menuGroup.id"
+			   [ngClass]="'stark-app-menu-item-level-'+level.toString()"
+			   [class.active]="isActive" [class.stark-disabled]="!menuGroup.isEnabled"
+			   [disableRipple]="!menuGroup.isEnabled" (click)="onClick()">
+	<mat-icon *ngIf="menuGroup.icon"
+			  [color]="isActive ? 'primary' : ''"
+			  starkSvgViewBox [svgIcon]="menuGroup.icon"
+			  class="stark-small-icon"></mat-icon>
+	<span matLine translate>{{ menuGroup.label }}</span>
 </mat-list-item>
 <mat-expansion-panel *ngIf="menuGroup.entries" #menuGroupsPanel>
 	<mat-nav-list>
-		<stark-app-menu-item *ngFor="let entry of menuGroup.entries; trackBy: trackMenuItem" [level]="level+1" [menuGroup]="entry" (activated)="onActivate()" (deactivated)="onDeactivate()"></stark-app-menu-item>
+		<stark-app-menu-item *ngFor="let entry of menuGroup.entries; trackBy: trackMenuItem"
+							 [level]="level+1"
+							 [menuGroup]="entry" (activated)="onActivate()"
+							 (deactivated)="onDeactivate()"></stark-app-menu-item>
 	</mat-nav-list>
 </mat-expansion-panel>

packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.ts

@@ -20,7 +20,7 @@ import {
 	StarkRoutingService,
 	StarkRoutingTransitionHook
 } from "@nationalbankbelgium/stark-core";
-import { AbstractStarkUiComponent } from "./../../../common/classes/abstract-component";
+import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 import { StarkMenuGroup } from "./app-menu-group.intf";
 
 /**

packages/stark-ui/src/modules/app-menu/components/app-menu-section.intf.ts

@@ -1,8 +1,17 @@
 import { StarkMenuGroup } from "./app-menu-group.intf";
+
 /**
  * StarkMenuSection interface
  */
 export interface StarkMenuSection {
+	/**
+	 * Text to be displayed as the label in the header of the menu section
+	 * (dynamically translated via the Translate service if the provided text is defined in the translation keys).
+	 */
 	label: string;
+
+	/**
+	 * Array of menu groups to include in this section.
+	 */
 	menuGroups: StarkMenuGroup[];
 }

packages/stark-ui/src/modules/app-menu/components/app-menu.component.html

@@ -1,14 +1,14 @@
 <nav>
 	<ng-container *ngIf="hasSections">
-		<section *ngFor="let section of parentMenuConfig.menuSections; trackBy: trackSection">
-			<h2 class="stark-section-title">{{ section.label }}</h2>
+		<section *ngFor="let section of menuConfig.menuSections; trackBy: trackSection">
+			<h2 class="stark-section-title" translate>{{ section.label }}</h2>
 			<mat-nav-list *ngFor="let menuGroup of section.menuGroups">
 				<stark-app-menu-item [level]="1" [menuGroup]="menuGroup"></stark-app-menu-item>
 			</mat-nav-list>
 		</section>
 	</ng-container>
 	<ng-container *ngIf="!hasSections">
-		<mat-nav-list *ngFor="let menuGroup of parentMenuConfig.menuGroups">
+		<mat-nav-list *ngFor="let menuGroup of menuConfig.menuGroups; trackBy: trackMenuGroup">
 			<stark-app-menu-item [level]="1" [menuGroup]="menuGroup"></stark-app-menu-item>
 		</mat-nav-list>
 	</ng-container>

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

@@ -42,8 +42,8 @@ describe("StarkAppMenuComponent", () => {
 	});
 
 	describe("sections", () => {
-		it("should have a section when menuSections property of parentMenuConfig is set", () => {
-			component.parentMenuConfig = {
+		it("should have a section when menuSections property of menuConfig is set", () => {
+			component.menuConfig = {
 				menuSections: [
 					{
 						label: "Section",

packages/stark-ui/src/modules/app-menu/components/app-menu.component.ts

@@ -1,8 +1,9 @@
 import { Component, Inject, Input, OnInit, ViewEncapsulation, ElementRef, Renderer2 } from "@angular/core";
 import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkLoggingService, StarkRoutingService } from "@nationalbankbelgium/stark-core";
-import { AbstractStarkUiComponent } from "./../../../common/classes/abstract-component";
+import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 import { StarkMenuSection } from "./app-menu-section.intf";
 import { StarkMenuConfig } from "./app-menu-config.intf";
+import { StarkMenuGroup } from "./app-menu-group.intf";
 
 /**
  * Name of the component
@@ -22,20 +23,21 @@ const componentName: string = "stark-app-menu";
 })
 export class StarkAppMenuComponent extends AbstractStarkUiComponent implements OnInit {
 	/**
-	 * Configuration of the component
+	 * @internal
+	 * @ignore
+	 */
+	private _menuConfig: StarkMenuConfig;
+
+	/**
+	 * Configuration of the menu
 	 */
-	private _parentMenuConfig: StarkMenuConfig;
 	@Input()
-	public set parentMenuConfig(parentMenuConfig: StarkMenuConfig) {
-		this._parentMenuConfig = parentMenuConfig;
-		if (this._parentMenuConfig.hasOwnProperty("menuSections")) {
-			this.hasSections = true;
-		} else {
-			this.hasSections = false;
-		}
+	public set menuConfig(menuConfig: StarkMenuConfig) {
+		this._menuConfig = menuConfig;
+		this.hasSections = this._menuConfig.hasOwnProperty("menuSections");
 	}
-	public get parentMenuConfig(): StarkMenuConfig {
-		return this._parentMenuConfig;
+	public get menuConfig(): StarkMenuConfig {
+		return this._menuConfig;
 	}
 
 	/**
@@ -73,4 +75,11 @@ export class StarkAppMenuComponent extends AbstractStarkUiComponent implements O
 	public trackSection(index: number, _section: StarkMenuSection): number {
 		return index;
 	}
+
+	/**
+	 * @ignore
+	 */
+	public trackMenuGroup(index: number, _menuGroup: StarkMenuGroup): number {
+		return index;
+	}
 }

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

@@ -5,8 +5,8 @@ import { MatSidenavModule } from "@angular/material/sidenav";
 import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
 import { StarkAppSidebarComponent } from "./app-sidebar.component";
-import { MockAppSidebarService } from "./../testing/app-sidebar.mock";
-import { STARK_APP_SIDEBAR_SERVICE } from "./../services/app-sidebar.service.intf";
+import { MockAppSidebarService } from "../testing/app-sidebar.mock";
+import { STARK_APP_SIDEBAR_SERVICE } from "../services/app-sidebar.service.intf";
 import { BreakpointState } from "@angular/cdk/layout";
 
 describe("AppSidebarComponent", () => {

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

@@ -10,7 +10,8 @@ import { TranslateModule } from "@ngx-translate/core";
 import { MockStarkRoutingService, MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
 import { By } from "@angular/platform-browser";
 import Spy = jasmine.Spy;
-import { StarkBreadcrumbPath } from "@nationalbankbelgium/stark-ui";
+import { StarkBreadcrumbPath } from "./breadcrumb-path.intf";
+
 @Component({
 	selector: `host-component`,
 	template: `<stark-breadcrumb

packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.spec.ts

@@ -6,7 +6,7 @@ import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from "@angular/material-mo
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService, MockStarkRoutingService } from "@nationalbankbelgium/stark-core/testing";
-import { StarkDatePickerModule } from "./../../date-picker";
+import { StarkDatePickerModule } from "../../date-picker";
 import { StarkDateRangePickerComponent } from "./date-range-picker.component";
 import { StarkDateRangePickerEvent } from "./date-range-picker-event.intf";
 

packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, Renderer2, ViewChild, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import moment from "moment";
-import { StarkDatePickerFilter, StarkDatePickerComponent } from "./../../date-picker/components/date-picker.component";
+import { StarkDatePickerFilter, StarkDatePickerComponent } from "../../date-picker/components/date-picker.component";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 import { StarkDateRangePickerEvent } from "./date-range-picker-event.intf";
 

showcase/src/app/app.component.html

@@ -2,7 +2,7 @@
 	<stark-app-sidebar>
 		<ng-container stark-app-sidenav-menu>
 			<stark-app-logo></stark-app-logo>
-			<stark-app-menu [parentMenuConfig]="mainMenu"></stark-app-menu>
+			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
 		<ng-container stark-app-sidenav-left>
 			<div class="stark-app-sidenav-top m1 center">

showcase/src/app/demo/menu/demo-menu.component.html

@@ -2,14 +2,14 @@ <h1 class="mat-display-2" translate>SHOWCASE.DEMO.MENU.TITLE</h1>
 <section class="stark-section">
 	<example-viewer [extensions]="['HTML', 'TS']" filesPath="menu/sections" exampleTitle="SHOWCASE.DEMO.MENU.SECTIONS">
 		<div fxLayout fxLayoutAlign="center">
-			<stark-app-menu fxFlex="250px" [parentMenuConfig]="menuWithSections"></stark-app-menu>
+			<stark-app-menu fxFlex="250px" [menuConfig]="menuWithSections"></stark-app-menu>
 		</div>
 	</example-viewer>
 </section>
 <section class="stark-section">
 	<example-viewer [extensions]="['HTML', 'TS']" filesPath="menu/simple" exampleTitle="SHOWCASE.DEMO.MENU.SIMPLE">
 		<div fxLayout fxLayoutAlign="center">
-			<stark-app-menu fxFlex="250px" [parentMenuConfig]="simpleMenu"></stark-app-menu>
+			<stark-app-menu fxFlex="250px" [menuConfig]="simpleMenu"></stark-app-menu>
 		</div>
 	</example-viewer>
 </section>

showcase/src/assets/examples/menu/sections.html

@@ -1 +1 @@
-<stark-app-menu [parentMenuConfig]="menuWithSections"></stark-app-menu>
+<stark-app-menu [menuConfig]="menuWithSections"></stark-app-menu>

showcase/src/assets/examples/menu/simple.html

@@ -1 +1 @@
-<stark-app-menu [parentMenuConfig]="simpleMenu"></stark-app-menu>
+<stark-app-menu [menuConfig]="simpleMenu"></stark-app-menu>

starter/src/app/app.component.html

@@ -2,7 +2,7 @@
 	<stark-app-sidebar>
 		<ng-container stark-app-sidenav-menu>
 			<stark-app-logo></stark-app-logo>
-			<stark-app-menu [parentMenuConfig]="mainMenu"></stark-app-menu>
+			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
 		<div stark-app-sidenav-content>
 			<header class="stark-app-header">