@daffodil/design 0.81.1 → 0.83.0

package/fesm2022/daffodil-design-media-gallery.mjs

@@ -1,11 +1,9 @@
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, TemplateRef, ViewContainerRef, Component, ChangeDetectionStrategy, Inject, ViewChild, Directive, HostBinding, HostListener, Input, NgModule } from '@angular/core';
-import * as i2 from '@daffodil/design';
+import { isDevMode, Directive, Inject, Input, EventEmitter, contentChildren, computed, signal, ElementRef, Component, ChangeDetectionStrategy, HostBinding, Output, ViewChildren, NgModule } from '@angular/core';
+import * as i1 from '@daffodil/design';
 import { DaffSelectableDirective, DaffArticleEncapsulatedDirective, DaffSkeletonableDirective } from '@daffodil/design';
 import { createSingleInjectionToken } from '@daffodil/core';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
 
 const { token: DAFF_MEDIA_GALLERY_TOKEN, 
 /**
@@ -13,279 +11,223 @@ const { token: DAFF_MEDIA_GALLERY_TOKEN,
  */
 provider: provideDaffMediaGalleryToken, } = createSingleInjectionToken('DAFF_MEDIA_GALLERY_TOKEN');
 
-const isGallery = (element) => !('gallery' in element);
-class DaffMediaGalleryRegistry {
-    constructor() {
-        this.galleries = {};
-    }
+let uniqueThumbnailId = 0;
+/**
+ * DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.
+ *
+ * ```html
+ * <ng-template daffThumbnail></ng-template>
+ * ```
+ */
+class DaffThumbnailDirective {
     /**
-     * @description
-     * Adds a media element to the internal registry.
+     * @docs-private
+     *
+     * The autogenerated unique id for a thumbnail.
      */
-    add(gallery, thumbnail) {
-        if (this.galleries[gallery.name]) {
-            let newGallery = this.galleries[gallery.name].getValue();
-            if (thumbnail) {
-                newGallery = {
-                    ...newGallery,
-                    thumbnails: [
-                        ...newGallery.thumbnails.filter(t => t !== thumbnail),
-                        thumbnail,
-                    ],
-                };
-            }
-            this.galleries[gallery.name].next(newGallery);
-        }
-        else {
-            this.galleries[gallery.name] = new BehaviorSubject({
-                gallery,
-                thumbnails: thumbnail ? [thumbnail] : [],
-            });
-        }
-        if (this.galleries[gallery.name].getValue().thumbnails.length === 1) {
-            thumbnail.select();
-        }
+    get id() {
+        return this.gallery.id + '-thumbnail-' + this._increment;
     }
     /**
-     * @description
-     * Removes a thumbnail or gallery from the internal registry.
+     * @docs-private
+     *
+     * The unique id of the selected thumbnail.
      */
-    remove(element) {
-        if (isGallery(element)) {
-            this.removeGallery(element);
-        }
-        else {
-            this.removeThumbnail(element);
-        }
-    }
-    removeThumbnail(thumbnail) {
-        if (!this.galleries[thumbnail.gallery.name]) {
-            return;
-        }
-        const gallery = this.galleries[thumbnail.gallery.name].getValue();
-        const index = gallery.thumbnails.indexOf(thumbnail);
-        if (index === -1) {
-            return;
-        }
-        this.galleries[thumbnail.gallery.name].next({
-            ...gallery,
-            thumbnails: [
-                ...gallery.thumbnails.slice(0, index),
-                ...gallery.thumbnails.slice(index + 1),
-            ],
-        });
-    }
-    removeGallery(gallery) {
-        delete this.galleries[gallery.name];
+    get selectedThumbnailId() {
+        return this.id + '-selected';
     }
+    constructor(
     /**
-     * @description
-     * Selects a media element for a given gallery.
+     * @docs-private
      */
-    select(thumbnail) {
-        if (!this.galleries[thumbnail.gallery.name]) {
-            return;
-        }
-        const gallery = this.galleries[thumbnail.gallery.name].getValue();
-        const index = gallery.thumbnails.indexOf(thumbnail);
-        if (thumbnail.selected || index === -1) {
-            return;
-        }
-        this.galleries[thumbnail.gallery.name].next({
-            ...gallery,
-            thumbnails: [
-                ...gallery.thumbnails.filter(m => m !== thumbnail).map(m => m.deselect()),
-                thumbnail.select(),
-            ],
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryRegistry, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * Dynamically renders the selected `DaffThumbnailDirective` in a `daff-media-gallery` any time the selected thumbnail
- * changes.
- */
-class DaffMediaRendererComponent {
-    constructor(componentFactoryResolver, registry, gallery) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.registry = registry;
-        this.gallery = gallery;
-        /**
-         * Private tracker for indicating when the component is destroyed.
-         */
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.registry.galleries[this.gallery.name]
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((gallery) => {
-            /**
-             * Clear out the slot for the dynamically rendered thumbnail
-             */
-            this.slot.clear();
-            const _selectedThumbnail = gallery.thumbnails.filter(media => media.selected).shift();
-            /**
-             * If there's no selected media, render nothing.
-             */
-            if (!_selectedThumbnail) {
-                return;
-            }
-            const _selectedThumbnailComponent = _selectedThumbnail.component;
-            /**
-             * Create the component to insert.
-             */
-            const component = this.componentFactoryResolver.resolveComponentFactory(_selectedThumbnailComponent.constructor);
-            const componentRef = this.slot.createComponent(component);
-            /**
-             * Fill the component with it's values from the original component
-             */
-            component.inputs.forEach(input => {
-                componentRef.instance[input.propName] = _selectedThumbnailComponent[input.propName];
-            });
-            /**
-             * Trigger a change detection on the component tree, outside the cycle to address
-             * the fact that the component was created outside a typical CD loop.
-             */
-            componentRef.changeDetectorRef.detectChanges();
-        });
-    }
+    gallery, 
     /**
-     * Used to unsubscribe from the dynamic component.
+     * @docs-private
      */
-    ngOnDestroy() {
-        this._destroy$.next(true);
-        this._destroy$.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaRendererComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: DaffMediaGalleryRegistry }, { token: DAFF_MEDIA_GALLERY_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffMediaRendererComponent, isStandalone: true, selector: "daff-media-renderer", viewQueries: [{ propertyName: "slot", first: true, predicate: TemplateRef, descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'daff-media-renderer',
-                    template: '<ng-template></ng-template>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: DaffMediaGalleryRegistry }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DAFF_MEDIA_GALLERY_TOKEN]
-                }] }], propDecorators: { slot: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true, read: ViewContainerRef }]
-            }] } });
-
-const { 
-/**
- * A multi provider injection token that marks a component as renderable for the `DaffMediaRendererComponent`.
- */
-token: daffThumbnailCompatToken, 
-/**
- * Provider function for {@link daffThumbnailCompatToken}.
- */
-provider: provideDaffThumbnailCompatToken, } = createSingleInjectionToken('thumbnailCompatToken');
-
-/**
- * A directive marking thumbnails for the `DaffMediaRendererComponent`. Needs to be wrapped in a `daff-media-gallery` component
- * and needs to be placed on a component that is provided as a `daffThumbnailCompatToken`.
- */
-class DaffThumbnailDirective {
-    constructor(component, registry, gallery, selectedDirective) {
-        this.component = component;
-        this.registry = registry;
+    templateRef) {
         this.gallery = gallery;
-        this.selectedDirective = selectedDirective;
+        this.templateRef = templateRef;
+        this._increment = uniqueThumbnailId;
         /**
-         * Adds a class for styling a thumbnail
+         * The file path to a thumbnail, presumably an image.
          */
-        this.class = true;
-    }
-    get selected() {
-        return this.selectedDirective.selected;
-    }
-    select() {
-        this.selectedDirective.select();
-        return this;
-    }
-    deselect() {
-        this.selectedDirective.deselect();
-        return this;
+        this.thumbnailSrc = undefined;
+        /**
+         * Provides an accessible label for a thumbnail.
+         */
+        this.label = undefined;
+        /** Indicates whether the thumbnail represents a video. */
+        this.isVideo = false;
+        uniqueThumbnailId++;
     }
     /**
-     * Adds a click event to trigger selection of the media element.
-     *
-     * @param event: MouseEvent
+     * @docs-private
      */
-    onClick($event) {
-        this.registry.select(this);
-    }
     ngOnInit() {
-        this.registry.add(this.gallery, this);
-    }
-    ngOnDestroy() {
-        this.registry.remove(this);
+        if (!this.label && isDevMode()) {
+            console.warn('The thumbnail ' + this.id + ' is missing a label.');
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffThumbnailDirective, deps: [{ token: daffThumbnailCompatToken }, { token: DaffMediaGalleryRegistry }, { token: DAFF_MEDIA_GALLERY_TOKEN }, { token: i2.DaffSelectableDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffThumbnailDirective, isStandalone: true, selector: "[daffThumbnail]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.daff-thumbnail": "this.class" } }, hostDirectives: [{ directive: i2.DaffSelectableDirective, inputs: ["selected", "selected"], outputs: ["becameSelected", "becameSelected"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThumbnailDirective, deps: [{ token: DAFF_MEDIA_GALLERY_TOKEN }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffThumbnailDirective, isStandalone: true, selector: "[daffThumbnail]", inputs: { thumbnailSrc: "thumbnailSrc", label: "label", isVideo: "isVideo" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffThumbnail]',
-                    standalone: true,
-                    hostDirectives: [{
-                            directive: DaffSelectableDirective,
-                            inputs: ['selected'],
-                            outputs: ['becameSelected'],
-                        }],
                 }]
-        }], ctorParameters: () => [{ type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [daffThumbnailCompatToken]
-                }] }, { type: DaffMediaGalleryRegistry }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_MEDIA_GALLERY_TOKEN]
-                }] }, { type: i2.DaffSelectableDirective }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-thumbnail']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
+                }] }, { type: i0.TemplateRef }], propDecorators: { thumbnailSrc: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isVideo: [{
+                type: Input
             }] } });
 
 let uniqueGalleryId = 0;
