feat(design): convert container component to standalone (#3054)

apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.ts

@@ -18,7 +18,7 @@ import {
 } from '@daffodil/cart';
 import { DaffCartFacade } from '@daffodil/cart/state';
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffPersonalAddress } from '@daffodil/geography';
 
@@ -51,7 +51,7 @@ import {
   imports: [
     CommonModule,
     LetDirective,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     DaffLoadingIconModule,
     DAFF_ACCORDION_COMPONENTS,
 

apps/demo/src/app/thank-you/pages/thank-you-view.component.ts

@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import { DaffCartFacade } from '@daffodil/cart/state';
 import { DaffCheckoutPlacedOrderFacade } from '@daffodil/checkout/state';
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffOrder } from '@daffodil/order';
 
@@ -25,7 +25,7 @@ import { ThankYouComponent } from '../components/thank-you/thank-you.component';
     CommonModule,
     LetDirective,
     ThankYouComponent,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     CartSummaryWrapperModule,
     DAFF_ACCORDION_COMPONENTS,
     DaffLoadingIconModule,

libs/design/container/README.md

@@ -17,5 +17,46 @@ Supported sizes: `xs | sm | md | lg | xl`
 | Large       | 1340px    | lg     |
 | Extra Large | 1920px    | xl     |
 
+<design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>
+
+
 ## Usage
-<design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>
+
+### Within a standalone component
+To use container in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_CONTAINER_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use container in a module, import `DaffCalloutModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffCalloutModule } from '@daffodil/design/container';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffCalloutModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.

libs/design/container/examples/src/container-sizes/container-sizes.component.ts

@@ -8,7 +8,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -17,7 +17,7 @@ import { DaffContainerModule } from '@daffodil/design/container';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     ReactiveFormsModule,
     NgFor,
   ],

libs/design/container/src/container.module.ts

@@ -3,11 +3,12 @@ import { NgModule } from '@angular/core';
 
 import { DaffContainerComponent } from './container/container.component';
 
+/**
+ * @deprecated in favor of {@link DAFF_CONTAINER_COMPONENTS}
+ */
 @NgModule({
   imports: [
     CommonModule,
-  ],
-  declarations: [
     DaffContainerComponent,
   ],
   exports: [

libs/design/container/src/container.ts

@@ -0,0 +1,5 @@
+import { DaffContainerComponent } from './container/container.component';
+
+export const DAFF_CONTAINER_COMPONENTS = <const> [
+  DaffContainerComponent,
+];

libs/design/container/src/container/container.component.spec.ts

@@ -15,6 +15,10 @@ import { DaffContainerComponent } from './container.component';
 
 @Component({
   template: `<daff-container [size]="size"></daff-container>`,
+  standalone: true,
+  imports: [
+    DaffContainerComponent,
+  ],
 })
 class WrapperComponent {
   size: DaffSizeAllType;
@@ -28,9 +32,8 @@ describe('@daffodil/design/container | DaffContainerComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffContainerComponent,
       ],
     })
       .compileComponents();

libs/design/container/src/container/container.component.ts

@@ -20,6 +20,7 @@ import { DaffSizableDirective } from '@daffodil/design';
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffContainerComponent {
   /**

libs/design/container/src/public_api.ts

@@ -1,2 +1,3 @@
 export { DaffContainerComponent } from './container/container.component';
 export { DaffContainerModule } from './container.module';
+export { DAFF_CONTAINER_COMPONENTS } from './container';

libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.component.ts

@@ -11,7 +11,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DaffHeroModule } from '@daffodil/design/hero';
 
 @Component({
@@ -23,7 +23,7 @@ import { DaffHeroModule } from '@daffodil/design/hero';
   standalone: true,
   imports: [
     DaffHeroModule,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
     ReactiveFormsModule,

libs/design/hero/examples/src/hero-with-grid/hero-with-grid.component.ts

@@ -6,7 +6,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DaffHeroModule } from '@daffodil/design/hero';
 
 @Component({
@@ -18,7 +18,7 @@ import { DaffHeroModule } from '@daffodil/design/hero';
   standalone: true,
   imports: [
     DaffHeroModule,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
   ],

libs/design/navbar/examples/src/contained-navbar/contained-navbar.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DaffNavbarModule } from '@daffodil/design/navbar';
 
 @Component({
@@ -16,7 +16,7 @@ import { DaffNavbarModule } from '@daffodil/design/navbar';
   standalone: true,
   imports: [
     DaffNavbarModule,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
   ],
 })