@daffodil/design 0.81.1 → 0.83.0

package/hero/README.md

@@ -7,13 +7,14 @@ Heros are the first thing users see on a page and are designed to catch their at
 ## Usage
 
 ### Within a standalone component
-To use hero in a standalone component, import it directly into your custom component:
+To use hero in a standalone component, import `DAFF_HERO_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_HERO_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use hero in a module, import `DaffHeroModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffHeroModule } from '@daffodil/design/hero';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/hero/hero.d.ts

@@ -4,4 +4,7 @@ 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';
+/**
+ * @docs-private
+ */
 export declare const DAFF_HERO_COMPONENTS: readonly [typeof DaffHeroComponent, typeof DaffHeroIconDirective, typeof DaffHeroTaglineDirective, typeof DaffHeroTitleDirective, typeof DaffHeroSubtitleDirective, typeof DaffHeroBodyDirective];

package/image/README.md

@@ -14,13 +14,14 @@ The `src`, `width`, `height`, and `alt` attributes must be defined. An error wil
 ## Usage
 
 ### Within a standalone component
-To use image in a standalone component, import it directly into your custom component:
+To use image in a standalone component, import `DAFF_IMAGE_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_IMAGE_COMPONENTS,
   ],
@@ -33,8 +34,8 @@ To use image in a module, import `DaffImageModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffImageModule } from '@daffodil/design/image';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

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

@@ -1,21 +1,36 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 export declare class DaffImageComponent implements OnInit {
     private sanitizer;
     private _src;
+    /**
+     * The URL of the image.
+     */
     get src(): string;
     set src(value: string);
     private _alt;
+    /**
+     * The alternate text for the image.
+     */
     get alt(): string;
     set alt(value: string);
     private _width;
+    /**
+     * The width of the image.
+     */
     get width(): number;
     set width(value: number);
     private _height;
+    /**
+     * The height of the image.
+     */
     get height(): number;
     set height(value: number);
+    /**
+     * Emits when the image has loaded.
+     */
     load: EventEmitter<void>;
     /**
      * @docs-private
@@ -26,6 +41,12 @@ export declare class DaffImageComponent implements OnInit {
      * @docs-private
      */
     get _paddingTop(): any;
+    /**
+     * @docs-private
+     *
+     * The aspect ratio of an image, based on the width and height set by the user.
+     */
+    get _aspectRatio(): SafeStyle;
     /**
      * @docs-private
      */

package/image/image.d.ts

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

package/link-set/README.md

@@ -4,13 +4,14 @@ Link set is a component for displaying two or more link set items.
 ## Usage
 
 ### Within a standalone component
-To use link set in a standalone component, import it directly into your custom component:
+To use link set in a standalone component, import `DAFF_LINK_SET_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_LINK_SET_COMPONENTS } from '@daffodil/design/link-set';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_LINK_SET_COMPONENTS,
   ],
@@ -23,8 +24,8 @@ 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';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

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

@@ -2,4 +2,7 @@ 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';
+/**
+ * @docs-private
+ */
 export declare const DAFF_LINK_SET_COMPONENTS: readonly [typeof DaffLinkSetComponent, typeof DaffLinkSetHeadingDirective, typeof DaffLinkSetSubheadingDirective, typeof DaffLinkSetItemComponent];

package/list/README.md

@@ -4,13 +4,14 @@ List is a flexible component that can be used to display a series of content. It
 ## Usage
 
 ### Within a standalone component
-To use list in a standalone component, import it directly into your custom component:
+To use list in a standalone component, import `DAFF_LIST_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_LIST_COMPONENTS,
   ],
@@ -23,8 +24,8 @@ To use list in a module, import `DaffListModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffListModule } from '@daffodil/design/list';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/list/list.d.ts

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

package/loading-icon/README.md

@@ -7,13 +7,14 @@ Loading icons are used to indicate to users that an event is ocurring and is sti
 ## Usage
 
 ### Within a standalone component
-To use loading icon in a standalone component, import it directly into your custom component:
+To use loading icon in a standalone component, import `DAFF_LOADING_ICON_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_LOADING_ICON_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use loading icon in a module, import `DaffLoadingIconModule` into your custom
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -45,12 +46,14 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Theming
-The loading icon color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
+## Colors
+Use the `color` property to change the color of a loading icon. The default color is gray.
 
-Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+> `theme` and `white` should be used on a darker background in order to have sufficient contrast.
 
 <design-land-example-viewer-container example="loading-icon-color"></design-land-example-viewer-container>
 
 ## Accessibility
-Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`. Additionally, if a loading icon is used to indicate a process in progress, using [aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live) and [aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy") should be strongly considered.
+Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`.
+
+If a loading icon is used to indicate a process in progress, using [aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live) and [aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy") should be strongly considered.

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

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

package/loading-icon/src/loading-icon-theme.scss

@@ -2,6 +2,26 @@
 @use '../../scss/core';
 @use '../../scss/theming';
 
+@mixin daff-loading-icon-light-variant($loader-color) {
+	.daff-loading-icon__loader {
+		stroke: $loader-color;
+	}
+
+	.daff-loading-icon__bg {
+		stroke: rgba($loader-color, 0.1);
+	}
+}
+
+@mixin daff-loading-icon-dark-variant($loader-color) {
+	.daff-loading-icon__loader {
+		stroke: $loader-color;
+	}
+
+	.daff-loading-icon__bg {
+		stroke: rgba($loader-color, 0.3);
+	}
+}
+
 @mixin daff-loading-icon-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
 	$secondary: core.daff-map-get($theme, secondary);
@@ -10,67 +30,75 @@
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-loading-icon {
-		&__loader {
-			stroke: currentColor;
-		}
+		@include theming.light($type) {
+			@include daff-loading-icon-light-variant(
+				theming.daff-color($neutral, 60)
+			);
 
-		&__bg {
-			stroke: rgba($black, 0.08);
-		}
+			&.daff-primary {
+				@include daff-loading-icon-light-variant(theming.daff-color($primary));
+			}
 
-		&.daff-primary {
-			.daff-loading-icon__loader {
-				stroke: theming.daff-color($primary);
+			&.daff-secondary {
+				@include daff-loading-icon-light-variant(
+					theming.daff-color($secondary)
+				);
 			}
 
-			.daff-loading-icon__bg {
-				stroke: rgba(theming.daff-color($primary), 0.08);
+			&.daff-tertiary {
+				@include daff-loading-icon-light-variant(theming.daff-color($tertiary));
 			}
-		}
 
-		&.daff-secondary {
-			.daff-loading-icon__loader {
-				stroke: theming.daff-color($secondary);
+			&.daff-theme {
+				@include daff-loading-icon-light-variant($base);
 			}
 
-			.daff-loading-icon__bg {
-				stroke: rgba(theming.daff-color($secondary), 0.08);
+			&.daff-theme-contrast {
+				@include daff-loading-icon-light-variant($base-contrast);
 			}
-		}
 
-		&.daff-tertiary {
-			.daff-loading-icon__loader {
-				stroke: theming.daff-color($tertiary);
+			&.daff-black {
+				@include daff-loading-icon-light-variant($black);
 			}
 
-			.daff-loading-icon__bg {
-				stroke: rgba(theming.daff-color($tertiary), 0.08);
+			&.daff-white {
+				@include daff-loading-icon-light-variant($white);
 			}
 		}
 
-		&.daff-theme {
-			.daff-loading-icon__loader {
-				stroke: $base;
+		@include theming.dark($type) {
+			@include daff-loading-icon-dark-variant(theming.daff-color($neutral, 40));
+
+			&.daff-primary {
+				@include daff-loading-icon-dark-variant(theming.daff-color($primary));
 			}
-		}
 
-		&.daff-theme-contrast {
-			.daff-loading-icon__loader {
-				stroke: $base-contrast;
+			&.daff-secondary {
+				@include daff-loading-icon-dark-variant(theming.daff-color($secondary));
 			}
-		}
 
-		&.daff-black {
-			.daff-loading-icon__loader {
-				stroke: $black;
+			&.daff-tertiary {
+				@include daff-loading-icon-dark-variant(theming.daff-color($tertiary));
+			}
+
+			&.daff-theme {
+				@include daff-loading-icon-dark-variant($base);
+			}
+
+			&.daff-theme-contrast {
+				@include daff-loading-icon-dark-variant($base-contrast);
+			}
+
+			&.daff-black {
+				@include daff-loading-icon-dark-variant($black);
 			}
-		}
 
-		&.daff-white {
-			.daff-loading-icon__loader {
-				stroke: $white;
+			&.daff-white {
+				@include daff-loading-icon-dark-variant($white);
 			}
 		}
 	}

package/media-gallery/README.md

@@ -1,4 +1,4 @@
-# Media Gallery
+# Media gallery
 Media gallery is used to display a group of thumbnails in a gallery format.
 
 ## Overview
@@ -7,13 +7,14 @@ Media galleries are useful to showcase multiple images related to a single produ
 ## Usage
 
 ### Within a standalone component
-To use media gallery in a standalone component, import it directly into your custom component:
+To use media gallery in a standalone component, import `DAFF_MEDIA_GALLERY_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_MEDIA_GALLERY_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use media gallery in a module, import `DaffMediaGalleryModule` into your cust
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -46,18 +47,26 @@ 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/image/README.md)
+`[daffThumbnail]` is a **structural** directive that can be used with any component that you would like to render inside your media gallery. You can set a value for the image for your element like:
+
+```html
+<daff-media-gallery>
+  <ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
+    <daff-image src="/image-path.jpg" alt="Your description" width="100" height="100"></daff-image>
+  </ng-template>
+</daff-media-gallery>
+```
 
-It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the `<daff-media-renderer>` component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
+It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image. The selected thumbnail can be controlled by the user, and the position of the list of thumbnails is dependent on the screen size.
 
 <design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
 
-## Image Aspect Ratio
-It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
+## Image aspect ratio
+It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as shown in the example.
 
-The thumbnail dimension is set to `80x80` pixels, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
+The thumbnail dimension is set to a square, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
 
 <design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
 
 ## Accessibility
-Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. [View Image Documentation](/libs/design/image/README.md)
+Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. See [Image](/libs/design/image/README.md) for more information.

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class IteratedMediaGalleryComponent {
+    elements: {
+        type: string;
+        src: string;
+        thumbnail: string;
+        alt: string;
+        width: number;
+        height: number;
+    }[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<IteratedMediaGalleryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IteratedMediaGalleryComponent, "iterated-media-gallery", never, {}, {}, never, never, true, never>;
+}

package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class MediaGalleryWithVideoComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MediaGalleryWithVideoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediaGalleryWithVideoComponent, "media-gallery-with-video", never, {}, {}, never, never, true, never>;
+}

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

@@ -2,3 +2,5 @@ export { MEDIA_GALLERY_EXAMPLES } from './examples';
 export { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';
 export { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';
 export { SkeletonMediaGalleryComponent } from './skeleton-media-gallery/skeleton-media-gallery.component';
+export { IteratedMediaGalleryComponent } from './iterated-media-gallery/iterated-media-gallery.component';
+export { MediaGalleryWithVideoComponent } from './media-gallery-with-video/media-gallery-with-video.component';

package/media-gallery/helpers/media-gallery-registration.interface.d.ts

@@ -1,3 +1,3 @@
 export interface DaffMediaGalleryRegistration {
-    name: string;
+    id: string;
 }

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

@@ -1,21 +1,99 @@
-import { OnInit, OnDestroy } from '@angular/core';
+import { EventEmitter, Signal } from '@angular/core';
+import { DaffSkeletonableDirective } from '@daffodil/design';
 import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
-import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
-    private registry;
+/**
+ * The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.
+ *
+ * ```html
+ * <daff-media-gallery>
+ *  <ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
+ *    <daff-image src="/image-path.jpg" alt="Your description" width="100" height="100"></daff-image>
+ *  </ng-template>
+ * </daff-media-gallery>
+ * ```
+ */
+export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {
+    private skeletonDirective;
     /**
+     * @docs-private
+     */
+    role: string;
+    /**
+     * The internal ID of the gallery.
+     */
+    private _id;
+    /**
+     * Custom ID for the media gallery that overrides the auto-generated one. When using this input, it is your responsibility to ensure that the ID is unique.
+     */
+    get id(): string | undefined | null;
+    set id(val: string | undefined | null);
+    /**
+     * @docs-private
+     *
      * Adds a class for styling the media gallery
      */
-    class: boolean;
+    private class;
+    /**
+     * An event indicating that the selected media gallery element has changed.
+     */
+    elementChange: EventEmitter<number>;
+    /**
+     * @docs-private
+     */
+    _thumbnails: Signal<readonly DaffThumbnailDirective[]>;
+    /**
+     * @docs-private
+     */
+    private _thumbnailButtons;
+    /**
+     * @docs-private
+     */
+    constructor(skeletonDirective: DaffSkeletonableDirective);
+    /**
+     * @docs-private
+     *
+     * Whether or not the component its currently displaying its skeleton state.
+     */
+    get skeleton(): boolean;
+    /**
+     * @docs-private
+     */
+    _selectedThumbnail: Signal<DaffThumbnailDirective>;
+    private _selectedIndex;
+    private focusSelected;
+    /**
+     * Select a specific entry in the media gallery by its index.
+     *
+     * @param index The index to set, starting at 0.
+     */
+    selectIndex(index: number): void;
+    /**
+     * Navigate to the next element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    next(focus?: boolean): void;
+    /**
+     * Navigate to the previous element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    previous(focus?: boolean): void;
+    /**
+     * Select the first element.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    selectFirst(focus?: boolean): void;
     /**
-     * The name of the gallery
+     * Select the last element of the gallery.
+     *
+     * @param Whether to move focus to the newly selected item.
      */
-    name: string;
-    constructor(registry: DaffMediaGalleryRegistry);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    selectLast(focus?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryComponent, never>;
-    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: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "id": { "alias": "id"; "required": false; }; }, { "elementChange": "elementChange"; }, ["_thumbnails"], ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

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

@@ -1,4 +1,6 @@
 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];
+/**
+ * @docs-private
+ */
+export declare const DAFF_MEDIA_GALLERY_COMPONENTS: readonly [typeof DaffMediaGalleryComponent, typeof DaffThumbnailDirective];

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

@@ -2,12 +2,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./media-gallery/media-gallery.component";
 import * as i3 from "./thumbnail/thumbnail.directive";
-import * as i4 from "./media-renderer/media-renderer.component";
 /**
  * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffMediaGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMediaGalleryModule, never, [typeof i1.CommonModule, typeof i2.DaffMediaGalleryComponent, typeof i3.DaffThumbnailDirective, typeof i4.DaffMediaRendererComponent], [typeof i2.DaffMediaGalleryComponent, typeof i3.DaffThumbnailDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMediaGalleryModule, never, [typeof i1.CommonModule, typeof i2.DaffMediaGalleryComponent, typeof i3.DaffThumbnailDirective], [typeof i2.DaffMediaGalleryComponent, typeof i3.DaffThumbnailDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffMediaGalleryModule>;
 }

package/media-gallery/public_api.d.ts

@@ -1,5 +1,4 @@
-export * from './media-gallery/media-gallery.component';
-export * from './media-gallery.module';
-export * from './thumbnail/thumbnail.directive';
-export { daffThumbnailCompatToken } from './thumbnail/thumbnail-compat.token';
+export { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';
+export { DaffMediaGalleryModule } from './media-gallery.module';
+export { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
 export { DAFF_MEDIA_GALLERY_COMPONENTS } from './media-gallery';