diff --git a/libs/design/notification/README.md b/libs/design/notification/README.md index 432c738109..0991a0fa11 100644 --- a/libs/design/notification/README.md +++ b/libs/design/notification/README.md @@ -7,6 +7,47 @@ Notifications are used to display short messages that provide context in close p ### Default Notification +## Usage + +### Within a standalone component +To use notification in a standalone component, import `DAFF_NOTIFICATION_COMPONENTS` directly into your custom component: + +```ts +@Component({ + selector: 'custom-component', + templateUrl: './custom-component.component.html', + standalone: true, + imports: [ + DAFF_NOTIFICATION_COMPONENTS, + ], +}) +export class CustomComponent {} +``` + +### Within a module (deprecated) +To use notification in a module, import `DaffNotificationModule` into your custom module: + +```ts +import { NgModule } from '@angular/core'; + +import { DaffNotificationModule } from '@daffodil/design/notification'; + +@NgModule({ + declarations: [ + CustomComponent, + ], + exports: [ + CustomComponent, + ], + imports: [ + DaffNotificationModule, + ], +}) +export class CustomComponentModule { } +``` + +> This method is deprecated. It's recommended to update all custom components to standalone. + ## Supported Content Types ### Icon diff --git a/libs/design/notification/examples/src/default-notification/default-notification.component.ts b/libs/design/notification/examples/src/default-notification/default-notification.component.ts index d8f30c425c..54247b09da 100644 --- a/libs/design/notification/examples/src/default-notification/default-notification.component.ts +++ b/libs/design/notification/examples/src/default-notification/default-notification.component.ts @@ -8,7 +8,7 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { DaffPrefixSuffixModule } from '@daffodil/design'; import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; -import { DaffNotificationModule } from '@daffodil/design/notification'; +import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -18,7 +18,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - DaffNotificationModule, + DAFF_NOTIFICATION_COMPONENTS, FaIconComponent, DaffPrefixSuffixModule, DAFF_BUTTON_COMPONENTS, diff --git a/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts index 2905d64bfd..0c638181a5 100644 --- a/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts +++ b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts @@ -7,7 +7,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { DaffPrefixSuffixModule } from '@daffodil/design'; -import { DaffNotificationModule } from '@daffodil/design/notification'; +import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -22,7 +22,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - DaffNotificationModule, + DAFF_NOTIFICATION_COMPONENTS, FaIconComponent, DaffPrefixSuffixModule, NgIf, diff --git a/libs/design/notification/examples/src/notification-orientations/notification-orientations.component.ts b/libs/design/notification/examples/src/notification-orientations/notification-orientations.component.ts index fc3a2f51d0..a037e0b47d 100644 --- a/libs/design/notification/examples/src/notification-orientations/notification-orientations.component.ts +++ b/libs/design/notification/examples/src/notification-orientations/notification-orientations.component.ts @@ -15,7 +15,7 @@ import { import { DaffPrefixSuffixModule } from '@daffodil/design'; import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; -import { DaffNotificationModule } from '@daffodil/design/notification'; +import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -25,7 +25,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - DaffNotificationModule, + DAFF_NOTIFICATION_COMPONENTS, FaIconComponent, DaffPrefixSuffixModule, DAFF_BUTTON_COMPONENTS, diff --git a/libs/design/notification/examples/src/notification-status/notification-status.component.ts b/libs/design/notification/examples/src/notification-status/notification-status.component.ts index ee9dc4d4af..b758a5beb7 100644 --- a/libs/design/notification/examples/src/notification-status/notification-status.component.ts +++ b/libs/design/notification/examples/src/notification-status/notification-status.component.ts @@ -16,7 +16,7 @@ import { import { DaffPrefixSuffixModule } from '@daffodil/design'; import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; -import { DaffNotificationModule } from '@daffodil/design/notification'; +import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -26,7 +26,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - DaffNotificationModule, + DAFF_NOTIFICATION_COMPONENTS, NgIf, FaIconComponent, DaffPrefixSuffixModule, diff --git a/libs/design/notification/examples/src/notification-with-actions/notification-with-actions.component.ts b/libs/design/notification/examples/src/notification-with-actions/notification-with-actions.component.ts index 8829cd419b..6f9ad3eee1 100644 --- a/libs/design/notification/examples/src/notification-with-actions/notification-with-actions.component.ts +++ b/libs/design/notification/examples/src/notification-with-actions/notification-with-actions.component.ts @@ -6,7 +6,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'; -import { DaffNotificationModule } from '@daffodil/design/notification'; +import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -23,7 +23,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - DaffNotificationModule, + DAFF_NOTIFICATION_COMPONENTS, FontAwesomeModule, DAFF_BUTTON_COMPONENTS, ], diff --git a/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts b/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts index fbd7f64e49..d1d693828a 100644 --- a/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts +++ b/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts @@ -15,6 +15,10 @@ import { DaffNotificationActionsDirective } from './notification-actions.directi template: `

