@daffodil/design 0.77.0 → 0.78.0

package/hero/README.md

@@ -4,6 +4,47 @@ Hero is a top level container that is large and captivating. It should only be u
 ## Overview
 Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
 
+## Usage
+
+### Within a standalone component
+To use hero 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_HERO_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use hero in a module, import `DaffHeroModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffHeroModule } from '@daffodil/design/hero';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffHeroModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A `daff-hero` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
 

package/hero/hero/hero.component.d.ts

@@ -1,9 +1,6 @@
 import { DaffTextAlignableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-/**
- * @inheritdoc
- */
 export declare class DaffHeroComponent {
     private textAlignable;
     constructor(textAlignable: DaffTextAlignableDirective);
@@ -12,5 +9,5 @@ export declare class DaffHeroComponent {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHeroComponent, "daff-hero", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffTextAlignableDirective; inputs: { "textAlignment": "textAlignment"; }; outputs: {}; }, { directive: typeof i1.DaffCompactableDirective; inputs: { "compact": "compact"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHeroComponent, "daff-hero", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffTextAlignableDirective; inputs: { "textAlignment": "textAlignment"; }; outputs: {}; }, { directive: typeof i1.DaffCompactableDirective; inputs: { "compact": "compact"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/hero/hero-body/hero-body.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffHeroBodyDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroBodyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroBodyDirective, "[daffHeroBody]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroBodyDirective, "[daffHeroBody]", never, {}, {}, never, never, true, never>;
 }

package/hero/hero-icon/hero-icon.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffHeroIconDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroIconDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroIconDirective, "[daffHeroIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroIconDirective, "[daffHeroIcon]", never, {}, {}, never, never, true, never>;
 }

package/hero/hero-subtitle/hero-subtitle.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffHeroSubtitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroSubtitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroSubtitleDirective, "[daffHeroSubtitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroSubtitleDirective, "[daffHeroSubtitle]", never, {}, {}, never, never, true, never>;
 }

package/hero/hero-tagline/hero-tagline.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffHeroTaglineDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroTaglineDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroTaglineDirective, "[daffHeroTagline]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroTaglineDirective, "[daffHeroTagline]", never, {}, {}, never, never, true, never>;
 }

package/hero/hero-title/hero-title.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffHeroTitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroTitleDirective, "[daffHeroTitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroTitleDirective, "[daffHeroTitle]", never, {}, {}, never, never, true, never>;
 }

package/hero/hero.d.ts

@@ -0,0 +1,7 @@
+import { DaffHeroComponent } from './hero/hero.component';
+import { DaffHeroBodyDirective } from './hero-body/hero-body.directive';
+import { DaffHeroIconDirective } from './hero-icon/hero-icon.directive';
+import { DaffHeroSubtitleDirective } from './hero-subtitle/hero-subtitle.directive';
+import { DaffHeroTaglineDirective } from './hero-tagline/hero-tagline.directive';
+import { DaffHeroTitleDirective } from './hero-title/hero-title.directive';
+export declare const DAFF_HERO_COMPONENTS: readonly [typeof DaffHeroComponent, typeof DaffHeroIconDirective, typeof DaffHeroTaglineDirective, typeof DaffHeroTitleDirective, typeof DaffHeroSubtitleDirective, typeof DaffHeroBodyDirective];

package/hero/hero.module.d.ts

@@ -1,13 +1,16 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./hero/hero.component";
-import * as i2 from "./hero-icon/hero-icon.directive";
-import * as i3 from "./hero-tagline/hero-tagline.directive";
-import * as i4 from "./hero-title/hero-title.directive";
-import * as i5 from "./hero-subtitle/hero-subtitle.directive";
-import * as i6 from "./hero-body/hero-body.directive";
-import * as i7 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./hero/hero.component";
+import * as i3 from "./hero-icon/hero-icon.directive";
+import * as i4 from "./hero-tagline/hero-tagline.directive";
+import * as i5 from "./hero-title/hero-title.directive";
+import * as i6 from "./hero-subtitle/hero-subtitle.directive";
+import * as i7 from "./hero-body/hero-body.directive";
+/**
+ * @deprecated in favor of {@link DAFF_HERO_COMPONENTS}
+ * */
 export declare class DaffHeroModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffHeroModule, [typeof i1.DaffHeroComponent, typeof i2.DaffHeroIconDirective, typeof i3.DaffHeroTaglineDirective, typeof i4.DaffHeroTitleDirective, typeof i5.DaffHeroSubtitleDirective, typeof i6.DaffHeroBodyDirective], [typeof i7.CommonModule], [typeof i1.DaffHeroComponent, typeof i2.DaffHeroIconDirective, typeof i3.DaffHeroTaglineDirective, typeof i4.DaffHeroTitleDirective, typeof i5.DaffHeroSubtitleDirective, typeof i6.DaffHeroBodyDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffHeroModule, never, [typeof i1.CommonModule, typeof i2.DaffHeroComponent, typeof i3.DaffHeroIconDirective, typeof i4.DaffHeroTaglineDirective, typeof i5.DaffHeroTitleDirective, typeof i6.DaffHeroSubtitleDirective, typeof i7.DaffHeroBodyDirective], [typeof i2.DaffHeroComponent, typeof i3.DaffHeroIconDirective, typeof i4.DaffHeroTaglineDirective, typeof i5.DaffHeroTitleDirective, typeof i6.DaffHeroSubtitleDirective, typeof i7.DaffHeroBodyDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffHeroModule>;
 }

package/hero/public_api.d.ts

@@ -1,4 +1,5 @@
 export { DaffHeroModule } from './hero.module';
+export { DAFF_HERO_COMPONENTS } from './hero';
 export * from './hero/hero.component';
 export * from './hero-tagline/hero-tagline.directive';
 export * from './hero-title/hero-title.directive';

package/image/README.md

@@ -1,11 +1,54 @@
 # Image
 Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. `<daff-image>` is an opinionated version that encourages friendly end-user usage.
 
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
+
 ## Attributes
 The `src`, `width`, `height`, and `alt` attributes must be defined. An error will be thrown any of these attributes are missing.
 
 `width` and `height` are required to calculate the aspect ratio of an image, used for the [aspect ratio padding trick](https://css-tricks.com/aspect-ratio-boxes/) that helps to prevent content jumping while images are loading. The `width` and `height` values are rendered as pixels.
 
+## Usage
+
+### Within a standalone component
+To use image 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_IMAGE_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use image in a module, import `DaffImageModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffImageModule } from '@daffodil/design/image';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffImageModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Errors
 
 **DaffImageComponent must have a defined src attribute.**
