fix(module:menu): ellipsis menu title content if overflow (#8055)

Author: Laffery

components/menu/menu-item.directive.ts components/menu/menu-item.component.tscomponents/menu/menu-item.directive.ts renamed to components/menu/menu-item.component.ts

@@ -6,17 +6,19 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   AfterContentInit,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
+  Component,
   ContentChildren,
-  Directive,
   Inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   QueryList,
-  SimpleChanges
+  SimpleChanges,
+  ViewEncapsulation
 } from '@angular/core';
 import { NavigationEnd, Router, RouterLink } from '@angular/router';
 import { Subject, combineLatest } from 'rxjs';
@@ -29,9 +31,17 @@ import { MenuService } from './menu.service';
 import { NzIsMenuInsideDropDownToken } from './menu.token';
 import { NzSubmenuService } from './submenu.service';
 
-@Directive({
+@Component({
   selector: '[nz-menu-item]',
   exportAs: 'nzMenuItem',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  template: `
+    <span class="ant-menu-title-content">
+      <ng-content></ng-content>
+    </span>
+  `,
   host: {
     '[class.ant-dropdown-menu-item]': `isMenuInsideDropDown`,
     '[class.ant-dropdown-menu-item-selected]': `isMenuInsideDropDown && nzSelected`,
@@ -46,7 +56,7 @@ import { NzSubmenuService } from './submenu.service';
     '(click)': 'clickMenuItem($event)'
   }
 })
-export class NzMenuItemDirective implements OnInit, OnChanges, OnDestroy, AfterContentInit {
+export class NzMenuItemComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit {
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzSelected: BooleanInput;
   static ngAcceptInputType_nzDanger: BooleanInput;

components/menu/menu.directive.ts

@@ -27,7 +27,7 @@ import { takeUntil } from 'rxjs/operators';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
-import { NzMenuItemDirective } from './menu-item.directive';
+import { NzMenuItemComponent } from './menu-item.component';
 import { MenuService } from './menu.service';
 import { NzIsMenuInsideDropDownToken, NzMenuServiceLocalToken } from './menu.token';
 import { NzMenuModeType, NzMenuThemeType } from './menu.types';
@@ -88,15 +88,15 @@ export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnD
   static ngAcceptInputType_nzInlineCollapsed: BooleanInput;
   static ngAcceptInputType_nzSelectable: BooleanInput;
 
-  @ContentChildren(NzMenuItemDirective, { descendants: true })
-  listOfNzMenuItemDirective!: QueryList<NzMenuItemDirective>;
+  @ContentChildren(NzMenuItemComponent, { descendants: true })
+  listOfNzMenuItemDirective!: QueryList<NzMenuItemComponent>;
   @ContentChildren(NzSubMenuComponent, { descendants: true }) listOfNzSubMenuComponent!: QueryList<NzSubMenuComponent>;
   @Input() nzInlineIndent = 24;
   @Input() nzTheme: NzMenuThemeType = 'light';
   @Input() nzMode: NzMenuModeType = 'vertical';
   @Input() @InputBoolean() nzInlineCollapsed = false;
   @Input() @InputBoolean() nzSelectable = !this.isMenuInsideDropDown;
-  @Output() readonly nzClick = new EventEmitter<NzMenuItemDirective>();
+  @Output() readonly nzClick = new EventEmitter<NzMenuItemComponent>();
   actualMode: NzMenuModeType = 'vertical';
   dir: Direction = 'ltr';
   private inlineCollapsed$ = new BehaviorSubject<boolean>(this.nzInlineCollapsed);

components/menu/menu.module.ts

@@ -15,7 +15,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzMenuDividerDirective } from './menu-divider.directive';
 import { NzMenuGroupComponent } from './menu-group.component';
-import { NzMenuItemDirective } from './menu-item.directive';
+import { NzMenuItemComponent } from './menu-item.component';
 import { NzMenuDirective } from './menu.directive';
 import { NzSubmenuInlineChildComponent } from './submenu-inline-child.component';
 import { NzSubmenuNoneInlineChildComponent } from './submenu-non-inline-child.component';
@@ -26,14 +26,14 @@ import { NzSubMenuComponent } from './submenu.component';
   imports: [BidiModule, CommonModule, PlatformModule, OverlayModule, NzIconModule, NzNoAnimationModule, NzOutletModule],
   declarations: [
     NzMenuDirective,
-    NzMenuItemDirective,
+    NzMenuItemComponent,
     NzSubMenuComponent,
     NzMenuDividerDirective,
     NzMenuGroupComponent,
     NzSubMenuTitleComponent,
     NzSubmenuInlineChildComponent,
     NzSubmenuNoneInlineChildComponent
   ],
-  exports: [NzMenuDirective, NzMenuItemDirective, NzSubMenuComponent, NzMenuDividerDirective, NzMenuGroupComponent]
+  exports: [NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent, NzMenuDividerDirective, NzMenuGroupComponent]
 })
 export class NzMenuModule {}

components/menu/menu.spec.ts

@@ -9,7 +9,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
-import { NzMenuItemDirective } from './menu-item.directive';
+import { NzMenuItemComponent } from './menu-item.component';
 import { NzMenuDirective } from './menu.directive';
 import { NzMenuModule } from './menu.module';
 import { NzSubMenuComponent } from './submenu.component';
@@ -58,7 +58,7 @@ describe('menu', () => {
       let menu: DebugElement;
       beforeEach(() => {
         fixture = TestBed.createComponent(NzTestBasicMenuHorizontalComponent);
-        items = fixture.debugElement.queryAll(By.directive(NzMenuItemDirective));
+        items = fixture.debugElement.queryAll(By.directive(NzMenuItemComponent));
         submenu = fixture.debugElement.query(By.directive(NzSubMenuComponent));
         menu = fixture.debugElement.query(By.directive(NzMenuDirective));
       });
@@ -94,7 +94,7 @@ describe('menu', () => {
       let menu: DebugElement;
       beforeEach(() => {
         fixture = TestBed.createComponent(NzTestBasicMenuInlineComponent);
-        items = fixture.debugElement.queryAll(By.directive(NzMenuItemDirective));
+        items = fixture.debugElement.queryAll(By.directive(NzMenuItemComponent));
         menu = fixture.debugElement.query(By.directive(NzMenuDirective));
         submenus = fixture.debugElement.queryAll(By.directive(NzSubMenuComponent));
       });

components/menu/public-api.ts

@@ -6,7 +6,7 @@
 export * from './menu.directive';
 export * from './menu-group.component';
 export * from './menu-divider.directive';
-export * from './menu-item.directive';
+export * from './menu-item.component';
 export * from './submenu.component';
 export * from './submenu-title.component';
 export * from './submenu-inline-child.component';

components/menu/submenu-title.component.ts

@@ -30,7 +30,7 @@ import { NzMenuModeType } from './menu.types';
   template: `
     <span nz-icon [nzType]="nzIcon" *ngIf="nzIcon"></span>
     <ng-container *nzStringTemplateOutlet="nzTitle">
-      <span>{{ nzTitle }}</span>
+      <span class="ant-menu-title-content">{{ nzTitle }}</span>
     </ng-container>
     <ng-content></ng-content>
     <span

components/menu/submenu.component.ts

@@ -37,7 +37,7 @@ import { getPlacementName, POSITION_MAP, POSITION_TYPE_HORIZONTAL } from 'ng-zor
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
-import { NzMenuItemDirective } from './menu-item.directive';
+import { NzMenuItemComponent } from './menu-item.component';
 import { MenuService } from './menu.service';
 import { NzIsMenuInsideDropDownToken } from './menu.token';
 import { NzMenuModeType, NzMenuThemeType } from './menu.types';
@@ -159,8 +159,8 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit,
   // Can't construct a query for the property ... since the query selector wasn't defined"
   @ContentChildren(forwardRef(() => NzSubMenuComponent), { descendants: true })
   listOfNzSubMenuComponent: QueryList<NzSubMenuComponent> | null = null;
-  @ContentChildren(NzMenuItemDirective, { descendants: true })
-  listOfNzMenuItemDirective: QueryList<NzMenuItemDirective> | null = null;
+  @ContentChildren(NzMenuItemComponent, { descendants: true })
+  listOfNzMenuItemDirective: QueryList<NzMenuItemComponent> | null = null;
   private level = this.nzSubmenuService.level;
   private destroy$ = new Subject<void>();
   position = 'right';