feat(design): convert @daffodil/design components to standalone

apps/daffio/src/app/core/nav/header/header.component.ts

@@ -19,7 +19,7 @@ import {
 } from 'rxjs';
 
 import { DaffLogoModule } from '@daffodil/branding';
-import { DaffButtonModule } from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DaffRouterDataService } from '@daffodil/router';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
@@ -42,7 +42,7 @@ import { DaffioNavLink } from '../link/type';
     DaffLogoModule,
     DaffThemeSwitchButtonModule,
     NgFor,
-    DaffButtonModule,
+    DAFF_BUTTON_COMPONENTS,
     FaIconComponent,
     AsyncPipe,
   ],

apps/daffio/src/app/core/nav/sidebar-body/component.ts

@@ -10,7 +10,7 @@ import {
   Observable,
 } from 'rxjs';
 
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 import { DaffRouterDataService } from '@daffodil/router';
 
 import { DaffioRouteWithNavLinks } from '../link/route.type';
@@ -24,7 +24,7 @@ import { DaffioNavLink } from '../link/type';
   standalone: true,
   imports: [
     AsyncPipe,
-    DaffListModule,
+    DAFF_LIST_COMPONENTS,
     RouterLink,
   ],
 })

apps/daffio/src/app/docs/api/components/api-package/api-package.component.ts

@@ -7,7 +7,7 @@ import {
 import { RouterLink } from '@angular/router';
 
 import { DaffArticleEncapsulatedDirective } from '@daffodil/design';
-import { DaffArticleModule } from '@daffodil/design/article';
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
 
 import { DaffioApiPackageFilterPipe } from './not-packages.pipe';
 import { DaffioApiReference } from '../../models/api-reference';
@@ -25,7 +25,7 @@ import { DaffioApiListSectionComponent } from '../api-list-section/api-list-sect
   imports: [
     RouterLink,
     DaffioApiListSectionComponent,
-    DaffArticleModule,
+    DAFF_ARTICLE_COMPONENTS,
     DaffioApiPackageFilterPipe,
   ],
 })

apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts

@@ -19,7 +19,7 @@ import {
 
 import {
   DaffTreeData,
-  DaffTreeModule,
+  DAFF_TREE_COMPONENTS,
   daffTransformTree,
 } from '@daffodil/design/tree';
 
@@ -45,7 +45,7 @@ const visit = (guide: DaffioDocList): DaffTreeData<unknown> => ({
   imports: [
     AsyncPipe,
     RouterLink,
-    DaffTreeModule,
+    DAFF_TREE_COMPONENTS,
     RouterLinkActive,
   ],
 })

apps/demo/src/app/checkout/components/payment/payment-form/payment-form.component.ts

@@ -18,7 +18,7 @@ import {
   DaffInputModule,
   DaffNativeSelectModule,
 } from '@daffodil/design';
-import { DaffButtonModule } from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 
 import { DemoGeographyAddressSummaryComponent } from '../../../../geography/components/address-summary/address-summary.component';
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
@@ -38,7 +38,7 @@ import { PaymentInfoFormFactory } from '../payment-info-form/factories/payment-i
     DaffInputModule,
     DaffNativeSelectModule,
     DemoCheckoutPaymentInfoFormComponent,
-    DaffButtonModule,
+    DAFF_BUTTON_COMPONENTS,
     DaffCheckboxModule,
     DemoCheckoutAddressFormComponent,
     DemoGeographyAddressSummaryComponent,

apps/demo/src/app/checkout/components/shipping-address/form/shipping-address-form.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffButtonModule } from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DaffPersonalAddress } from '@daffodil/geography';
 
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
@@ -25,7 +25,7 @@ import {
   imports: [
     DemoCheckoutAddressFormComponent,
     ReactiveFormsModule,
-    DaffButtonModule,
+    DAFF_BUTTON_COMPONENTS,
   ],
 })
 export class DemoCheckoutShippingAddressFormComponent implements OnInit {

apps/demo/src/app/checkout/components/shipping/shipping-form/shipping-form.component.ts

@@ -8,7 +8,7 @@ import {
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { DaffCartShippingRate } from '@daffodil/cart';
-import { DaffButtonModule } from '@daffodil/design/button';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 
 import { DemoCheckoutAddressFormComponent } from '../../forms/address/components/address-form/address-form.component';
 import { DemoCheckoutShippingOptionsComponent } from '../shipping-options/components/shipping-options/shipping-options.component';
@@ -27,7 +27,7 @@ import {
     DemoCheckoutAddressFormComponent,
     DemoCheckoutShippingOptionsComponent,
     ReactiveFormsModule,
-    DaffButtonModule,
+    DAFF_BUTTON_COMPONENTS,
   ],
 })
 export class DemoCheckoutShippingFormComponent implements OnInit {

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

@@ -17,9 +17,9 @@ import {
   DaffCartShippingRate,
 } from '@daffodil/cart';
 import { DaffCartFacade } from '@daffodil/cart/state';
-import { DaffAccordionModule } from '@daffodil/design/accordion';
-import { DaffContainerModule } from '@daffodil/design/container';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
 import { DaffPersonalAddress } from '@daffodil/geography';
 
 import { CartSummaryWrapperModule } from '../../../cart/components/cart-summary-wrapper/cart-summary-wrapper.module';
@@ -51,9 +51,9 @@ import {
   imports: [
     CommonModule,
     LetDirective,
-    DaffContainerModule,
-    DaffLoadingIconModule,
-    DaffAccordionModule,
+    DAFF_CONTAINER_COMPONENTS,
+    DAFF_LOADING_ICON_COMPONENTS,
+    DAFF_ACCORDION_COMPONENTS,
 
     DemoCheckoutShippingAddressFormComponent,
     DemoCheckoutShippingAddressSummaryComponent,

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

@@ -8,9 +8,9 @@ import { Observable } from 'rxjs';
 
 import { DaffCartFacade } from '@daffodil/cart/state';
 import { DaffCheckoutPlacedOrderFacade } from '@daffodil/checkout/state';
-import { DaffAccordionModule } from '@daffodil/design/accordion';
-import { DaffContainerModule } from '@daffodil/design/container';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
 import { DaffOrder } from '@daffodil/order';
 
 import { CartSummaryWrapperModule } from '../../cart/components/cart-summary-wrapper/cart-summary-wrapper.module';
@@ -25,10 +25,10 @@ import { ThankYouComponent } from '../components/thank-you/thank-you.component';
     CommonModule,
     LetDirective,
     ThankYouComponent,
-    DaffContainerModule,
+    DAFF_CONTAINER_COMPONENTS,
     CartSummaryWrapperModule,
-    DaffAccordionModule,
-    DaffLoadingIconModule,
+    DAFF_ACCORDION_COMPONENTS,
+    DAFF_LOADING_ICON_COMPONENTS,
   ],
 })
 export class ThankYouViewComponent implements OnInit {

libs/design/accordion/README.md

@@ -4,6 +4,8 @@ An accordion is a group of vertically stacked headings used to toggle the visibi
 ## Overview
 Accordions are made up of `<daff-accordion-item>`s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
 
+<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
+
 ## Supported Content Types
 An accordion item can include a `[daffAccordionItemTitle]`, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.
 
@@ -14,5 +16,41 @@ An item content can be visibile on render by setting the `initiallyExpanded` pro
 
 ## Usage
 
-### Basic Accordion
-<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
+### Within a standalone component
+To use accordion 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_ACCORDION_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use accordion in a module, import `DaffAccordionModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffAccordionModule } from '@daffodil/design/accordion';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffAccordionModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.

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

@@ -3,10 +3,16 @@ import {
   Component,
 } from '@angular/core';
 
+import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
+
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'basic-accordion',
   templateUrl: './basic-accordion.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_ACCORDION_COMPONENTS,
+  ],
 })
 export class BasicAccordionComponent {}

libs/design/accordion/examples/src/public_api.ts

@@ -1,3 +1,2 @@
 export { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
-export { AccordionExamplesModule } from './accordion-examples.module';
 export { ACCORDION_EXAMPLES } from './examples';

libs/design/accordion/src/accordion.module.ts

@@ -1,21 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-
-import { DaffPrefixSuffixModule } from '@daffodil/design';
 
 import { DaffAccordionComponent } from './accordion/accordion/accordion.component';
 import { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
 import { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';
 
+/** @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS} */
 @NgModule({
   imports: [
     CommonModule,
-
-    FontAwesomeModule,
-    DaffPrefixSuffixModule,
-  ],
-  declarations: [
     DaffAccordionComponent,
     DaffAccordionItemComponent,
     DaffAccordionItemTitleDirective,

libs/design/accordion/src/accordion.ts

@@ -0,0 +1,9 @@
+import { DaffAccordionComponent } from './accordion/accordion/accordion.component';
+import { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
+import { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';
+
+export const DAFF_ACCORDION_COMPONENTS = <const>[
+  DaffAccordionComponent,
+  DaffAccordionItemComponent,
+  DaffAccordionItemTitleDirective,
+];

libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffAccordionItemTitleDirective } from './accordion-item-title.directiv
   template: `
     <div daffAccordionItemTitle>Title</div>
   `,
+  standalone: true,
+  imports: [
+    DaffAccordionItemTitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/accordion | DaffAccordionItemTitleDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffAccordionItemTitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffAccordionItemTitle]',
+  standalone: true,
 })
 export class DaffAccordionItemTitleDirective {
 

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts

@@ -13,13 +13,18 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffAccordionItemComponent } from './accordion-item.component';
 
-
-@Component({ template: `
-<daff-accordion-item [initiallyExpanded]="initiallyExpandedValue">
-  <h3 daffAccordionItemTitle>Size and Fit</h3>
-  <div>no content</div>
-</daff-accordion-item>
-` })
+@Component({
+  template: `
+    <daff-accordion-item [initiallyExpanded]="initiallyExpandedValue">
+      <h3 daffAccordionItemTitle>Size and Fit</h3>
+      <div>no content</div>
+    </daff-accordion-item>
+    `,
+  standalone: true,
+  imports: [
+    DaffAccordionItemComponent,
+  ],
+})
 class WrapperComponent {
   initiallyExpandedValue: boolean;
 }
@@ -35,10 +40,7 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
       imports: [
         NoopAnimationsModule,
         FontAwesomeModule,
-      ],
-      declarations: [
         WrapperComponent,
-        DaffAccordionItemComponent,
       ],
     })
       .compileComponents();

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts

@@ -25,6 +25,7 @@ let daffAccordionItemId = 0;
   animations: [
     daffAccordionAnimations.openAccordion,
   ],
+  standalone: true,
 })
 export class DaffAccordionItemComponent implements OnInit {
   /**