feat(design)!: shard menu component (#2698)

BREAKING CHANGE: `DaffMenuModule` has moved to its own package. Update imports to `@daffodil/design/menu`

apps/design-land/src/app/menu/menu.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffMenuModule } from '@daffodil/design';
 import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffMenuModule } from '@daffodil/design/menu';
 
 import { DesignLandMenuRoutingModule } from './menu-routing-module';
 import { DesignLandMenuComponent } from './menu.component';

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

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffMenuModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffMenuModule } from '@daffodil/design/menu';
 
 import { BasicMenuComponent } from './basic-menu.component';
 import { MenuContentComponent } from './menu-content/menu-content.component';

libs/design/menu/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/menu",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 

libs/design/menu/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

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

@@ -11,7 +11,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { DaffMenuActivatorDirective } from './menu-activator.component';
 import { DaffMenuModule } from '../menu.module';
-import { DaffMenuService } from '../service/menu.service';
+import { DaffMenuService } from '../services/menu.service';
 import { provideTestMenuService } from '../testing/dummy-service';
 
 @Component({ template: `
@@ -24,7 +24,6 @@ describe('DaffMenuActivatorDirective', () => {
   let fixture: ComponentFixture<WrapperComponent>;
   let de: DebugElement;
   let component: DaffMenuActivatorDirective;
-  let menuActivatorButton: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({

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

@@ -14,14 +14,13 @@ import {
   takeUntil,
 } from 'rxjs';
 
-import { DaffMenuService } from '../service/menu.service';
+import { DaffMenuService } from '../services/menu.service';
 
 @Directive({
   selector: '[daffMenuActivator]',
 })
 export class DaffMenuActivatorDirective implements OnDestroy {
 
-  @Input() daffMenuActivator: Type<unknown> | TemplateRef<unknown>;
 
   private _destroyed$ = new Subject<boolean>();
   private _open: boolean;
@@ -30,6 +29,8 @@ export class DaffMenuActivatorDirective implements OnDestroy {
 	  return this._open;
   }
 
+  @Input() daffMenuActivator: Type<unknown> | TemplateRef<unknown>;
+
   constructor(
     private service: DaffMenuService,
     private viewContainerRef: ViewContainerRef,

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

@@ -1,4 +1,4 @@
-@use 'interactions';
+@use '../../../scss/interactions';
 
 :host {
 	@include interactions.clickable();

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

@@ -3,13 +3,9 @@ import {
   ChangeDetectionStrategy,
   HostBinding,
   ContentChild,
-  ElementRef,
 } from '@angular/core';
 
-import {
-  DaffPrefixDirective,
-  DaffSuffixDirective,
-} from '../../../core/prefix-suffix/public_api';
+import { DaffPrefixDirective } from '@daffodil/design';
 
 @Component({
   selector:

libs/design/src/molecules/menu/menu-theme.scss → libs/design/menu/src/menu-theme.scss

@@ -1,5 +1,5 @@
-@use '../../../scss/core';
-@use '../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
 
 @mixin daff-menu-theme($theme) {
 	$white: core.daff-map-deep-get($theme, 'core.white');

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

@@ -5,7 +5,7 @@ import { NgModule } from '@angular/core';
 import { DaffMenuComponent } from './menu/menu.component';
 import { DaffMenuActivatorDirective } from './menu-activator/menu-activator.component';
 import { DaffMenuItemComponent } from './menu-item/menu-item.component';
-import { DaffMenuService } from './service/menu.service';
+import { DaffMenuService } from './services/menu.service';
 
 @NgModule({
   imports: [

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

@@ -13,7 +13,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { DaffMenuComponent } from './menu.component';
 import { DaffMenuModule } from '../menu.module';
-import { DaffMenuService } from '../service/menu.service';
+import { DaffMenuService } from '../services/menu.service';
 import { provideTestMenuService } from '../testing/dummy-service';
 
 @Component({ template: `

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

@@ -16,8 +16,9 @@ import {
   fromEvent,
 } from 'rxjs';
 
-import { daffFocusableElementsSelector } from '../../../core/focus/public_api';
-import { DaffMenuService } from '../service/menu.service';
+import { daffFocusableElementsSelector } from '@daffodil/design';
+
+import { DaffMenuService } from '../services/menu.service';
 
 @Component({
   selector: 'daff-menu',

libs/design/src/molecules/menu/public_api.ts → libs/design/menu/src/public_api.ts

@@ -1,6 +1,6 @@
 export * from './helpers/public_api';
 
-export { DaffMenuService } from './service/menu.service';
+export { DaffMenuService } from './services/menu.service';
 export { DaffMenuActivatorDirective } from './menu-activator/menu-activator.component';
 export { DaffMenuModule } from './menu.module';
 export { DaffMenuComponent } from './menu/menu.component';

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

@@ -19,7 +19,8 @@ import {
   Observable,
 } from 'rxjs';
 
-import { DaffLazyComponent } from '../../../core/lazy/public_api';
+import { DaffLazyComponent } from '@daffodil/design';
+
 import { daffMenuCreateOverlay } from '../helpers/public_api';
 
 export interface DaffActivatedMenu {

libs/design/src/molecules/menu/testing/dummy-service.ts → libs/design/menu/src/testing/dummy-service.ts

@@ -1,7 +1,7 @@
 import { Provider } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-import { DaffMenuService } from '../service/menu.service';
+import { DaffMenuService } from '../services/menu.service';
 
 type PublicPart<T> = {[K in keyof T]: T[K]};
 

libs/design/scss/theme.scss

@@ -32,7 +32,7 @@
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
 @use '../media-gallery/src/media-gallery-theme' as media-gallery;
-@use '../src/molecules/menu/menu-theme' as menu;
+@use '../menu/src/menu-theme' as menu;
 @use '../src/molecules/modal/modal-theme' as modal;
 @use '../src/molecules/navbar/navbar-theme' as navbar;
 @use '../notification/src/notification-theme' as notification;

libs/design/src/public_api.ts

@@ -19,7 +19,6 @@ export * from './molecules/backdrop/public_api';
 export * from './molecules/button-set/public_api';
 export * from './molecules/image-gallery/public_api';
 export * from './molecules/image-list/public_api';
-export * from './molecules/menu/public_api';
 export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';
 export * from './molecules/paginator/public_api';