feat(design)!: shard loading icon component (#2668)

BREAKING CHANGE: `DaffLoadingIconModule` has moved to its own package. Update imports to `@daffodil/design/loading-icon`

apps/demo/src/app/cart/cart.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { DemoCartRoutingModule } from './cart-routing.module';
 import { CartModule } from './components/cart/cart.module';

apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts

@@ -34,7 +34,7 @@ import {
   daffComposeReducers,
   daffIdentityReducer,
 } from '@daffodil/core/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import {
   DaffProductLoadSuccess,

apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.module.ts

@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffButtonSetModule,
-  DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffButtonSetModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { AddToCartNotificationComponent } from './add-to-cart-notification.component';
 import { ProceedToCheckoutModule } from '../../../proceed-to-checkout/proceed-to-checkout.module';

apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.spec.ts

@@ -17,7 +17,7 @@ import {
 
 import { DaffCart } from '@daffodil/cart';
 import { DaffCartFactory } from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { CartSummaryWrapperComponent } from './cart-summary-wrapper.component';
 import { CartSummaryComponent } from '../cart-summary/cart-summary.component';

apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { CartSummaryWrapperComponent } from './cart-summary-wrapper.component';
 import { HelpBoxModule } from '../../../misc/help-box/help-box.module';

apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts

@@ -16,8 +16,8 @@ import {
   MockDaffCartFacade,
 } from '@daffodil/cart/state/testing';
 import { DaffCartFactory } from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { DemoCartViewComponent } from './cart-view.component';
 

apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts

@@ -11,8 +11,8 @@ import {
   MockDaffCategoryFacade,
 } from '@daffodil/category/state/testing';
 import { DaffCategoryFactory } from '@daffodil/category/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import {
   DaffProductFactory,

apps/demo/src/app/category/pages/category-view/category-view.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DaffCategoryStateModule } from '@daffodil/category/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProductStateModule } from '@daffodil/product/state';
 
 import { CategoryViewComponent } from './category-view.component';

apps/demo/src/app/checkout/checkout.module.ts

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 
 import { DaffCartStateModule } from '@daffodil/cart/state';
 import { StateCheckoutModule } from '@daffodil/checkout';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffAccordionModule } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { CheckoutRoutingModule } from './checkout-routing.module';
 import { DemoCheckoutStateModule } from './checkout-state.module';

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

@@ -38,12 +38,12 @@ import {
 import { DaffPaymentFactory } from '@daffodil/checkout/testing';
 import { DaffAddress } from '@daffodil/core';
 import { DaffAddressFactory } from '@daffodil/core/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import {
   DaffAccordionModule,
   DaffAccordionItemComponent,
 } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { CheckoutViewComponent } from './checkout-view.component';
 import { ShowPaymentView } from '../../actions/payment.actions';

apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts

@@ -8,23 +8,16 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { provideMockStore } from '@ngrx/store/testing';
-import {
-  hot,
-  cold,
-} from 'jasmine-marbles';
 import { of } from 'rxjs';
 
 import {
   DaffSidebarModule,
   DaffSidebarComponent,
-  DaffLoadingIconModule,
   DaffLinkSetModule,
 } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffNavigationTree } from '@daffodil/navigation';
-import {
-  DaffNavigationFacade,
-  DaffNavigationLoad,
-} from '@daffodil/navigation/state';
+import { DaffNavigationLoad } from '@daffodil/navigation/state';
 import {
   DaffNavigationStateTestingModule,
   MockDaffNavigationFacade,

apps/demo/src/app/core/sidebar/sidebar.module.ts

@@ -5,9 +5,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import {
   DaffSidebarModule,
-  DaffLoadingIconModule,
   DaffLinkSetModule,
 } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffNavigationStateModule } from '@daffodil/navigation/state';
 
 import { SidebarListComponent } from './components/sidebar-list/sidebar-list.component';

apps/demo/src/app/product/components/product-grid/product-grid.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { ProductGridComponent } from './product-grid.component';
 import { ProductCardModule } from '../product-card/product-card.module';

apps/demo/src/app/product/components/product/product.module.ts

@@ -2,12 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 
-import {
-  DaffQtyDropdownModule,
-  DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffQtyDropdownModule } from '@daffodil/design';
 import { DaffAccordionModule } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { ProductComponent } from './product.component';
 import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.module';

apps/demo/src/app/product/containers/best-sellers/best-sellers.component.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import {
   DaffProductStateTestingModule,

apps/demo/src/app/product/containers/best-sellers/best-sellers.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProductStateModule } from '@daffodil/product/state';
 
 import { BestSellersComponent } from './best-sellers.component';

apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts

@@ -5,8 +5,8 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import {
   DaffProductStateTestingModule,
   MockDaffProductGridFacade,

apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProductStateModule } from '@daffodil/product/state';
 
 import { ProductGridViewComponent } from './product-grid-view.component';

