Media Gallery

Media gallery is used to display a group of thumbnails in a gallery format.

daffThumbnailCompatToken

A multi provider injection token that marks a component as renderable for the DaffMediaRendererComponent.

import { daffThumbnailCompatToken } from '@daffodil/design/media-gallery'

const daffThumbnailCompatToken: undefined

DAFF_MEDIA_GALLERY_COMPONENTS

import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'

const DAFF_MEDIA_GALLERY_COMPONENTS: readonly [typeof DaffMediaGalleryComponent, typeof DaffThumbnailDirective, typeof DaffMediaRendererComponent]

DaffMediaGalleryComponent

import { DaffMediaGalleryComponent } from '@daffodil/design/media-gallery'

@Component()
class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
  @HostBinding() class: true
  @Input() name: `${uniqueGalleryId}`
  ngOnInit()
  ngOnDestroy()
}

Selector: 'daff-media-gallery'

Properties

Name	Type	Description
class	true	Adds a class for styling the media gallery
@Input() name	`${uniqueGalleryId}`	The name of the gallery
ngOnInit
ngOnDestroy

DaffMediaGalleryModule

import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery'

@NgModule()
class DaffMediaGalleryModule {}

DaffThumbnailDirective

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.

import { DaffThumbnailDirective } from '@daffodil/design/media-gallery'

@Directive()
class DaffThumbnailDirective implements OnInit, OnDestroy, DaffThumbnailRegistration {
  @Inject() component: Type<unknown>
  @Inject() gallery: DaffMediaGalleryRegistration
  get selected()
  select()
  deselect()
  @HostBinding() class: true
  @HostListener() onClick($event: MouseEvent)
  ngOnInit(): void
  ngOnDestroy(): void
}

Selector: '[daffThumbnail]'

Properties

Name	Type	Description
component	Type<unknown>
gallery	DaffMediaGalleryRegistration
selected
select
deselect
class	true	Adds a class for styling a thumbnail
onClick		Adds a click event to trigger selection of the media element.
ngOnInit	void
ngOnDestroy	void