@@ -22,10 +65,3 @@ This error appears when `<daff-image>` is missing a `height` attribute. The heig
 
 ## Accessbility
 Images should be given a meaningful description using the native `alt` attribute to ensure an accessible experience by default. An error will be thrown if the `alt` attribute is missing.
-
-## Usage
-### Basic Image
-<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
-
-### Image Load Output
-<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>

package/image/image/image.component.d.ts

@@ -31,5 +31,5 @@ export declare class DaffImageComponent implements OnInit {
      */
     get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffImageComponent, "daff-image", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "load": "load"; }, never, never, false, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffImageComponent, "daff-image", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "load": "load"; }, never, never, true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/image/image.d.ts

@@ -0,0 +1,2 @@
+import { DaffImageComponent } from './image/image.component';
+export declare const DAFF_IMAGE_COMPONENTS: readonly [typeof DaffImageComponent];

package/image/image.module.d.ts

@@ -1,8 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./image/image.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./image/image.component";
+/**
+ * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}
+ * */
 export declare class DaffImageModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffImageModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffImageModule, [typeof i1.DaffImageComponent], [typeof i2.CommonModule], [typeof i1.DaffImageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffImageModule, never, [typeof i1.CommonModule, typeof i2.DaffImageComponent], [typeof i2.DaffImageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffImageModule>;
 }

package/image/public_api.d.ts

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

package/link-set/README.md

@@ -1,6 +1,47 @@
 # Link Set
 `<daff-link-set>` is a component for displaying two or more `[daff-link-set-item]`s. `<daff-link-set>`s can be nested.
 
+## Usage
+
+### Within a standalone component
+To use link set 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_LINK_SET_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use link set in a module, import `DaffLinkSetModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffLinkSetModule } from '@daffodil/design/link-set';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffLinkSetModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A `<daff-link-set>` transcludes:
 * `[daffLinkSetHeading]`
@@ -16,7 +57,7 @@ A link set subheading is used by adding `[daffLinkSetSubheading]` to any tag. Th
 ### Styling links within a link set
 Use the `[daff-link-set-item]` component to style links within a link set.
 
-### Usage
+### Example
 ```
 <h4>Default Link Set</h4>
 <daff-link-set class="docs-link-set">

package/link-set/link-set/link-set.component.d.ts

@@ -9,5 +9,5 @@ export declare class DaffLinkSetComponent {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetComponent, "daff-link-set", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetComponent, "daff-link-set", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }

package/link-set/link-set-heading/link-set-heading.directive.d.ts

@@ -8,5 +8,5 @@ export declare class DaffLinkSetHeadingDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetHeadingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLinkSetHeadingDirective, "[daffLinkSetHeading]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLinkSetHeadingDirective, "[daffLinkSetHeading]", never, {}, {}, never, never, true, never>;
 }