Lorem Ipsum

`, + standalone: true, + imports: [ + DaffNotificationActionsDirective, + ], }) class WrapperComponent {} @@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationActionsDirective', () beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffNotificationActionsDirective, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/notification/src/notification-actions/notification-actions.directive.ts b/libs/design/notification/src/notification-actions/notification-actions.directive.ts index 406514a165..4cb42a288a 100644 --- a/libs/design/notification/src/notification-actions/notification-actions.directive.ts +++ b/libs/design/notification/src/notification-actions/notification-actions.directive.ts @@ -5,6 +5,7 @@ import { @Directive({ selector: '[daffNotificationActions]', + standalone: true, }) export class DaffNotificationActionsDirective { diff --git a/libs/design/notification/src/notification-message/notification-message.directive.spec.ts b/libs/design/notification/src/notification-message/notification-message.directive.spec.ts index ce8a61f9fa..6e56dc5740 100644 --- a/libs/design/notification/src/notification-message/notification-message.directive.spec.ts +++ b/libs/design/notification/src/notification-message/notification-message.directive.spec.ts @@ -15,6 +15,10 @@ import { DaffNotificationMessageDirective } from './notification-message.directi template: `

Lorem Ipsum

`, + standalone: true, + imports: [ + DaffNotificationMessageDirective, + ], }) class WrapperComponent {} @@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationMessageDirective', () beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffNotificationMessageDirective, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/notification/src/notification-message/notification-message.directive.ts b/libs/design/notification/src/notification-message/notification-message.directive.ts index e2782a6395..5ddd000636 100644 --- a/libs/design/notification/src/notification-message/notification-message.directive.ts +++ b/libs/design/notification/src/notification-message/notification-message.directive.ts @@ -5,6 +5,7 @@ import { @Directive({ selector: '[daffNotificationMessage]', + standalone: true, }) export class DaffNotificationMessageDirective { diff --git a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts index f1eae66ee9..25912ba58a 100644 --- a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts +++ b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts @@ -15,6 +15,10 @@ import { DaffNotificationSubtitleDirective } from './notification-subtitle.direc template: `

Subtitle

`, + standalone: true, + imports: [ + DaffNotificationSubtitleDirective, + ], }) class WrapperComponent {} @@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationSubtitleDirective', () beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffNotificationSubtitleDirective, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts index 611630350d..b44367f032 100644 --- a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts +++ b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts @@ -5,6 +5,7 @@ import { @Directive({ selector: '[daffNotificationSubtitle]', + standalone: true, }) export class DaffNotificationSubtitleDirective { diff --git a/libs/design/notification/src/notification-title/notification-title.directive.spec.ts b/libs/design/notification/src/notification-title/notification-title.directive.spec.ts index 3d0995ebd4..e25eb652db 100644 --- a/libs/design/notification/src/notification-title/notification-title.directive.spec.ts +++ b/libs/design/notification/src/notification-title/notification-title.directive.spec.ts @@ -15,6 +15,10 @@ import { DaffNotificationTitleDirective } from './notification-title.directive'; template: `

Title

