feat(design)!: shard image component (#2656)

BREAKING CHANGE: `DaffImageModule` has moved to its own package. Update imports to `@daffodil/design/image`

apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts

@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCalloutModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeCalloutPlatformsComponent } from './home-callout-platforms.component';
 

apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts

@@ -4,11 +4,11 @@ import { RouterModule } from '@angular/router';
 
 import {
   DaffCalloutModule,
-  DaffImageModule,
   DaffCardModule,
 } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeCalloutPwaComponent } from './home-callout-pwa.component';
 

apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts

@@ -2,12 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffHeroModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeHeroComponent } from './home-hero.component';
 

libs/design/card/examples/src/basic-card/basic-card.module.ts

@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicCardComponent } from './basic-card.component';
 

libs/design/card/examples/src/card-orientation/card-orientation.module.ts

@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardOrientationComponent } from './card-orientation.component';
 

libs/design/card/examples/src/card-theming/card-theming.module.ts

@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardThemingComponent } from './card-theming.component';
 

libs/design/card/examples/src/linkable-card/linkable-card.module.ts

@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { LinkableCardComponent } from './linkable-card.component';
 

libs/design/card/examples/src/raised-card/raised-card.module.ts

@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { RaisedCardComponent } from './raised-card.component';
 

libs/design/card/examples/src/stroked-card/stroked-card.module.ts

@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { StrokedCardComponent } from './stroked-card.component';
 

libs/design/image/examples/src/basic-image/basic-image.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicImageComponent } from './basic-image.component';
 

libs/design/image/examples/src/load-image/load-image.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { LoadImageComponent } from './load-image.component';
 

libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { SkeletonImageComponent } from './skeleton-image.component';
 

libs/design/image/ng-package.json

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

libs/design/src/atoms/image/image.module.ts → libs/design/image/src/image.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffImageComponent } from './image.component';
+import { DaffImageComponent } from './image/image.component';
 
 @NgModule({
   declarations: [

libs/design/src/atoms/image/image.component.scss → libs/design/image/src/image/image.component.scss

@@ -1,4 +1,4 @@
-@use 'state';
+@use '../../../scss/state';
 
 :host {
 	display: inline-block;

libs/design/src/atoms/image/image.component.ts → libs/design/image/src/image/image.component.ts

@@ -14,8 +14,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-} from '../../core/skeletonable/public_api';
-import { daffThumbnailCompatToken } from '../../molecules/media-gallery/public_api';
+  daffThumbnailCompatToken,
+} from '@daffodil/design';
 
 const validateProperty = (object: Record<string, any>, prop: string) => {
   if (object[prop] === null || object[prop] === undefined || object[prop] === '') {

libs/design/image/src/index.ts

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

libs/design/image/src/public_api.ts

@@ -0,0 +1,2 @@
+export { DaffImageModule } from './image.module';
+export { DaffImageComponent } from './image/image.component';

libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicMediaGalleryComponent } from './basic-media-gallery.component';
 

libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';
 

libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';
 

libs/design/src/public_api.ts

@@ -6,7 +6,6 @@
 export * from './atoms/form/core/public_api';
 export * from './atoms/form/form-field/public_api';
 export * from './atoms/form/error-message/public_api';
-export * from './atoms/image/public_api';
 export * from './atoms/form/input/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';