feat(design)!: shard modal component (#2699)

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

apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffModalModule } from '@daffodil/design';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { DemoAddToCartNotificationStateModule } from './add-to-cart-notification-state.module';
 import { AddToCartNotificationComponentModule } from './components/add-to-cart-notification/add-to-cart-notification.module';

apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.spec.ts

@@ -8,13 +8,11 @@ import {
 import { Observable } from 'rxjs';
 
 import { DaffAddToCart } from '@daffodil/cart/state';
-import { DaffModalModule } from '@daffodil/design';
-
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { AddToCartNotificationEffects } from './add-to-cart-notification.effects';
 import { OpenAddToCartNotification } from '../actions/add-to-cart-notification.actions';
 
-
 describe('AddToCartNotificationEffects', () => {
   let actions$: Observable<any>;
   let effects: AddToCartNotificationEffects;

apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts

@@ -14,7 +14,7 @@ import { DaffCartActionTypes } from '@daffodil/cart/state';
 import {
   DaffModalService,
   DaffModal,
-} from '@daffodil/design';
+} from '@daffodil/design/modal';
 
 import {
   OpenAddToCartNotification,

apps/design-land/src/app/modal/modal.component.spec.ts

@@ -4,7 +4,7 @@ import {
   TestBed,
 } from '@angular/core/testing';
 
-import { DaffModalModule } from '@daffodil/design';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { DesignLandModalComponent } from './modal.component';
 

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

@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffModalService } from '@daffodil/design';
+import { DaffModalService } from '@daffodil/design/modal';
 
 import { BasicModalContentComponent } from './modal-content.component';
 

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffModalModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { BasicModalComponent } from './basic-modal.component';
 import { BasicModalContentComponent } from './modal-content.component';

libs/design/modal/ng-package.json

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

libs/design/modal/src/index.ts

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

libs/design/src/molecules/modal/modal-header/modal-header.component.scss → libs/design/modal/src/modal-header/modal-header.component.scss

@@ -1,5 +1,5 @@
-@use '../../../../scss/typography' as t;
-@use '../../../../scss/layout';
+@use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 
 :host {
 	display: block;

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

@@ -1,4 +1,4 @@
-@use '../../../scss/core';
+@use '../../scss/core';
 
 @mixin daff-modal-theme($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');

libs/design/src/molecules/modal/modal/modal.component.scss → libs/design/modal/src/modal/modal.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../scss/layout';
+@use '../../../scss/layout';
 
 :host {
 	display: block;

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

@@ -1,8 +1,5 @@
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
 } from '@angular/core';
 import {

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

@@ -20,7 +20,8 @@ import {
   AfterViewInit,
 } from '@angular/core';
 
-import { daffFocusableElementsSelector } from '../../../core/focus/public_api';
+import { daffFocusableElementsSelector } from '@daffodil/design';
+
 import { daffFadeAnimations } from '../animations/modal-animation';
 import { getAnimationState } from '../animations/modal-animation-state';
 

libs/design/src/molecules/modal/modal.ts → libs/design/modal/src/modal/modal.ts

@@ -1,7 +1,7 @@
 import { OverlayRef } from '@angular/cdk/overlay';
 import { ComponentRef } from '@angular/core';
 
-import { DaffModalComponent } from './modal/modal.component';
+import { DaffModalComponent } from './modal.component';
 
 export interface DaffModal {
   /**

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

@@ -1,7 +1,7 @@
 export * from './modal/modal.component';
 export { DaffModalModule } from './modal.module';
 export { DaffModalService } from './service/modal.service';
-export { DaffModal } from './modal';
+export { DaffModal } from './modal/modal';
 export { DaffModalHeaderComponent } from './modal-header/modal-header.component';
 export { DaffModalTitleDirective } from './modal-title/modal-title.directive';
 export { DaffModalContentComponent } from './modal-content/modal-content.component';

libs/design/src/molecules/modal/service/modal.service.ts → libs/design/modal/src/service/modal.service.ts

@@ -11,7 +11,7 @@ import {
   ComponentRef,
 } from '@angular/core';
 
-import { DaffModal } from '../modal';
+import { DaffModal } from '../modal/modal';
 import { DaffModalConfiguration } from '../modal/modal-config';
 import { DaffModalComponent } from '../modal/modal.component';
 import { DaffModalModule } from '../modal.module';

libs/design/src/molecules/modal/service/modal.service.spec.ts → libs/design/modal/src/service/specs/modal.service.spec.ts

@@ -2,7 +2,6 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import {
   Component,
   NgModule,
-  DebugElement,
   ViewContainerRef,
 } from '@angular/core';
 import {
@@ -14,8 +13,8 @@ import {
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalService } from './modal.service';
-import { DaffModalModule } from '../modal.module';
+import { DaffModalModule } from '../../modal.module';
+import { DaffModalService } from '../modal.service';
 
 @Component({
   template: `

libs/design/src/molecules/modal/service/spec/multiple-modal.spec.ts → libs/design/modal/src/service/specs/multiple-modal.spec.ts

@@ -3,7 +3,6 @@ import {
   Component,
   NgModule,
   ViewContainerRef,
-  DebugElement,
 } from '@angular/core';
 import {
   waitForAsync,
@@ -17,7 +16,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DaffModalModule } from '../../modal.module';
 import { DaffModalService } from '../modal.service';
 
-
 @Component({
   selector: 'daff-dynamic-component',
   template: `

libs/design/src/molecules/modal/modal/spec/animations.spec.ts → libs/design/modal/src/specs/animations.spec.ts

@@ -1,8 +1,5 @@
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
 } from '@angular/core';
 import {
@@ -13,7 +10,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalComponent } from '../modal.component';
+import { DaffModalComponent } from '../modal/modal.component';
 
 @Component({ template: `
   <div class="daff-modal-wrapper">

libs/design/src/molecules/modal/modal/spec/dynamic-content.spec.ts → libs/design/modal/src/specs/dynamic-content.spec.ts

@@ -4,9 +4,6 @@ import {
 } from '@angular/cdk/portal';
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
   NgModule,
 } from '@angular/core';
@@ -18,7 +15,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalComponent } from '../modal.component';
+import { DaffModalComponent } from '../modal/modal.component';
 
 @Component({ template: `<daff-modal></daff-modal>` })
 class WrapperComponent {}

libs/design/scss/theme.scss

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

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/modal/public_api';
 export * from './molecules/navbar/public_api';
 export * from './molecules/paginator/public_api';
 export * from './molecules/qty-dropdown/public_api';