`, + standalone: true, + imports: [ + DaffNotificationTitleDirective, + ], }) class WrapperComponent {} @@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationTitleDirective', () => beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffNotificationTitleDirective, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/notification/src/notification-title/notification-title.directive.ts b/libs/design/notification/src/notification-title/notification-title.directive.ts index f234294e47..0d6051e8b7 100644 --- a/libs/design/notification/src/notification-title/notification-title.directive.ts +++ b/libs/design/notification/src/notification-title/notification-title.directive.ts @@ -5,6 +5,7 @@ import { @Directive({ selector: '[daffNotificationTitle]', + standalone: true, }) export class DaffNotificationTitleDirective { diff --git a/libs/design/notification/src/notification.module.ts b/libs/design/notification/src/notification.module.ts index f9c9cb8e3b..1ac1ef88b6 100644 --- a/libs/design/notification/src/notification.module.ts +++ b/libs/design/notification/src/notification.module.ts @@ -10,14 +10,14 @@ import { DaffNotificationMessageDirective } from './notification-message/notific import { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive'; import { DaffNotificationTitleDirective } from './notification-title/notification-title.directive'; - +/** + * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS} + */ @NgModule({ imports: [ CommonModule, DaffPrefixSuffixModule, FontAwesomeModule, - ], - declarations: [ DaffNotificationComponent, DaffNotificationActionsDirective, DaffNotificationMessageDirective, diff --git a/libs/design/notification/src/notification.ts b/libs/design/notification/src/notification.ts new file mode 100644 index 0000000000..e4cf90a9ec --- /dev/null +++ b/libs/design/notification/src/notification.ts @@ -0,0 +1,16 @@ +import { DaffPrefixSuffixModule } from '@daffodil/design'; + +import { DaffNotificationComponent } from './notification/notification.component'; +import { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive'; +import { DaffNotificationMessageDirective } from './notification-message/notification-message.directive'; +import { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive'; +import { DaffNotificationTitleDirective } from './notification-title/notification-title.directive'; + +export const DAFF_NOTIFICATION_COMPONENTS = [ + DaffNotificationComponent, + DaffNotificationActionsDirective, + DaffNotificationMessageDirective, + DaffNotificationTitleDirective, + DaffNotificationSubtitleDirective, + DaffPrefixSuffixModule, +]; diff --git a/libs/design/notification/src/notification/notification.component.spec.ts b/libs/design/notification/src/notification/notification.component.spec.ts index 0c8a4dd726..5e47df360a 100644 --- a/libs/design/notification/src/notification/notification.component.spec.ts +++ b/libs/design/notification/src/notification/notification.component.spec.ts @@ -25,6 +25,10 @@ import { (closeNotification)="closeNotificationFunction()"> `, + standalone: true, + imports: [ + DaffNotificationComponent, + ], }) class WrapperComponent { @@ -42,8 +46,7 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ - DaffNotificationComponent, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/notification/src/notification/notification.component.ts b/libs/design/notification/src/notification/notification.component.ts index b71e3cd696..4291e8dc75 100644 --- a/libs/design/notification/src/notification/notification.component.ts +++ b/libs/design/notification/src/notification/notification.component.ts @@ -1,3 +1,4 @@ +import { NgIf } from '@angular/common'; import { Component, Input, @@ -10,12 +11,14 @@ import { Output, EventEmitter, } from '@angular/core'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { DaffArticleEncapsulatedDirective, DaffPrefixable, DaffPrefixDirective, + DaffPrefixSuffixModule, DaffStatusableDirective, DaffStatusEnum, } from '@daffodil/design'; @@ -46,6 +49,12 @@ enum DaffNotificationOrientationEnum { ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + NgIf, + FaIconComponent, + DaffPrefixSuffixModule, + ], }) export class DaffNotificationComponent implements DaffPrefixable { faTimes = faTimes; diff --git a/libs/design/notification/src/public_api.ts b/libs/design/notification/src/public_api.ts index 54b9a643e8..d116355074 100644 --- a/libs/design/notification/src/public_api.ts +++ b/libs/design/notification/src/public_api.ts @@ -4,3 +4,4 @@ export * from './notification-actions/notification-actions.directive'; export * from './notification-title/notification-title.directive'; export * from './notification-subtitle/notification-subtitle.directive'; export * from './notification-message/notification-message.directive'; +export { DAFF_NOTIFICATION_COMPONENTS } from './notification';