apps/demo/src/app/product/pages/product-view/product-view.component.spec.ts

@@ -20,7 +20,7 @@ import {
   DaffCartStateTestingModule,
   MockDaffCartFacade,
 } from '@daffodil/cart/state/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProduct } from '@daffodil/product';
 import { DaffProductLoad } from '@daffodil/product/state';
 import {

apps/demo/src/app/product/pages/product-view/product-view.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DaffCartStateModule } from '@daffodil/cart/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import { DaffProductStateModule } from '@daffodil/product/state';
 
 import { ProductViewComponent } from './product-view.component';

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

@@ -20,7 +20,6 @@ import {
   DaffCartFactory,
   DaffCartItemFactory,
 } from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import {
   DaffAccordionModule,
   DaffAccordionItemComponent,
@@ -29,6 +28,7 @@ import {
   DaffContainerComponent,
   DaffContainerModule,
 } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { ThankYouViewComponent } from './thank-you-view.component';
 

apps/demo/src/app/thank-you/thank-you.module.ts

@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { StateCheckoutModule } from '@daffodil/checkout';
-import { DaffLoadingIconModule } from '@daffodil/design';
 import { DaffAccordionModule } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { ThankYouComponentModule } from './components/thank-you/thank-you.module';
 import { ThankYouViewComponent } from './pages/thank-you-view.component';

libs/design/button/src/button.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffLoadingIconModule,
-  DaffPrefixSuffixModule,
-} from '@daffodil/design';
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { DaffButtonComponent } from './button/button.component';
 

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

@@ -12,9 +12,11 @@ import { By } from '@angular/platform-browser';
 import {
   DaffPalette,
   DaffStatus,
-  DaffLoadingIconComponent,
-  DaffLoadingIconModule,
 } from '@daffodil/design';
+import {
+  DaffLoadingIconModule,
+  DaffLoadingIconComponent,
+} from '@daffodil/design/loading-icon';
 
 import {
   DaffButtonComponent,

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

@@ -1,10 +1,8 @@
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import {
-  DaffLoadingIconModule,
-  DaffRadioModule,
-} from '@daffodil/design';
+import { DaffRadioModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { LoadingIconColorComponent } from './loading-icon-color.component';
 

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

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { LoadingIconDiameterComponent } from './loading-icon-diameter.component';
 

libs/design/loading-icon/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/loading-icon",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 

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

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/src/atoms/loading-icon/loading-icon-theme.scss → libs/design/loading-icon/src/loading-icon-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/core';
-@use '../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
 
 @mixin daff-loading-icon-theme($theme) {
 	$primary: map.get($theme, primary);

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffLoadingIconComponent } from './loading-icon.component';
+import { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
 
 @NgModule({
   imports: [

libs/design/src/atoms/loading-icon/loading-icon.component.html → libs/design/loading-icon/src/loading-icon/loading-icon.component.html

@@ -1,3 +1,3 @@
 <svg focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
-        <circle cx="50%" cy="50%" r="46"></circle>
+  <circle cx="50%" cy="50%" r="46"></circle>
 </svg>

libs/design/src/atoms/loading-icon/loading-icon.component.scss → libs/design/loading-icon/src/loading-icon/loading-icon.component.scss

@@ -60,7 +60,7 @@ circle {
 		transform: rotate(0deg);
 	}
 
-	50.5% { /* stylelint-disable-line scss/selector-nest-combinators */
+	50.1% { /* stylelint-disable-line scss/selector-nest-combinators */
 		transform: rotate(0deg);
 	}
 

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

@@ -9,8 +9,9 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { DaffPalette } from '@daffodil/design';
+
 import { DaffLoadingIconComponent } from './loading-icon.component';
-import { DaffPalette } from '../../core/colorable/public_api';
 
 @Component({ template: '<daff-loading-icon [color]="color" [diameter]="diameter"></daff-loading-icon>' })
 class WrapperComponent {

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

@@ -10,7 +10,7 @@ import {
 import {
   daffColorMixin,
   DaffColorable,
-} from '../../core/colorable/public_api';
+} from '@daffodil/design';
 
 /**
  * An _elementRef and an instance of renderer2 are needed for the Colorable mixin

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

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

libs/design/scss/theme.scss

@@ -24,7 +24,7 @@
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
 @use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
-@use '../src/atoms/loading-icon/loading-icon-theme' as loading-icon;
+@use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../src/atoms/progress-indicator/progress-indicator-theme' as progress-indicator;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../src/molecules/callout/callout-theme' as callout;

libs/design/src/public_api.ts

@@ -10,7 +10,6 @@ export * from './atoms/form/input/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';
 export * from './atoms/form/quantity-field/public_api';
-export * from './atoms/loading-icon/public_api';
 export * from './atoms/progress-indicator/public_api';
 export * from './atoms/form/radio/public_api';
 export * from './atoms/form/form-label/public_api';