package/link-set/link-set-item/link-set-item.component.d.ts

@@ -5,5 +5,5 @@ export declare class DaffLinkSetItemComponent {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetItemComponent, "a[daff-link-set-item]", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetItemComponent, "a[daff-link-set-item]", never, {}, {}, never, ["*"], true, never>;
 }

package/link-set/link-set-subheading/link-set-subheading.directive.d.ts

@@ -8,5 +8,5 @@ export declare class DaffLinkSetSubheadingDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetSubheadingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLinkSetSubheadingDirective, "[daffLinkSetSubheading]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLinkSetSubheadingDirective, "[daffLinkSetSubheading]", never, {}, {}, never, never, true, never>;
 }

package/link-set/link-set.d.ts

@@ -0,0 +1,5 @@
+import { DaffLinkSetComponent } from './link-set/link-set.component';
+import { DaffLinkSetHeadingDirective } from './link-set-heading/link-set-heading.directive';
+import { DaffLinkSetItemComponent } from './link-set-item/link-set-item.component';
+import { DaffLinkSetSubheadingDirective } from './link-set-subheading/link-set-subheading.directive';
+export declare const DAFF_LINK_SET_COMPONENTS: readonly [typeof DaffLinkSetComponent, typeof DaffLinkSetHeadingDirective, typeof DaffLinkSetSubheadingDirective, typeof DaffLinkSetItemComponent];

package/link-set/link-set.module.d.ts

