feat(design): convert menu component to standalone (#3130)

Author: xelaint

libs/design/menu/README.md

@@ -7,6 +7,29 @@ Menus only appear when a user interacts with a menu activator button. They shoul
 ## Basic Menu
 <design-land-example-viewer-container example="basic-menu"></design-land-example-viewer-container>
 
+## Usage
+
+To use menu, import `DaffMenuModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffMenuModule } from '@daffodil/design/menu';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffMenuModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
 ## Supported Content Types
 
 ### Menu Item

libs/design/menu/examples/src/basic-menu/basic-menu.component.ts

@@ -14,7 +14,10 @@ import { MenuContentComponent } from './menu-content/menu-content.component';
   templateUrl: './basic-menu.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DAFF_BUTTON_COMPONENTS, DaffMenuModule],
+  imports: [
+    DAFF_BUTTON_COMPONENTS,
+    DaffMenuModule,
+  ],
 })
 export class BasicMenuComponent {
   public menu = MenuContentComponent;

libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.html

@@ -1,11 +1,11 @@
 <daff-menu>
   <a href="#" daff-menu-item>
-    <fa-icon [icon]="faUser" [fixedWidth]="true"></fa-icon> My Account
+    <fa-icon [icon]="faUser" [fixedWidth]="true" daffPrefix></fa-icon> My Account
   </a>
   <a href="#" daff-menu-item>
-    <fa-icon [icon]="faInfo" [fixedWidth]="true"></fa-icon> Help
+    <fa-icon [icon]="faInfo" [fixedWidth]="true" daffPrefix></fa-icon> Help
   </a>
   <button daff-menu-item>
-    <fa-icon [icon]="faEnvelope" [fixedWidth]="true"></fa-icon> Contact Us
+    <fa-icon [icon]="faEnvelope" [fixedWidth]="true" daffPrefix></fa-icon> Contact Us
   </button>
 </daff-menu>

libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.ts

@@ -17,7 +17,10 @@ import { DaffMenuModule } from '@daffodil/design/menu';
   templateUrl: './menu-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffMenuModule, FaIconComponent],
+  imports: [
+    DaffMenuModule,
+    FaIconComponent,
+  ],
 })
 export class MenuContentComponent {
   faUser = faUser;

libs/design/menu/src/menu-activator/menu-activator.component.spec.ts

@@ -10,14 +10,21 @@ import { By } from '@angular/platform-browser';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffMenuActivatorDirective } from './menu-activator.component';
-import { DaffMenuModule } from '../menu.module';
+import { DaffMenuComponent } from '../menu/menu.component';
 import { DaffMenuService } from '../services/menu.service';
 import { provideTestMenuService } from '../testing/dummy-service';
 
-@Component({ template: `
-  <button daffMenuActivator="menu"></button>
-  <daff-menu #menu></daff-menu>
-` })
+@Component({
+  template: `
+    <button daffMenuActivator="menu"></button>
+    <daff-menu #menu></daff-menu>
+  `,
+  standalone: true,
+  imports: [
+    DaffMenuComponent,
+    DaffMenuActivatorDirective,
+  ],
+})
 class WrapperComponent {}
 
 describe('@daffodil/design/menu | DaffMenuActivatorDirective', () => {
@@ -28,9 +35,6 @@ describe('@daffodil/design/menu | DaffMenuActivatorDirective', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        DaffMenuModule,
-      ],
-      declarations: [
         WrapperComponent,
       ],
       providers: [

libs/design/menu/src/menu-activator/menu-activator.component.ts

@@ -18,6 +18,7 @@ import { DaffMenuService } from '../services/menu.service';
 
 @Directive({
   selector: '[daffMenuActivator]',
+  standalone: true,
 })
 export class DaffMenuActivatorDirective implements OnDestroy {
 

libs/design/menu/src/menu-item/menu-item.component.scss

@@ -2,7 +2,9 @@
 
 :host {
 	@include interactions.clickable();
-	display: block;
+	display: flex;
+	align-items: center;
+	gap: 8px;
 	border: none;
 	border-radius: 4px;
 	margin: 0;
@@ -13,8 +15,6 @@
 
 .daff-menu-item {
 	&__content {
-		display: flex;
-		gap: 8px;
 		font-size: 1rem;
 		line-height: 1.25rem;
 		text-align: left;

libs/design/menu/src/menu-item/menu-item.component.spec.ts

@@ -16,6 +16,10 @@ import { DaffMenuItemComponent } from './menu-item.component';
     <a href="/test" daff-menu-item>Test 1</a>
     <button daff-menu-item>Test 2</button>
   `,
+  standalone: true,
+  imports: [
+    DaffMenuItemComponent,
+  ],
 })
 
 class WrapperComponent {}
