feat(desing): convert loading icon component to standalone (#3054)

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

@@ -19,7 +19,7 @@ import {
 import { DaffCartFacade } from '@daffodil/cart/state';
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+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';
@@ -52,7 +52,7 @@ import {
     CommonModule,
     LetDirective,
     DAFF_CONTAINER_COMPONENTS,
-    DaffLoadingIconModule,
+    DAFF_LOADING_ICON_COMPONENTS,
     DAFF_ACCORDION_COMPONENTS,
 
     DemoCheckoutShippingAddressFormComponent,

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

@@ -10,7 +10,7 @@ import { DaffCartFacade } from '@daffodil/cart/state';
 import { DaffCheckoutPlacedOrderFacade } from '@daffodil/checkout/state';
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+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';
@@ -28,7 +28,7 @@ import { ThankYouComponent } from '../components/thank-you/thank-you.component';
     DAFF_CONTAINER_COMPONENTS,
     CartSummaryWrapperModule,
     DAFF_ACCORDION_COMPONENTS,
-    DaffLoadingIconModule,
+    DAFF_LOADING_ICON_COMPONENTS,
   ],
 })
 export class ThankYouViewComponent implements OnInit {

libs/design/button/src/button/button.component.ts

@@ -21,6 +21,7 @@ import {
   DaffColorableDirective,
   DaffPrefixSuffixModule,
 } from '@daffodil/design';
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
 
 import { DaffButtonSizableDirective } from './button-sizable.directive';
 
@@ -99,6 +100,7 @@ enum DaffButtonTypeEnum {
   imports: [
     NgIf,
     DaffPrefixSuffixModule,
+    DAFF_LOADING_ICON_COMPONENTS,
   ],
 })
 export class DaffButtonComponent

libs/design/loading-icon/README.md

@@ -4,6 +4,47 @@ Loading icons are used as an indicator of an event in progress.
 ## Overview
 Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](/libs/design/progress-bar/README.md) component instead.
 
+## Usage
+
+### Within a standalone component
+To use loading icon 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_LOADING_ICON_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use loading icon in a module, import `DaffLoadingIconModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffLoadingIconModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Diameter
 The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
 

libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.component.ts

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

libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.ts

@@ -3,14 +3,16 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'loading-icon-diameter',
   templateUrl: './loading-icon-diameter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffLoadingIconModule],
+  imports: [
+    DAFF_LOADING_ICON_COMPONENTS,
+  ],
 })
 export class LoadingIconDiameterComponent { }

libs/design/loading-icon/src/loading-icon.module.ts

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

libs/design/loading-icon/src/loading-icon.ts

@@ -0,0 +1,5 @@
+import { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
+
+export const DAFF_LOADING_ICON_COMPONENTS = <const> [
+  DaffLoadingIconComponent,
+];

libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts

@@ -13,7 +13,13 @@ import { DaffPalette } from '@daffodil/design';
 
 import { DaffLoadingIconComponent } from './loading-icon.component';
 
-@Component({ template: '<daff-loading-icon [color]="color" [diameter]="diameter"></daff-loading-icon>' })
+@Component({
+  template: '<daff-loading-icon [color]="color" [diameter]="diameter"></daff-loading-icon>',
+  standalone: true,
+  imports: [
+    DaffLoadingIconComponent,
+  ],
+})
 class WrapperComponent {
   color: DaffPalette;
   diameter = 60;
@@ -27,9 +33,8 @@ describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffLoadingIconComponent,
       ],
     })
       .compileComponents();

libs/design/loading-icon/src/loading-icon/loading-icon.component.ts

@@ -21,6 +21,7 @@ import { DaffColorableDirective } from '@daffodil/design';
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffLoadingIconComponent {
 

libs/design/loading-icon/src/public_api.ts

@@ -1,2 +1,3 @@
 export { DaffLoadingIconModule } from './loading-icon.module';
 export { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
+export { DAFF_LOADING_ICON_COMPONENTS } from './loading-icon';