feat(design, design-examples, daffio, demo): deprecate @daffodil/design/image in favor of @daffodil/design/image-lite

apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.html

@@ -7,8 +7,8 @@
       Transition between Magento, Shopify or any other platforms without the hassle of reinventing your front-end.
     </p>
     <div daffCalloutBody class="daffio-home-callout-platforms__logos">
-      <daff-image src="/assets/magento-monotone-logo.svg" alt="Magento Logo" width="300" height="83"></daff-image>
-      <daff-image src="/assets/shopify-monotone-logo.svg" alt="Shopify Logo" width="300" height="86"></daff-image>
+      <img daff-image ngSrc="/assets/magento-monotone-logo.svg" alt="Magento Logo" width="300" height="83" />
+      <img daff-image ngSrc="/assets/shopify-monotone-logo.svg" alt="Shopify Logo" width="300" height="86" />
     </div>
   </daff-container>
 </daff-callout>

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

@@ -6,7 +6,7 @@ import {
 
 import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
 
 @Component({
   selector: 'daffio-home-callout-platforms',
@@ -15,7 +15,7 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_CALLOUT_COMPONENTS,
-    DAFF_IMAGE_COMPONENTS,
+    DAFF_IMAGE_LITE_COMPONENTS,
     DAFF_CONTAINER_COMPONENTS,
   ],
 })

apps/daffio/src/app/content/home/components/home-callout-sponsors/home-callout-sponsors.component.html

@@ -12,7 +12,7 @@ <h3 daffCalloutTitle>
     <div daffCalloutBody>
       <div class="daffio-home-callout-sponsors__logo-wrapper">
         <a class="daffio-home-callout-sponsors__logo" href="https://www.develodesign.co.uk/" target="_blank">
-          <daff-image class="daffio-home-callout-sponsors__logo-image" src="/assets/sponsors/develo.svg" width="151" height="37" alt="Develo"></daff-image>
+          <img daff-image class="daffio-home-callout-sponsors__logo-image" ngSrc="/assets/sponsors/develo.svg" width="151" height="37" alt="Develo" />
         </a>
         <a href="https://github.com/sponsors/graycoreio" class="daffio-home-callout-sponsors__link" target="_blank" color="theme-contrast">
           Become a sponsor

apps/demo/src/app/core/image-gallery/components/image-gallery.component.html

@@ -1,12 +1,11 @@
 <daff-media-gallery>
   @for(image of images; track image) {
     <ng-template daffThumbnail [thumbnailSrc]="image.url" [label]="image.label">
-      <daff-image 
+      <img daff-image
         alt="{{ image.label }}"
-        src="{{ image.url }}"
+        ngSrc="{{ image.url }}"
         width="594"
-        height="737">
-      </daff-image>
+        height="737" />
     </ng-template>
   }
 </daff-media-gallery>

apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { DaffImageComponent } from '@daffodil/design/image';
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
 import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
 
 import { SetSelectedImageState } from '../actions/image-gallery.actions';
@@ -17,7 +17,7 @@ import * as fromDemoImageGallery from '../reducers/index';
   templateUrl: './image-gallery.component.html',
   encapsulation: ViewEncapsulation.None,
   imports: [
-    DaffImageComponent,
+    DAFF_IMAGE_LITE_COMPONENTS,
     DAFF_MEDIA_GALLERY_COMPONENTS,
   ],
 })

libs/design-examples/card/src/basic-cards/basic-cards.component.html

@@ -1,12 +1,11 @@
 <daff-card>
-  <daff-image
+  <img daff-image
     daffCardImage
-    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
+    ngSrc="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
     alt="Bottom up view of Basel exhibition centre"
     width="1261"
     height="946"
-  >
-  </daff-image>
+  />
   <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
   <div daffCardTagline>Basel, Switzerland</div>
   <h4 daffCardTitle>Basel Exhibition Centre</h4>