@@ -30,8 +34,7 @@ describe('@daffodil/design/menu | DaffMenuItemComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffMenuItemComponent,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/menu/src/menu-item/menu-item.component.ts

@@ -1,11 +1,15 @@
+import { NgIf } from '@angular/common';
 import {
   Component,
   ChangeDetectionStrategy,
   HostBinding,
   ContentChild,
 } from '@angular/core';
 
-import { DaffPrefixDirective } from '@daffodil/design';
+import {
+  DaffPrefixDirective,
+  DaffPrefixSuffixModule,
+} from '@daffodil/design';
 
 @Component({
   selector:
@@ -14,10 +18,14 @@ import { DaffPrefixDirective } from '@daffodil/design';
   templateUrl: './menu-item.component.html',
   styleUrls: ['./menu-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgIf,
+    DaffPrefixSuffixModule,
+  ],
 })
 
 export class DaffMenuItemComponent {
-
   /**
    * @docs-private
    */

libs/design/menu/src/menu.module.ts

@@ -11,8 +11,6 @@ import { DaffMenuService } from './services/menu.service';
   imports: [
     CommonModule,
     OverlayModule,
-  ],
-  declarations: [
     DaffMenuActivatorDirective,
     DaffMenuComponent,
     DaffMenuItemComponent,

libs/design/menu/src/menu/menu.component.spec.ts

@@ -12,13 +12,18 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffMenuComponent } from './menu.component';
-import { DaffMenuModule } from '../menu.module';
+import { DaffMenuItemComponent } from '../menu-item/menu-item.component';
 import { DaffMenuService } from '../services/menu.service';
 import { provideTestMenuService } from '../testing/dummy-service';
 
-@Component({ template: `
-  <daff-menu></daff-menu>
-` })
+@Component({
+  template: `<daff-menu></daff-menu>`,
+  standalone: true,
+  imports: [
+    DaffMenuComponent,
+    DaffMenuItemComponent,
+  ],
+})
 class WrapperComponent {}
 
 describe('@daffodil/design/menu | DaffMenuComponent', () => {
@@ -31,9 +36,6 @@ describe('@daffodil/design/menu | DaffMenuComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        DaffMenuModule,
-      ],
-      declarations: [
         WrapperComponent,
       ],
       providers: [

libs/design/menu/src/menu/menu.component.ts

@@ -18,13 +18,18 @@ import {
 
 import { daffFocusableElementsSelector } from '@daffodil/design';
 
+import { DaffMenuItemComponent } from '../menu-item/menu-item.component';
 import { DaffMenuService } from '../services/menu.service';
 
 @Component({
   selector: 'daff-menu',
   template: '<ng-content select="[daff-menu-item]"></ng-content>',
   styleUrls: ['./menu.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffMenuItemComponent,
+  ],
 })
 export class DaffMenuComponent implements AfterContentInit, AfterViewInit {
   @HostBinding('class.daff-menu') class = true;

libs/design/menu/src/services/menu.service.ts

@@ -9,6 +9,7 @@ import {
 import {
   ElementRef,
   Injectable,
+  Injector,
   TemplateRef,
   Type,
   ViewContainerRef,
@@ -38,7 +39,10 @@ export class DaffMenuService {
   private $_open: BehaviorSubject<boolean> = new BehaviorSubject(false);
   public open$: Observable<boolean> = this.$_open.asObservable();
 
-  constructor(protected overlay: Overlay) {}
+  constructor(
+    protected overlay: Overlay,
+    private injector: Injector,
+  ) {}
 
   protected async _createOverlay(activatorElement: ViewContainerRef, component: DaffMenuSlot) {
     if (!this._overlay) {
@@ -48,9 +52,9 @@ export class DaffMenuService {
       }
 
       if(component instanceof Type) {
-        this._overlay.attach(new ComponentPortal(<Type<unknown>>component));
+        this._overlay.attach(new ComponentPortal(<Type<unknown>>component, null, this.injector));
       } else if (component instanceof TemplateRef) {
-        this._overlay.attach(new TemplatePortal(component, activatorElement));
+        this._overlay.attach(new TemplatePortal(component, activatorElement, null, this.injector));
       }
 
       this._overlay.backdropClick().pipe(

libs/design/menu/src/specs/children.spec.ts

@@ -11,11 +11,15 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DaffMenuComponent } from '../menu/menu.component';
-import { DaffMenuModule } from '../menu.module';
-
-@Component({ template: `
-  <daff-menu></daff-menu>
-` })
+import { provideTestMenuService } from '../testing/dummy-service';
+
+@Component({
+  template: `<daff-menu></daff-menu>`,
+  standalone: true,
+  imports: [
+    DaffMenuComponent,
+  ],
+})
 class WrapperComponent {}
 
 describe('@daffodil/design/menu | DaffMenuComponent', () => {
@@ -28,11 +32,11 @@ describe('@daffodil/design/menu | DaffMenuComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        DaffMenuModule,
-      ],
-      declarations: [
         WrapperComponent,
       ],
+      providers: [
+        provideTestMenuService(),
+      ],
     })
       .compileComponents();
   }));

libs/design/menu/src/specs/no-children.spec.ts

@@ -1,4 +1,3 @@
-import { OverlayModule } from '@angular/cdk/overlay';
 import {
   Component,
   DebugElement,
@@ -12,14 +11,22 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { DaffMenuComponent } from '../menu/menu.component';
-import { DaffMenuModule } from '../menu.module';
-
-@Component({ template: `
-  <daff-menu>
-    <a href="/test" daff-menu-item id="focused">Test</a>
-    <button daff-menu-item id="not-focused">Test 2</button>
-  </daff-menu>
-` })
+import { DaffMenuItemComponent } from '../menu-item/menu-item.component';
+import { provideTestMenuService } from '../testing/dummy-service';
+
+@Component({
+  template: `
+    <daff-menu>
+      <a href="/test" daff-menu-item id="focused">Test</a>
+      <button daff-menu-item id="not-focused">Test 2</button>
+    </daff-menu>
+  `,
+  standalone: true,
+  imports: [
+    DaffMenuComponent,
+    DaffMenuItemComponent,
+  ],
+})
 class WrapperComponent {}
 
 describe('@daffodil/design/menu | DaffMenuComponent', () => {
@@ -32,11 +39,11 @@ describe('@daffodil/design/menu | DaffMenuComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        DaffMenuModule,
-      ],
-      declarations: [
         WrapperComponent,
       ],
+      providers: [
+        provideTestMenuService(),
+      ],
     })
       .compileComponents();
   }));
@@ -55,8 +62,6 @@ describe('@daffodil/design/menu | DaffMenuComponent', () => {
   });
 
   it('should focus the first focusable child', () => {
-    expect(
-      document.activeElement === de.query(By.css('#focused')).nativeElement,
-    ).toEqual(true);
+    expect(document.activeElement === de.query(By.css('#focused')).nativeElement).toEqual(true);
   });
 });