@daffodil/design 0.93.0 → 0.94.0

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { isDevMode, Input, Inject, Directive, EventEmitter, contentChildren, computed, signal, ElementRef, ViewChildren, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { computed, input, isDevMode, Inject, Directive, output, contentChildren, viewChildren, ElementRef, signal, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffSelectableDirective, DaffArticleEncapsulatedDirective, DaffSkeletonableDirective } from '@daffodil/design';
 import { createSingleInjectionToken } from '@daffodil/core';
@@ -20,22 +20,6 @@ let uniqueThumbnailId = 0;
  * ```
  */
 class DaffThumbnailDirective {
-    /**
-     * @docs-private
-     *
-     * The autogenerated unique id for a thumbnail.
-     */
-    get id() {
-        return this.gallery.id + '-thumbnail-' + this._increment;
-    }
-    /**
-     * @docs-private
-     *
-     * The unique id of the selected thumbnail.
-     */
-    get selectedThumbnailId() {
-        return this.id + '-selected';
-    }
     constructor(
     /**
      * @docs-private
@@ -48,28 +32,40 @@ class DaffThumbnailDirective {
         this.gallery = gallery;
         this.templateRef = templateRef;
         this._increment = uniqueThumbnailId;
+        /**
+         * @docs-private
+         *
+         * The autogenerated unique id for a thumbnail.
+         */
+        this.id = computed(() => this.gallery.id() + '-thumbnail-' + this._increment, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         *
+         * The unique id of the selected thumbnail.
+         */
+        this.selectedThumbnailId = computed(() => this.id() + '-selected', ...(ngDevMode ? [{ debugName: "selectedThumbnailId" }] : /* istanbul ignore next */ []));
         /**
          * The file path to a thumbnail, presumably an image.
          */
-        this.thumbnailSrc = undefined;
+        this.thumbnailSrc = input(undefined, ...(ngDevMode ? [{ debugName: "thumbnailSrc" }] : /* istanbul ignore next */ []));
         /**
          * Provides an accessible label for a thumbnail.
          */
-        this.label = undefined;
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Indicates whether the thumbnail represents a video. */
-        this.isVideo = false;
+        this.isVideo = input(false, ...(ngDevMode ? [{ debugName: "isVideo" }] : /* istanbul ignore next */ []));
         uniqueThumbnailId++;
     }
     /**
      * @docs-private
      */
     ngOnInit() {
-        if (!this.label && isDevMode()) {
-            console.warn('The thumbnail ' + this.id + ' is missing a label.');
+        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: "21.2.9", 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: "21.2.9", type: DaffThumbnailDirective, isStandalone: true, selector: "[daffThumbnail]", inputs: { thumbnailSrc: "thumbnailSrc", label: "label", isVideo: "isVideo" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffThumbnailDirective, isStandalone: true, selector: "[daffThumbnail]", inputs: { thumbnailSrc: { classPropertyName: "thumbnailSrc", publicName: "thumbnailSrc", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThumbnailDirective, decorators: [{
             type: Directive,
@@ -79,15 +75,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_MEDIA_GALLERY_TOKEN]
-                }] }, { type: i0.TemplateRef }], propDecorators: { thumbnailSrc: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], isVideo: [{
-                type: Input
-            }] } });
+                }] }, { type: i0.TemplateRef }], propDecorators: { thumbnailSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailSrc", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isVideo: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVideo", required: false }] }] } });
 
-/* eslint-disable quote-props */
 let uniqueGalleryId = 0;
 /**
  * The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.
@@ -101,36 +90,38 @@ let uniqueGalleryId = 0;
  * ```
  */
 class DaffMediaGalleryComponent {
-    /**
-     * 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;
         /**
-         * The internal ID of the gallery.
+         * The auto-generated ID of the gallery.
+         */
+        this._defaultId = 'media-gallery-' + uniqueGalleryId;
+        /**
+         * 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.
          */
-        this._id = 'media-gallery-' + uniqueGalleryId;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.customId = input(undefined, { ...(ngDevMode ? { debugName: "customId" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /**
+         * @docs-private
+         *
+         * The resolved ID of the gallery: the custom ID when provided, otherwise the auto-generated one.
+         */
+        this.id = computed(() => this.customId() || this._defaultId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * An event indicating that the selected media gallery element has changed.
          */
-        this.elementChange = new EventEmitter();
+        this.elementChange = output();
         /**
          * @docs-private
          */
         this._thumbnails = contentChildren(DaffThumbnailDirective, ...(ngDevMode ? [{ debugName: "_thumbnails" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this._thumbnailButtons = viewChildren('thumbnailButtons', { ...(ngDevMode ? { debugName: "_thumbnailButtons" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * @docs-private
          */
@@ -152,8 +143,19 @@ class DaffMediaGalleryComponent {
     get skeleton() {
         return this.skeletonDirective.skeleton;
     }
+    /**
+     * @docs-private
+     *
+     * Whether the given thumbnail is the currently selected one.
+     */
+    _isSelected(thumbnail) {
+        return thumbnail === this._selectedThumbnail();
+    }
     focusSelected() {
-        this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();
+        const index = this._selectedIndex();
+        if (index !== null) {
+            this._thumbnailButtons().at(index)?.nativeElement.focus();
+        }
     }
     /**
      * Select a specific entry in the media gallery by its index.
@@ -213,9 +215,9 @@ class DaffMediaGalleryComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffMediaGalleryComponent, deps: [{ token: i1.DaffSkeletonableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { id: "id" }, outputs: { elementChange: "elementChange" }, host: { properties: { "attr.id": "id" }, classAttribute: "daff-media-gallery" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffMediaGalleryComponent, isStandalone: true, selector: "daff-media-gallery", inputs: { customId: { classPropertyName: "customId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, host: { properties: { "attr.id": "id()" }, classAttribute: "daff-media-gallery" }, providers: [
             { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-        ], 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 role=\"tablist\">\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;height:4rem;width:4rem;border-radius:0}: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;height:4.5rem;width:4.5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media(min-width:1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}: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 }); }
+        ], queries: [{ propertyName: "_thumbnails", predicate: DaffThumbnailDirective, isSignal: true }], viewQueries: [{ propertyName: "_thumbnailButtons", predicate: ["thumbnailButtons"], descendants: true, read: ElementRef, isSignal: true }], 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 role=\"tablist\">\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]=\"_isSelected(thumbnail)\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label() ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"_isSelected(thumbnail) ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId()\"\n\t\t\t\t[attr.tabindex]=\"_isSelected(thumbnail) ? 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\"></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;height:4rem;width:4rem;border-radius:0}: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;height:4.5rem;width:4.5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media(min-width:1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}: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: "21.2.9", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
@@ -228,21 +230,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             inputs: ['skeleton'],
                         },
                     ], host: {
-                        'class': 'daff-media-gallery',
-                        '[attr.id]': 'id',
+                        class: 'daff-media-gallery',
+                        '[attr.id]': 'id()',
                     }, imports: [
                         DaffThumbnailDirective,
                         NgTemplateOutlet,
                         DaffSelectableDirective,
-                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\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;height:4rem;width:4rem;border-radius:0}: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;height:4.5rem;width:4.5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media(min-width:1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}: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: { id: [{
-                type: Input
-            }], elementChange: [{
-                type: Output
-            }], _thumbnails: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DaffThumbnailDirective), { isSignal: true }] }], _thumbnailButtons: [{
-                type: ViewChildren,
-                args: ['thumbnailButtons', { read: ElementRef }]
-            }] } });
+                    ], template: "<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\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]=\"_isSelected(thumbnail)\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label() ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"_isSelected(thumbnail) ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId()\"\n\t\t\t\t[attr.tabindex]=\"_isSelected(thumbnail) ? 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\"></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;height:4rem;width:4rem;border-radius:0}: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;height:4.5rem;width:4.5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}@media(min-width:1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative;height:5rem;width:5rem;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{flex-grow:1;display:flex;position:relative;height:100%;width:100%;border-radius:0}: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}@keyframes loading{0%{opacity:.5}to{opacity:1}}: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: { customId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }], _thumbnails: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DaffThumbnailDirective), { isSignal: true }] }], _thumbnailButtons: [{ type: i0.ViewChildren, args: ['thumbnailButtons', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.

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

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-media-gallery.mjs","sources":["../../../libs/design/media-gallery/src/helpers/media-gallery-token.ts","../../../libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.html","../../../libs/design/media-gallery/src/media-gallery.module.ts","../../../libs/design/media-gallery/src/media-gallery.ts","../../../libs/design/media-gallery/src/daffodil-design-media-gallery.ts"],"sourcesContent":["import { createSingleInjectionToken } from '@daffodil/core';\n\nimport { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';\n\nexport const {\n  token: DAFF_MEDIA_GALLERY_TOKEN,\n  /**\n   * Provider function for {@link DAFF_MEDIA_GALLERY_TOKEN}.\n   */\n  provider: provideDaffMediaGalleryToken,\n} = createSingleInjectionToken<DaffMediaGalleryRegistration>('DAFF_MEDIA_GALLERY_TOKEN');\n","import {\n  Directive,\n  Inject,\n  Input,\n  TemplateRef,\n  OnInit,\n  isDevMode,\n} from '@angular/core';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\n\nlet uniqueThumbnailId = 0;\n\n/**\n * DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.\n *\n * ```html\n * <ng-template daffThumbnail></ng-template>\n * ```\n */\n@Directive({\n  selector: '[daffThumbnail]',\n})\nexport class DaffThumbnailDirective implements OnInit {\n\n  private _increment = uniqueThumbnailId;\n\n  /**\n   * @docs-private\n   *\n   * The autogenerated unique id for a thumbnail.\n   */\n  get id(): string {\n    return this.gallery.id + '-thumbnail-' + this._increment;\n  }\n\n  /**\n   * @docs-private\n   *\n   * The unique id of the selected thumbnail.\n   */\n  get selectedThumbnailId(): string {\n    return this.id + '-selected';\n  }\n\n  /**\n   * The file path to a thumbnail, presumably an image.\n   */\n  @Input() thumbnailSrc = undefined;\n\n  /**\n   * Provides an accessible label for a thumbnail.\n   */\n  @Input() label: string = undefined;\n\n  /** Indicates whether the thumbnail represents a video. */\n  @Input() isVideo = false;\n\n  constructor(\n    /**\n     * @docs-private\n     */\n    @Inject(DAFF_MEDIA_GALLERY_TOKEN) public gallery: DaffMediaGalleryRegistration,\n    /**\n     * @docs-private\n     */\n    public templateRef: TemplateRef<unknown>,\n  ) {\n    uniqueThumbnailId++;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    if(!this.label && isDevMode()) {\n      console.warn('The thumbnail ' + this.id + ' is missing a label.');\n    }\n  }\n}\n","/* eslint-disable quote-props */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  ChangeDetectionStrategy,\n  Input,\n  QueryList,\n  ViewChildren,\n  ElementRef,\n  Output,\n  EventEmitter,\n  contentChildren,\n  signal,\n  computed,\n  Signal,\n} from '@angular/core';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffSelectableDirective,\n  DaffSkeletonableDirective,\n} from '@daffodil/design';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\nimport { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';\n\nlet uniqueGalleryId = 0;\n\n/**\n * The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.\n *\n * ```html\n * <daff-media-gallery>\n *  <ng-template daffThumbnail thumbnailSrc=\"/thumbnail-path.jpg\" label=\"Your description\">\n *    <daff-image src=\"/image-path.jpg\" alt=\"Your description\" width=\"100\" height=\"100\"></daff-image>\n *  </ng-template>\n * </daff-media-gallery>\n * ```\n */\n@Component({\n  selector: 'daff-media-gallery',\n  templateUrl: './media-gallery.component.html',\n  styleUrls: ['./media-gallery.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n\n    { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },\n  ],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffSkeletonableDirective,\n      inputs: ['skeleton'],\n    },\n  ],\n  host: {\n    'class': 'daff-media-gallery',\n    '[attr.id]': 'id',\n  },\n  imports: [\n    DaffThumbnailDirective,\n    NgTemplateOutlet,\n    DaffSelectableDirective,\n  ],\n})\nexport class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {\n  /**\n   * The internal ID of the gallery.\n   */\n  private _id = 'media-gallery-' + uniqueGalleryId;\n\n  /**\n   * 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.\n   */\n  @Input()\n  get id() {\n    return this._id;\n  }\n  set id(val: string | undefined | null) {\n    if(!val){\n      return;\n    }\n    this._id = val;\n  };\n\n  /**\n   * An event indicating that the selected media gallery element has changed.\n   */\n  @Output() elementChange: EventEmitter<number> = new EventEmitter<number>();\n\n  /**\n   * @docs-private\n   */\n  _thumbnails = contentChildren(DaffThumbnailDirective);\n\n  /**\n   * @docs-private\n   */\n  @ViewChildren('thumbnailButtons', { read: ElementRef }) private _thumbnailButtons: QueryList<ElementRef<HTMLElement>>;\n\n  /**\n   * @docs-private\n   */\n  constructor(private skeletonDirective: DaffSkeletonableDirective) {\n    uniqueGalleryId++;\n  }\n\n  /**\n   * @docs-private\n   *\n   * Whether or not the component its currently displaying its skeleton state.\n   */\n  get skeleton() {\n    return this.skeletonDirective.skeleton;\n  }\n\n  /**\n   * @docs-private\n   */\n  _selectedThumbnail: Signal<DaffThumbnailDirective> = computed(() => {\n    const idx = this._selectedIndex();\n    if(!idx) {\n      return this._thumbnails().at(0);\n    }\n    return this._thumbnails().at(idx);\n  });\n\n  private _selectedIndex = signal<number | null>(null);\n\n  private focusSelected() {\n    this._thumbnailButtons.get(this._selectedIndex())?.nativeElement.focus();\n  }\n\n  /**\n   * Select a specific entry in the media gallery by its index.\n   *\n   * @param index The index to set, starting at 0.\n   */\n  selectIndex(index: number) {\n    this._selectedIndex.set(index);\n    this.elementChange.emit(index);\n  }\n\n  /**\n   * Navigate to the next element in the list of thumbnails.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  next(focus: boolean = true) {\n    this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Navigate to the previous element in the list of thumbnails.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  previous(focus: boolean = true) {\n    this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Select the first element.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  selectFirst(focus: boolean = true) {\n    this._selectedIndex.set(0);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Select the last element of the gallery.\n   *\n   * @param Whether to move focus to the newly selected item.\n   */\n  selectLast(focus: boolean = true) {\n    this._selectedIndex.set(this._thumbnails().length - 1);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n}\n","<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\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>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffMediaGalleryComponent,\n    DaffThumbnailDirective,\n  ],\n  exports: [\n    DaffMediaGalleryComponent,\n    DaffThumbnailDirective,\n  ],\n})\nexport class DaffMediaGalleryModule {}\n","import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_MEDIA_GALLERY_COMPONENTS = <const> [\n  DaffMediaGalleryComponent,\n  DaffThumbnailDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-media-gallery.mjs","sources":["../../../libs/design/media-gallery/src/helpers/media-gallery-token.ts","../../../libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.ts","../../../libs/design/media-gallery/src/media-gallery/media-gallery.component.html","../../../libs/design/media-gallery/src/media-gallery.module.ts","../../../libs/design/media-gallery/src/media-gallery.ts","../../../libs/design/media-gallery/src/daffodil-design-media-gallery.ts"],"sourcesContent":["import { createSingleInjectionToken } from '@daffodil/core';\n\nimport { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';\n\nexport const {\n  token: DAFF_MEDIA_GALLERY_TOKEN,\n  /**\n   * Provider function for {@link DAFF_MEDIA_GALLERY_TOKEN}.\n   */\n  provider: provideDaffMediaGalleryToken,\n} = createSingleInjectionToken<DaffMediaGalleryRegistration>('DAFF_MEDIA_GALLERY_TOKEN');\n","import {\n  Directive,\n  Inject,\n  TemplateRef,\n  OnInit,\n  isDevMode,\n  input,\n  computed,\n} from '@angular/core';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\n\nlet uniqueThumbnailId = 0;\n\n/**\n * DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.\n *\n * ```html\n * <ng-template daffThumbnail></ng-template>\n * ```\n */\n@Directive({\n  selector: '[daffThumbnail]',\n})\nexport class DaffThumbnailDirective implements OnInit {\n\n  private _increment = uniqueThumbnailId;\n\n  /**\n   * @docs-private\n   *\n   * The autogenerated unique id for a thumbnail.\n   */\n  id = computed(() => this.gallery.id() + '-thumbnail-' + this._increment);\n\n  /**\n   * @docs-private\n   *\n   * The unique id of the selected thumbnail.\n   */\n  selectedThumbnailId = computed(() => this.id() + '-selected');\n\n  /**\n   * The file path to a thumbnail, presumably an image.\n   */\n  thumbnailSrc = input<string | undefined>(undefined);\n\n  /**\n   * Provides an accessible label for a thumbnail.\n   */\n  label = input<string | undefined>(undefined);\n\n  /** Indicates whether the thumbnail represents a video. */\n  isVideo = input(false);\n\n  constructor(\n    /**\n     * @docs-private\n     */\n    @Inject(DAFF_MEDIA_GALLERY_TOKEN) public gallery: DaffMediaGalleryRegistration,\n    /**\n     * @docs-private\n     */\n    public templateRef: TemplateRef<unknown>,\n  ) {\n    uniqueThumbnailId++;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    if(!this.label() && isDevMode()) {\n      console.warn('The thumbnail ' + this.id() + ' is missing a label.');\n    }\n  }\n}\n","\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  contentChildren,\n  viewChildren,\n  signal,\n  computed,\n  input,\n  output,\n  Signal,\n} from '@angular/core';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffSelectableDirective,\n  DaffSkeletonableDirective,\n} from '@daffodil/design';\n\nimport { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';\nimport { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';\nimport { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';\n\nlet uniqueGalleryId = 0;\n\n/**\n * The `DaffMediaGalleryComonent` is used to display a group of thumbnails in a gallery format.\n *\n * ```html\n * <daff-media-gallery>\n *  <ng-template daffThumbnail thumbnailSrc=\"/thumbnail-path.jpg\" label=\"Your description\">\n *    <daff-image src=\"/image-path.jpg\" alt=\"Your description\" width=\"100\" height=\"100\"></daff-image>\n *  </ng-template>\n * </daff-media-gallery>\n * ```\n */\n@Component({\n  selector: 'daff-media-gallery',\n  templateUrl: './media-gallery.component.html',\n  styleUrl: './media-gallery.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n\n    { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },\n  ],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffSkeletonableDirective,\n      inputs: ['skeleton'],\n    },\n  ],\n  host: {\n    class: 'daff-media-gallery',\n    '[attr.id]': 'id()',\n  },\n  imports: [\n    DaffThumbnailDirective,\n    NgTemplateOutlet,\n    DaffSelectableDirective,\n  ],\n})\nexport class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {\n  /**\n   * The auto-generated ID of the gallery.\n   */\n  private _defaultId = 'media-gallery-' + uniqueGalleryId;\n\n  /**\n   * 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.\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  customId = input<string | undefined | null>(undefined, { alias: 'id' });\n\n  /**\n   * @docs-private\n   *\n   * The resolved ID of the gallery: the custom ID when provided, otherwise the auto-generated one.\n   */\n  id = computed(() => this.customId() || this._defaultId);\n\n  /**\n   * An event indicating that the selected media gallery element has changed.\n   */\n  elementChange = output<number>();\n\n  /**\n   * @docs-private\n   */\n  _thumbnails = contentChildren(DaffThumbnailDirective);\n\n  /**\n   * @docs-private\n   */\n  private _thumbnailButtons = viewChildren('thumbnailButtons', { read: ElementRef });\n\n  /**\n   * @docs-private\n   */\n  constructor(private skeletonDirective: DaffSkeletonableDirective) {\n    uniqueGalleryId++;\n  }\n\n  /**\n   * @docs-private\n   *\n   * Whether or not the component its currently displaying its skeleton state.\n   */\n  get skeleton() {\n    return this.skeletonDirective.skeleton;\n  }\n\n  /**\n   * @docs-private\n   */\n  _selectedThumbnail: Signal<DaffThumbnailDirective> = computed(() => {\n    const idx = this._selectedIndex();\n    if(!idx) {\n      return this._thumbnails().at(0);\n    }\n    return this._thumbnails().at(idx);\n  });\n\n  private _selectedIndex = signal<number | null>(null);\n\n  /**\n   * @docs-private\n   *\n   * Whether the given thumbnail is the currently selected one.\n   */\n  _isSelected(thumbnail: DaffThumbnailDirective): boolean {\n    return thumbnail === this._selectedThumbnail();\n  }\n\n  private focusSelected() {\n    const index = this._selectedIndex();\n    if(index !== null) {\n      this._thumbnailButtons().at(index)?.nativeElement.focus();\n    }\n  }\n\n  /**\n   * Select a specific entry in the media gallery by its index.\n   *\n   * @param index The index to set, starting at 0.\n   */\n  selectIndex(index: number) {\n    this._selectedIndex.set(index);\n    this.elementChange.emit(index);\n  }\n\n  /**\n   * Navigate to the next element in the list of thumbnails.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  next(focus: boolean = true) {\n    this._selectedIndex.update((curr) => ((curr ?? 0) + 1 + this._thumbnails().length) % this._thumbnails().length);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Navigate to the previous element in the list of thumbnails.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  previous(focus: boolean = true) {\n    this._selectedIndex.update((curr) => ((curr ?? 0) - 1 + this._thumbnails().length) % this._thumbnails().length);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Select the first element.\n   *\n   * @param focus Whether to move focus to the newly selected item.\n   */\n  selectFirst(focus: boolean = true) {\n    this._selectedIndex.set(0);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n\n  /**\n   * Select the last element of the gallery.\n   *\n   * @param Whether to move focus to the newly selected item.\n   */\n  selectLast(focus: boolean = true) {\n    this._selectedIndex.set(this._thumbnails().length - 1);\n    this.elementChange.emit(this._selectedIndex());\n\n    if(focus) {\n      this.focusSelected();\n    }\n  }\n}\n","<ng-content></ng-content>\n\n<div class=\"daff-media-gallery__thumbnails\" #thumbnailsEl role=\"tablist\">\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]=\"_isSelected(thumbnail)\"\n\t\t\t\tattr.aria-label=\"{{ thumbnail.label() ?? 'Gallery Element ' + (index + 1) }}\"\n\t\t\t\t[attr.aria-selected]=\"_isSelected(thumbnail) ? 'true' : 'false'\"\n\t\t\t\t[attr.aria-controls]=\"thumbnail.selectedThumbnailId()\"\n\t\t\t\t[attr.tabindex]=\"_isSelected(thumbnail) ? 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\"></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>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffMediaGalleryComponent,\n    DaffThumbnailDirective,\n  ],\n  exports: [\n    DaffMediaGalleryComponent,\n    DaffThumbnailDirective,\n  ],\n})\nexport class DaffMediaGalleryModule {}\n","import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';\nimport { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_MEDIA_GALLERY_COMPONENTS = <const> [\n  DaffMediaGalleryComponent,\n  DaffThumbnailDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-menu.mjs

@@ -1,8 +1,8 @@
 import * as i1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
+import { STANDARD_DROPDOWN_BELOW_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Injector, Type, TemplateRef, Injectable, signal, input, computed, Input, Directive, ContentChild, ChangeDetectionStrategy, Component, ContentChildren, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injector, Type, TemplateRef, Injectable, signal, input, computed, Directive, ContentChild, ChangeDetectionStrategy, Component, ContentChildren, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import { BehaviorSubject, map, Subject, takeUntil } from 'rxjs';
 import { createConfigInjectionToken, createSingletonInjectionToken } from '@daffodil/core';
 import { CommonModule } from '@angular/common';
@@ -12,6 +12,8 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
 
 const daffMenuConfigDefault = {
     menuId: '',
+    xPosition: 'after',
+    yPosition: 'below',
 };
 const { 
 /**
@@ -23,34 +25,39 @@ token: DAFF_MENU_CONFIG,
  */
 provider: provideDaffMenuConfig, } = createConfigInjectionToken(daffMenuConfigDefault, 'DAFF_MENU_CONFIG');
 
-function daffMenuCreateOverlay(overlay, element, config = {}) {
-    return overlay.create({
-        hasBackdrop: true,
-        backdropClass: 'cdk-overlay-transparent-backdrop',
-        scrollStrategy: overlay.scrollStrategies.block(),
-        disposeOnNavigation: true,
-        positionStrategy: overlay
-            .position()
-            .flexibleConnectedTo(element)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 0,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            },
-        ]),
-        ...config,
-    });
-}
-;
+/**
+ * The CDK connected position for a menu. `yPosition` controls whether the menu drops
+ * below or rises above the activator; `xPosition` controls which edges line up. The menu
+ * stays anchored to the activator, so this is a single placement rather than a set of
+ * fallbacks.
+ */
+const daffMenuConnectedPosition = (xPosition, yPosition) => {
+    const x = xPosition === 'before' ? 'end' : 'start';
+    return {
+        originX: x,
+        overlayX: x,
+        originY: yPosition === 'above' ? 'top' : 'bottom',
+        overlayY: yPosition === 'above' ? 'bottom' : 'top',
+    };
+};
+const daffMenuCreateOverlay = (overlay, element, xPosition = 'after', yPosition = 'below', config = {}) => overlay.create({
+    hasBackdrop: true,
+    backdropClass: 'cdk-overlay-transparent-backdrop',
+    panelClass: 'daff-menu-overlay',
+    scrollStrategy: overlay.scrollStrategies.block(),
+    disposeOnNavigation: true,
+    positionStrategy: overlay
+        .position()
+        .flexibleConnectedTo(element)
+        .withFlexibleDimensions(true)
+        .withPush(false)
+        .withViewportMargin(24)
+        .withPositions([
+        daffMenuConnectedPosition(xPosition, yPosition),
+        ...STANDARD_DROPDOWN_BELOW_POSITIONS,
+    ]),
+    ...config,
+});
 
 class DaffMenuService {
     constructor(overlay, injector) {
@@ -64,7 +71,7 @@ class DaffMenuService {
      */
     async _createOverlay(activatorElement, component, config) {
         if (!this._overlay) {
-            this._overlay = daffMenuCreateOverlay(this.overlay, activatorElement.element);
+            this._overlay = daffMenuCreateOverlay(this.overlay, activatorElement.element, config?.xPosition, config?.yPosition);
             if (typeof component === 'object' && component?.import) {
                 component = await component.import();
             }
@@ -141,11 +148,23 @@ class DaffMenuActivatorDirective {
         this._destroyed$ = new Subject();
         this._defaultMenuId = daffNextMenuId();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /**
+         * The menu content to display when activated.
+         */
+        this.daffMenuActivator = input(...(ngDevMode ? [undefined, { debugName: "daffMenuActivator" }] : /* istanbul ignore next */ []));
         /**
          * An optional ID for the activator.
          * When set, the menu's ID is derived as `${id}-menu`.
          */
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * The horizontal alignment of the menu relative to the activator. Defaults to `after`.
+         */
+        this.xPosition = input('after', ...(ngDevMode ? [{ debugName: "xPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * The vertical position of the menu relative to the activator. Defaults to `below`.
+         */
+        this.yPosition = input('below', ...(ngDevMode ? [{ debugName: "yPosition" }] : /* istanbul ignore next */ []));
         /**
          * The resolved menu ID.
          */
@@ -177,10 +196,12 @@ class DaffMenuActivatorDirective {
      */
     onClick(event) {
         event.preventDefault();
-        this.service.open(this.viewContainerRef, this.daffMenuActivator, { menuId: this.menuId() });
+        this.service.open(this.viewContainerRef, this.daffMenuActivator(), { menuId: this.menuId(), xPosition: this.xPosition(), yPosition: this.yPosition() });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffMenuActivatorDirective, deps: [{ token: DaffMenuService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffMenuActivatorDirective, isStandalone: true, selector: "[daffMenuActivator]", inputs: { daffMenuActivator: { classPropertyName: "daffMenuActivator", publicName: "daffMenuActivator", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-expanded": "ariaExpanded", "attr.aria-controls": "_open ? menuId() : null" } }, exportAs: ["daffMenuActivator"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffMenuActivatorDirective, isStandalone: true, selector: "[daffMenuActivator]", inputs: { daffMenuActivator: { classPropertyName: "daffMenuActivator", publicName: "daffMenuActivator", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-expanded": "ariaExpanded", "attr.aria-controls": "_open ? menuId() : null" } }, providers: [
+            DaffMenuService,
+        ], exportAs: ["daffMenuActivator"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffMenuActivatorDirective, decorators: [{
             type: Directive,
@@ -193,10 +214,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-controls]': '_open ? menuId() : null',
                     },
                     exportAs: 'daffMenuActivator',
+                    providers: [
+                        DaffMenuService,
+                    ],
                 }]
-        }], ctorParameters: () => [{ type: DaffMenuService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { daffMenuActivator: [{
-                type: Input
-            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+        }], ctorParameters: () => [{ type: DaffMenuService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { daffMenuActivator: [{ type: i0.Input, args: [{ isSignal: true, alias: "daffMenuActivator", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }] } });
 
 /**
  * Injection token/provider pair used to identify menu items.
@@ -322,7 +344,7 @@ class DaffMenuComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffMenuComponent, deps: [{ token: i1$1.ConfigurableFocusTrapFactory }, { token: i0.ElementRef }, { token: DaffMenuService }, { token: DAFF_MENU_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DaffMenuComponent, isStandalone: true, selector: "daff-menu", host: { attributes: { "tabindex": "0", "role": "menu" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "id": "config.menuId" }, classAttribute: "daff-menu" }, queries: [{ propertyName: "_items", predicate: DAFF_MENU_ITEM_TOKEN }], ngImport: i0, template: "<ng-content></ng-content>", styles: [".daff-menu{display:block;min-width:7rem;max-width:20rem;border-radius:.25rem;padding:.5rem}.daff-menu-item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.25rem;border:none;border-radius:.25rem;margin:0;padding:.75rem 1rem;text-decoration:none;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DaffMenuComponent, isStandalone: true, selector: "daff-menu", host: { attributes: { "tabindex": "0", "role": "menu" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "id": "config.menuId" }, classAttribute: "daff-menu" }, queries: [{ propertyName: "_items", predicate: DAFF_MENU_ITEM_TOKEN }], ngImport: i0, template: "<ng-content></ng-content>", styles: [".daff-menu-overlay>*:not(.daff-menu){display:contents}.daff-menu{display:block;min-width:7rem;max-width:20rem;border-radius:.25rem;padding:.5rem;overflow-y:auto}.daff-menu-item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.25rem;border:none;border-radius:.25rem;margin:0;padding:.75rem 1rem;text-decoration:none;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffMenuComponent, decorators: [{
             type: Component,
@@ -334,7 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown)': 'handleKeydown($event)',
                     }, imports: [
                         DaffMenuItemComponent,
-                    ], template: "<ng-content></ng-content>", styles: [".daff-menu{display:block;min-width:7rem;max-width:20rem;border-radius:.25rem;padding:.5rem}.daff-menu-item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.25rem;border:none;border-radius:.25rem;margin:0;padding:.75rem 1rem;text-decoration:none;width:100%}\n"] }]
+                    ], template: "<ng-content></ng-content>", styles: [".daff-menu-overlay>*:not(.daff-menu){display:contents}.daff-menu{display:block;min-width:7rem;max-width:20rem;border-radius:.25rem;padding:.5rem;overflow-y:auto}.daff-menu-item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.25rem;border:none;border-radius:.25rem;margin:0;padding:.75rem 1rem;text-decoration:none;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ConfigurableFocusTrapFactory }, { type: i0.ElementRef }, { type: DaffMenuService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_MENU_CONFIG]
@@ -392,6 +414,7 @@ const DAFF_MENU_COMPONENTS = [
     DaffMenuComponent,
     DaffMenuActivatorDirective,
     DaffMenuItemComponent,
+    DaffPrefixDirective,
 ];
 
 /**