@@ -21,14 +20,13 @@ <h4 daffCardTitle>Basel Exhibition Centre</h4>
 </daff-card>
 
 <daff-stroked-card>
-  <daff-image
+  <img daff-image
     daffCardImage
-    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
+    ngSrc="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
     alt="Bottom up view of Basel exhibition centre"
     width="1261"
     height="946"
-  >
-  </daff-image>
+  />
   <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
   <div daffCardTagline>Basel, Switzerland</div>
   <h4 daffCardTitle>Basel Exhibition Centre</h4>

libs/design-examples/card/src/basic-cards/basic-cards.component.ts

@@ -7,7 +7,7 @@ import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffButtonComponent } from '@daffodil/design/button';
 import { DAFF_ALL_CARD_COMPONENTS } from '@daffodil/design/card';
-import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
 
 @Component({
   selector: 'basic-cards-example',
@@ -16,9 +16,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_ALL_CARD_COMPONENTS,
-    DAFF_IMAGE_COMPONENTS,
     FaIconComponent,
     DaffButtonComponent,
+    DAFF_IMAGE_LITE_COMPONENTS,
   ],
 })
 export class BasicCardsExampleComponent {

libs/design-examples/card/src/card-orientation/card-orientation.component.html

@@ -8,14 +8,12 @@
 </daff-form-field>
 
 <daff-card [orientation]="orientationControl.value?.value">
-  <daff-image
+  <img daff-image
     daffCardImage
-    src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=3774&q=80"
+    ngSrc="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=3774&q=80"
     alt="Assortment of running shoes lined up"
     width="1261"
-    height="946"
-  >
-  </daff-image>
+    height="946" />
   <div daffCardTagline>Featured Category</div>
   <h4 daffCardTitle>Running Shoes</h4>
   <div daffCardContent>

libs/design-examples/image-lite/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/scss"]
+  }
+}

libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.html

@@ -0,0 +1,5 @@
+<img daff-image
+  ngSrc="https://assets.daff.io/ergonomic_bronze_pants.png"
+  alt="Ergonomic Bronze Pants T-Shirt"
+  [width]="300"
+  [height]="300" />

libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
+
+@Component({
+  selector: 'basic-image-lite-example',
+  templateUrl: './basic-image-lite.component.html',
+  styleUrl: './basic-image-lite.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DAFF_IMAGE_LITE_COMPONENTS,
+  ],
+})
+export class BasicImageLiteExampleComponent {
+
+}

libs/design-examples/image-lite/src/index.ts

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

libs/design-examples/image-lite/src/provider.ts

@@ -0,0 +1,14 @@
+import { makeEnvironmentProviders } from '@angular/core';
+
+import { provideDaffDocsExampleContent } from '@daffodil/docs';
+
+export const provideDaffDesignImageLiteExamplesContent = () => makeEnvironmentProviders(provideDaffDocsExampleContent(
+  {
+    id: 'basic-image-lite',
+    component: () => import('./basic-image-lite/basic-image-lite.component').then(c => c.BasicImageLiteExampleComponent),
+  },
+  {
+    id: 'skeleton-image-lite',
+    component: () => import('./skeleton-image-lite/skeleton-image-lite.component').then(c => c.SkeletonImageLiteExampleComponent),
+  },
+));

libs/design-examples/image-lite/src/public_api.ts

@@ -0,0 +1,4 @@
+export { SkeletonImageLiteExampleComponent } from './skeleton-image-lite/skeleton-image-lite.component';
+export { BasicImageLiteExampleComponent } from './basic-image-lite/basic-image-lite.component';
+
+export { provideDaffDesignImageLiteExamplesContent } from './provider';

libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.html

@@ -0,0 +1,6 @@
+<img daff-image
+  [skeleton]="true"
+  ngSrc="https://assets.daff.io/ergonomic_bronze_pants.png"
+  alt="Ergonomic Bronze Pants T-Shirt"
+  [width]="300"
+  [height]="300" />

libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
+
+@Component({
+  selector: 'skeleton-image-lite-example',
+  templateUrl: './skeleton-image-lite.component.html',
+  styleUrl: './skeleton-image-lite.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DAFF_IMAGE_LITE_COMPONENTS,
+  ],
+})
+export class SkeletonImageLiteExampleComponent {
+
+}

libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.html

@@ -4,47 +4,43 @@
     thumbnailSrc="https://assets.daff.io/elegant_gold_soap.png"
     label="Elegant Golf Soap T-Shirt"
   >
-    <daff-image
-      src="https://assets.daff.io/elegant_gold_soap.png"
+    <img daff-image
+      ngSrc="https://assets.daff.io/elegant_gold_soap.png"
       alt="Elegant Golf Soap T-Shirt"
-      [width]="934"
-      [height]="934"
-    ></daff-image>
+      width="934"
+      height="934" />
   </ng-template>
   <ng-template
     daffThumbnail
     thumbnailSrc="https://assets.daff.io/ergonomic_bronze_pants.png"
     label="Ergonomic Bronze Pants T-Shirt"
   >
-    <daff-image
-      src="https://assets.daff.io/ergonomic_bronze_pants.png"
+    <img daff-image
+      ngSrc="https://assets.daff.io/ergonomic_bronze_pants.png"
       alt="Ergonomic Bronze Pants T-Shirt"
-      [width]="934"
-      [height]="934"
-    ></daff-image>
+      width="934"
+      height="934" />
   </ng-template>
   <ng-template
     daffThumbnail
     thumbnailSrc="https://assets.daff.io/frozen_metal_soap_bubbles.png"
     label="Frozen Metal Soap T-Shirt"
   >
-    <daff-image
-      src="https://assets.daff.io/frozen_metal_soap_bubbles.png"
+    <img daff-image
+      ngSrc="https://assets.daff.io/frozen_metal_soap_bubbles.png"
       alt="Frozen Metal Soap T-Shirt"
-      [width]="934"
-      [height]="934"
-    ></daff-image>
+      width="934"
+      height="934" />
   </ng-template>
   <ng-template
     daffThumbnail
     thumbnailSrc="https://assets.daff.io/handcrafted_bamboo_cheese.png"
     label="Handcrafted Bamboo Cheese T-Shirt"
   >
-    <daff-image
-      src="https://assets.daff.io/handcrafted_bamboo_cheese.png"
+    <img daff-image
+      ngSrc="https://assets.daff.io/handcrafted_bamboo_cheese.png"
       alt="Handcrafted Bamboo Cheese T-Shirt"
-      [width]="934"
-      [height]="934"
-    ></daff-image>
+      width="934"
+      height="934" />
   </ng-template>
 </daff-media-gallery>

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

@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
 import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
 
 @Component({
@@ -12,7 +12,7 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_MEDIA_GALLERY_COMPONENTS,
-    DAFF_IMAGE_COMPONENTS,
+    DAFF_IMAGE_LITE_COMPONENTS,
   ],
 })
 export class BasicMediaGalleryExampleComponent {}

libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.html

@@ -6,12 +6,11 @@
     [label]="element.alt"
   >
     @switch (element.type) { @case ('image') {
-    <daff-image
-      [src]="element.src"
+    <img daff-image
+      [ngSrc]="element.src"
       [alt]="element.alt"
       [width]="element.width"
-      [height]="element.height"
-    ></daff-image>
+      [height]="element.height" />
     } }
   </ng-template>
   }

libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite';
 import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
 
 @Component({
@@ -12,7 +12,7 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_MEDIA_GALLERY_COMPONENTS,
-    DAFF_IMAGE_COMPONENTS,
+    DAFF_IMAGE_LITE_COMPONENTS,
   ],
 })
 export class IteratedMediaGalleryExampleComponent {