diff --git a/libs/design/menu/README.md b/libs/design/menu/README.md index 5d7390ec51..177b8dc1b9 100644 --- a/libs/design/menu/README.md +++ b/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 +## 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 diff --git a/libs/design/menu/examples/src/basic-menu/basic-menu.component.ts b/libs/design/menu/examples/src/basic-menu/basic-menu.component.ts index 1b72048cb5..2e56f21545 100644 --- a/libs/design/menu/examples/src/basic-menu/basic-menu.component.ts +++ b/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; diff --git a/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.html b/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.html index ad0dee6b96..de5491c56f 100644 --- a/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.html +++ b/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.html @@ -1,11 +1,11 @@ - My Account + My Account - Help + Help \ No newline at end of file diff --git a/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.ts b/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.ts index e13de8e1f4..6817d64c24 100644 --- a/libs/design/menu/examples/src/basic-menu/menu-content/menu-content.component.ts +++ b/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; diff --git a/libs/design/menu/src/menu-activator/menu-activator.component.spec.ts b/libs/design/menu/src/menu-activator/menu-activator.component.spec.ts index e41092f03c..9d6295eb93 100644 --- a/libs/design/menu/src/menu-activator/menu-activator.component.spec.ts +++ b/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: ` - - -` }) +@Component({ + template: ` + + + `, + 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: [ diff --git a/libs/design/menu/src/menu-activator/menu-activator.component.ts b/libs/design/menu/src/menu-activator/menu-activator.component.ts index 75eb3cf640..9df15558d3 100644 --- a/libs/design/menu/src/menu-activator/menu-activator.component.ts +++ b/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 { diff --git a/libs/design/menu/src/menu-item/menu-item.component.scss b/libs/design/menu/src/menu-item/menu-item.component.scss index f358f2ffcb..a50a35b6ae 100644 --- a/libs/design/menu/src/menu-item/menu-item.component.scss +++ b/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; diff --git a/libs/design/menu/src/menu-item/menu-item.component.spec.ts b/libs/design/menu/src/menu-item/menu-item.component.spec.ts index 8914ed6a9e..dd5d0b8d20 100644 --- a/libs/design/menu/src/menu-item/menu-item.component.spec.ts +++ b/libs/design/menu/src/menu-item/menu-item.component.spec.ts @@ -16,6 +16,10 @@ import { DaffMenuItemComponent } from './menu-item.component'; Test 1 `, + standalone: true, + imports: [ + DaffMenuItemComponent, + ], }) class WrapperComponent {} @@ -30,8 +34,7 @@ describe('@daffodil/design/menu | DaffMenuItemComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffMenuItemComponent, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/menu/src/menu-item/menu-item.component.ts b/libs/design/menu/src/menu-item/menu-item.component.ts index dfc1654dcf..69ad561049 100644 --- a/libs/design/menu/src/menu-item/menu-item.component.ts +++ b/libs/design/menu/src/menu-item/menu-item.component.ts @@ -1,3 +1,4 @@ +import { NgIf } from '@angular/common'; import { Component, ChangeDetectionStrategy, @@ -5,7 +6,10 @@ import { 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 */ diff --git a/libs/design/menu/src/menu.module.ts b/libs/design/menu/src/menu.module.ts index 5b7c685847..9c4c63bd10 100644 --- a/libs/design/menu/src/menu.module.ts +++ b/libs/design/menu/src/menu.module.ts @@ -11,8 +11,6 @@ import { DaffMenuService } from './services/menu.service'; imports: [ CommonModule, OverlayModule, - ], - declarations: [ DaffMenuActivatorDirective, DaffMenuComponent, DaffMenuItemComponent, diff --git a/libs/design/menu/src/menu/menu.component.spec.ts b/libs/design/menu/src/menu/menu.component.spec.ts index 5ecc339e7f..52fd059b14 100644 --- a/libs/design/menu/src/menu/menu.component.spec.ts +++ b/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: ` - -` }) +@Component({ + template: ``, + 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: [ diff --git a/libs/design/menu/src/menu/menu.component.ts b/libs/design/menu/src/menu/menu.component.ts index 13198a18c1..072938fc9d 100644 --- a/libs/design/menu/src/menu/menu.component.ts +++ b/libs/design/menu/src/menu/menu.component.ts @@ -18,6 +18,7 @@ import { import { daffFocusableElementsSelector } from '@daffodil/design'; +import { DaffMenuItemComponent } from '../menu-item/menu-item.component'; import { DaffMenuService } from '../services/menu.service'; @Component({ @@ -25,6 +26,10 @@ import { DaffMenuService } from '../services/menu.service'; template: '', styleUrls: ['./menu.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + DaffMenuItemComponent, + ], }) export class DaffMenuComponent implements AfterContentInit, AfterViewInit { @HostBinding('class.daff-menu') class = true; diff --git a/libs/design/menu/src/services/menu.service.ts b/libs/design/menu/src/services/menu.service.ts index 92308dbb8d..c987e0c63b 100644 --- a/libs/design/menu/src/services/menu.service.ts +++ b/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 = new BehaviorSubject(false); public open$: Observable = 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(>component)); + this._overlay.attach(new ComponentPortal(>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( diff --git a/libs/design/menu/src/specs/children.spec.ts b/libs/design/menu/src/specs/children.spec.ts index 1cbaae0c59..bd264c1f84 100644 --- a/libs/design/menu/src/specs/children.spec.ts +++ b/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: ` - -` }) +import { provideTestMenuService } from '../testing/dummy-service'; + +@Component({ + template: ``, + 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(); })); diff --git a/libs/design/menu/src/specs/no-children.spec.ts b/libs/design/menu/src/specs/no-children.spec.ts index 8ca2943783..fa288d108c 100644 --- a/libs/design/menu/src/specs/no-children.spec.ts +++ b/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: ` - - Test - - -` }) +import { DaffMenuItemComponent } from '../menu-item/menu-item.component'; +import { provideTestMenuService } from '../testing/dummy-service'; + +@Component({ + template: ` + + Test + + + `, + 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); }); });