Embeds and displays documents of types which depend on browser plugin support. If a browser does not support a document type, an alternative fallback content is displayed.

Supports preview content which is displayed before the creation of the documents view. The user has to click on the preview content to trigger the creation of the document view.

The preview content does not have to be a hylo-responsive-image but when used, you can mark it as part of a hylo-gallery.

Used slots:

  • default: the fallback content
  • preview: preview content

Properties

announcementClosed: string

The text announced when the layer got closed.

Its hylo-page-root translations object key is "embedAnnouncementClosed".

announcementDelay: number = 500

The delay of the announcement in millisecond.

announcementElement: string | HTMLHyloAccessibilityAnnouncementElement

An HTMLHyloAccessibilityAnnouncementElement component either as element or css query selection. If not set and hylo-page-root is present, it takes the announcement element from the hylo-page-root component.

Used to announce opened/closed status of the layer or replacement of the preview image/player. "announcementOpened", "announcementClosed", "announcementPlayer" and/or "announcementImage" needs to be set.

announcementEmbed: string

The text announced when the player got added.

Its hylo-page-root translations object key is "embedAnnouncementEmbed".

announcementImage: string

The text announced when the player got replaced with the preview image again.

Its hylo-page-root translations object key is "embedAnnouncementImage".

announcementOpened: string

The text announced when the layer got opened.

Its hylo-page-root translations object key is "embedAnnouncementOpened".

ariaLabelButton: string = 'Ein Media Dokument'

The aria-label of the preview content or the document object.

Its hylo-page-root translations object key is "embedButton".

buttonLabelClose: string = 'Media Dokument Layer schließen'

Label of the layer close button.

Its hylo-page-root translations object key is "embedButtonLabelClose".

layer: boolean = false

Should the document open in a layer or placed inside this component. Has to be used in combination with a preview content.

Can be used to indicate that the component should be part of a hylo-gallery when inside a hylo-gallery and no hylo-responsive-image is directly used as preview content.

To have the component inside a hylo-gallery but still open as a layer, add an empty hylo-responsive-image directly to the preview content slot.

To use an preview image in the gallery view but have general markup as preview content, add a hylo-responsive-image with only "gallery" hylo-image directly to the preview content slot. Only preview images are possible in the gallery view.

layerClass: string = ''

Classes added to the layer.

layerContentClass: string = ''

Classes added to the layer content wrapper.

layerLabel: string = 'Media Dokument Layer'

Label of the layer.

Its hylo-page-root translations object key is "embedLayerLabel".

layerLabelEnd: string = 'Ende des Media Dokument Layers. Zum Anfang des Media Dokument Layers springen'

Label of the end marker of the layer.

Its hylo-page-root translations object key is "embedLayerLabelEnd".

layerLabelStart: string = 'Media Dokument Layer Anfang'

Label of the start marker of the layer.

Its hylo-page-root translations object key is "embedLayerLabelStart".

src: string

The path to the document.

type: "pdf" | "fallback"

The type of the embedded document.

"fallback" displays the fallback content.

Methods

  • Closes either the document layer or replaces the document with the preview image.

    Returns Promise<void>

  • Returns the fallback element.

    Returns Promise<HTMLElement>

  • Returns if a source is provided.

    Returns Promise<boolean>

  • Opens either the document layer or replaces the preview image with the document.

    Returns Promise<void>

Events

hyloEmbedCreated: EventEmitter<any>

Fired when either the preview image got replaced with the document or the document got created in a layer.

hyloEmbedRemoved: EventEmitter<any>

Fired when the document got replaced with the preview image or the document layer got closed.

hyloHasFocus: EventEmitter<any>

The preview content gained or lost focus through keyboard (tab key) interaction. Emits whether it gained the focus. Is dispatched on the preview content wrapper element.

Generated using TypeDoc