@@ -1,11 +1,14 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./link-set/link-set.component";
-import * as i2 from "./link-set-heading/link-set-heading.directive";
-import * as i3 from "./link-set-subheading/link-set-subheading.directive";
-import * as i4 from "./link-set-item/link-set-item.component";
-import * as i5 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./link-set/link-set.component";
+import * as i3 from "./link-set-heading/link-set-heading.directive";
+import * as i4 from "./link-set-subheading/link-set-subheading.directive";
+import * as i5 from "./link-set-item/link-set-item.component";
+/**
+ * @deprecated in favor of {@link DAFF_LINK_SET_COMPONENTS}
+ */
 export declare class DaffLinkSetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLinkSetModule, [typeof i1.DaffLinkSetComponent, typeof i2.DaffLinkSetHeadingDirective, typeof i3.DaffLinkSetSubheadingDirective, typeof i4.DaffLinkSetItemComponent], [typeof i5.CommonModule], [typeof i1.DaffLinkSetComponent, typeof i2.DaffLinkSetHeadingDirective, typeof i3.DaffLinkSetSubheadingDirective, typeof i4.DaffLinkSetItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLinkSetModule, never, [typeof i1.CommonModule, typeof i2.DaffLinkSetComponent, typeof i3.DaffLinkSetHeadingDirective, typeof i4.DaffLinkSetSubheadingDirective, typeof i5.DaffLinkSetItemComponent], [typeof i2.DaffLinkSetComponent, typeof i3.DaffLinkSetHeadingDirective, typeof i4.DaffLinkSetSubheadingDirective, typeof i5.DaffLinkSetItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffLinkSetModule>;
 }

package/link-set/public_api.d.ts

@@ -3,3 +3,4 @@ export { DaffLinkSetModule } from './link-set.module';
 export { DaffLinkSetSubheadingDirective } from './link-set-subheading/link-set-subheading.directive';
 export { DaffLinkSetHeadingDirective } from './link-set-heading/link-set-heading.directive';
 export { DaffLinkSetItemComponent } from './link-set-item/link-set-item.component';
+export { DAFF_LINK_SET_COMPONENTS } from './link-set';

package/list/README.md

@@ -1,12 +1,53 @@
 # List
 List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
 
+## Usage
+
+### Within a standalone component
+To use list 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_LIST_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use list in a module, import `DaffListModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffListModule } from '@daffodil/design/list';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffListModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Basic List
 A `<daff-list>` consists of multiple `<daff-list-item>`s.
 
 <design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>
 
-## Nvigation List
+## Navigation List
 Use `<daff-nav-list>` for navigation lists. `<daff-list-item>` should be directly added to an anchor tag.
 
 <design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>

package/list/list/list.component.d.ts

@@ -25,5 +25,5 @@ export declare class DaffListComponent {
     get role(): "list" | "navigation";
     private _getHostElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list,daff-nav-list", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list,daff-nav-list", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }

package/list/list-item/list-item.component.d.ts

@@ -26,5 +26,5 @@ export declare class DaffListItemComponent {
     /** Gets whether a list item has one of the given attributes. */
     private _isAnchor;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/list/list.d.ts

@@ -0,0 +1,4 @@
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffListComponent } from './list/list.component';
+import { DaffListItemComponent } from './list-item/list-item.component';
+export declare const DAFF_LIST_COMPONENTS: readonly [typeof DaffListComponent, typeof DaffListItemComponent, typeof DaffPrefixSuffixModule];

package/list/list.module.d.ts

@@ -1,10 +1,13 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./list/list.component";
-import * as i2 from "./list-item/list-item.component";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./list/list.component";
+import * as i3 from "./list-item/list-item.component";
 import * as i4 from "@daffodil/design";
+/**
+ * @deprecated in favor of {@link DAFF_LIST_COMPONENTS}
+ */
 export declare class DaffListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffListModule, [typeof i1.DaffListComponent, typeof i2.DaffListItemComponent], [typeof i3.CommonModule, typeof i4.DaffPrefixSuffixModule], [typeof i1.DaffListComponent, typeof i2.DaffListItemComponent, typeof i4.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffListModule, never, [typeof i1.CommonModule, typeof i2.DaffListComponent, typeof i3.DaffListItemComponent], [typeof i2.DaffListComponent, typeof i3.DaffListItemComponent, typeof i4.DaffPrefixSuffixModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffListModule>;
 }

package/list/public_api.d.ts

@@ -1,3 +1,4 @@
 export { DaffListModule } from './list.module';
+export { DAFF_LIST_COMPONENTS } from './list';
 export * from './list/list.component';
 export * from './list-item/list-item.component';

package/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`.
 

package/loading-icon/loading-icon/loading-icon.component.d.ts

@@ -17,5 +17,5 @@ export declare class DaffLoadingIconComponent {
      */
     get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, false, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/loading-icon/loading-icon.d.ts

@@ -0,0 +1,2 @@
+import { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
+export declare const DAFF_LOADING_ICON_COMPONENTS: readonly [typeof DaffLoadingIconComponent];

package/loading-icon/loading-icon.module.d.ts

@@ -1,8 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./loading-icon/loading-icon.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./loading-icon/loading-icon.component";
+/**
+ * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}
+ */
 export declare class DaffLoadingIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLoadingIconModule, [typeof i1.DaffLoadingIconComponent], [typeof i2.CommonModule], [typeof i1.DaffLoadingIconComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLoadingIconModule, never, [typeof i1.CommonModule, typeof i2.DaffLoadingIconComponent], [typeof i2.DaffLoadingIconComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffLoadingIconModule>;
 }

package/loading-icon/public_api.d.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';

package/media-gallery/README.md

@@ -1,6 +1,47 @@
 # Media Gallery
 `<daff-media-gallery>` is used to display a group of `[daffThumbnail]`s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
 
+## Usage
+
+### Within a standalone component
+To use media gallery 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_MEDIA_GALLERY_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use media gallery in a module, import `DaffMediaGalleryModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffMediaGalleryModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Thumbnail
 `[daffThumbnail]` should be used as a directive with `<daff-image>`. [View Image Documentation](/libs/design/src/atoms/image/README.md)
 

package/media-gallery/media-gallery/media-gallery.component.d.ts

@@ -17,5 +17,5 @@ export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegist
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "skeleton": { "alias": "skeleton"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, ["[daffThumbnail]"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, ["[daffThumbnail]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/media-gallery/media-gallery.d.ts

@@ -0,0 +1,4 @@
+import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';
+import { DaffMediaRendererComponent } from './media-renderer/media-renderer.component';
+import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
+export declare const DAFF_MEDIA_GALLERY_COMPONENTS: readonly [typeof DaffMediaGalleryComponent, typeof DaffThumbnailDirective, typeof DaffMediaRendererComponent];