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';