@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-galleria.mjs

@@ -1,23 +1,22 @@
-export * from '@gravionlabs/helix-core/types/galleria';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, model, input, booleanAttribute, numberAttribute, computed, effect, signal, viewChild, contentChild, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, output, NgModule } from '@angular/core';
-import { findSingle, focus, removeClass, uuid, setAttribute, find, getAttribute, addClass } from '@gravionlabs/helix-core/uix/utils';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { blockBodyScroll, unblockBodyScroll } from '@gravionlabs/helix-core/dom';
-import { FocusTrap } from '@gravionlabs/helix-core/focustrap';
-import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon } from '@gravionlabs/helix-core/icons';
-import * as i3 from '@gravionlabs/helix-core/motion';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import { Ripple } from '@gravionlabs/helix-core/ripple';
-import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { addClass, find, findSingle, focus, getAttribute, removeClass, setAttribute, uuid } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { blockBodyScroll, unblockBodyScroll } from "@gravionlabs/helix-core/dom";
+import { FocusTrap } from "@gravionlabs/helix-core/focustrap";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon } from "@gravionlabs/helix-core/icons";
+import * as i3 from "@gravionlabs/helix-core/motion";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import { Ripple } from "@gravionlabs/helix-core/ripple";
+import { ZIndexUtils } from "@gravionlabs/helix-core/utils";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/galleria";
+const style = `
     .h-galleria {
         overflow: hidden;
         border-style: solid;
@@ -477,1454 +476,2806 @@ const style = /*css*/ `
         }
     }
 `;
-
 const classes = {
-    mask: 'h-galleria-mask h-overlay-mask',
-    root: ({ instance }) => {
-        const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('h-galleria-thumbnails', instance.galleria.thumbnailsPosition);
-        const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('h-galleria-indicators', instance.galleria.indicatorsPosition);
-        return [
-            'h-galleria h-component',
-            {
-                'h-galleria-fullscreen': instance.galleria.fullScreen(),
-                'h-galleria-inset-indicators': instance.galleria.showIndicatorsOnItem,
-                'h-galleria-hover-navigators': instance.galleria.showItemNavigatorsOnHover && !instance.galleria.fullScreen()
-            },
-            thumbnailsPosClass,
-            indicatorPosClass
-        ];
-    },
-    closeButton: 'h-galleria-close-button',
-    closeIcon: 'h-galleria-close-icon',
-    header: 'h-galleria-header',
-    content: 'h-galleria-content',
-    footer: 'h-galleria-footer',
-    itemsContainer: 'h-galleria-items-container',
-    items: 'h-galleria-items',
-    prevButton: ({ instance }) => [
-        'h-galleria-prev-button h-galleria-nav-button',
-        {
-            'h-disabled': instance.isNavBackwardDisabled()
-        }
-    ],
-    prevIcon: 'h-galleria-prev-icon',
-    item: 'h-galleria-item',
-    nextButton: ({ instance }) => [
-        'h-galleria-next-button h-galleria-nav-button',
-        {
-            'h-disabled': instance.isNavForwardDisabled()
-        }
-    ],
-    nextIcon: 'h-galleria-next-icon',
-    caption: 'h-galleria-caption',
-    indicatorList: 'h-galleria-indicator-list',
-    indicator: ({ instance, index }) => [
-        'h-galleria-indicator',
-        {
-            'h-galleria-indicator-active': instance.isIndicatorItemActive(index)
-        }
-    ],
-    indicatorButton: 'h-galleria-indicator-button',
-    thumbnails: 'h-galleria-thumbnails',
-    thumbnailContent: 'h-galleria-thumbnails-content',
-    thumbnailPrevButton: ({ instance }) => [
-        'h-galleria-thumbnail-prev-button h-galleria-thumbnail-nav-button',
-        {
-            'h-disabled': instance.isNavBackwardDisabled()
-        }
-    ],
-    thumbnailPrevIcon: 'h-galleria-thumbnail-prev-icon',
-    thumbnailsViewport: 'h-galleria-thumbnails-viewport',
-    thumbnailItems: 'h-galleria-thumbnail-items',
-    thumbnailItem: ({ instance, index, activeIndex }) => [
-        'h-galleria-thumbnail-item',
-        {
-            'h-galleria-thumbnail-item-current': activeIndex === index,
-            'h-galleria-thumbnail-item-active': instance.isItemActive(index),
-            'h-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
-            'h-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
-        }
-    ],
-    thumbnail: 'h-galleria-thumbnail',
-    thumbnailNextButton: ({ instance }) => [
-        'h-galleria-thumbnail-next-button  h-galleria-thumbnail-nav-button',
-        {
-            'h-disabled': instance.isNavForwardDisabled()
-        }
-    ],
-    thumbnailNextIcon: 'h-galleria-thumbnail-next-icon'
+	mask: "h-galleria-mask h-overlay-mask",
+	root: ({ instance }) => {
+		const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass("h-galleria-thumbnails", instance.galleria.thumbnailsPosition);
+		const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass("h-galleria-indicators", instance.galleria.indicatorsPosition);
+		return [
+			"h-galleria h-component",
+			{
+				"h-galleria-fullscreen": instance.galleria.fullScreen(),
+				"h-galleria-inset-indicators": instance.galleria.showIndicatorsOnItem,
+				"h-galleria-hover-navigators": instance.galleria.showItemNavigatorsOnHover && !instance.galleria.fullScreen()
+			},
+			thumbnailsPosClass,
+			indicatorPosClass
+		];
+	},
+	closeButton: "h-galleria-close-button",
+	closeIcon: "h-galleria-close-icon",
+	header: "h-galleria-header",
+	content: "h-galleria-content",
+	footer: "h-galleria-footer",
+	itemsContainer: "h-galleria-items-container",
+	items: "h-galleria-items",
+	prevButton: ({ instance }) => ["h-galleria-prev-button h-galleria-nav-button", { "h-disabled": instance.isNavBackwardDisabled() }],
+	prevIcon: "h-galleria-prev-icon",
+	item: "h-galleria-item",
+	nextButton: ({ instance }) => ["h-galleria-next-button h-galleria-nav-button", { "h-disabled": instance.isNavForwardDisabled() }],
+	nextIcon: "h-galleria-next-icon",
+	caption: "h-galleria-caption",
+	indicatorList: "h-galleria-indicator-list",
+	indicator: ({ instance, index }) => ["h-galleria-indicator", { "h-galleria-indicator-active": instance.isIndicatorItemActive(index) }],
+	indicatorButton: "h-galleria-indicator-button",
+	thumbnails: "h-galleria-thumbnails",
+	thumbnailContent: "h-galleria-thumbnails-content",
+	thumbnailPrevButton: ({ instance }) => ["h-galleria-thumbnail-prev-button h-galleria-thumbnail-nav-button", { "h-disabled": instance.isNavBackwardDisabled() }],
+	thumbnailPrevIcon: "h-galleria-thumbnail-prev-icon",
+	thumbnailsViewport: "h-galleria-thumbnails-viewport",
+	thumbnailItems: "h-galleria-thumbnail-items",
+	thumbnailItem: ({ instance, index, activeIndex }) => ["h-galleria-thumbnail-item", {
+		"h-galleria-thumbnail-item-current": activeIndex === index,
+		"h-galleria-thumbnail-item-active": instance.isItemActive(index),
+		"h-galleria-thumbnail-item-start": instance.firstItemAciveIndex() === index,
+		"h-galleria-thumbnail-item-end": instance.lastItemActiveIndex() === index
+	}],
+	thumbnail: "h-galleria-thumbnail",
+	thumbnailNextButton: ({ instance }) => ["h-galleria-thumbnail-next-button  h-galleria-thumbnail-nav-button", { "h-disabled": instance.isNavForwardDisabled() }],
+	thumbnailNextIcon: "h-galleria-thumbnail-next-icon"
+};
+var GalleriaStyle = class GalleriaStyle extends BaseStyle {
+	name = "galleria";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaStyle
+	});
 };
-class GalleriaStyle extends BaseStyle {
-    name = 'galleria';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Galleria is an advanced content gallery component.
- *
- * [Live Demo](https://www.primeng.org/galleria/)
- *
- * @module galleriastyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaStyle,
+	decorators: [{ type: Injectable }]
+});
 var GalleriaClasses;
-(function (GalleriaClasses) {
-    /**
-     * Class name of the mask element
-     */
-    GalleriaClasses["mask"] = "h-galleria-mask";
-    /**
-     * Class name of the root element
-     */
-    GalleriaClasses["root"] = "h-galleria";
-    /**
-     * Class name of the close button element
-     */
-    GalleriaClasses["closeButton"] = "h-galleria-close-button";
-    /**
-     * Class name of the close icon element
-     */
-    GalleriaClasses["closeIcon"] = "h-galleria-close-icon";
-    /**
-     * Class name of the header element
-     */
-    GalleriaClasses["header"] = "h-galleria-header";
-    /**
-     * Class name of the content element
-     */
-    GalleriaClasses["content"] = "h-galleria-content";
-    /**
-     * Class name of the footer element
-     */
-    GalleriaClasses["footer"] = "h-galleria-footer";
-    /**
-     * Class name of the items container element
-     */
-    GalleriaClasses["itemsContainer"] = "h-galleria-items-container";
-    /**
-     * Class name of the items element
-     */
-    GalleriaClasses["items"] = "h-galleria-items";
-    /**
-     * Class name of the previous item button element
-     */
-    GalleriaClasses["prevButton"] = "h-galleria-prev-button";
-    /**
-     * Class name of the previous item icon element
-     */
-    GalleriaClasses["prevIcon"] = "h-galleria-prev-icon";
-    /**
-     * Class name of the item element
-     */
-    GalleriaClasses["item"] = "h-galleria-item";
-    /**
-     * Class name of the next item button element
-     */
-    GalleriaClasses["nextButton"] = "h-galleria-next-button";
-    /**
-     * Class name of the next item icon element
-     */
-    GalleriaClasses["nextIcon"] = "h-galleria-next-icon";
-    /**
-     * Class name of the caption element
-     */
-    GalleriaClasses["caption"] = "h-galleria-caption";
-    /**
-     * Class name of the indicator list element
-     */
-    GalleriaClasses["indicatorList"] = "h-galleria-indicator-list";
-    /**
-     * Class name of the indicator element
-     */
-    GalleriaClasses["indicator"] = "h-galleria-indicator";
-    /**
-     * Class name of the indicator button element
-     */
-    GalleriaClasses["indicatorButton"] = "h-galleria-indicator-button";
-    /**
-     * Class name of the thumbnails element
-     */
-    GalleriaClasses["thumbnails"] = "h-galleria-thumbnails";
-    /**
-     * Class name of the thumbnail content element
-     */
-    GalleriaClasses["thumbnailContent"] = "h-galleria-thumbnails-content";
-    /**
-     * Class name of the previous thumbnail button element
-     */
-    GalleriaClasses["previousThumbnailButton"] = "h-galleria-thumbnail-prev-button";
-    /**
-     * Class name of the previous thumbnail icon element
-     */
-    GalleriaClasses["previousThumbnailIcon"] = "h-galleria-thumbnail-prev-icon";
-    /**
-     * Class name of the thumbnails viewport element
-     */
-    GalleriaClasses["thumbnailsViewport"] = "h-galleria-thumbnails-viewport";
-    /**
-     * Class name of the thumbnail items element
-     */
-    GalleriaClasses["thumbnailItems"] = "h-galleria-thumbnail-items";
-    /**
-     * Class name of the thumbnail item element
-     */
-    GalleriaClasses["thumbnailItem"] = "h-galleria-thumbnail-item";
-    /**
-     * Class name of the thumbnail element
-     */
-    GalleriaClasses["thumbnail"] = "h-galleria-thumbnail";
-    /**
-     * Class name of the next thumbnail button element
-     */
-    GalleriaClasses["nextThumbnailButton"] = "h-galleria-thumbnail-next-button";
-    /**
-     * Class name of the next thumbnail icon element
-     */
-    GalleriaClasses["nextThumbnailIcon"] = "h-galleria-thumbnail-next-icon";
+(function(GalleriaClasses) {
+	GalleriaClasses["mask"] = "h-galleria-mask";
+	GalleriaClasses["root"] = "h-galleria";
+	GalleriaClasses["closeButton"] = "h-galleria-close-button";
+	GalleriaClasses["closeIcon"] = "h-galleria-close-icon";
+	GalleriaClasses["header"] = "h-galleria-header";
+	GalleriaClasses["content"] = "h-galleria-content";
+	GalleriaClasses["footer"] = "h-galleria-footer";
+	GalleriaClasses["itemsContainer"] = "h-galleria-items-container";
+	GalleriaClasses["items"] = "h-galleria-items";
+	GalleriaClasses["prevButton"] = "h-galleria-prev-button";
+	GalleriaClasses["prevIcon"] = "h-galleria-prev-icon";
+	GalleriaClasses["item"] = "h-galleria-item";
+	GalleriaClasses["nextButton"] = "h-galleria-next-button";
+	GalleriaClasses["nextIcon"] = "h-galleria-next-icon";
+	GalleriaClasses["caption"] = "h-galleria-caption";
+	GalleriaClasses["indicatorList"] = "h-galleria-indicator-list";
+	GalleriaClasses["indicator"] = "h-galleria-indicator";
+	GalleriaClasses["indicatorButton"] = "h-galleria-indicator-button";
+	GalleriaClasses["thumbnails"] = "h-galleria-thumbnails";
+	GalleriaClasses["thumbnailContent"] = "h-galleria-thumbnails-content";
+	GalleriaClasses["previousThumbnailButton"] = "h-galleria-thumbnail-prev-button";
+	GalleriaClasses["previousThumbnailIcon"] = "h-galleria-thumbnail-prev-icon";
+	GalleriaClasses["thumbnailsViewport"] = "h-galleria-thumbnails-viewport";
+	GalleriaClasses["thumbnailItems"] = "h-galleria-thumbnail-items";
+	GalleriaClasses["thumbnailItem"] = "h-galleria-thumbnail-item";
+	GalleriaClasses["thumbnail"] = "h-galleria-thumbnail";
+	GalleriaClasses["nextThumbnailButton"] = "h-galleria-thumbnail-next-button";
+	GalleriaClasses["nextThumbnailIcon"] = "h-galleria-thumbnail-next-icon";
 })(GalleriaClasses || (GalleriaClasses = {}));
-
-const GALLERIA_INSTANCE = new InjectionToken('GALLERIA_INSTANCE');
-/**
- * Galleria is an advanced content gallery component.
- * @group Components
- */
-class Galleria extends BaseComponent {
-    element;
-    componentName = 'Galleria';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
-    }
-    /**
-     * Index of the first item.
-     * @group Props
-     */
-    activeIndex = model(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to display the component on fullscreen.
-     * @group Props
-     */
-    fullScreen = input(false, { ...(ngDevMode ? { debugName: "fullScreen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Unique identifier of the element.
-     * @group Props
-     */
-    id = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
-    /**
-     * An array of objects to display.
-     * @group Props
-     */
-    value = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Number of items per page.
-     * @group Props
-     */
-    numVisible = input(3, { ...(ngDevMode ? { debugName: "numVisible" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * An array of options for responsive design.
-     * @see {GalleriaResponsiveOptions}
-     * @group Props
-     */
-    responsiveOptions = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "responsiveOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to display navigation buttons in item section.
-     * @group Props
-     */
-    showItemNavigators = input(false, { ...(ngDevMode ? { debugName: "showItemNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether to display navigation buttons in thumbnail container.
-     * @group Props
-     */
-    showThumbnailNavigators = input(true, { ...(ngDevMode ? { debugName: "showThumbnailNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether to display navigation buttons on item hover.
-     * @group Props
-     */
-    showItemNavigatorsOnHover = input(false, { ...(ngDevMode ? { debugName: "showItemNavigatorsOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When enabled, item is changed on indicator hover.
-     * @group Props
-     */
-    changeItemOnIndicatorHover = input(false, { ...(ngDevMode ? { debugName: "changeItemOnIndicatorHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Defines if scrolling would be infinite.
-     * @group Props
-     */
-    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Items are displayed with a slideshow in autoPlay mode.
-     * @group Props
-     */
-    autoPlay = input(false, { ...(ngDevMode ? { debugName: "autoPlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When enabled, autorun should stop by click.
-     * @group Props
-     */
-    shouldStopAutoplayByClick = input(true, { ...(ngDevMode ? { debugName: "shouldStopAutoplayByClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Time in milliseconds to scroll items.
-     * @group Props
-     */
-    transitionInterval = input(4000, { ...(ngDevMode ? { debugName: "transitionInterval" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Whether to display thumbnail container.
-     * @group Props
-     */
-    showThumbnails = input(true, { ...(ngDevMode ? { debugName: "showThumbnails" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Position of thumbnails.
-     * @group Props
-     */
-    thumbnailsPosition = input('bottom', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "thumbnailsPosition" }] : /* istanbul ignore next */ []));
-    /**
-     * Height of the viewport in vertical thumbnail.
-     * @group Props
-     */
-    verticalThumbnailViewPortHeight = input('300px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "verticalThumbnailViewPortHeight" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to display indicator container.
-     * @group Props
-     */
-    showIndicators = input(false, { ...(ngDevMode ? { debugName: "showIndicators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When enabled, indicator container is displayed on item container.
-     * @group Props
-     */
-    showIndicatorsOnItem = input(false, { ...(ngDevMode ? { debugName: "showIndicatorsOnItem" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Position of indicators.
-     * @group Props
-     */
-    indicatorsPosition = input('bottom', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicatorsPosition" }] : /* istanbul ignore next */ []));
-    /**
-     * Base zIndex value to use in layering.
-     * @group Props
-     */
-    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Style class of the mask on fullscreen mode.
-     * @group Props
-     */
-    maskClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "maskClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
-     * @group Props
-     */
-    containerClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "containerClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
-     * @group Props
-     */
-    containerStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "containerStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the show animation.
-     * @deprecated since v21.0.0. Use `motionOptions` instead.
-     * @group Props
-     */
-    showTransitionOptions = input('150ms cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the hide animation.
-     * @deprecated since v21.0.0. Use `motionOptions` instead.
-     * @group Props
-     */
-    hideTransitionOptions = input('150ms cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion'),
-            ...this.motionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The mask motion options.
-     * @group Props
-     */
-    maskMotionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
-    computedMaskMotionOptions = computed(() => {
-        return {
-            ...this.ptm('maskMotion'),
-            ...this.maskMotionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Specifies the visibility of the mask on fullscreen mode.
-     * @group Props
-     */
-    visible = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    _visibleEffect = effect(() => {
-        if (this.visible() && !this.maskVisible) {
-            this.maskVisible = true;
-            this.renderMask.set(true);
-            this.renderContent.set(true);
-        }
-        else if (!this.visible() && this.maskVisible) {
-            this.maskVisible = false;
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_visibleEffect" }] : /* istanbul ignore next */ []));
-    renderMask = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []));
-    renderContent = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderContent" }] : /* istanbul ignore next */ []));
-    container = viewChild('container', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom header template.
-     * @group Templates
-     */
-    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    headerFacet;
-    /**
-     * Custom footer template.
-     * @group Templates
-     */
-    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    footerFacet;
-    /**
-     * Custom indicator template.
-     * @group Templates
-     */
-    indicatorTemplate = contentChild('indicator', { ...(ngDevMode ? { debugName: "indicatorTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    indicatorFacet;
-    /**
-     * Custom caption template.
-     * @group Templates
-     */
-    captionTemplate = contentChild('caption', { ...(ngDevMode ? { debugName: "captionTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    captionFacet;
-    /**
-     * Custom close icon template.
-     * @group Templates
-     */
-    _closeIconTemplate = contentChild('closeicon', { ...(ngDevMode ? { debugName: "_closeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    closeIconTemplate;
-    /**
-     * Custom previous thumbnail icon template.
-     * @group Templates
-     */
-    _previousThumbnailIconTemplate = contentChild('previousthumbnailicon', { ...(ngDevMode ? { debugName: "_previousThumbnailIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    previousThumbnailIconTemplate;
-    /**
-     * Custom next thumbnail icon template.
-     * @group Templates
-     */
-    _nextThumbnailIconTemplate = contentChild('nextthumbnailicon', { ...(ngDevMode ? { debugName: "_nextThumbnailIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    nextThumbnailIconTemplate;
-    /**
-     * Custom item previous icon template.
-     * @group Templates
-     */
-    _itemPreviousIconTemplate = contentChild('itempreviousicon', { ...(ngDevMode ? { debugName: "_itemPreviousIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    itemPreviousIconTemplate;
-    /**
-     * Custom item next icon template.
-     * @group Templates
-     */
-    _itemNextIconTemplate = contentChild('itemnexticon', { ...(ngDevMode ? { debugName: "_itemNextIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    itemNextIconTemplate;
-    /**
-     * Custom item template.
-     * @group Templates
-     */
-    _itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "_itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    itemTemplate;
-    /**
-     * Custom thumbnail template.
-     * @group Templates
-     */
-    _thumbnailTemplate = contentChild('thumbnail', { ...(ngDevMode ? { debugName: "_thumbnailTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    thumbnailTemplate;
-    maskVisible = false;
-    numVisibleLimit = 0;
-    _componentStyle = inject(GalleriaStyle);
-    mask;
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    constructor(element) {
-        super();
-        this.element = element;
-    }
-    onAfterContentInit() {
-        this.templates().forEach((item) => {
-            switch (item.getType()) {
-                case 'header':
-                    this.headerFacet = item.template;
-                    break;
-                case 'footer':
-                    this.footerFacet = item.template;
-                    break;
-                case 'indicator':
-                    this.indicatorFacet = item.template;
-                    break;
-                case 'closeicon':
-                    this.closeIconTemplate = item.template;
-                    break;
-                case 'itemnexticon':
-                    this.itemNextIconTemplate = item.template;
-                    break;
-                case 'itempreviousicon':
-                    this.itemPreviousIconTemplate = item.template;
-                    break;
-                case 'previousthumbnailicon':
-                    this.previousThumbnailIconTemplate = item.template;
-                    break;
-                case 'nextthumbnailicon':
-                    this.nextThumbnailIconTemplate = item.template;
-                    break;
-                case 'caption':
-                    this.captionFacet = item.template;
-                    break;
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-                case 'thumbnail':
-                    this.thumbnailTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    onChanges(simpleChanges) {
-        if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible()) {
-            this.numVisibleLimit = simpleChanges.value.currentValue.length;
-        }
-        else {
-            this.numVisibleLimit = 0;
-        }
-    }
-    onMaskHide(event) {
-        if (!event || event.target === event.currentTarget) {
-            this.visible.set(false);
-        }
-    }
-    onActiveItemChange(index) {
-        if (this.activeIndex() !== index) {
-            this.activeIndex.set(index);
-        }
-    }
-    onBeforeEnter(event) {
-        this.mask = event.element?.parentElement;
-        this.enableModality();
-        setTimeout(() => {
-            const focusTarget = findSingle(this.container()?.nativeElement, '[data-pc-section="closebutton"]');
-            if (focusTarget)
-                focus(focusTarget);
-        }, 25);
-    }
-    onBeforeLeave() {
-        if (this.mask) {
-            this.maskVisible = false;
-        }
-    }
-    onAfterLeave() {
-        this.disableModality();
-        this.renderContent.set(false);
-    }
-    onMaskAfterLeave() {
-        if (!this.renderContent()) {
-            this.renderMask.set(false);
-        }
-    }
-    enableModality() {
-        //@ts-ignore
-        blockBodyScroll();
-        this.cd.markForCheck();
-        if (this.mask) {
-            ZIndexUtils.set('modal', this.mask, this.baseZIndex() || this.config.zIndex.modal);
-        }
-    }
-    disableModality() {
-        //@ts-ignore
-        unblockBodyScroll();
-        this.cd.markForCheck();
-        if (this.mask) {
-            ZIndexUtils.clear(this.mask);
-        }
-    }
-    onDestroy() {
-        if (this.fullScreen()) {
-            removeClass(this.document.body, 'h-overflow-hidden');
-        }
-        if (this.mask) {
-            this.disableModality();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Galleria, isStandalone: false, selector: "h-galleria", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: true, isRequired: false, transformFunction: null }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigatorsOnHover: { classPropertyName: "showItemNavigatorsOnHover", publicName: "showItemNavigatorsOnHover", isSignal: true, isRequired: false, transformFunction: null }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, shouldStopAutoplayByClick: { classPropertyName: "shouldStopAutoplayByClick", publicName: "shouldStopAutoplayByClick", isSignal: true, isRequired: false, transformFunction: null }, transitionInterval: { classPropertyName: "transitionInterval", publicName: "transitionInterval", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, thumbnailsPosition: { classPropertyName: "thumbnailsPosition", publicName: "thumbnailsPosition", isSignal: true, isRequired: false, transformFunction: null }, verticalThumbnailViewPortHeight: { classPropertyName: "verticalThumbnailViewPortHeight", publicName: "verticalThumbnailViewPortHeight", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, showIndicatorsOnItem: { classPropertyName: "showIndicatorsOnItem", publicName: "showIndicatorsOnItem", isSignal: true, isRequired: false, transformFunction: null }, indicatorsPosition: { classPropertyName: "indicatorsPosition", publicName: "indicatorsPosition", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maskClass: { classPropertyName: "maskClass", publicName: "maskClass", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", visible: "visibleChange" }, providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"], isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ["caption"], isSignal: true }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"], isSignal: true }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"], isSignal: true }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"], isSignal: true }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"], isSignal: true }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"], isSignal: true }, { propertyName: "_itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (fullScreen()) {\n  <div #container>\n    @if (renderMask()) {\n      <div\n        [hBind]=\"ptm('mask')\"\n        [hMotion]=\"maskVisible\"\n        [pMotionAppear]=\"true\"\n        [pMotionEnterActiveClass]=\"fullScreen() ? 'h-overlay-mask-enter-active' : ''\"\n        [pMotionLeaveActiveClass]=\"fullScreen() ? 'h-overlay-mask-leave-active' : ''\"\n        [pMotionOptions]=\"computedMaskMotionOptions()\"\n        (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n        [ngClass]=\"cx('mask')\"\n        [class]=\"maskClass()\"\n        [attr.role]=\"fullScreen() ? 'dialog' : 'region'\"\n        [attr.aria-modal]=\"fullScreen() ? 'true' : undefined\"\n        (click)=\"onMaskHide($event)\"\n        >\n        @if (renderContent()) {\n          <div\n            hGalleriaContent\n            [hMotion]=\"visible()\"\n            [pMotionAppear]=\"true\"\n            [pMotionName]=\"'h-galleria'\"\n            [pMotionOptions]=\"computedMotionOptions()\"\n            (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n            (pMotionOnBeforeLeave)=\"onBeforeLeave()\"\n            (pMotionOnAfterLeave)=\"onAfterLeave()\"\n            [value]=\"value()\"\n            [activeIndex]=\"activeIndex()\"\n            [numVisible]=\"numVisibleLimit || numVisible()\"\n            (maskHide)=\"onMaskHide()\"\n            (activeItemChange)=\"onActiveItemChange($event)\"\n            [ngStyle]=\"containerStyle()\"\n            [fullScreen]=\"fullScreen()\"\n            [pt]=\"pt()\"\n            hFocusTrap\n            [pFocusTrapDisabled]=\"!fullScreen()\"\n            [unstyled]=\"unstyled()\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div hGalleriaContent [pt]=\"pt()\" [unstyled]=\"unstyled()\" [value]=\"value()\" [activeIndex]=\"activeIndex()\" [numVisible]=\"numVisibleLimit || numVisible()\" (activeItemChange)=\"onActiveItemChange($event)\"></div>\n}\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[hFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[hBind]", inputs: ["hBind"] }, { kind: "directive", type: i0.forwardRef(() => i3.MotionDirective), selector: "[hMotion]", inputs: ["hMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "div[hGalleriaContent]", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Galleria, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-galleria', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }], hostDirectives: [Bind], template: "@if (fullScreen()) {\n  <div #container>\n    @if (renderMask()) {\n      <div\n        [hBind]=\"ptm('mask')\"\n        [hMotion]=\"maskVisible\"\n        [pMotionAppear]=\"true\"\n        [pMotionEnterActiveClass]=\"fullScreen() ? 'h-overlay-mask-enter-active' : ''\"\n        [pMotionLeaveActiveClass]=\"fullScreen() ? 'h-overlay-mask-leave-active' : ''\"\n        [pMotionOptions]=\"computedMaskMotionOptions()\"\n        (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n        [ngClass]=\"cx('mask')\"\n        [class]=\"maskClass()\"\n        [attr.role]=\"fullScreen() ? 'dialog' : 'region'\"\n        [attr.aria-modal]=\"fullScreen() ? 'true' : undefined\"\n        (click)=\"onMaskHide($event)\"\n        >\n        @if (renderContent()) {\n          <div\n            hGalleriaContent\n            [hMotion]=\"visible()\"\n            [pMotionAppear]=\"true\"\n            [pMotionName]=\"'h-galleria'\"\n            [pMotionOptions]=\"computedMotionOptions()\"\n            (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n            (pMotionOnBeforeLeave)=\"onBeforeLeave()\"\n            (pMotionOnAfterLeave)=\"onAfterLeave()\"\n            [value]=\"value()\"\n            [activeIndex]=\"activeIndex()\"\n            [numVisible]=\"numVisibleLimit || numVisible()\"\n            (maskHide)=\"onMaskHide()\"\n            (activeItemChange)=\"onActiveItemChange($event)\"\n            [ngStyle]=\"containerStyle()\"\n            [fullScreen]=\"fullScreen()\"\n            [pt]=\"pt()\"\n            hFocusTrap\n            [pFocusTrapDisabled]=\"!fullScreen()\"\n            [unstyled]=\"unstyled()\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div hGalleriaContent [pt]=\"pt()\" [unstyled]=\"unstyled()\" [value]=\"value()\" [activeIndex]=\"activeIndex()\" [numVisible]=\"numVisibleLimit || numVisible()\" (activeItemChange)=\"onActiveItemChange($event)\"></div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], numVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numVisible", required: false }] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], showItemNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigators", required: false }] }], showThumbnailNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnailNavigators", required: false }] }], showItemNavigatorsOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigatorsOnHover", required: false }] }], changeItemOnIndicatorHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeItemOnIndicatorHover", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], shouldStopAutoplayByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldStopAutoplayByClick", required: false }] }], transitionInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionInterval", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], thumbnailsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailsPosition", required: false }] }], verticalThumbnailViewPortHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalThumbnailViewPortHeight", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], showIndicatorsOnItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicatorsOnItem", required: false }] }], indicatorsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsPosition", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], maskClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskClass", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], containerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerStyle", required: false }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], indicatorTemplate: [{ type: i0.ContentChild, args: ['indicator', { ...{ descendants: false }, isSignal: true }] }], captionTemplate: [{ type: i0.ContentChild, args: ['caption', { ...{ descendants: false }, isSignal: true }] }], _closeIconTemplate: [{ type: i0.ContentChild, args: ['closeicon', { ...{ descendants: false }, isSignal: true }] }], _previousThumbnailIconTemplate: [{ type: i0.ContentChild, args: ['previousthumbnailicon', { ...{ descendants: false }, isSignal: true }] }], _nextThumbnailIconTemplate: [{ type: i0.ContentChild, args: ['nextthumbnailicon', { ...{ descendants: false }, isSignal: true }] }], _itemPreviousIconTemplate: [{ type: i0.ContentChild, args: ['itempreviousicon', { ...{ descendants: false }, isSignal: true }] }], _itemNextIconTemplate: [{ type: i0.ContentChild, args: ['itemnexticon', { ...{ descendants: false }, isSignal: true }] }], _itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], _thumbnailTemplate: [{ type: i0.ContentChild, args: ['thumbnail', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class GalleriaContent extends BaseComponent {
-    galleria;
-    differs;
-    hostName = 'Galleria';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.getPTOptions('root'));
-    }
-    activeIndex = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    _activeIndex = 0;
-    value = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    numVisible = input(undefined, { ...(ngDevMode ? { debugName: "numVisible" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    fullScreen = input(false, { ...(ngDevMode ? { debugName: "fullScreen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _fullScreen = false;
-    maskHide = output();
-    activeItemChange = output();
-    closeButton = viewChild('closeButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
-    _componentStyle = inject(GalleriaStyle);
-    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    id;
-    slideShowActive = true;
-    interval;
-    styleClass;
-    differ;
-    constructor(galleria, differs) {
-        super();
-        this.galleria = galleria;
-        this.differs = differs;
-        this.id = this.galleria.id() || uuid('pn_id_');
-        this.differ = this.differs.find(this.galleria).create();
-        effect(() => {
-            this._activeIndex = this.activeIndex();
-        });
-        effect(() => {
-            this._fullScreen = this.fullScreen();
-        });
-    }
-    // For custom fullscreen
-    handleFullscreenChange(event) {
-        if (document?.fullscreenElement === this.el.nativeElement?.children[0]) {
-            this._fullScreen = true;
-        }
-        else {
-            this._fullScreen = false;
-        }
-    }
-    onDoCheck() {
-        if (isPlatformBrowser(this.galleria.platformId)) {
-            const changes = this.differ.diff(this.galleria);
-            if (changes && changes.forEachItem.length > 0) {
-                // Because we change the properties of the parent component,
-                // and the children take our entity from the injector.
-                // We can tell the children to redraw themselves when we change the properties of the parent component.
-                // Since we have an onPush strategy
-                this.cd.markForCheck();
-            }
-        }
-    }
-    shouldRenderFooter() {
-        return (this.galleria.footerFacet && this.galleria.templates().length > 0) || this.galleria.footerTemplate();
-    }
-    startSlideShow() {
-        if (isPlatformBrowser(this.galleria.platformId)) {
-            this.interval = setInterval(() => {
-                let activeIndex = this.galleria.circular() && this.value().length - 1 === this._activeIndex ? 0 : this._activeIndex + 1;
-                this.onActiveIndexChange(activeIndex);
-                this._activeIndex = activeIndex;
-            }, this.galleria.transitionInterval());
-            this.slideShowActive = true;
-        }
-    }
-    stopSlideShow() {
-        if (this.galleria.autoPlay() && !this.galleria.shouldStopAutoplayByClick()) {
-            return;
-        }
-        if (this.interval) {
-            clearInterval(this.interval);
-        }
-        this.slideShowActive = false;
-    }
-    getPositionClass(preClassName, position) {
-        const positions = ['top', 'left', 'bottom', 'right'];
-        const pos = positions.find((item) => item === position);
-        return pos ? `${preClassName}-${pos}` : '';
-    }
-    isVertical() {
-        const thumbnailsPosition = this.galleria.thumbnailsPosition();
-        return thumbnailsPosition === 'left' || thumbnailsPosition === 'right';
-    }
-    onActiveIndexChange(index) {
-        if (this._activeIndex !== index) {
-            this._activeIndex = index;
-            this.activeItemChange.emit(this._activeIndex);
-        }
-    }
-    closeAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
-    }
-    getPTOptions(key) {
-        return this.ptm(key, {
-            context: {
-                pt: this.pt(),
-                unstyled: this.unstyled()
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GalleriaContent, isStandalone: false, selector: "div[hGalleriaContent]", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" }, properties: { "attr.id": "id", "attr.role": "\"region\"", "style": "!galleria.fullScreen() ? galleria.containerStyle() : {}", "class": "cn(cx('root'))" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (value() && value().length > 0) {\n  @if (galleria.fullScreen()) {\n    <button type=\"button\" [hBind]=\"getPTOptions('closeButton')\" [class]=\"cx('closeButton')\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\">\n      @if (!galleria.closeIconTemplate && !galleria._closeIconTemplate()) {\n        <svg data-h-icon=\"times\" [hBind]=\"getPTOptions('closeIcon')\" [class]=\"cx('closeIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (galleria.templates() && (galleria.headerFacet || galleria.headerTemplate())) {\n    <div hGalleriaItemSlot [unstyled]=\"unstyled()\" type=\"header\" [templates]=\"galleria.templates()\" [hBind]=\"getPTOptions('header')\" [class]=\"cx('header')\"></div>\n  }\n  <div [hBind]=\"getPTOptions('content')\" [class]=\"cx('content')\" [attr.aria-live]=\"galleria.autoPlay() ? 'polite' : 'off'\">\n    <div\n      hGalleriaItem\n      [id]=\"id\"\n      [value]=\"value()\"\n      [activeIndex]=\"_activeIndex\"\n      [circular]=\"galleria.circular()\"\n      [templates]=\"galleria.templates()\"\n      (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n      [showIndicators]=\"galleria.showIndicators()\"\n      [changeItemOnIndicatorHover]=\"galleria.changeItemOnIndicatorHover()\"\n      [indicatorFacet]=\"galleria.indicatorFacet\"\n      [captionFacet]=\"galleria.captionFacet\"\n      [showItemNavigators]=\"galleria.showItemNavigators()\"\n      [autoPlay]=\"galleria.autoPlay()\"\n      [slideShowActive]=\"slideShowActive\"\n      (startSlideShow)=\"startSlideShow()\"\n      (stopSlideShow)=\"stopSlideShow()\"\n      [pt]=\"pt()\"\n      [unstyled]=\"unstyled()\"\n      [class]=\"cx('itemsContainer')\"\n    ></div>\n    @if (galleria.showThumbnails()) {\n      <div\n        hGalleriaThumbnails\n        [containerId]=\"id\"\n        [value]=\"value()\"\n        (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n        [activeIndex]=\"_activeIndex\"\n        [templates]=\"galleria.templates()\"\n        [numVisible]=\"numVisible()\"\n        [responsiveOptions]=\"galleria.responsiveOptions()\"\n        [circular]=\"galleria.circular()\"\n        [isVertical]=\"isVertical()\"\n        [contentHeight]=\"galleria.verticalThumbnailViewPortHeight()\"\n        [showThumbnailNavigators]=\"galleria.showThumbnailNavigators()\"\n        [slideShowActive]=\"slideShowActive\"\n        (stopSlideShow)=\"stopSlideShow()\"\n        [pt]=\"pt()\"\n        [unstyled]=\"unstyled()\"\n      ></div>\n    }\n  </div>\n  @if (shouldRenderFooter()) {\n    <div hGalleriaItemSlot [hBind]=\"getPTOptions('footer')\" [class]=\"cx('footer')\" type=\"footer\" [templates]=\"galleria.templates()\" [unstyled]=\"unstyled()\"></div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "[data-h-icon=\"times\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[hBind]", inputs: ["hBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[hGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "div[hGalleriaItem]", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "div[hGalleriaThumbnails]", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaContent, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[hGalleriaContent]', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [GalleriaStyle], host: {
-                        '[attr.id]': 'id',
-                        '[attr.role]': '"region"',
-                        '[style]': '!galleria.fullScreen() ? galleria.containerStyle() : {}',
-                        '[class]': "cn(cx('root'))",
-                        '(document:fullscreenchange)': 'handleFullscreenChange($event)'
-                    }, hostDirectives: [Bind], template: "@if (value() && value().length > 0) {\n  @if (galleria.fullScreen()) {\n    <button type=\"button\" [hBind]=\"getPTOptions('closeButton')\" [class]=\"cx('closeButton')\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\">\n      @if (!galleria.closeIconTemplate && !galleria._closeIconTemplate()) {\n        <svg data-h-icon=\"times\" [hBind]=\"getPTOptions('closeIcon')\" [class]=\"cx('closeIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (galleria.templates() && (galleria.headerFacet || galleria.headerTemplate())) {\n    <div hGalleriaItemSlot [unstyled]=\"unstyled()\" type=\"header\" [templates]=\"galleria.templates()\" [hBind]=\"getPTOptions('header')\" [class]=\"cx('header')\"></div>\n  }\n  <div [hBind]=\"getPTOptions('content')\" [class]=\"cx('content')\" [attr.aria-live]=\"galleria.autoPlay() ? 'polite' : 'off'\">\n    <div\n      hGalleriaItem\n      [id]=\"id\"\n      [value]=\"value()\"\n      [activeIndex]=\"_activeIndex\"\n      [circular]=\"galleria.circular()\"\n      [templates]=\"galleria.templates()\"\n      (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n      [showIndicators]=\"galleria.showIndicators()\"\n      [changeItemOnIndicatorHover]=\"galleria.changeItemOnIndicatorHover()\"\n      [indicatorFacet]=\"galleria.indicatorFacet\"\n      [captionFacet]=\"galleria.captionFacet\"\n      [showItemNavigators]=\"galleria.showItemNavigators()\"\n      [autoPlay]=\"galleria.autoPlay()\"\n      [slideShowActive]=\"slideShowActive\"\n      (startSlideShow)=\"startSlideShow()\"\n      (stopSlideShow)=\"stopSlideShow()\"\n      [pt]=\"pt()\"\n      [unstyled]=\"unstyled()\"\n      [class]=\"cx('itemsContainer')\"\n    ></div>\n    @if (galleria.showThumbnails()) {\n      <div\n        hGalleriaThumbnails\n        [containerId]=\"id\"\n        [value]=\"value()\"\n        (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n        [activeIndex]=\"_activeIndex\"\n        [templates]=\"galleria.templates()\"\n        [numVisible]=\"numVisible()\"\n        [responsiveOptions]=\"galleria.responsiveOptions()\"\n        [circular]=\"galleria.circular()\"\n        [isVertical]=\"isVertical()\"\n        [contentHeight]=\"galleria.verticalThumbnailViewPortHeight()\"\n        [showThumbnailNavigators]=\"galleria.showThumbnailNavigators()\"\n        [slideShowActive]=\"slideShowActive\"\n        (stopSlideShow)=\"stopSlideShow()\"\n        [pt]=\"pt()\"\n        [unstyled]=\"unstyled()\"\n      ></div>\n    }\n  </div>\n  @if (shouldRenderFooter()) {\n    <div hGalleriaItemSlot [hBind]=\"getPTOptions('footer')\" [class]=\"cx('footer')\" type=\"footer\" [templates]=\"galleria.templates()\" [unstyled]=\"unstyled()\"></div>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: Galleria }, { type: i0.KeyValueDiffers }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], numVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numVisible", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], maskHide: [{ type: i0.Output, args: ["maskHide"] }], activeItemChange: [{ type: i0.Output, args: ["activeItemChange"] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }] } });
-class GalleriaItemSlot extends BaseComponent {
-    hostName = 'Galleria';
-    templates = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "templates" }] : /* istanbul ignore next */ []));
-    index = input(undefined, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    item = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "item" }] : /* istanbul ignore next */ []));
-    _itemEffect = effect(() => {
-        const item = this.item();
-        const templates = this.templates();
-        if (templates && templates.length > 0) {
-            templates.forEach((tmpl) => {
-                const type = this.type();
-                if (tmpl.getType() === type) {
-                    switch (type) {
-                        case 'item':
-                        case 'caption':
-                        case 'thumbnail':
-                            this.context = { $implicit: item };
-                            this.contentTemplate = tmpl.template;
-                            break;
-                        case 'footer':
-                            this.context = { $implicit: item };
-                            this.contentTemplate = tmpl.template;
-                            break;
-                    }
-                }
-            });
-        }
-        else {
-            this.getContentTemplate();
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_itemEffect" }] : /* istanbul ignore next */ []));
-    shouldRender() {
-        return (this.contentTemplate ||
-            this.galleria._itemTemplate() ||
-            this.galleria.itemTemplate ||
-            this.galleria.captionTemplate() ||
-            this.galleria.captionTemplate() ||
-            this.galleria.captionFacet ||
-            this.galleria.thumbnailTemplate ||
-            this.galleria._thumbnailTemplate() ||
-            this.galleria.footerTemplate());
-    }
-    galleria = inject(Galleria);
-    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    getTemplateFromQueryList(type) {
-        return this.galleria.templates().find((item) => item.getType() === type)?.template;
-    }
-    getContentTemplate() {
-        switch (this.type()) {
-            case 'item':
-                this.context = { $implicit: this.item() };
-                this.contentTemplate = this.galleria._itemTemplate() || this.getTemplateFromQueryList('item');
-                break;
-            case 'caption':
-                this.context = { $implicit: this.item() };
-                this.contentTemplate = this.galleria.captionTemplate() || this.getTemplateFromQueryList('caption');
-                break;
-            case 'thumbnail':
-                this.context = { $implicit: this.item() };
-                this.contentTemplate = this.galleria._thumbnailTemplate() || this.getTemplateFromQueryList('thumbnail');
-                break;
-            case 'indicator':
-                this.context = { $implicit: this.index() };
-                this.contentTemplate = this.galleria.indicatorTemplate() || this.getTemplateFromQueryList('indicator');
-                break;
-            case 'footer':
-                this.context = { $implicit: this.item() };
-                this.contentTemplate = this.galleria.footerTemplate() || this.getTemplateFromQueryList('footer');
-                break;
-            default:
-                this.context = { $implicit: this.item() };
-                this.contentTemplate = this.galleria._itemTemplate() || this.getTemplateFromQueryList('item');
-        }
-    }
-    type = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
-    contentTemplate;
-    context;
-    onAfterContentInit() {
-        const templates = this.templates();
-        if (templates && templates.length > 0) {
-            templates?.forEach((item) => {
-                const type = this.type();
-                if (item.getType() === type) {
-                    switch (type) {
-                        case 'item':
-                        case 'caption':
-                        case 'thumbnail':
-                            this.context = { $implicit: this.item() };
-                            this.contentTemplate = item.template;
-                            break;
-                        case 'indicator':
-                            this.context = { $implicit: this.index() };
-                            this.contentTemplate = item.template;
-                            break;
-                        case 'footer':
-                            this.context = { $implicit: this.item() };
-                            this.contentTemplate = item.template;
-                            break;
-                        default:
-                            this.context = { $implicit: this.item() };
-                            this.contentTemplate = item.template;
-                            break;
-                    }
-                }
-            });
-        }
-        else {
-            this.getContentTemplate();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaItemSlot, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GalleriaItemSlot, isStandalone: false, selector: "div[hGalleriaItemSlot]", inputs: { templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+const GALLERIA_INSTANCE = new InjectionToken("GALLERIA_INSTANCE");
+var Galleria = class Galleria extends BaseComponent {
+	element;
+	componentName = "Galleria";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	$pcGalleria = inject(GALLERIA_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("host"));
+	}
+	activeIndex = model(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : 	/* istanbul ignore next */ []);
+	fullScreen = input(false, {
+		...ngDevMode ? { debugName: "fullScreen" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	id = input(...ngDevMode ? [void 0, { debugName: "id" }] : 	/* istanbul ignore next */ []);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	numVisible = input(3, {
+		...ngDevMode ? { debugName: "numVisible" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	responsiveOptions = input(...ngDevMode ? [void 0, { debugName: "responsiveOptions" }] : 	/* istanbul ignore next */ []);
+	showItemNavigators = input(false, {
+		...ngDevMode ? { debugName: "showItemNavigators" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showThumbnailNavigators = input(true, {
+		...ngDevMode ? { debugName: "showThumbnailNavigators" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showItemNavigatorsOnHover = input(false, {
+		...ngDevMode ? { debugName: "showItemNavigatorsOnHover" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	changeItemOnIndicatorHover = input(false, {
+		...ngDevMode ? { debugName: "changeItemOnIndicatorHover" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	circular = input(false, {
+		...ngDevMode ? { debugName: "circular" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autoPlay = input(false, {
+		...ngDevMode ? { debugName: "autoPlay" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	shouldStopAutoplayByClick = input(true, {
+		...ngDevMode ? { debugName: "shouldStopAutoplayByClick" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	transitionInterval = input(4e3, {
+		...ngDevMode ? { debugName: "transitionInterval" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	showThumbnails = input(true, {
+		...ngDevMode ? { debugName: "showThumbnails" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	thumbnailsPosition = input("bottom", ...ngDevMode ? [{ debugName: "thumbnailsPosition" }] : 	/* istanbul ignore next */ []);
+	verticalThumbnailViewPortHeight = input("300px", ...ngDevMode ? [{ debugName: "verticalThumbnailViewPortHeight" }] : 	/* istanbul ignore next */ []);
+	showIndicators = input(false, {
+		...ngDevMode ? { debugName: "showIndicators" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showIndicatorsOnItem = input(false, {
+		...ngDevMode ? { debugName: "showIndicatorsOnItem" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	indicatorsPosition = input("bottom", ...ngDevMode ? [{ debugName: "indicatorsPosition" }] : 	/* istanbul ignore next */ []);
+	baseZIndex = input(0, {
+		...ngDevMode ? { debugName: "baseZIndex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	maskClass = input(...ngDevMode ? [void 0, { debugName: "maskClass" }] : 	/* istanbul ignore next */ []);
+	containerClass = input(...ngDevMode ? [void 0, { debugName: "containerClass" }] : 	/* istanbul ignore next */ []);
+	containerStyle = input(...ngDevMode ? [void 0, { debugName: "containerStyle" }] : 	/* istanbul ignore next */ []);
+	showTransitionOptions = input("150ms cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "showTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	hideTransitionOptions = input("150ms cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "hideTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.motionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	maskMotionOptions = input(void 0, ...ngDevMode ? [{ debugName: "maskMotionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMaskMotionOptions = computed(() => {
+		return {
+			...this.ptm("maskMotion"),
+			...this.maskMotionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : 	/* istanbul ignore next */ []);
+	visible = model(false, ...ngDevMode ? [{ debugName: "visible" }] : 	/* istanbul ignore next */ []);
+	_visibleEffect = effect(() => {
+		if (this.visible() && !this.maskVisible) {
+			this.maskVisible = true;
+			this.renderMask.set(true);
+			this.renderContent.set(true);
+		} else if (!this.visible() && this.maskVisible) this.maskVisible = false;
+	}, ...ngDevMode ? [{ debugName: "_visibleEffect" }] : 	/* istanbul ignore next */ []);
+	renderMask = signal(false, ...ngDevMode ? [{ debugName: "renderMask" }] : 	/* istanbul ignore next */ []);
+	renderContent = signal(false, ...ngDevMode ? [{ debugName: "renderContent" }] : 	/* istanbul ignore next */ []);
+	container = viewChild("container", ...ngDevMode ? [{ debugName: "container" }] : 	/* istanbul ignore next */ []);
+	headerTemplate = contentChild("header", {
+		...ngDevMode ? { debugName: "headerTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	headerFacet;
+	footerTemplate = contentChild("footer", {
+		...ngDevMode ? { debugName: "footerTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	footerFacet;
+	indicatorTemplate = contentChild("indicator", {
+		...ngDevMode ? { debugName: "indicatorTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	indicatorFacet;
+	captionTemplate = contentChild("caption", {
+		...ngDevMode ? { debugName: "captionTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	captionFacet;
+	_closeIconTemplate = contentChild("closeicon", {
+		...ngDevMode ? { debugName: "_closeIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	closeIconTemplate;
+	_previousThumbnailIconTemplate = contentChild("previousthumbnailicon", {
+		...ngDevMode ? { debugName: "_previousThumbnailIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	previousThumbnailIconTemplate;
+	_nextThumbnailIconTemplate = contentChild("nextthumbnailicon", {
+		...ngDevMode ? { debugName: "_nextThumbnailIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	nextThumbnailIconTemplate;
+	_itemPreviousIconTemplate = contentChild("itempreviousicon", {
+		...ngDevMode ? { debugName: "_itemPreviousIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	itemPreviousIconTemplate;
+	_itemNextIconTemplate = contentChild("itemnexticon", {
+		...ngDevMode ? { debugName: "_itemNextIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	itemNextIconTemplate;
+	_itemTemplate = contentChild("item", {
+		...ngDevMode ? { debugName: "_itemTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	itemTemplate;
+	_thumbnailTemplate = contentChild("thumbnail", {
+		...ngDevMode ? { debugName: "_thumbnailTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	thumbnailTemplate;
+	maskVisible = false;
+	numVisibleLimit = 0;
+	_componentStyle = inject(GalleriaStyle);
+	mask;
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	constructor(element) {
+		super();
+		this.element = element;
+	}
+	onAfterContentInit() {
+		this.templates().forEach((item) => {
+			switch (item.getType()) {
+				case "header":
+					this.headerFacet = item.template;
+					break;
+				case "footer":
+					this.footerFacet = item.template;
+					break;
+				case "indicator":
+					this.indicatorFacet = item.template;
+					break;
+				case "closeicon":
+					this.closeIconTemplate = item.template;
+					break;
+				case "itemnexticon":
+					this.itemNextIconTemplate = item.template;
+					break;
+				case "itempreviousicon":
+					this.itemPreviousIconTemplate = item.template;
+					break;
+				case "previousthumbnailicon":
+					this.previousThumbnailIconTemplate = item.template;
+					break;
+				case "nextthumbnailicon":
+					this.nextThumbnailIconTemplate = item.template;
+					break;
+				case "caption":
+					this.captionFacet = item.template;
+					break;
+				case "item":
+					this.itemTemplate = item.template;
+					break;
+				case "thumbnail":
+					this.thumbnailTemplate = item.template;
+					break;
+			}
+		});
+	}
+	onChanges(simpleChanges) {
+		if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible()) this.numVisibleLimit = simpleChanges.value.currentValue.length;
+		else this.numVisibleLimit = 0;
+	}
+	onMaskHide(event) {
+		if (!event || event.target === event.currentTarget) this.visible.set(false);
+	}
+	onActiveItemChange(index) {
+		if (this.activeIndex() !== index) this.activeIndex.set(index);
+	}
+	onBeforeEnter(event) {
+		this.mask = event.element?.parentElement;
+		this.enableModality();
+		setTimeout(() => {
+			const focusTarget = findSingle(this.container()?.nativeElement, "[data-pc-section=\"closebutton\"]");
+			if (focusTarget) focus(focusTarget);
+		}, 25);
+	}
+	onBeforeLeave() {
+		if (this.mask) this.maskVisible = false;
+	}
+	onAfterLeave() {
+		this.disableModality();
+		this.renderContent.set(false);
+	}
+	onMaskAfterLeave() {
+		if (!this.renderContent()) this.renderMask.set(false);
+	}
+	enableModality() {
+		blockBodyScroll();
+		this.cd.markForCheck();
+		if (this.mask) ZIndexUtils.set("modal", this.mask, this.baseZIndex() || this.config.zIndex.modal);
+	}
+	disableModality() {
+		unblockBodyScroll();
+		this.cd.markForCheck();
+		if (this.mask) ZIndexUtils.clear(this.mask);
+	}
+	onDestroy() {
+		if (this.fullScreen()) removeClass(this.document.body, "h-overflow-hidden");
+		if (this.mask) this.disableModality();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Galleria,
+		deps: [{ token: i0.ElementRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Galleria,
+		isStandalone: false,
+		selector: "h-galleria",
+		inputs: {
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullScreen: {
+				classPropertyName: "fullScreen",
+				publicName: "fullScreen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numVisible: {
+				classPropertyName: "numVisible",
+				publicName: "numVisible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsiveOptions: {
+				classPropertyName: "responsiveOptions",
+				publicName: "responsiveOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showItemNavigators: {
+				classPropertyName: "showItemNavigators",
+				publicName: "showItemNavigators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showThumbnailNavigators: {
+				classPropertyName: "showThumbnailNavigators",
+				publicName: "showThumbnailNavigators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showItemNavigatorsOnHover: {
+				classPropertyName: "showItemNavigatorsOnHover",
+				publicName: "showItemNavigatorsOnHover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			changeItemOnIndicatorHover: {
+				classPropertyName: "changeItemOnIndicatorHover",
+				publicName: "changeItemOnIndicatorHover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			circular: {
+				classPropertyName: "circular",
+				publicName: "circular",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoPlay: {
+				classPropertyName: "autoPlay",
+				publicName: "autoPlay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shouldStopAutoplayByClick: {
+				classPropertyName: "shouldStopAutoplayByClick",
+				publicName: "shouldStopAutoplayByClick",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			transitionInterval: {
+				classPropertyName: "transitionInterval",
+				publicName: "transitionInterval",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showThumbnails: {
+				classPropertyName: "showThumbnails",
+				publicName: "showThumbnails",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			thumbnailsPosition: {
+				classPropertyName: "thumbnailsPosition",
+				publicName: "thumbnailsPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			verticalThumbnailViewPortHeight: {
+				classPropertyName: "verticalThumbnailViewPortHeight",
+				publicName: "verticalThumbnailViewPortHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIndicators: {
+				classPropertyName: "showIndicators",
+				publicName: "showIndicators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIndicatorsOnItem: {
+				classPropertyName: "showIndicatorsOnItem",
+				publicName: "showIndicatorsOnItem",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indicatorsPosition: {
+				classPropertyName: "indicatorsPosition",
+				publicName: "indicatorsPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			baseZIndex: {
+				classPropertyName: "baseZIndex",
+				publicName: "baseZIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maskClass: {
+				classPropertyName: "maskClass",
+				publicName: "maskClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			containerClass: {
+				classPropertyName: "containerClass",
+				publicName: "containerClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			containerStyle: {
+				classPropertyName: "containerStyle",
+				publicName: "containerStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTransitionOptions: {
+				classPropertyName: "showTransitionOptions",
+				publicName: "showTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideTransitionOptions: {
+				classPropertyName: "hideTransitionOptions",
+				publicName: "hideTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maskMotionOptions: {
+				classPropertyName: "maskMotionOptions",
+				publicName: "maskMotionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			activeIndex: "activeIndexChange",
+			visible: "visibleChange"
+		},
+		providers: [
+			GalleriaStyle,
+			{
+				provide: GALLERIA_INSTANCE,
+				useExisting: Galleria
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Galleria
+			}
+		],
+		queries: [
+			{
+				propertyName: "headerTemplate",
+				first: true,
+				predicate: ["header"],
+				isSignal: true
+			},
+			{
+				propertyName: "footerTemplate",
+				first: true,
+				predicate: ["footer"],
+				isSignal: true
+			},
+			{
+				propertyName: "indicatorTemplate",
+				first: true,
+				predicate: ["indicator"],
+				isSignal: true
+			},
+			{
+				propertyName: "captionTemplate",
+				first: true,
+				predicate: ["caption"],
+				isSignal: true
+			},
+			{
+				propertyName: "_closeIconTemplate",
+				first: true,
+				predicate: ["closeicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "_previousThumbnailIconTemplate",
+				first: true,
+				predicate: ["previousthumbnailicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "_nextThumbnailIconTemplate",
+				first: true,
+				predicate: ["nextthumbnailicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "_itemPreviousIconTemplate",
+				first: true,
+				predicate: ["itempreviousicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "_itemNextIconTemplate",
+				first: true,
+				predicate: ["itemnexticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "_itemTemplate",
+				first: true,
+				predicate: ["item"],
+				isSignal: true
+			},
+			{
+				propertyName: "_thumbnailTemplate",
+				first: true,
+				predicate: ["thumbnail"],
+				isSignal: true
+			},
+			{
+				propertyName: "templates",
+				predicate: HelixTemplate,
+				isSignal: true
+			}
+		],
+		viewQueries: [{
+			propertyName: "container",
+			first: true,
+			predicate: ["container"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (fullScreen()) {\n  <div #container>\n    @if (renderMask()) {\n      <div\n        [hBind]=\"ptm('mask')\"\n        [hMotion]=\"maskVisible\"\n        [pMotionAppear]=\"true\"\n        [pMotionEnterActiveClass]=\"fullScreen() ? 'h-overlay-mask-enter-active' : ''\"\n        [pMotionLeaveActiveClass]=\"fullScreen() ? 'h-overlay-mask-leave-active' : ''\"\n        [pMotionOptions]=\"computedMaskMotionOptions()\"\n        (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n        [ngClass]=\"cx('mask')\"\n        [class]=\"maskClass()\"\n        [attr.role]=\"fullScreen() ? 'dialog' : 'region'\"\n        [attr.aria-modal]=\"fullScreen() ? 'true' : undefined\"\n        (click)=\"onMaskHide($event)\"\n        >\n        @if (renderContent()) {\n          <div\n            hGalleriaContent\n            [hMotion]=\"visible()\"\n            [pMotionAppear]=\"true\"\n            [pMotionName]=\"'h-galleria'\"\n            [pMotionOptions]=\"computedMotionOptions()\"\n            (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n            (pMotionOnBeforeLeave)=\"onBeforeLeave()\"\n            (pMotionOnAfterLeave)=\"onAfterLeave()\"\n            [value]=\"value()\"\n            [activeIndex]=\"activeIndex()\"\n            [numVisible]=\"numVisibleLimit || numVisible()\"\n            (maskHide)=\"onMaskHide()\"\n            (activeItemChange)=\"onActiveItemChange($event)\"\n            [ngStyle]=\"containerStyle()\"\n            [fullScreen]=\"fullScreen()\"\n            [pt]=\"pt()\"\n            hFocusTrap\n            [pFocusTrapDisabled]=\"!fullScreen()\"\n            [unstyled]=\"unstyled()\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div hGalleriaContent [pt]=\"pt()\" [unstyled]=\"unstyled()\" [value]=\"value()\" [activeIndex]=\"activeIndex()\" [numVisible]=\"numVisibleLimit || numVisible()\" (activeItemChange)=\"onActiveItemChange($event)\"></div>\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgClass),
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgStyle),
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => FocusTrap),
+				selector: "[hFocusTrap]",
+				inputs: ["pFocusTrapDisabled"]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i1.Bind),
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i3.MotionDirective),
+				selector: "[hMotion]",
+				inputs: [
+					"hMotion",
+					"pMotionName",
+					"pMotionType",
+					"pMotionSafe",
+					"pMotionDisabled",
+					"pMotionAppear",
+					"pMotionEnter",
+					"pMotionLeave",
+					"pMotionDuration",
+					"pMotionHideStrategy",
+					"pMotionEnterFromClass",
+					"pMotionEnterToClass",
+					"pMotionEnterActiveClass",
+					"pMotionLeaveFromClass",
+					"pMotionLeaveToClass",
+					"pMotionLeaveActiveClass",
+					"pMotionOptions"
+				],
+				outputs: [
+					"pMotionOnBeforeEnter",
+					"pMotionOnEnter",
+					"pMotionOnAfterEnter",
+					"pMotionOnEnterCancelled",
+					"pMotionOnBeforeLeave",
+					"pMotionOnLeave",
+					"pMotionOnAfterLeave",
+					"pMotionOnLeaveCancelled"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaContent),
+				selector: "div[hGalleriaContent]",
+				inputs: [
+					"activeIndex",
+					"value",
+					"numVisible",
+					"fullScreen"
+				],
+				outputs: ["maskHide", "activeItemChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Galleria,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-galleria",
+			standalone: false,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				GalleriaStyle,
+				{
+					provide: GALLERIA_INSTANCE,
+					useExisting: Galleria
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Galleria
+				}
+			],
+			hostDirectives: [Bind],
+			template: "@if (fullScreen()) {\n  <div #container>\n    @if (renderMask()) {\n      <div\n        [hBind]=\"ptm('mask')\"\n        [hMotion]=\"maskVisible\"\n        [pMotionAppear]=\"true\"\n        [pMotionEnterActiveClass]=\"fullScreen() ? 'h-overlay-mask-enter-active' : ''\"\n        [pMotionLeaveActiveClass]=\"fullScreen() ? 'h-overlay-mask-leave-active' : ''\"\n        [pMotionOptions]=\"computedMaskMotionOptions()\"\n        (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n        [ngClass]=\"cx('mask')\"\n        [class]=\"maskClass()\"\n        [attr.role]=\"fullScreen() ? 'dialog' : 'region'\"\n        [attr.aria-modal]=\"fullScreen() ? 'true' : undefined\"\n        (click)=\"onMaskHide($event)\"\n        >\n        @if (renderContent()) {\n          <div\n            hGalleriaContent\n            [hMotion]=\"visible()\"\n            [pMotionAppear]=\"true\"\n            [pMotionName]=\"'h-galleria'\"\n            [pMotionOptions]=\"computedMotionOptions()\"\n            (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n            (pMotionOnBeforeLeave)=\"onBeforeLeave()\"\n            (pMotionOnAfterLeave)=\"onAfterLeave()\"\n            [value]=\"value()\"\n            [activeIndex]=\"activeIndex()\"\n            [numVisible]=\"numVisibleLimit || numVisible()\"\n            (maskHide)=\"onMaskHide()\"\n            (activeItemChange)=\"onActiveItemChange($event)\"\n            [ngStyle]=\"containerStyle()\"\n            [fullScreen]=\"fullScreen()\"\n            [pt]=\"pt()\"\n            hFocusTrap\n            [pFocusTrapDisabled]=\"!fullScreen()\"\n            [unstyled]=\"unstyled()\"\n          ></div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div hGalleriaContent [pt]=\"pt()\" [unstyled]=\"unstyled()\" [value]=\"value()\" [activeIndex]=\"activeIndex()\" [numVisible]=\"numVisibleLimit || numVisible()\" (activeItemChange)=\"onActiveItemChange($event)\"></div>\n}\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }],
+	propDecorators: {
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}],
+		fullScreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullScreen",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		numVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numVisible",
+				required: false
+			}]
+		}],
+		responsiveOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsiveOptions",
+				required: false
+			}]
+		}],
+		showItemNavigators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showItemNavigators",
+				required: false
+			}]
+		}],
+		showThumbnailNavigators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showThumbnailNavigators",
+				required: false
+			}]
+		}],
+		showItemNavigatorsOnHover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showItemNavigatorsOnHover",
+				required: false
+			}]
+		}],
+		changeItemOnIndicatorHover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "changeItemOnIndicatorHover",
+				required: false
+			}]
+		}],
+		circular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "circular",
+				required: false
+			}]
+		}],
+		autoPlay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoPlay",
+				required: false
+			}]
+		}],
+		shouldStopAutoplayByClick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shouldStopAutoplayByClick",
+				required: false
+			}]
+		}],
+		transitionInterval: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "transitionInterval",
+				required: false
+			}]
+		}],
+		showThumbnails: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showThumbnails",
+				required: false
+			}]
+		}],
+		thumbnailsPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thumbnailsPosition",
+				required: false
+			}]
+		}],
+		verticalThumbnailViewPortHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "verticalThumbnailViewPortHeight",
+				required: false
+			}]
+		}],
+		showIndicators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIndicators",
+				required: false
+			}]
+		}],
+		showIndicatorsOnItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIndicatorsOnItem",
+				required: false
+			}]
+		}],
+		indicatorsPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indicatorsPosition",
+				required: false
+			}]
+		}],
+		baseZIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "baseZIndex",
+				required: false
+			}]
+		}],
+		maskClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maskClass",
+				required: false
+			}]
+		}],
+		containerClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "containerClass",
+				required: false
+			}]
+		}],
+		containerStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "containerStyle",
+				required: false
+			}]
+		}],
+		showTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTransitionOptions",
+				required: false
+			}]
+		}],
+		hideTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideTransitionOptions",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		maskMotionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maskMotionOptions",
+				required: false
+			}]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["visibleChange"]
+		}],
+		container: [{
+			type: i0.ViewChild,
+			args: ["container", { isSignal: true }]
+		}],
+		headerTemplate: [{
+			type: i0.ContentChild,
+			args: ["header", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		footerTemplate: [{
+			type: i0.ContentChild,
+			args: ["footer", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		indicatorTemplate: [{
+			type: i0.ContentChild,
+			args: ["indicator", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		captionTemplate: [{
+			type: i0.ContentChild,
+			args: ["caption", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_closeIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["closeicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_previousThumbnailIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["previousthumbnailicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_nextThumbnailIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["nextthumbnailicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_itemPreviousIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["itempreviousicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_itemNextIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["itemnexticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_itemTemplate: [{
+			type: i0.ContentChild,
+			args: ["item", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		_thumbnailTemplate: [{
+			type: i0.ContentChild,
+			args: ["thumbnail", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var GalleriaContent = class GalleriaContent extends BaseComponent {
+	galleria;
+	differs;
+	hostName = "Galleria";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.getPTOptions("root"));
+	}
+	activeIndex = input(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : 	/* istanbul ignore next */ []);
+	_activeIndex = 0;
+	value = input([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	numVisible = input(void 0, {
+		...ngDevMode ? { debugName: "numVisible" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	fullScreen = input(false, {
+		...ngDevMode ? { debugName: "fullScreen" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	_fullScreen = false;
+	maskHide = output();
+	activeItemChange = output();
+	closeButton = viewChild("closeButton", ...ngDevMode ? [{ debugName: "closeButton" }] : 	/* istanbul ignore next */ []);
+	_componentStyle = inject(GalleriaStyle);
+	$pcGalleria = inject(GALLERIA_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	id;
+	slideShowActive = true;
+	interval;
+	styleClass;
+	differ;
+	constructor(galleria, differs) {
+		super();
+		this.galleria = galleria;
+		this.differs = differs;
+		this.id = this.galleria.id() || uuid("pn_id_");
+		this.differ = this.differs.find(this.galleria).create();
+		effect(() => {
+			this._activeIndex = this.activeIndex();
+		});
+		effect(() => {
+			this._fullScreen = this.fullScreen();
+		});
+	}
+	handleFullscreenChange(event) {
+		if (document?.fullscreenElement === this.el.nativeElement?.children[0]) this._fullScreen = true;
+		else this._fullScreen = false;
+	}
+	onDoCheck() {
+		if (isPlatformBrowser(this.galleria.platformId)) {
+			const changes = this.differ.diff(this.galleria);
+			if (changes && changes.forEachItem.length > 0) this.cd.markForCheck();
+		}
+	}
+	shouldRenderFooter() {
+		return this.galleria.footerFacet && this.galleria.templates().length > 0 || this.galleria.footerTemplate();
+	}
+	startSlideShow() {
+		if (isPlatformBrowser(this.galleria.platformId)) {
+			this.interval = setInterval(() => {
+				let activeIndex = this.galleria.circular() && this.value().length - 1 === this._activeIndex ? 0 : this._activeIndex + 1;
+				this.onActiveIndexChange(activeIndex);
+				this._activeIndex = activeIndex;
+			}, this.galleria.transitionInterval());
+			this.slideShowActive = true;
+		}
+	}
+	stopSlideShow() {
+		if (this.galleria.autoPlay() && !this.galleria.shouldStopAutoplayByClick()) return;
+		if (this.interval) clearInterval(this.interval);
+		this.slideShowActive = false;
+	}
+	getPositionClass(preClassName, position) {
+		const pos = [
+			"top",
+			"left",
+			"bottom",
+			"right"
+		].find((item) => item === position);
+		return pos ? `${preClassName}-${pos}` : "";
+	}
+	isVertical() {
+		const thumbnailsPosition = this.galleria.thumbnailsPosition();
+		return thumbnailsPosition === "left" || thumbnailsPosition === "right";
+	}
+	onActiveIndexChange(index) {
+		if (this._activeIndex !== index) {
+			this._activeIndex = index;
+			this.activeItemChange.emit(this._activeIndex);
+		}
+	}
+	closeAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.close : void 0;
+	}
+	getPTOptions(key) {
+		return this.ptm(key, { context: {
+			pt: this.pt(),
+			unstyled: this.unstyled()
+		} });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaContent,
+		deps: [{ token: Galleria }, { token: i0.KeyValueDiffers }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: GalleriaContent,
+		isStandalone: false,
+		selector: "div[hGalleriaContent]",
+		inputs: {
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numVisible: {
+				classPropertyName: "numVisible",
+				publicName: "numVisible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullScreen: {
+				classPropertyName: "fullScreen",
+				publicName: "fullScreen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			maskHide: "maskHide",
+			activeItemChange: "activeItemChange"
+		},
+		host: {
+			listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" },
+			properties: {
+				"attr.id": "id",
+				"attr.role": "\"region\"",
+				"style": "!galleria.fullScreen() ? galleria.containerStyle() : {}",
+				"class": "cn(cx('root'))"
+			}
+		},
+		providers: [GalleriaStyle],
+		viewQueries: [{
+			propertyName: "closeButton",
+			first: true,
+			predicate: ["closeButton"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (value() && value().length > 0) {\n  @if (galleria.fullScreen()) {\n    <button type=\"button\" [hBind]=\"getPTOptions('closeButton')\" [class]=\"cx('closeButton')\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\">\n      @if (!galleria.closeIconTemplate && !galleria._closeIconTemplate()) {\n        <svg data-h-icon=\"times\" [hBind]=\"getPTOptions('closeIcon')\" [class]=\"cx('closeIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (galleria.templates() && (galleria.headerFacet || galleria.headerTemplate())) {\n    <div hGalleriaItemSlot [unstyled]=\"unstyled()\" type=\"header\" [templates]=\"galleria.templates()\" [hBind]=\"getPTOptions('header')\" [class]=\"cx('header')\"></div>\n  }\n  <div [hBind]=\"getPTOptions('content')\" [class]=\"cx('content')\" [attr.aria-live]=\"galleria.autoPlay() ? 'polite' : 'off'\">\n    <div\n      hGalleriaItem\n      [id]=\"id\"\n      [value]=\"value()\"\n      [activeIndex]=\"_activeIndex\"\n      [circular]=\"galleria.circular()\"\n      [templates]=\"galleria.templates()\"\n      (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n      [showIndicators]=\"galleria.showIndicators()\"\n      [changeItemOnIndicatorHover]=\"galleria.changeItemOnIndicatorHover()\"\n      [indicatorFacet]=\"galleria.indicatorFacet\"\n      [captionFacet]=\"galleria.captionFacet\"\n      [showItemNavigators]=\"galleria.showItemNavigators()\"\n      [autoPlay]=\"galleria.autoPlay()\"\n      [slideShowActive]=\"slideShowActive\"\n      (startSlideShow)=\"startSlideShow()\"\n      (stopSlideShow)=\"stopSlideShow()\"\n      [pt]=\"pt()\"\n      [unstyled]=\"unstyled()\"\n      [class]=\"cx('itemsContainer')\"\n    ></div>\n    @if (galleria.showThumbnails()) {\n      <div\n        hGalleriaThumbnails\n        [containerId]=\"id\"\n        [value]=\"value()\"\n        (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n        [activeIndex]=\"_activeIndex\"\n        [templates]=\"galleria.templates()\"\n        [numVisible]=\"numVisible()\"\n        [responsiveOptions]=\"galleria.responsiveOptions()\"\n        [circular]=\"galleria.circular()\"\n        [isVertical]=\"isVertical()\"\n        [contentHeight]=\"galleria.verticalThumbnailViewPortHeight()\"\n        [showThumbnailNavigators]=\"galleria.showThumbnailNavigators()\"\n        [slideShowActive]=\"slideShowActive\"\n        (stopSlideShow)=\"stopSlideShow()\"\n        [pt]=\"pt()\"\n        [unstyled]=\"unstyled()\"\n      ></div>\n    }\n  </div>\n  @if (shouldRenderFooter()) {\n    <div hGalleriaItemSlot [hBind]=\"getPTOptions('footer')\" [class]=\"cx('footer')\" type=\"footer\" [templates]=\"galleria.templates()\" [unstyled]=\"unstyled()\"></div>\n  }\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgTemplateOutlet),
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => TimesIcon),
+				selector: "[data-h-icon=\"times\"]"
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i1.Bind),
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaItemSlot),
+				selector: "div[hGalleriaItemSlot]",
+				inputs: [
+					"templates",
+					"index",
+					"item",
+					"type"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaItem),
+				selector: "div[hGalleriaItem]",
+				inputs: [
+					"id",
+					"circular",
+					"value",
+					"showItemNavigators",
+					"showIndicators",
+					"slideShowActive",
+					"changeItemOnIndicatorHover",
+					"autoPlay",
+					"templates",
+					"indicatorFacet",
+					"captionFacet",
+					"activeIndex"
+				],
+				outputs: [
+					"startSlideShow",
+					"stopSlideShow",
+					"onActiveIndexChange"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaThumbnails),
+				selector: "div[hGalleriaThumbnails]",
+				inputs: [
+					"containerId",
+					"value",
+					"isVertical",
+					"slideShowActive",
+					"circular",
+					"responsiveOptions",
+					"contentHeight",
+					"showThumbnailNavigators",
+					"templates",
+					"numVisible",
+					"activeIndex"
+				],
+				outputs: ["onActiveIndexChange", "stopSlideShow"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaContent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[hGalleriaContent]",
+			standalone: false,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [GalleriaStyle],
+			host: {
+				"[attr.id]": "id",
+				"[attr.role]": "\"region\"",
+				"[style]": "!galleria.fullScreen() ? galleria.containerStyle() : {}",
+				"[class]": "cn(cx('root'))",
+				"(document:fullscreenchange)": "handleFullscreenChange($event)"
+			},
+			hostDirectives: [Bind],
+			template: "@if (value() && value().length > 0) {\n  @if (galleria.fullScreen()) {\n    <button type=\"button\" [hBind]=\"getPTOptions('closeButton')\" [class]=\"cx('closeButton')\" (click)=\"maskHide.emit()\" [attr.aria-label]=\"closeAriaLabel()\">\n      @if (!galleria.closeIconTemplate && !galleria._closeIconTemplate()) {\n        <svg data-h-icon=\"times\" [hBind]=\"getPTOptions('closeIcon')\" [class]=\"cx('closeIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.closeIconTemplate || galleria._closeIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (galleria.templates() && (galleria.headerFacet || galleria.headerTemplate())) {\n    <div hGalleriaItemSlot [unstyled]=\"unstyled()\" type=\"header\" [templates]=\"galleria.templates()\" [hBind]=\"getPTOptions('header')\" [class]=\"cx('header')\"></div>\n  }\n  <div [hBind]=\"getPTOptions('content')\" [class]=\"cx('content')\" [attr.aria-live]=\"galleria.autoPlay() ? 'polite' : 'off'\">\n    <div\n      hGalleriaItem\n      [id]=\"id\"\n      [value]=\"value()\"\n      [activeIndex]=\"_activeIndex\"\n      [circular]=\"galleria.circular()\"\n      [templates]=\"galleria.templates()\"\n      (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n      [showIndicators]=\"galleria.showIndicators()\"\n      [changeItemOnIndicatorHover]=\"galleria.changeItemOnIndicatorHover()\"\n      [indicatorFacet]=\"galleria.indicatorFacet\"\n      [captionFacet]=\"galleria.captionFacet\"\n      [showItemNavigators]=\"galleria.showItemNavigators()\"\n      [autoPlay]=\"galleria.autoPlay()\"\n      [slideShowActive]=\"slideShowActive\"\n      (startSlideShow)=\"startSlideShow()\"\n      (stopSlideShow)=\"stopSlideShow()\"\n      [pt]=\"pt()\"\n      [unstyled]=\"unstyled()\"\n      [class]=\"cx('itemsContainer')\"\n    ></div>\n    @if (galleria.showThumbnails()) {\n      <div\n        hGalleriaThumbnails\n        [containerId]=\"id\"\n        [value]=\"value()\"\n        (onActiveIndexChange)=\"onActiveIndexChange($event)\"\n        [activeIndex]=\"_activeIndex\"\n        [templates]=\"galleria.templates()\"\n        [numVisible]=\"numVisible()\"\n        [responsiveOptions]=\"galleria.responsiveOptions()\"\n        [circular]=\"galleria.circular()\"\n        [isVertical]=\"isVertical()\"\n        [contentHeight]=\"galleria.verticalThumbnailViewPortHeight()\"\n        [showThumbnailNavigators]=\"galleria.showThumbnailNavigators()\"\n        [slideShowActive]=\"slideShowActive\"\n        (stopSlideShow)=\"stopSlideShow()\"\n        [pt]=\"pt()\"\n        [unstyled]=\"unstyled()\"\n      ></div>\n    }\n  </div>\n  @if (shouldRenderFooter()) {\n    <div hGalleriaItemSlot [hBind]=\"getPTOptions('footer')\" [class]=\"cx('footer')\" type=\"footer\" [templates]=\"galleria.templates()\" [unstyled]=\"unstyled()\"></div>\n  }\n}\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: Galleria }, { type: i0.KeyValueDiffers }],
+	propDecorators: {
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		numVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numVisible",
+				required: false
+			}]
+		}],
+		fullScreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullScreen",
+				required: false
+			}]
+		}],
+		maskHide: [{
+			type: i0.Output,
+			args: ["maskHide"]
+		}],
+		activeItemChange: [{
+			type: i0.Output,
+			args: ["activeItemChange"]
+		}],
+		closeButton: [{
+			type: i0.ViewChild,
+			args: ["closeButton", { isSignal: true }]
+		}]
+	}
+});
+var GalleriaItemSlot = class GalleriaItemSlot extends BaseComponent {
+	hostName = "Galleria";
+	templates = input(...ngDevMode ? [void 0, { debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	index = input(void 0, {
+		...ngDevMode ? { debugName: "index" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	item = input(...ngDevMode ? [void 0, { debugName: "item" }] : 	/* istanbul ignore next */ []);
+	_itemEffect = effect(() => {
+		const item = this.item();
+		const templates = this.templates();
+		if (templates && templates.length > 0) templates.forEach((tmpl) => {
+			const type = this.type();
+			if (tmpl.getType() === type) switch (type) {
+				case "item":
+				case "caption":
+				case "thumbnail":
+					this.context = { $implicit: item };
+					this.contentTemplate = tmpl.template;
+					break;
+				case "footer":
+					this.context = { $implicit: item };
+					this.contentTemplate = tmpl.template;
+					break;
+			}
+		});
+		else this.getContentTemplate();
+	}, ...ngDevMode ? [{ debugName: "_itemEffect" }] : 	/* istanbul ignore next */ []);
+	shouldRender() {
+		return this.contentTemplate || this.galleria._itemTemplate() || this.galleria.itemTemplate || this.galleria.captionTemplate() || this.galleria.captionTemplate() || this.galleria.captionFacet || this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate() || this.galleria.footerTemplate();
+	}
+	galleria = inject(Galleria);
+	$pcGalleria = inject(GALLERIA_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	getTemplateFromQueryList(type) {
+		return this.galleria.templates().find((item) => item.getType() === type)?.template;
+	}
+	getContentTemplate() {
+		switch (this.type()) {
+			case "item":
+				this.context = { $implicit: this.item() };
+				this.contentTemplate = this.galleria._itemTemplate() || this.getTemplateFromQueryList("item");
+				break;
+			case "caption":
+				this.context = { $implicit: this.item() };
+				this.contentTemplate = this.galleria.captionTemplate() || this.getTemplateFromQueryList("caption");
+				break;
+			case "thumbnail":
+				this.context = { $implicit: this.item() };
+				this.contentTemplate = this.galleria._thumbnailTemplate() || this.getTemplateFromQueryList("thumbnail");
+				break;
+			case "indicator":
+				this.context = { $implicit: this.index() };
+				this.contentTemplate = this.galleria.indicatorTemplate() || this.getTemplateFromQueryList("indicator");
+				break;
+			case "footer":
+				this.context = { $implicit: this.item() };
+				this.contentTemplate = this.galleria.footerTemplate() || this.getTemplateFromQueryList("footer");
+				break;
+			default:
+				this.context = { $implicit: this.item() };
+				this.contentTemplate = this.galleria._itemTemplate() || this.getTemplateFromQueryList("item");
+		}
+	}
+	type = input(...ngDevMode ? [void 0, { debugName: "type" }] : 	/* istanbul ignore next */ []);
+	contentTemplate;
+	context;
+	onAfterContentInit() {
+		const templates = this.templates();
+		if (templates && templates.length > 0) templates?.forEach((item) => {
+			const type = this.type();
+			if (item.getType() === type) switch (type) {
+				case "item":
+				case "caption":
+				case "thumbnail":
+					this.context = { $implicit: this.item() };
+					this.contentTemplate = item.template;
+					break;
+				case "indicator":
+					this.context = { $implicit: this.index() };
+					this.contentTemplate = item.template;
+					break;
+				case "footer":
+					this.context = { $implicit: this.item() };
+					this.contentTemplate = item.template;
+					break;
+				default:
+					this.context = { $implicit: this.item() };
+					this.contentTemplate = item.template;
+					break;
+			}
+		});
+		else this.getContentTemplate();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaItemSlot,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: GalleriaItemSlot,
+		isStandalone: false,
+		selector: "div[hGalleriaItemSlot]",
+		inputs: {
+			templates: {
+				classPropertyName: "templates",
+				publicName: "templates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			item: {
+				classPropertyName: "item",
+				publicName: "item",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
         @if (shouldRender()) {
           <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaItemSlot, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[hGalleriaItemSlot]',
-                    standalone: false,
-                    template: `
+        `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: i2.NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaItemSlot,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[hGalleriaItemSlot]",
+			standalone: false,
+			template: `
         @if (shouldRender()) {
           <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
         }
         `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
-class GalleriaItem extends BaseComponent {
-    galleria;
-    hostName = 'Galleria';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptm('itemsContainer'));
-    }
-    id = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
-    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    value = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    showItemNavigators = input(false, { ...(ngDevMode ? { debugName: "showItemNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    showIndicators = input(true, { ...(ngDevMode ? { debugName: "showIndicators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    slideShowActive = input(true, { ...(ngDevMode ? { debugName: "slideShowActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    changeItemOnIndicatorHover = input(true, { ...(ngDevMode ? { debugName: "changeItemOnIndicatorHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    autoPlay = input(false, { ...(ngDevMode ? { debugName: "autoPlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    templates = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "templates" }] : /* istanbul ignore next */ []));
-    indicatorFacet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "indicatorFacet" }] : /* istanbul ignore next */ []));
-    captionFacet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "captionFacet" }] : /* istanbul ignore next */ []));
-    startSlideShow = output();
-    stopSlideShow = output();
-    onActiveIndexChange = output();
-    _componentStyle = inject(GalleriaStyle);
-    activeIndex = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    get activeItem() {
-        const value = this.value();
-        return value && value[this.activeIndex()];
-    }
-    leftButtonFocused = false;
-    rightButtonFocused = false;
-    constructor(galleria) {
-        super();
-        this.galleria = galleria;
-    }
-    getIndicatorPTOptions(index) {
-        return this.ptm('indicator', {
-            context: {
-                highlighted: this.activeIndex() === index
-            }
-        });
-    }
-    onChanges({ autoPlay }) {
-        if (autoPlay?.currentValue) {
-            this.startSlideShow.emit();
-        }
-        if (autoPlay && autoPlay.currentValue === false) {
-            this.stopTheSlideShow();
-        }
-    }
-    next() {
-        let nextItemIndex = this.activeIndex() + 1;
-        let activeIndex = this.circular() && this.value().length - 1 === this.activeIndex() ? 0 : nextItemIndex;
-        this.onActiveIndexChange.emit(activeIndex);
-    }
-    prev() {
-        let prevItemIndex = this.activeIndex() !== 0 ? this.activeIndex() - 1 : 0;
-        let activeIndex = this.circular() && this.activeIndex() === 0 ? this.value().length - 1 : prevItemIndex;
-        this.onActiveIndexChange.emit(activeIndex);
-    }
-    onButtonFocus(pos) {
-        if (pos === 'left') {
-            this.leftButtonFocused = true;
-        }
-        else
-            this.rightButtonFocused = true;
-    }
-    onButtonBlur(pos) {
-        if (pos === 'left') {
-            this.leftButtonFocused = false;
-        }
-        else
-            this.rightButtonFocused = false;
-    }
-    stopTheSlideShow() {
-        if (this.slideShowActive() && this.stopSlideShow) {
-            this.stopSlideShow.emit();
-        }
-    }
-    navForward(e) {
-        this.stopTheSlideShow();
-        this.next();
-        if (e && e.cancelable) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    }
-    navBackward(e) {
-        this.stopTheSlideShow();
-        this.prev();
-        if (e && e.cancelable) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    }
-    onIndicatorClick(index) {
-        this.stopTheSlideShow();
-        this.onActiveIndexChange.emit(index);
-    }
-    onIndicatorMouseEnter(index) {
-        if (this.changeItemOnIndicatorHover()) {
-            this.stopTheSlideShow();
-            this.onActiveIndexChange.emit(index);
-        }
-    }
-    onIndicatorKeyDown(event, index) {
-        switch (event.code) {
-            case 'Enter':
-            case 'Space':
-                this.stopTheSlideShow();
-                this.onActiveIndexChange.emit(index);
-                event.preventDefault();
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp':
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    isNavForwardDisabled() {
-        return !this.circular() && this.activeIndex() === this.value().length - 1;
-    }
-    isNavBackwardDisabled() {
-        return !this.circular() && this.activeIndex() === 0;
-    }
-    isIndicatorItemActive(index) {
-        return this.activeIndex() === index;
-    }
-    ariaSlideLabel() {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : undefined;
-    }
-    ariaSlideNumber(value) {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber?.replace(/{slideNumber}/g, value) : undefined;
-    }
-    ariaPageLabel(value) {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GalleriaItem, isStandalone: false, selector: "div[hGalleriaItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, slideShowActive: { classPropertyName: "slideShowActive", publicName: "slideShowActive", isSignal: true, isRequired: false, transformFunction: null }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, indicatorFacet: { classPropertyName: "indicatorFacet", publicName: "indicatorFacet", isSignal: true, isRequired: false, transformFunction: null }, captionFacet: { classPropertyName: "captionFacet", publicName: "captionFacet", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, providers: [GalleriaStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div [hBind]=\"ptm('items')\" [class]=\"cx('items')\">\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      role=\"navigation\"\n      [hBind]=\"ptm('prevButton')\"\n      [class]=\"cx('prevButton')\"\n      (click)=\"navBackward($event)\"\n      (focus)=\"onButtonFocus('left')\"\n      (blur)=\"onButtonBlur('left')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate()) {\n        <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('prevIcon')\" [class]=\"cx('prevIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div\n    hGalleriaItemSlot\n    [hBind]=\"ptm('item')\"\n    [unstyled]=\"unstyled()\"\n    [class]=\"cx('item')\"\n    [item]=\"activeItem\"\n    [templates]=\"templates()\"\n    [id]=\"id() + '_item_' + activeIndex()\"\n    role=\"group\"\n    [class]=\"cx('item')\"\n    [attr.aria-label]=\"ariaSlideNumber(activeIndex() + 1)\"\n    [attr.aria-roledescription]=\"ariaSlideLabel()\"\n  ></div>\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('nextButton')\"\n      [class]=\"cx('nextButton')\"\n      (click)=\"navForward($event)\"\n      role=\"navigation\"\n      (focus)=\"onButtonFocus('right')\"\n      (blur)=\"onButtonBlur('right')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate()) {\n        <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('nextIcon')\" [class]=\"cx('nextIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (captionFacet() || galleria.captionTemplate()) {\n    <div hGalleriaItemSlot [hBind]=\"ptm('caption')\" [unstyled]=\"unstyled()\" [class]=\"cx('caption')\" type=\"caption\" [item]=\"activeItem\" [templates]=\"templates()\"></div>\n  }\n</div>\n@if (showIndicators()) {\n  <ul [hBind]=\"ptm('indicatorList')\" [class]=\"cx('indicatorList')\">\n    @for (item of value(); track item; let index = $index) {\n      <li\n        [hBind]=\"getIndicatorPTOptions(index)\"\n        tabindex=\"0\"\n        (click)=\"onIndicatorClick(index)\"\n        (mouseenter)=\"onIndicatorMouseEnter(index)\"\n        (keydown)=\"onIndicatorKeyDown($event, index)\"\n        [class]=\"cx('indicator', { index })\"\n        [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n        [attr.aria-selected]=\"activeIndex() === index\"\n        [attr.aria-controls]=\"id() + '_item_' + index\"\n        [hBind]=\"ptm('indicator', getIndicatorPTOptions(index))\"\n        [attr.data-h-active]=\"isIndicatorItemActive(index)\"\n        >\n        @if (!indicatorFacet() && !galleria.indicatorTemplate()) {\n          <button type=\"button\" tabIndex=\"-1\" [hBind]=\"ptm('indicatorButton', getIndicatorPTOptions(index))\" [class]=\"cx('indicatorButton')\"></button>\n        }\n        @if (indicatorFacet() || galleria.indicatorTemplate()) {\n          <div hGalleriaItemSlot type=\"indicator\" [index]=\"index\" [templates]=\"templates()\" [hBind]=\"ptm('item')\" [unstyled]=\"unstyled()\"></div>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-h-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-h-icon=\"chevron-left\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[hBind]", inputs: ["hBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[hGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[hGalleriaItem]', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [GalleriaStyle], hostDirectives: [Bind], template: "<div [hBind]=\"ptm('items')\" [class]=\"cx('items')\">\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      role=\"navigation\"\n      [hBind]=\"ptm('prevButton')\"\n      [class]=\"cx('prevButton')\"\n      (click)=\"navBackward($event)\"\n      (focus)=\"onButtonFocus('left')\"\n      (blur)=\"onButtonBlur('left')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate()) {\n        <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('prevIcon')\" [class]=\"cx('prevIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div\n    hGalleriaItemSlot\n    [hBind]=\"ptm('item')\"\n    [unstyled]=\"unstyled()\"\n    [class]=\"cx('item')\"\n    [item]=\"activeItem\"\n    [templates]=\"templates()\"\n    [id]=\"id() + '_item_' + activeIndex()\"\n    role=\"group\"\n    [class]=\"cx('item')\"\n    [attr.aria-label]=\"ariaSlideNumber(activeIndex() + 1)\"\n    [attr.aria-roledescription]=\"ariaSlideLabel()\"\n  ></div>\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('nextButton')\"\n      [class]=\"cx('nextButton')\"\n      (click)=\"navForward($event)\"\n      role=\"navigation\"\n      (focus)=\"onButtonFocus('right')\"\n      (blur)=\"onButtonBlur('right')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate()) {\n        <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('nextIcon')\" [class]=\"cx('nextIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (captionFacet() || galleria.captionTemplate()) {\n    <div hGalleriaItemSlot [hBind]=\"ptm('caption')\" [unstyled]=\"unstyled()\" [class]=\"cx('caption')\" type=\"caption\" [item]=\"activeItem\" [templates]=\"templates()\"></div>\n  }\n</div>\n@if (showIndicators()) {\n  <ul [hBind]=\"ptm('indicatorList')\" [class]=\"cx('indicatorList')\">\n    @for (item of value(); track item; let index = $index) {\n      <li\n        [hBind]=\"getIndicatorPTOptions(index)\"\n        tabindex=\"0\"\n        (click)=\"onIndicatorClick(index)\"\n        (mouseenter)=\"onIndicatorMouseEnter(index)\"\n        (keydown)=\"onIndicatorKeyDown($event, index)\"\n        [class]=\"cx('indicator', { index })\"\n        [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n        [attr.aria-selected]=\"activeIndex() === index\"\n        [attr.aria-controls]=\"id() + '_item_' + index\"\n        [hBind]=\"ptm('indicator', getIndicatorPTOptions(index))\"\n        [attr.data-h-active]=\"isIndicatorItemActive(index)\"\n        >\n        @if (!indicatorFacet() && !galleria.indicatorTemplate()) {\n          <button type=\"button\" tabIndex=\"-1\" [hBind]=\"ptm('indicatorButton', getIndicatorPTOptions(index))\" [class]=\"cx('indicatorButton')\"></button>\n        }\n        @if (indicatorFacet() || galleria.indicatorTemplate()) {\n          <div hGalleriaItemSlot type=\"indicator\" [index]=\"index\" [templates]=\"templates()\" [hBind]=\"ptm('item')\" [unstyled]=\"unstyled()\"></div>\n        }\n      </li>\n    }\n  </ul>\n}\n" }]
-        }], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showItemNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigators", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], slideShowActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideShowActive", required: false }] }], changeItemOnIndicatorHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeItemOnIndicatorHover", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], indicatorFacet: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorFacet", required: false }] }], captionFacet: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionFacet", required: false }] }], startSlideShow: [{ type: i0.Output, args: ["startSlideShow"] }], stopSlideShow: [{ type: i0.Output, args: ["stopSlideShow"] }], onActiveIndexChange: [{ type: i0.Output, args: ["onActiveIndexChange"] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }] } });
-class GalleriaThumbnails extends BaseComponent {
-    galleria;
-    hostName = 'Galleria';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptm('thumbnails'));
-    }
-    containerId = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "containerId" }] : /* istanbul ignore next */ []));
-    value = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    isVertical = input(false, { ...(ngDevMode ? { debugName: "isVertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    slideShowActive = input(false, { ...(ngDevMode ? { debugName: "slideShowActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    responsiveOptions = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "responsiveOptions" }] : /* istanbul ignore next */ []));
-    contentHeight = input('300px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
-    showThumbnailNavigators = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showThumbnailNavigators" }] : /* istanbul ignore next */ []));
-    templates = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "templates" }] : /* istanbul ignore next */ []));
-    onActiveIndexChange = output();
-    stopSlideShow = output();
-    itemsContainer = viewChild('itemsContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "itemsContainer" }] : /* istanbul ignore next */ []));
-    numVisible = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "numVisible" }] : /* istanbul ignore next */ []));
-    activeIndex = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    index;
-    startPos = null;
-    thumbnailsStyle = null;
-    sortedResponsiveOptions = null;
-    totalShiftedItems = 0;
-    page = 0;
-    documentResizeListener;
-    _numVisible = 0;
-    d_numVisible = 0;
-    _oldNumVisible = 0;
-    _activeIndex = 0;
-    _oldactiveIndex = 0;
-    _componentStyle = inject(GalleriaStyle);
-    constructor(galleria) {
-        super();
-        this.galleria = galleria;
-        effect(() => {
-            const numVisible = this.numVisible();
-            this._numVisible = numVisible;
-            this._oldNumVisible = this.d_numVisible;
-            this.d_numVisible = numVisible;
-        });
-        effect(() => {
-            this._oldactiveIndex = this._activeIndex;
-            this._activeIndex = this.activeIndex();
-        });
-    }
-    onInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.createStyle();
-            if (this.responsiveOptions()) {
-                this.bindDocumentListeners();
-            }
-        }
-    }
-    onAfterContentChecked() {
-        let totalShiftedItems = this.totalShiftedItems;
-        const itemsContainer = this.itemsContainer();
-        if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && itemsContainer) {
-            if (this._activeIndex <= this.getMedianItemIndex()) {
-                totalShiftedItems = 0;
-            }
-            else if (this.value().length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
-                totalShiftedItems = this.d_numVisible - this.value().length;
-            }
-            else if (this.value().length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
-                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
-            }
-            else {
-                totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
-            }
-            if (totalShiftedItems !== this.totalShiftedItems) {
-                this.totalShiftedItems = totalShiftedItems;
-            }
-            if (itemsContainer && itemsContainer.nativeElement) {
-                itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
-            }
-            if (this._oldactiveIndex !== this._activeIndex) {
-                this.document.body.setAttribute('data-h-items-hidden', 'false');
-                !this.$unstyled() && removeClass(itemsContainer.nativeElement, 'h-items-hidden');
-                itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
-            }
-            this._oldactiveIndex = this._activeIndex;
-            this._oldNumVisible = this.d_numVisible;
-        }
-    }
-    onAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.calculatePosition();
-        }
-    }
-    createStyle() {
-        if (!this.thumbnailsStyle) {
-            this.thumbnailsStyle = this.document.createElement('style');
-            setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
-            this.document.body.appendChild(this.thumbnailsStyle);
-        }
-        let innerHTML = `
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: {
+		templates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templates",
+				required: false
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}],
+		item: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "item",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}]
+	}
+});
+var GalleriaItem = class GalleriaItem extends BaseComponent {
+	galleria;
+	hostName = "Galleria";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("itemsContainer"));
+	}
+	id = input(...ngDevMode ? [void 0, { debugName: "id" }] : 	/* istanbul ignore next */ []);
+	circular = input(false, {
+		...ngDevMode ? { debugName: "circular" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	showItemNavigators = input(false, {
+		...ngDevMode ? { debugName: "showItemNavigators" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showIndicators = input(true, {
+		...ngDevMode ? { debugName: "showIndicators" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	slideShowActive = input(true, {
+		...ngDevMode ? { debugName: "slideShowActive" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	changeItemOnIndicatorHover = input(true, {
+		...ngDevMode ? { debugName: "changeItemOnIndicatorHover" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autoPlay = input(false, {
+		...ngDevMode ? { debugName: "autoPlay" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	templates = input(...ngDevMode ? [void 0, { debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	indicatorFacet = input(...ngDevMode ? [void 0, { debugName: "indicatorFacet" }] : 	/* istanbul ignore next */ []);
+	captionFacet = input(...ngDevMode ? [void 0, { debugName: "captionFacet" }] : 	/* istanbul ignore next */ []);
+	startSlideShow = output();
+	stopSlideShow = output();
+	onActiveIndexChange = output();
+	_componentStyle = inject(GalleriaStyle);
+	activeIndex = input(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : 	/* istanbul ignore next */ []);
+	get activeItem() {
+		const value = this.value();
+		return value && value[this.activeIndex()];
+	}
+	leftButtonFocused = false;
+	rightButtonFocused = false;
+	constructor(galleria) {
+		super();
+		this.galleria = galleria;
+	}
+	getIndicatorPTOptions(index) {
+		return this.ptm("indicator", { context: { highlighted: this.activeIndex() === index } });
+	}
+	onChanges({ autoPlay }) {
+		if (autoPlay?.currentValue) this.startSlideShow.emit();
+		if (autoPlay && autoPlay.currentValue === false) this.stopTheSlideShow();
+	}
+	next() {
+		let nextItemIndex = this.activeIndex() + 1;
+		let activeIndex = this.circular() && this.value().length - 1 === this.activeIndex() ? 0 : nextItemIndex;
+		this.onActiveIndexChange.emit(activeIndex);
+	}
+	prev() {
+		let prevItemIndex = this.activeIndex() !== 0 ? this.activeIndex() - 1 : 0;
+		let activeIndex = this.circular() && this.activeIndex() === 0 ? this.value().length - 1 : prevItemIndex;
+		this.onActiveIndexChange.emit(activeIndex);
+	}
+	onButtonFocus(pos) {
+		if (pos === "left") this.leftButtonFocused = true;
+		else this.rightButtonFocused = true;
+	}
+	onButtonBlur(pos) {
+		if (pos === "left") this.leftButtonFocused = false;
+		else this.rightButtonFocused = false;
+	}
+	stopTheSlideShow() {
+		if (this.slideShowActive() && this.stopSlideShow) this.stopSlideShow.emit();
+	}
+	navForward(e) {
+		this.stopTheSlideShow();
+		this.next();
+		if (e && e.cancelable) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	}
+	navBackward(e) {
+		this.stopTheSlideShow();
+		this.prev();
+		if (e && e.cancelable) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	}
+	onIndicatorClick(index) {
+		this.stopTheSlideShow();
+		this.onActiveIndexChange.emit(index);
+	}
+	onIndicatorMouseEnter(index) {
+		if (this.changeItemOnIndicatorHover()) {
+			this.stopTheSlideShow();
+			this.onActiveIndexChange.emit(index);
+		}
+	}
+	onIndicatorKeyDown(event, index) {
+		switch (event.code) {
+			case "Enter":
+			case "Space":
+				this.stopTheSlideShow();
+				this.onActiveIndexChange.emit(index);
+				event.preventDefault();
+				break;
+			case "ArrowDown":
+			case "ArrowUp":
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}
+	isNavForwardDisabled() {
+		return !this.circular() && this.activeIndex() === this.value().length - 1;
+	}
+	isNavBackwardDisabled() {
+		return !this.circular() && this.activeIndex() === 0;
+	}
+	isIndicatorItemActive(index) {
+		return this.activeIndex() === index;
+	}
+	ariaSlideLabel() {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : void 0;
+	}
+	ariaSlideNumber(value) {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber?.replace(/{slideNumber}/g, value) : void 0;
+	}
+	ariaPageLabel(value) {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaItem,
+		deps: [{ token: Galleria }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: GalleriaItem,
+		isStandalone: false,
+		selector: "div[hGalleriaItem]",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			circular: {
+				classPropertyName: "circular",
+				publicName: "circular",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showItemNavigators: {
+				classPropertyName: "showItemNavigators",
+				publicName: "showItemNavigators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIndicators: {
+				classPropertyName: "showIndicators",
+				publicName: "showIndicators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			slideShowActive: {
+				classPropertyName: "slideShowActive",
+				publicName: "slideShowActive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			changeItemOnIndicatorHover: {
+				classPropertyName: "changeItemOnIndicatorHover",
+				publicName: "changeItemOnIndicatorHover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoPlay: {
+				classPropertyName: "autoPlay",
+				publicName: "autoPlay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			templates: {
+				classPropertyName: "templates",
+				publicName: "templates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indicatorFacet: {
+				classPropertyName: "indicatorFacet",
+				publicName: "indicatorFacet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			captionFacet: {
+				classPropertyName: "captionFacet",
+				publicName: "captionFacet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			startSlideShow: "startSlideShow",
+			stopSlideShow: "stopSlideShow",
+			onActiveIndexChange: "onActiveIndexChange"
+		},
+		providers: [GalleriaStyle],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "<div [hBind]=\"ptm('items')\" [class]=\"cx('items')\">\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      role=\"navigation\"\n      [hBind]=\"ptm('prevButton')\"\n      [class]=\"cx('prevButton')\"\n      (click)=\"navBackward($event)\"\n      (focus)=\"onButtonFocus('left')\"\n      (blur)=\"onButtonBlur('left')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate()) {\n        <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('prevIcon')\" [class]=\"cx('prevIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div\n    hGalleriaItemSlot\n    [hBind]=\"ptm('item')\"\n    [unstyled]=\"unstyled()\"\n    [class]=\"cx('item')\"\n    [item]=\"activeItem\"\n    [templates]=\"templates()\"\n    [id]=\"id() + '_item_' + activeIndex()\"\n    role=\"group\"\n    [class]=\"cx('item')\"\n    [attr.aria-label]=\"ariaSlideNumber(activeIndex() + 1)\"\n    [attr.aria-roledescription]=\"ariaSlideLabel()\"\n  ></div>\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('nextButton')\"\n      [class]=\"cx('nextButton')\"\n      (click)=\"navForward($event)\"\n      role=\"navigation\"\n      (focus)=\"onButtonFocus('right')\"\n      (blur)=\"onButtonBlur('right')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate()) {\n        <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('nextIcon')\" [class]=\"cx('nextIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (captionFacet() || galleria.captionTemplate()) {\n    <div hGalleriaItemSlot [hBind]=\"ptm('caption')\" [unstyled]=\"unstyled()\" [class]=\"cx('caption')\" type=\"caption\" [item]=\"activeItem\" [templates]=\"templates()\"></div>\n  }\n</div>\n@if (showIndicators()) {\n  <ul [hBind]=\"ptm('indicatorList')\" [class]=\"cx('indicatorList')\">\n    @for (item of value(); track item; let index = $index) {\n      <li\n        [hBind]=\"getIndicatorPTOptions(index)\"\n        tabindex=\"0\"\n        (click)=\"onIndicatorClick(index)\"\n        (mouseenter)=\"onIndicatorMouseEnter(index)\"\n        (keydown)=\"onIndicatorKeyDown($event, index)\"\n        [class]=\"cx('indicator', { index })\"\n        [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n        [attr.aria-selected]=\"activeIndex() === index\"\n        [attr.aria-controls]=\"id() + '_item_' + index\"\n        [hBind]=\"ptm('indicator', getIndicatorPTOptions(index))\"\n        [attr.data-h-active]=\"isIndicatorItemActive(index)\"\n        >\n        @if (!indicatorFacet() && !galleria.indicatorTemplate()) {\n          <button type=\"button\" tabIndex=\"-1\" [hBind]=\"ptm('indicatorButton', getIndicatorPTOptions(index))\" [class]=\"cx('indicatorButton')\"></button>\n        }\n        @if (indicatorFacet() || galleria.indicatorTemplate()) {\n          <div hGalleriaItemSlot type=\"indicator\" [index]=\"index\" [templates]=\"templates()\" [hBind]=\"ptm('item')\" [unstyled]=\"unstyled()\"></div>\n        }\n      </li>\n    }\n  </ul>\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgTemplateOutlet),
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronRightIcon),
+				selector: "[data-h-icon=\"chevron-right\"]"
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronLeftIcon),
+				selector: "[data-h-icon=\"chevron-left\"]"
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i1.Bind),
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaItemSlot),
+				selector: "div[hGalleriaItemSlot]",
+				inputs: [
+					"templates",
+					"index",
+					"item",
+					"type"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[hGalleriaItem]",
+			standalone: false,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [GalleriaStyle],
+			hostDirectives: [Bind],
+			template: "<div [hBind]=\"ptm('items')\" [class]=\"cx('items')\">\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      role=\"navigation\"\n      [hBind]=\"ptm('prevButton')\"\n      [class]=\"cx('prevButton')\"\n      (click)=\"navBackward($event)\"\n      (focus)=\"onButtonFocus('left')\"\n      (blur)=\"onButtonBlur('left')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate()) {\n        <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('prevIcon')\" [class]=\"cx('prevIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div\n    hGalleriaItemSlot\n    [hBind]=\"ptm('item')\"\n    [unstyled]=\"unstyled()\"\n    [class]=\"cx('item')\"\n    [item]=\"activeItem\"\n    [templates]=\"templates()\"\n    [id]=\"id() + '_item_' + activeIndex()\"\n    role=\"group\"\n    [class]=\"cx('item')\"\n    [attr.aria-label]=\"ariaSlideNumber(activeIndex() + 1)\"\n    [attr.aria-roledescription]=\"ariaSlideLabel()\"\n  ></div>\n  @if (showItemNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('nextButton')\"\n      [class]=\"cx('nextButton')\"\n      (click)=\"navForward($event)\"\n      role=\"navigation\"\n      (focus)=\"onButtonFocus('right')\"\n      (blur)=\"onButtonBlur('right')\"\n      data-pc-group-section=\"itemnavigator\"\n      >\n      @if (!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate()) {\n        <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('nextIcon')\" [class]=\"cx('nextIcon')\" />\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.itemNextIconTemplate || galleria._itemNextIconTemplate()\"></ng-template>\n    </button>\n  }\n  @if (captionFacet() || galleria.captionTemplate()) {\n    <div hGalleriaItemSlot [hBind]=\"ptm('caption')\" [unstyled]=\"unstyled()\" [class]=\"cx('caption')\" type=\"caption\" [item]=\"activeItem\" [templates]=\"templates()\"></div>\n  }\n</div>\n@if (showIndicators()) {\n  <ul [hBind]=\"ptm('indicatorList')\" [class]=\"cx('indicatorList')\">\n    @for (item of value(); track item; let index = $index) {\n      <li\n        [hBind]=\"getIndicatorPTOptions(index)\"\n        tabindex=\"0\"\n        (click)=\"onIndicatorClick(index)\"\n        (mouseenter)=\"onIndicatorMouseEnter(index)\"\n        (keydown)=\"onIndicatorKeyDown($event, index)\"\n        [class]=\"cx('indicator', { index })\"\n        [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n        [attr.aria-selected]=\"activeIndex() === index\"\n        [attr.aria-controls]=\"id() + '_item_' + index\"\n        [hBind]=\"ptm('indicator', getIndicatorPTOptions(index))\"\n        [attr.data-h-active]=\"isIndicatorItemActive(index)\"\n        >\n        @if (!indicatorFacet() && !galleria.indicatorTemplate()) {\n          <button type=\"button\" tabIndex=\"-1\" [hBind]=\"ptm('indicatorButton', getIndicatorPTOptions(index))\" [class]=\"cx('indicatorButton')\"></button>\n        }\n        @if (indicatorFacet() || galleria.indicatorTemplate()) {\n          <div hGalleriaItemSlot type=\"indicator\" [index]=\"index\" [templates]=\"templates()\" [hBind]=\"ptm('item')\" [unstyled]=\"unstyled()\"></div>\n        }\n      </li>\n    }\n  </ul>\n}\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: Galleria }],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		circular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "circular",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		showItemNavigators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showItemNavigators",
+				required: false
+			}]
+		}],
+		showIndicators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIndicators",
+				required: false
+			}]
+		}],
+		slideShowActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slideShowActive",
+				required: false
+			}]
+		}],
+		changeItemOnIndicatorHover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "changeItemOnIndicatorHover",
+				required: false
+			}]
+		}],
+		autoPlay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoPlay",
+				required: false
+			}]
+		}],
+		templates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templates",
+				required: false
+			}]
+		}],
+		indicatorFacet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indicatorFacet",
+				required: false
+			}]
+		}],
+		captionFacet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "captionFacet",
+				required: false
+			}]
+		}],
+		startSlideShow: [{
+			type: i0.Output,
+			args: ["startSlideShow"]
+		}],
+		stopSlideShow: [{
+			type: i0.Output,
+			args: ["stopSlideShow"]
+		}],
+		onActiveIndexChange: [{
+			type: i0.Output,
+			args: ["onActiveIndexChange"]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}]
+	}
+});
+var GalleriaThumbnails = class GalleriaThumbnails extends BaseComponent {
+	galleria;
+	hostName = "Galleria";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("thumbnails"));
+	}
+	containerId = input(...ngDevMode ? [void 0, { debugName: "containerId" }] : 	/* istanbul ignore next */ []);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	isVertical = input(false, {
+		...ngDevMode ? { debugName: "isVertical" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	slideShowActive = input(false, {
+		...ngDevMode ? { debugName: "slideShowActive" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	circular = input(false, {
+		...ngDevMode ? { debugName: "circular" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	responsiveOptions = input(...ngDevMode ? [void 0, { debugName: "responsiveOptions" }] : 	/* istanbul ignore next */ []);
+	contentHeight = input("300px", ...ngDevMode ? [{ debugName: "contentHeight" }] : 	/* istanbul ignore next */ []);
+	showThumbnailNavigators = input(true, ...ngDevMode ? [{ debugName: "showThumbnailNavigators" }] : 	/* istanbul ignore next */ []);
+	templates = input(...ngDevMode ? [void 0, { debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	onActiveIndexChange = output();
+	stopSlideShow = output();
+	itemsContainer = viewChild("itemsContainer", ...ngDevMode ? [{ debugName: "itemsContainer" }] : 	/* istanbul ignore next */ []);
+	numVisible = input(0, ...ngDevMode ? [{ debugName: "numVisible" }] : 	/* istanbul ignore next */ []);
+	activeIndex = input(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : 	/* istanbul ignore next */ []);
+	index;
+	startPos = null;
+	thumbnailsStyle = null;
+	sortedResponsiveOptions = null;
+	totalShiftedItems = 0;
+	page = 0;
+	documentResizeListener;
+	_numVisible = 0;
+	d_numVisible = 0;
+	_oldNumVisible = 0;
+	_activeIndex = 0;
+	_oldactiveIndex = 0;
+	_componentStyle = inject(GalleriaStyle);
+	constructor(galleria) {
+		super();
+		this.galleria = galleria;
+		effect(() => {
+			const numVisible = this.numVisible();
+			this._numVisible = numVisible;
+			this._oldNumVisible = this.d_numVisible;
+			this.d_numVisible = numVisible;
+		});
+		effect(() => {
+			this._oldactiveIndex = this._activeIndex;
+			this._activeIndex = this.activeIndex();
+		});
+	}
+	onInit() {
+		if (isPlatformBrowser(this.platformId)) {
+			this.createStyle();
+			if (this.responsiveOptions()) this.bindDocumentListeners();
+		}
+	}
+	onAfterContentChecked() {
+		let totalShiftedItems = this.totalShiftedItems;
+		const itemsContainer = this.itemsContainer();
+		if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && itemsContainer) {
+			if (this._activeIndex <= this.getMedianItemIndex()) totalShiftedItems = 0;
+			else if (this.value().length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) totalShiftedItems = this.d_numVisible - this.value().length;
+			else if (this.value().length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
+			else totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
+			if (totalShiftedItems !== this.totalShiftedItems) this.totalShiftedItems = totalShiftedItems;
+			if (itemsContainer && itemsContainer.nativeElement) itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+			if (this._oldactiveIndex !== this._activeIndex) {
+				this.document.body.setAttribute("data-h-items-hidden", "false");
+				!this.$unstyled() && removeClass(itemsContainer.nativeElement, "h-items-hidden");
+				itemsContainer.nativeElement.style.transition = "transform 500ms ease 0s";
+			}
+			this._oldactiveIndex = this._activeIndex;
+			this._oldNumVisible = this.d_numVisible;
+		}
+	}
+	onAfterViewInit() {
+		if (isPlatformBrowser(this.platformId)) this.calculatePosition();
+	}
+	createStyle() {
+		if (!this.thumbnailsStyle) {
+			this.thumbnailsStyle = this.document.createElement("style");
+			setAttribute(this.thumbnailsStyle, "nonce", this.galleria.config?.csp()?.nonce);
+			this.document.body.appendChild(this.thumbnailsStyle);
+		}
+		let innerHTML = `
             #${this.containerId()} .h-galleria-thumbnail-item {
                 flex: 1 0 ${100 / this.d_numVisible}%
             }
         `;
-        const responsiveOptions = this.responsiveOptions();
-        if (responsiveOptions && !this.$unstyled()) {
-            this.sortedResponsiveOptions = [...responsiveOptions];
-            this.sortedResponsiveOptions.sort((data1, data2) => {
-                const value1 = data1.breakpoint;
-                const value2 = data2.breakpoint;
-                let result;
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-                return -1 * result;
-            });
-            for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
-                let res = this.sortedResponsiveOptions[i];
-                innerHTML += `
+		const responsiveOptions = this.responsiveOptions();
+		if (responsiveOptions && !this.$unstyled()) {
+			this.sortedResponsiveOptions = [...responsiveOptions];
+			this.sortedResponsiveOptions.sort((data1, data2) => {
+				const value1 = data1.breakpoint;
+				const value2 = data2.breakpoint;
+				let result;
+				if (value1 == null && value2 != null) result = -1;
+				else if (value1 != null && value2 == null) result = 1;
+				else if (value1 == null && value2 == null) result = 0;
+				else if (typeof value1 === "string" && typeof value2 === "string") result = value1.localeCompare(value2, void 0, { numeric: true });
+				else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+				return -1 * result;
+			});
+			for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+				let res = this.sortedResponsiveOptions[i];
+				innerHTML += `
                     @media screen and (max-width: ${res.breakpoint}) {
                         #${this.containerId()} .h-galleria-thumbnail-item {
                             flex: 1 0 ${100 / res.numVisible}%
                         }
                     }
                 `;
-            }
-        }
-        this.thumbnailsStyle.innerHTML = innerHTML;
-        setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
-    }
-    calculatePosition() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.itemsContainer() && this.sortedResponsiveOptions) {
-                let windowWidth = window.innerWidth;
-                let matchedResponsiveData = {
-                    numVisible: this._numVisible
-                };
-                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
-                    let res = this.sortedResponsiveOptions[i];
-                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
-                        matchedResponsiveData = res;
-                    }
-                }
-                if (this.d_numVisible !== matchedResponsiveData.numVisible) {
-                    this.d_numVisible = matchedResponsiveData.numVisible;
-                    this.cd.markForCheck();
-                }
-            }
-        }
-    }
-    getTabIndex(index) {
-        return this.isItemActive(index) ? 0 : null;
-    }
-    navForward(e) {
-        this.stopTheSlideShow();
-        let nextItemIndex = this._activeIndex + 1;
-        const circular = this.circular();
-        if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || circular)) {
-            this.step(-1);
-        }
-        let activeIndex = circular && this.value().length - 1 === this._activeIndex ? 0 : nextItemIndex;
-        this.onActiveIndexChange.emit(activeIndex);
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-    navBackward(e) {
-        this.stopTheSlideShow();
-        let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
-        let diff = prevItemIndex + this.totalShiftedItems;
-        const circular = this.circular();
-        if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || circular)) {
-            this.step(1);
-        }
-        let activeIndex = circular && this._activeIndex === 0 ? this.value().length - 1 : prevItemIndex;
-        this.onActiveIndexChange.emit(activeIndex);
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-    onItemClick(index) {
-        this.stopTheSlideShow();
-        let selectedItemIndex = index;
-        if (selectedItemIndex !== this._activeIndex) {
-            const diff = selectedItemIndex + this.totalShiftedItems;
-            let dir = 0;
-            if (selectedItemIndex < this._activeIndex) {
-                dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
-                if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
-                    this.step(dir);
-                }
-            }
-            else {
-                dir = this.getMedianItemIndex() - diff;
-                if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
-                    this.step(dir);
-                }
-            }
-            this._oldactiveIndex = this._activeIndex;
-            this._activeIndex = selectedItemIndex;
-            this.onActiveIndexChange.emit(this._activeIndex);
-        }
-    }
-    onThumbnailKeydown(event, index) {
-        if (event.code === 'Enter' || event.code === 'Space') {
-            this.onItemClick(index);
-            event.preventDefault();
-        }
-        switch (event.code) {
-            case 'ArrowRight':
-                this.onRightKey();
-                break;
-            case 'ArrowLeft':
-                this.onLeftKey();
-                break;
-            case 'Home':
-                this.onHomeKey();
-                event.preventDefault();
-                break;
-            case 'End':
-                this.onEndKey();
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-            case 'ArrowDown':
-                event.preventDefault();
-                break;
-            case 'Tab':
-                this.onTabKey();
-                break;
-            default:
-                break;
-        }
-    }
-    onRightKey() {
-        const indicators = find(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"]');
-        const activeIndex = this.findFocusedIndicatorIndex();
-        this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
-    }
-    onLeftKey() {
-        const activeIndex = this.findFocusedIndicatorIndex();
-        this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
-    }
-    onHomeKey() {
-        const activeIndex = this.findFocusedIndicatorIndex();
-        this.changedFocusedIndicator(activeIndex, 0);
-    }
-    onEndKey() {
-        const indicators = find(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"]');
-        const activeIndex = this.findFocusedIndicatorIndex();
-        this.changedFocusedIndicator(activeIndex, indicators.length - 1);
-    }
-    onTabKey() {
-        const indicators = [...find(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"]')];
-        const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-h-active') === true);
-        const activeIndicator = findSingle(this.itemsContainer()?.nativeElement, '[tabindex="0"]');
-        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
-        indicators[activeIndex].children[0].tabIndex = '-1';
-        indicators[highlightedIndex].children[0].tabIndex = '0';
-    }
-    findFocusedIndicatorIndex() {
-        const indicators = [...find(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"]')];
-        const activeIndicator = findSingle(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
-        return indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
-    }
-    changedFocusedIndicator(prevInd, nextInd) {
-        const indicators = find(this.itemsContainer()?.nativeElement, '[data-pc-section="thumbnailitem"]');
-        indicators[prevInd].children[0].tabIndex = '-1';
-        indicators[nextInd].children[0].tabIndex = '0';
-        indicators[nextInd].children[0].focus();
-    }
-    step(dir) {
-        let totalShiftedItems = this.totalShiftedItems + dir;
-        if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value().length - 1) {
-            totalShiftedItems = this.d_numVisible - this.value().length;
-        }
-        else if (dir > 0 && totalShiftedItems > 0) {
-            totalShiftedItems = 0;
-        }
-        if (this.circular()) {
-            const value = this.value();
-            if (dir < 0 && value.length - 1 === this._activeIndex) {
-                totalShiftedItems = 0;
-            }
-            else if (dir > 0 && this._activeIndex === 0) {
-                totalShiftedItems = this.d_numVisible - value.length;
-            }
-        }
-        const itemsContainer = this.itemsContainer();
-        if (itemsContainer) {
-            this.document.body.setAttribute('data-h-items-hidden', 'false');
-            !this.$unstyled() && removeClass(itemsContainer.nativeElement, 'h-items-hidden');
-            itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
-            itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
-        }
-        this.totalShiftedItems = totalShiftedItems;
-    }
-    stopTheSlideShow() {
-        if (this.slideShowActive() && this.stopSlideShow) {
-            this.stopSlideShow.emit();
-        }
-    }
-    changePageOnTouch(e, diff) {
-        if (diff < 0) {
-            // left
-            this.navForward(e);
-        }
-        else {
-            // right
-            this.navBackward(e);
-        }
-    }
-    getTotalPageNumber() {
-        return this.value().length > this.d_numVisible ? this.value().length - this.d_numVisible + 1 : 0;
-    }
-    getMedianItemIndex() {
-        let index = Math.floor(this.d_numVisible / 2);
-        return this.d_numVisible % 2 ? index : index - 1;
-    }
-    onTransitionEnd() {
-        const itemsContainer = this.itemsContainer();
-        if (itemsContainer && itemsContainer.nativeElement) {
-            this.document.body.setAttribute('data-h-items-hidden', 'true');
-            !this.$unstyled() && addClass(itemsContainer.nativeElement, 'h-items-hidden');
-            itemsContainer.nativeElement.style.transition = '';
-        }
-    }
-    onTouchEnd(e) {
-        let touchobj = e.changedTouches[0];
-        if (this.isVertical()) {
-            this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
-        }
-        else {
-            this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
-        }
-    }
-    onTouchMove(e) {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-    onTouchStart(e) {
-        let touchobj = e.changedTouches[0];
-        this.startPos = {
-            x: touchobj.pageX,
-            y: touchobj.pageY
-        };
-    }
-    isNavBackwardDisabled() {
-        return (!this.circular() && this._activeIndex === 0) || this.value().length <= this.d_numVisible;
-    }
-    isNavForwardDisabled() {
-        const value = this.value();
-        return (!this.circular() && this._activeIndex === value.length - 1) || value.length <= this.d_numVisible;
-    }
-    firstItemAciveIndex() {
-        return this.totalShiftedItems * -1;
-    }
-    lastItemActiveIndex() {
-        return this.firstItemAciveIndex() + this.d_numVisible - 1;
-    }
-    isItemActive(index) {
-        return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
-    }
-    bindDocumentListeners() {
-        if (isPlatformBrowser(this.platformId)) {
-            const window = this.document.defaultView || 'window';
-            this.documentResizeListener = this.renderer.listen(window, 'resize', () => {
-                this.calculatePosition();
-            });
-        }
-    }
-    unbindDocumentListeners() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
-        }
-    }
-    onDestroy() {
-        if (this.responsiveOptions()) {
-            this.unbindDocumentListeners();
-        }
-        if (this.thumbnailsStyle) {
-            this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
-        }
-    }
-    ariaPrevButtonLabel() {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : undefined;
-    }
-    ariaNextButtonLabel() {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : undefined;
-    }
-    ariaPageLabel(value) {
-        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GalleriaThumbnails, isStandalone: false, selector: "div[hGalleriaThumbnails]", inputs: { containerId: { classPropertyName: "containerId", publicName: "containerId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, slideShowActive: { classPropertyName: "slideShowActive", publicName: "slideShowActive", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, contentHeight: { classPropertyName: "contentHeight", publicName: "contentHeight", isSignal: true, isRequired: false, transformFunction: null }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, host: { properties: { "class": "cx(\"thumbnails\")" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div [hBind]=\"ptm('thumbnailContent')\" [class]=\"cx('thumbnailContent')\">\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailPrevButton')\"\n      [class]=\"cx('thumbnailPrevButton')\"\n      (click)=\"navBackward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaPrevButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div [hBind]=\"ptm('thumbnailsViewport')\" [class]=\"cx('thumbnailsViewport')\" [ngStyle]=\"{ height: isVertical() ? contentHeight() : '' }\">\n    <div #itemsContainer [hBind]=\"ptm('thumbnailItems')\" [class]=\"cx('thumbnailItems')\" (transitionend)=\"onTransitionEnd()\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" role=\"tablist\">\n      @for (item of value(); track item; let index = $index) {\n        <div\n          [hBind]=\"ptm('thumbnailItem')\"\n          [class]=\"cx('thumbnailItem', { index, activeIndex: _activeIndex })\"\n          [attr.aria-selected]=\"_activeIndex === index\"\n          [attr.aria-controls]=\"containerId() + '_item_' + index\"\n          (keydown)=\"onThumbnailKeydown($event, index)\"\n          [attr.data-h-active]=\"_activeIndex === index\"\n          >\n          <div\n            [hBind]=\"ptm('thumbnail')\"\n            [class]=\"cx('thumbnail')\"\n            [attr.tabindex]=\"_activeIndex === index ? 0 : -1\"\n            [attr.aria-current]=\"_activeIndex === index ? 'page' : undefined\"\n            [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n            (click)=\"onItemClick(index)\"\n            (touchend)=\"onItemClick(index)\"\n            (keydown.enter)=\"onItemClick(index)\"\n            >\n            <div hGalleriaItemSlot type=\"thumbnail\" [hBind]=\"ptm('thumbnailItem')\" [item]=\"item\" [templates]=\"templates()\" [unstyled]=\"unstyled()\"></div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailNextButton')\"\n      [class]=\"cx('thumbnailNextButton')\"\n      (click)=\"navForward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaNextButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[hRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-h-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "[data-h-icon=\"chevron-up\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-h-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-h-icon=\"chevron-left\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[hBind]", inputs: ["hBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[hGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaThumbnails, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[hGalleriaThumbnails]', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [GalleriaStyle], host: {
-                        '[class]': 'cx("thumbnails")'
-                    }, hostDirectives: [Bind], template: "<div [hBind]=\"ptm('thumbnailContent')\" [class]=\"cx('thumbnailContent')\">\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailPrevButton')\"\n      [class]=\"cx('thumbnailPrevButton')\"\n      (click)=\"navBackward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaPrevButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div [hBind]=\"ptm('thumbnailsViewport')\" [class]=\"cx('thumbnailsViewport')\" [ngStyle]=\"{ height: isVertical() ? contentHeight() : '' }\">\n    <div #itemsContainer [hBind]=\"ptm('thumbnailItems')\" [class]=\"cx('thumbnailItems')\" (transitionend)=\"onTransitionEnd()\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" role=\"tablist\">\n      @for (item of value(); track item; let index = $index) {\n        <div\n          [hBind]=\"ptm('thumbnailItem')\"\n          [class]=\"cx('thumbnailItem', { index, activeIndex: _activeIndex })\"\n          [attr.aria-selected]=\"_activeIndex === index\"\n          [attr.aria-controls]=\"containerId() + '_item_' + index\"\n          (keydown)=\"onThumbnailKeydown($event, index)\"\n          [attr.data-h-active]=\"_activeIndex === index\"\n          >\n          <div\n            [hBind]=\"ptm('thumbnail')\"\n            [class]=\"cx('thumbnail')\"\n            [attr.tabindex]=\"_activeIndex === index ? 0 : -1\"\n            [attr.aria-current]=\"_activeIndex === index ? 'page' : undefined\"\n            [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n            (click)=\"onItemClick(index)\"\n            (touchend)=\"onItemClick(index)\"\n            (keydown.enter)=\"onItemClick(index)\"\n            >\n            <div hGalleriaItemSlot type=\"thumbnail\" [hBind]=\"ptm('thumbnailItem')\" [item]=\"item\" [templates]=\"templates()\" [unstyled]=\"unstyled()\"></div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailNextButton')\"\n      [class]=\"cx('thumbnailNextButton')\"\n      (click)=\"navForward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaNextButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: Galleria }], propDecorators: { containerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], isVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVertical", required: false }] }], slideShowActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideShowActive", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], contentHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeight", required: false }] }], showThumbnailNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnailNavigators", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], onActiveIndexChange: [{ type: i0.Output, args: ["onActiveIndexChange"] }], stopSlideShow: [{ type: i0.Output, args: ["stopSlideShow"] }], itemsContainer: [{ type: i0.ViewChild, args: ['itemsContainer', { isSignal: true }] }], numVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "numVisible", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }] } });
-class GalleriaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule, MotionModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, BindModule, MotionModule, CommonModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GalleriaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule, MotionModule],
-                    exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
-                    declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			}
+		}
+		this.thumbnailsStyle.innerHTML = innerHTML;
+		setAttribute(this.thumbnailsStyle, "nonce", this.galleria.config?.csp()?.nonce);
+	}
+	calculatePosition() {
+		if (isPlatformBrowser(this.platformId)) {
+			if (this.itemsContainer() && this.sortedResponsiveOptions) {
+				let windowWidth = window.innerWidth;
+				let matchedResponsiveData = { numVisible: this._numVisible };
+				for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+					let res = this.sortedResponsiveOptions[i];
+					if (parseInt(res.breakpoint, 10) >= windowWidth) matchedResponsiveData = res;
+				}
+				if (this.d_numVisible !== matchedResponsiveData.numVisible) {
+					this.d_numVisible = matchedResponsiveData.numVisible;
+					this.cd.markForCheck();
+				}
+			}
+		}
+	}
+	getTabIndex(index) {
+		return this.isItemActive(index) ? 0 : null;
+	}
+	navForward(e) {
+		this.stopTheSlideShow();
+		let nextItemIndex = this._activeIndex + 1;
+		const circular = this.circular();
+		if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || circular)) this.step(-1);
+		let activeIndex = circular && this.value().length - 1 === this._activeIndex ? 0 : nextItemIndex;
+		this.onActiveIndexChange.emit(activeIndex);
+		if (e.cancelable) e.preventDefault();
+	}
+	navBackward(e) {
+		this.stopTheSlideShow();
+		let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
+		let diff = prevItemIndex + this.totalShiftedItems;
+		const circular = this.circular();
+		if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || circular)) this.step(1);
+		let activeIndex = circular && this._activeIndex === 0 ? this.value().length - 1 : prevItemIndex;
+		this.onActiveIndexChange.emit(activeIndex);
+		if (e.cancelable) e.preventDefault();
+	}
+	onItemClick(index) {
+		this.stopTheSlideShow();
+		let selectedItemIndex = index;
+		if (selectedItemIndex !== this._activeIndex) {
+			const diff = selectedItemIndex + this.totalShiftedItems;
+			let dir = 0;
+			if (selectedItemIndex < this._activeIndex) {
+				dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
+				if (dir > 0 && -1 * this.totalShiftedItems !== 0) this.step(dir);
+			} else {
+				dir = this.getMedianItemIndex() - diff;
+				if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) this.step(dir);
+			}
+			this._oldactiveIndex = this._activeIndex;
+			this._activeIndex = selectedItemIndex;
+			this.onActiveIndexChange.emit(this._activeIndex);
+		}
+	}
+	onThumbnailKeydown(event, index) {
+		if (event.code === "Enter" || event.code === "Space") {
+			this.onItemClick(index);
+			event.preventDefault();
+		}
+		switch (event.code) {
+			case "ArrowRight":
+				this.onRightKey();
+				break;
+			case "ArrowLeft":
+				this.onLeftKey();
+				break;
+			case "Home":
+				this.onHomeKey();
+				event.preventDefault();
+				break;
+			case "End":
+				this.onEndKey();
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				break;
+			case "Tab":
+				this.onTabKey();
+				break;
+			default: break;
+		}
+	}
+	onRightKey() {
+		const indicators = find(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"]");
+		const activeIndex = this.findFocusedIndicatorIndex();
+		this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+	}
+	onLeftKey() {
+		const activeIndex = this.findFocusedIndicatorIndex();
+		this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+	}
+	onHomeKey() {
+		const activeIndex = this.findFocusedIndicatorIndex();
+		this.changedFocusedIndicator(activeIndex, 0);
+	}
+	onEndKey() {
+		const indicators = find(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"]");
+		const activeIndex = this.findFocusedIndicatorIndex();
+		this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+	}
+	onTabKey() {
+		const indicators = [...find(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"]")];
+		const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, "data-h-active") === true);
+		const activeIndicator = findSingle(this.itemsContainer()?.nativeElement, "[tabindex=\"0\"]");
+		const activeIndex = indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
+		indicators[activeIndex].children[0].tabIndex = "-1";
+		indicators[highlightedIndex].children[0].tabIndex = "0";
+	}
+	findFocusedIndicatorIndex() {
+		const indicators = [...find(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"]")];
+		const activeIndicator = findSingle(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"] > [tabindex=\"0\"]");
+		return indicators.findIndex((ind) => ind === activeIndicator?.parentElement);
+	}
+	changedFocusedIndicator(prevInd, nextInd) {
+		const indicators = find(this.itemsContainer()?.nativeElement, "[data-pc-section=\"thumbnailitem\"]");
+		indicators[prevInd].children[0].tabIndex = "-1";
+		indicators[nextInd].children[0].tabIndex = "0";
+		indicators[nextInd].children[0].focus();
+	}
+	step(dir) {
+		let totalShiftedItems = this.totalShiftedItems + dir;
+		if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value().length - 1) totalShiftedItems = this.d_numVisible - this.value().length;
+		else if (dir > 0 && totalShiftedItems > 0) totalShiftedItems = 0;
+		if (this.circular()) {
+			const value = this.value();
+			if (dir < 0 && value.length - 1 === this._activeIndex) totalShiftedItems = 0;
+			else if (dir > 0 && this._activeIndex === 0) totalShiftedItems = this.d_numVisible - value.length;
+		}
+		const itemsContainer = this.itemsContainer();
+		if (itemsContainer) {
+			this.document.body.setAttribute("data-h-items-hidden", "false");
+			!this.$unstyled() && removeClass(itemsContainer.nativeElement, "h-items-hidden");
+			itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+			itemsContainer.nativeElement.style.transition = "transform 500ms ease 0s";
+		}
+		this.totalShiftedItems = totalShiftedItems;
+	}
+	stopTheSlideShow() {
+		if (this.slideShowActive() && this.stopSlideShow) this.stopSlideShow.emit();
+	}
+	changePageOnTouch(e, diff) {
+		if (diff < 0) this.navForward(e);
+		else this.navBackward(e);
+	}
+	getTotalPageNumber() {
+		return this.value().length > this.d_numVisible ? this.value().length - this.d_numVisible + 1 : 0;
+	}
+	getMedianItemIndex() {
+		let index = Math.floor(this.d_numVisible / 2);
+		return this.d_numVisible % 2 ? index : index - 1;
+	}
+	onTransitionEnd() {
+		const itemsContainer = this.itemsContainer();
+		if (itemsContainer && itemsContainer.nativeElement) {
+			this.document.body.setAttribute("data-h-items-hidden", "true");
+			!this.$unstyled() && addClass(itemsContainer.nativeElement, "h-items-hidden");
+			itemsContainer.nativeElement.style.transition = "";
+		}
+	}
+	onTouchEnd(e) {
+		let touchobj = e.changedTouches[0];
+		if (this.isVertical()) this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+		else this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
+	}
+	onTouchMove(e) {
+		if (e.cancelable) e.preventDefault();
+	}
+	onTouchStart(e) {
+		let touchobj = e.changedTouches[0];
+		this.startPos = {
+			x: touchobj.pageX,
+			y: touchobj.pageY
+		};
+	}
+	isNavBackwardDisabled() {
+		return !this.circular() && this._activeIndex === 0 || this.value().length <= this.d_numVisible;
+	}
+	isNavForwardDisabled() {
+		const value = this.value();
+		return !this.circular() && this._activeIndex === value.length - 1 || value.length <= this.d_numVisible;
+	}
+	firstItemAciveIndex() {
+		return this.totalShiftedItems * -1;
+	}
+	lastItemActiveIndex() {
+		return this.firstItemAciveIndex() + this.d_numVisible - 1;
+	}
+	isItemActive(index) {
+		return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
+	}
+	bindDocumentListeners() {
+		if (isPlatformBrowser(this.platformId)) {
+			const window = this.document.defaultView || "window";
+			this.documentResizeListener = this.renderer.listen(window, "resize", () => {
+				this.calculatePosition();
+			});
+		}
+	}
+	unbindDocumentListeners() {
+		if (this.documentResizeListener) {
+			this.documentResizeListener();
+			this.documentResizeListener = null;
+		}
+	}
+	onDestroy() {
+		if (this.responsiveOptions()) this.unbindDocumentListeners();
+		if (this.thumbnailsStyle) this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
+	}
+	ariaPrevButtonLabel() {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : void 0;
+	}
+	ariaNextButtonLabel() {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : void 0;
+	}
+	ariaPageLabel(value) {
+		return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaThumbnails,
+		deps: [{ token: Galleria }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: GalleriaThumbnails,
+		isStandalone: false,
+		selector: "div[hGalleriaThumbnails]",
+		inputs: {
+			containerId: {
+				classPropertyName: "containerId",
+				publicName: "containerId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isVertical: {
+				classPropertyName: "isVertical",
+				publicName: "isVertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			slideShowActive: {
+				classPropertyName: "slideShowActive",
+				publicName: "slideShowActive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			circular: {
+				classPropertyName: "circular",
+				publicName: "circular",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsiveOptions: {
+				classPropertyName: "responsiveOptions",
+				publicName: "responsiveOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentHeight: {
+				classPropertyName: "contentHeight",
+				publicName: "contentHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showThumbnailNavigators: {
+				classPropertyName: "showThumbnailNavigators",
+				publicName: "showThumbnailNavigators",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			templates: {
+				classPropertyName: "templates",
+				publicName: "templates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numVisible: {
+				classPropertyName: "numVisible",
+				publicName: "numVisible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onActiveIndexChange: "onActiveIndexChange",
+			stopSlideShow: "stopSlideShow"
+		},
+		host: { properties: { "class": "cx(\"thumbnails\")" } },
+		providers: [GalleriaStyle],
+		viewQueries: [{
+			propertyName: "itemsContainer",
+			first: true,
+			predicate: ["itemsContainer"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "<div [hBind]=\"ptm('thumbnailContent')\" [class]=\"cx('thumbnailContent')\">\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailPrevButton')\"\n      [class]=\"cx('thumbnailPrevButton')\"\n      (click)=\"navBackward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaPrevButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div [hBind]=\"ptm('thumbnailsViewport')\" [class]=\"cx('thumbnailsViewport')\" [ngStyle]=\"{ height: isVertical() ? contentHeight() : '' }\">\n    <div #itemsContainer [hBind]=\"ptm('thumbnailItems')\" [class]=\"cx('thumbnailItems')\" (transitionend)=\"onTransitionEnd()\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" role=\"tablist\">\n      @for (item of value(); track item; let index = $index) {\n        <div\n          [hBind]=\"ptm('thumbnailItem')\"\n          [class]=\"cx('thumbnailItem', { index, activeIndex: _activeIndex })\"\n          [attr.aria-selected]=\"_activeIndex === index\"\n          [attr.aria-controls]=\"containerId() + '_item_' + index\"\n          (keydown)=\"onThumbnailKeydown($event, index)\"\n          [attr.data-h-active]=\"_activeIndex === index\"\n          >\n          <div\n            [hBind]=\"ptm('thumbnail')\"\n            [class]=\"cx('thumbnail')\"\n            [attr.tabindex]=\"_activeIndex === index ? 0 : -1\"\n            [attr.aria-current]=\"_activeIndex === index ? 'page' : undefined\"\n            [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n            (click)=\"onItemClick(index)\"\n            (touchend)=\"onItemClick(index)\"\n            (keydown.enter)=\"onItemClick(index)\"\n            >\n            <div hGalleriaItemSlot type=\"thumbnail\" [hBind]=\"ptm('thumbnailItem')\" [item]=\"item\" [templates]=\"templates()\" [unstyled]=\"unstyled()\"></div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailNextButton')\"\n      [class]=\"cx('thumbnailNextButton')\"\n      (click)=\"navForward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaNextButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n</div>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgTemplateOutlet),
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i2.NgStyle),
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => Ripple),
+				selector: "[hRipple]"
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronRightIcon),
+				selector: "[data-h-icon=\"chevron-right\"]"
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronUpIcon),
+				selector: "[data-h-icon=\"chevron-up\"]"
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronDownIcon),
+				selector: "[data-h-icon=\"chevron-down\"]"
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ChevronLeftIcon),
+				selector: "[data-h-icon=\"chevron-left\"]"
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => i1.Bind),
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => GalleriaItemSlot),
+				selector: "div[hGalleriaItemSlot]",
+				inputs: [
+					"templates",
+					"index",
+					"item",
+					"type"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaThumbnails,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[hGalleriaThumbnails]",
+			standalone: false,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [GalleriaStyle],
+			host: { "[class]": "cx(\"thumbnails\")" },
+			hostDirectives: [Bind],
+			template: "<div [hBind]=\"ptm('thumbnailContent')\" [class]=\"cx('thumbnailContent')\">\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailPrevButton')\"\n      [class]=\"cx('thumbnailPrevButton')\"\n      (click)=\"navBackward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaPrevButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-left\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('thumbnailPrevIcon')\" [class]=\"cx('thumbnailPrevIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n  <div [hBind]=\"ptm('thumbnailsViewport')\" [class]=\"cx('thumbnailsViewport')\" [ngStyle]=\"{ height: isVertical() ? contentHeight() : '' }\">\n    <div #itemsContainer [hBind]=\"ptm('thumbnailItems')\" [class]=\"cx('thumbnailItems')\" (transitionend)=\"onTransitionEnd()\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\" role=\"tablist\">\n      @for (item of value(); track item; let index = $index) {\n        <div\n          [hBind]=\"ptm('thumbnailItem')\"\n          [class]=\"cx('thumbnailItem', { index, activeIndex: _activeIndex })\"\n          [attr.aria-selected]=\"_activeIndex === index\"\n          [attr.aria-controls]=\"containerId() + '_item_' + index\"\n          (keydown)=\"onThumbnailKeydown($event, index)\"\n          [attr.data-h-active]=\"_activeIndex === index\"\n          >\n          <div\n            [hBind]=\"ptm('thumbnail')\"\n            [class]=\"cx('thumbnail')\"\n            [attr.tabindex]=\"_activeIndex === index ? 0 : -1\"\n            [attr.aria-current]=\"_activeIndex === index ? 'page' : undefined\"\n            [attr.aria-label]=\"ariaPageLabel(index + 1)\"\n            (click)=\"onItemClick(index)\"\n            (touchend)=\"onItemClick(index)\"\n            (keydown.enter)=\"onItemClick(index)\"\n            >\n            <div hGalleriaItemSlot type=\"thumbnail\" [hBind]=\"ptm('thumbnailItem')\" [item]=\"item\" [templates]=\"templates()\" [unstyled]=\"unstyled()\"></div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  @if (showThumbnailNavigators()) {\n    <button\n      type=\"button\"\n      [hBind]=\"ptm('thumbnailNextButton')\"\n      [class]=\"cx('thumbnailNextButton')\"\n      (click)=\"navForward($event)\"\n      hRipple\n      [attr.aria-label]=\"ariaNextButtonLabel()\"\n      data-pc-group-section=\"thumbnailnavigator\"\n      >\n      @if (!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate()) {\n        @if (!isVertical()) {\n          <svg data-h-icon=\"chevron-right\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n        @if (isVertical()) {\n          <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('thumbnailNextIcon')\" [class]=\"cx('thumbnailNextIcon')\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate()\"></ng-template>\n    </button>\n  }\n</div>\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: Galleria }],
+	propDecorators: {
+		containerId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "containerId",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		isVertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isVertical",
+				required: false
+			}]
+		}],
+		slideShowActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slideShowActive",
+				required: false
+			}]
+		}],
+		circular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "circular",
+				required: false
+			}]
+		}],
+		responsiveOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsiveOptions",
+				required: false
+			}]
+		}],
+		contentHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentHeight",
+				required: false
+			}]
+		}],
+		showThumbnailNavigators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showThumbnailNavigators",
+				required: false
+			}]
+		}],
+		templates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templates",
+				required: false
+			}]
+		}],
+		onActiveIndexChange: [{
+			type: i0.Output,
+			args: ["onActiveIndexChange"]
+		}],
+		stopSlideShow: [{
+			type: i0.Output,
+			args: ["stopSlideShow"]
+		}],
+		itemsContainer: [{
+			type: i0.ViewChild,
+			args: ["itemsContainer", { isSignal: true }]
+		}],
+		numVisible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numVisible",
+				required: false
+			}]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}]
+	}
+});
+var GalleriaModule = class GalleriaModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaModule,
+		declarations: [
+			Galleria,
+			GalleriaContent,
+			GalleriaItemSlot,
+			GalleriaItem,
+			GalleriaThumbnails
+		],
+		imports: [
+			CommonModule,
+			SharedModule,
+			Ripple,
+			TimesIcon,
+			ChevronRightIcon,
+			ChevronUpIcon,
+			ChevronDownIcon,
+			ChevronLeftIcon,
+			FocusTrap,
+			BindModule,
+			MotionModule
+		],
+		exports: [
+			CommonModule,
+			Galleria,
+			GalleriaContent,
+			GalleriaItemSlot,
+			GalleriaItem,
+			GalleriaThumbnails,
+			SharedModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: GalleriaModule,
+		imports: [
+			CommonModule,
+			SharedModule,
+			TimesIcon,
+			ChevronRightIcon,
+			ChevronUpIcon,
+			ChevronDownIcon,
+			ChevronLeftIcon,
+			BindModule,
+			MotionModule,
+			CommonModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: GalleriaModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				SharedModule,
+				Ripple,
+				TimesIcon,
+				ChevronRightIcon,
+				ChevronUpIcon,
+				ChevronDownIcon,
+				ChevronLeftIcon,
+				FocusTrap,
+				BindModule,
+				MotionModule
+			],
+			exports: [
+				CommonModule,
+				Galleria,
+				GalleriaContent,
+				GalleriaItemSlot,
+				GalleriaItem,
+				GalleriaThumbnails,
+				SharedModule
+			],
+			declarations: [
+				Galleria,
+				GalleriaContent,
+				GalleriaItemSlot,
+				GalleriaItem,
+				GalleriaThumbnails
+			]
+		}]
+	}]
+});
 export { Galleria, GalleriaClasses, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaStyle, GalleriaThumbnails };
-//# sourceMappingURL=gravionlabs-helix-core-galleria.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-galleria.mjs.map