+/**
+ * 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>
+ * ```
+ */
 class DaffMediaGalleryComponent {
-    constructor(registry) {
-        this.registry = registry;
+    /**
+     * 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() {
+        return this._id;
+    }
+    set id(val) {
+        if (!val) {
+            return;
+        }
+        this._id = val;
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    constructor(skeletonDirective) {
+        this.skeletonDirective = skeletonDirective;
+        /**
+         * @docs-private
+         */
+        this.role = 'tablist';
         /**
+         * The internal ID of the gallery.
+         */
+        this._id = 'media-gallery-' + uniqueGalleryId;
+        /**
+         * @docs-private
+         *
          * Adds a class for styling the media gallery
          */
         this.class = true;
         /**
-         * The name of the gallery
+         * An event indicating that the selected media gallery element has changed.
+         */
+        this.elementChange = new EventEmitter();
+        /**
+         * @docs-private
          */
-        this.name = `${uniqueGalleryId}`;
+        this._thumbnails = contentChildren(DaffThumbnailDirective);
+        /**
+         * @docs-private
+         */
+        this._selectedThumbnail = computed(() => {
+            const idx = this._selectedIndex();
+            if (!idx) {
+                return this._thumbnails().at(0);
+            }
+            return this._thumbnails().at(idx);
+        });
+        this._selectedIndex = signal(null);
         uniqueGalleryId++;
     }
-    ngOnInit() {
-        this.registry.add(this);
+    /**
+     * @docs-private
+     *
+     * Whether or not the component its currently displaying its skeleton state.
+     */
+    get skeleton() {
+        return this.skeletonDirective.skeleton;
+    }
+    focusSelected() {
+        this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();
+    }
+    /**
+     * Select a specific entry in the media gallery by its index.
+     *
+     * @param index The index to set, starting at 0.
+     */
+    selectIndex(index) {
+        this._selectedIndex.set(index);
+        this.elementChange.emit(index);
+    }
+    /**
+     * Navigate to the next element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    next(focus = true) {
+        this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);
+        this.elementChange.emit(this._selectedIndex());
+        if (focus) {
+            this.focusSelected();
+        }
     }
-    ngOnDestroy() {
-        this.registry.remove(this);
+    /**
+     * Navigate to the previous element in the list of thumbnails.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    previous(focus = true) {
+        this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);
+        this.elementChange.emit(this._selectedIndex());
+        if (focus) {
+            this.focusSelected();
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryComponent, deps: [{ token: DaffMediaGalleryRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { name: "name" }, host: { properties: { "class.daff-media-gallery": "this.class" } }, providers: [
+    /**
+     * Select the first element.
+     *
+     * @param focus Whether to move focus to the newly selected item.
+     */
+    selectFirst(focus = true) {
+        this._selectedIndex.set(0);
+        this.elementChange.emit(this._selectedIndex());
+        if (focus) {
+            this.focusSelected();
+        }
+    }
+    /**
+     * Select the last element of the gallery.
+     *
+     * @param Whether to move focus to the newly selected item.
+     */
+    selectLast(focus = true) {
+        this._selectedIndex.set(this._thumbnails().length - 1);
+        this.elementChange.emit(this._selectedIndex());
+        if (focus) {
+            this.focusSelected();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryComponent, deps: [{ token: i1.DaffSkeletonableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { id: "id" }, outputs: { elementChange: "elementChange" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id", "class.daff-media-gallery": "this.class" } }, providers: [
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-        ], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: i2.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"], dependencies: [{ kind: "component", type: DaffMediaRendererComponent, selector: "daff-media-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_thumbnails", predicate: DaffThumbnailDirective, isSignal: true }], viewQueries: [{ propertyName: "_thumbnailButtons", predicate: ["thumbnailButtons"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl>\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative;flex-grow:1}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DaffSelectableDirective, selector: "[daffSelected]", inputs: ["selected"], outputs: ["becameSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -297,36 +239,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                             inputs: ['skeleton'],
                         },
                     ], imports: [
-                        DaffMediaRendererComponent,
                         DaffThumbnailDirective,
-                    ], template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"] }]
-        }], ctorParameters: () => [{ type: DaffMediaGalleryRegistry }], propDecorators: { class: [{
+                        NgTemplateOutlet,
+                        DaffSelectableDirective,
+                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl>\n\t@if(skeleton) {\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t\t<div class=\"daff-thumbnail\"></div>\n\t}\n\t@else {\n\t\t@for (thumbnail of _thumbnails(); track thumbnail; let index = $index) {\n\t\t\t<button \n\t\t\t\t#thumbnailButtons\n\t\t\t\tclass=\"daff-thumbnail\" \n\t\t\t\trole=\"tab\"\n\t\t\t\tdaffSelected\n\t\t\t\t[selected]=\"thumbnail === _selectedThumbnail()\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"thumbnail === _selectedThumbnail() ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId\"\n\t\t\t\t[attr.tabindex]=\"thumbnail === _selectedThumbnail() ? 0 : -1\"\n\t\t\t\t(click)=\"selectIndex(index)\"\n\t\t\t\t[attr.id]=\"thumbnail.id\" \n\t\t\t\t(keydown.arrowright)=\"next()\"\n\t\t\t\t(keydown.arrowleft)=\"previous()\">\n\t\t\t\t@if (thumbnail.thumbnailSrc) {\n\t\t\t\t\t<img [src]=\"thumbnail.thumbnailSrc\" aria-hidden=\"true\"/>\n\t\t\t\t}\n\t\t\t\t@if (thumbnail.isVideo) {\n\t\t\t\t\t<div class=\"daff-media-gallery__video-button\">\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t}\n</div>\n@let selectedEl = this._selectedThumbnail();\n<div \n\tclass=\"daff-media-gallery__selected-thumbnail\"\n\ttabindex=\"0\"\n\t#selectedThumbnail\n\trole=\"tabpanel\"\n\t[attr.id]=\"selectedEl?.selectedThumbnailId\">\n\t\t@if(selectedEl) {\n\t\t\t<ng-container *ngTemplateOutlet=\"selectedEl.templateRef\"></ng-container>\n\t\t}\n\t\t@else {\n\t\t\t<div class=\"daff-media-gallery__skeleton-placeholder\"></div>\n\t\t}\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column;gap:.5rem}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:4rem;width:4rem;max-width:100%;overflow:hidden;user-select:none;padding:0;position:relative;flex-shrink:0}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:4.5rem;width:4.5rem}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{flex-direction:column;height:5rem;width:5rem}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail img{display:block;width:100%}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4rem;width:4rem;position:absolute;top:0;left:0}@media (min-width: 480px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:4.5rem;width:4.5rem;position:absolute;top:0;left:0}}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:5rem;width:5rem;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative;flex-grow:1}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:16rem}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__skeleton-placeholder{height:30rem}}.daff-media-gallery__thumbnails{display:flex;flex-direction:row;flex-shrink:0;gap:.25rem;order:2;max-width:100%;overflow-x:auto}@media (min-width: 1024px){.daff-media-gallery__thumbnails{max-height:29.5rem;flex-direction:column;overflow-y:auto;order:1}}.daff-media-gallery__selected-thumbnail{display:flex;align-items:center;justify-content:center;flex-grow:1;width:100%;order:1}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2;margin:0}}.daff-media-gallery__video-button{width:2rem;height:2rem;border-radius:100%;position:absolute}.daff-media-gallery__video-button:after{content:\"\";position:absolute;width:.75rem;height:.75rem;left:60%;top:50%;transform:translate(-60%,-50%) rotate(90deg);clip-path:polygon(50% 15%,0% 100%,100% 100%);transition:all .4s ease-in-out}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DaffSkeletonableDirective }], propDecorators: { role: [{
                 type: HostBinding,
-                args: ['class.daff-media-gallery']
-            }], name: [{
+                args: ['attr.role']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
                 type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class.daff-media-gallery']
+            }], elementChange: [{
+                type: Output
+            }], _thumbnailButtons: [{
+                type: ViewChildren,
+                args: ['thumbnailButtons', { read: ElementRef }]
             }] } });
 
 /**
  * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 class DaffMediaGalleryModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryModule, imports: [CommonModule,
             DaffMediaGalleryComponent,
-            DaffThumbnailDirective,
-            DaffMediaRendererComponent], exports: [DaffMediaGalleryComponent,
+            DaffThumbnailDirective], exports: [DaffMediaGalleryComponent,
             DaffThumbnailDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffMediaGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffMediaGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         DaffMediaGalleryComponent,
                         DaffThumbnailDirective,
-                        DaffMediaRendererComponent,
                     ],
                     exports: [
                         DaffMediaGalleryComponent,
@@ -335,15 +287,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+/**
+ * @docs-private
+ */
 const DAFF_MEDIA_GALLERY_COMPONENTS = [
     DaffMediaGalleryComponent,
     DaffThumbnailDirective,
-    DaffMediaRendererComponent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_MEDIA_GALLERY_COMPONENTS, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffThumbnailDirective, daffThumbnailCompatToken };
+export { DAFF_MEDIA_GALLERY_COMPONENTS, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffThumbnailDirective };
 //# sourceMappingURL=daffodil-design-media-gallery.mjs.map