@gravionlabs/helix-core 22.0.0

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

@@ -0,0 +1,1930 @@
+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*/ `
+    .h-galleria {
+        overflow: hidden;
+        border-style: solid;
+        border-width: dt('galleria.border.width');
+        border-color: dt('galleria.border.color');
+        border-radius: dt('galleria.border.radius');
+    }
+
+    .h-galleria-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .h-galleria-items-container {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .h-galleria-items {
+        position: relative;
+        display: flex;
+        height: 100%;
+    }
+
+    .h-galleria-nav-button {
+        position: absolute !important;
+        top: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        background: dt('galleria.nav.button.background');
+        color: dt('galleria.nav.button.color');
+        width: dt('galleria.nav.button.size');
+        height: dt('galleria.nav.button.size');
+        transition:
+            background dt('galleria.transition.duration'),
+            color dt('galleria.transition.duration'),
+            outline-color dt('galleria.transition.duration'),
+            box-shadow dt('galleria.transition.duration');
+        margin: calc(-1 * calc(dt('galleria.nav.button.size')) / 2) dt('galleria.nav.button.gutter') 0 dt('galleria.nav.button.gutter');
+        padding: 0;
+        user-select: none;
+        border: 0 none;
+        cursor: pointer;
+        outline-color: transparent;
+    }
+
+    .h-galleria-nav-button:not(.h-disabled):hover {
+        background: dt('galleria.nav.button.hover.background');
+        color: dt('galleria.nav.button.hover.color');
+    }
+
+    .h-galleria-nav-button:not(.h-disabled):focus-visible {
+        box-shadow: dt('galleria.nav.button.focus.ring.shadow');
+        outline: dt('galleria.nav.button.focus.ring.width') dt('galleria.nav.button.focus.ring.style') dt('galleria.nav.button.focus.ring.color');
+        outline-offset: dt('galleria.nav.button.focus.ring.offset');
+    }
+
+    .h-galleria-next-icon,
+    .h-galleria-prev-icon {
+        font-size: dt('galleria.nav.icon.size');
+        width: dt('galleria.nav.icon.size');
+        height: dt('galleria.nav.icon.size');
+    }
+
+    .h-galleria-prev-button {
+        border-radius: dt('galleria.nav.button.prev.border.radius');
+        left: 0;
+    }
+
+    .h-galleria-next-button {
+        border-radius: dt('galleria.nav.button.next.border.radius');
+        right: 0;
+    }
+
+    .h-galleria-prev-button:dir(rtl) {
+        left: auto;
+        right: 0;
+        transform: rotate(180deg);
+    }
+
+    .h-galleria-next-button:dir(rtl) {
+        right: auto;
+        left: 0;
+        transform: rotate(180deg);
+    }
+
+    .h-galleria-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+
+    .h-galleria-hover-navigators .h-galleria-nav-button {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity dt('galleria.transition.duration') ease-in-out;
+    }
+
+    .h-galleria-hover-navigators .h-galleria-items-container:hover .h-galleria-nav-button {
+        pointer-events: all;
+        opacity: 1;
+    }
+
+    .h-galleria-hover-navigators .h-galleria-items-container:hover .h-galleria-nav-button.h-disabled {
+        pointer-events: none;
+    }
+
+    .h-galleria-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: dt('galleria.caption.background');
+        color: dt('galleria.caption.color');
+        padding: dt('galleria.caption.padding');
+    }
+
+    .h-galleria-thumbnails {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        flex-shrink: 0;
+    }
+
+    .h-galleria-thumbnail-nav-button {
+        align-self: center;
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+        margin: 0 dt('galleria.thumbnail.nav.button.gutter');
+        padding: 0;
+        border: none;
+        user-select: none;
+        cursor: pointer;
+        background: transparent;
+        color: dt('galleria.thumbnail.nav.button.color');
+        width: dt('galleria.thumbnail.nav.button.size');
+        height: dt('galleria.thumbnail.nav.button.size');
+        transition:
+            background dt('galleria.transition.duration'),
+            color dt('galleria.transition.duration'),
+            outline-color dt('galleria.transition.duration');
+        outline-color: transparent;
+        border-radius: dt('galleria.thumbnail.nav.button.border.radius');
+    }
+
+    .h-galleria-thumbnail-nav-button:hover {
+        background: dt('galleria.thumbnail.nav.button.hover.background');
+        color: dt('galleria.thumbnail.nav.button.hover.color');
+    }
+
+    .h-galleria-thumbnail-nav-button:focus-visible {
+        box-shadow: dt('galleria.thumbnail.nav.button.focus.ring.shadow');
+        outline: dt('galleria.thumbnail.nav.button.focus.ring.width') dt('galleria.thumbnail.nav.button.focus.ring.style') dt('galleria.thumbnail.nav.button.focus.ring.color');
+        outline-offset: dt('galleria.thumbnail.nav.button.focus.ring.offset');
+    }
+
+    .h-galleria-thumbnail-nav-button .h-galleria-thumbnail-next-icon,
+    .h-galleria-thumbnail-nav-button .h-galleria-thumbnail-prev-icon {
+        font-size: dt('galleria.thumbnail.nav.button.icon.size');
+        width: dt('galleria.thumbnail.nav.button.icon.size');
+        height: dt('galleria.thumbnail.nav.button.icon.size');
+    }
+
+    .h-galleria-thumbnails-content {
+        display: flex;
+        flex-direction: row;
+        background: dt('galleria.thumbnails.content.background');
+        padding: dt('galleria.thumbnails.content.padding');
+    }
+
+    .h-galleria-thumbnails-viewport {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .h-galleria:not(.h-galleria-thumbnails-right):not(.h-galleria-thumbnails-left) .h-galleria-thumbnail-prev-button:dir(rtl),
+    .h-galleria:not(.h-galleria-thumbnails-right):not(.h-galleria-thumbnails-left) .h-galleria-thumbnail-next-button:dir(rtl) {
+        transform: rotate(180deg);
+    }
+
+    .h-galleria-thumbnail-items {
+        display: flex;
+    }
+
+    .h-galleria-thumbnail-items:dir(rtl) {
+        flex-direction: row-reverse;
+    }
+
+    .h-galleria-thumbnail-item {
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0.5;
+    }
+
+    .h-galleria-thumbnail {
+        outline-color: transparent;
+    }
+
+    .h-galleria-thumbnail-item:hover {
+        opacity: 1;
+        transition: opacity 0.3s;
+    }
+
+    .h-galleria-thumbnail-item-current {
+        opacity: 1;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-content,
+    .h-galleria-thumbnails-right .h-galleria-content {
+        flex-direction: row;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-items-container,
+    .h-galleria-thumbnails-right .h-galleria-items-container {
+        flex-direction: row;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-items-container,
+    .h-galleria-thumbnails-top .h-galleria-items-container {
+        order: 2;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-thumbnails,
+    .h-galleria-thumbnails-top .h-galleria-thumbnails {
+        order: 1;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-thumbnails-content,
+    .h-galleria-thumbnails-right .h-galleria-thumbnails-content {
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .h-galleria-thumbnails-left .h-galleria-thumbnail-items,
+    .h-galleria-thumbnails-right .h-galleria-thumbnail-items {
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .h-galleria-indicator-list {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: dt('galleria.indicator.list.padding');
+        gap: dt('galleria.indicator.list.gap');
+        margin: 0;
+        list-style: none;
+    }
+
+    .h-galleria-indicator-button {
+        display: inline-flex;
+        align-items: center;
+        background: dt('galleria.indicator.button.background');
+        width: dt('galleria.indicator.button.width');
+        height: dt('galleria.indicator.button.height');
+        transition:
+            background dt('galleria.transition.duration'),
+            color dt('galleria.transition.duration'),
+            outline-color dt('galleria.transition.duration'),
+            box-shadow dt('galleria.transition.duration');
+        outline-color: transparent;
+        border-radius: dt('galleria.indicator.button.border.radius');
+        margin: 0;
+        padding: 0;
+        border: none;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    .h-galleria-indicator-button:hover {
+        background: dt('galleria.indicator.button.hover.background');
+    }
+
+    .h-galleria-indicator-button:focus-visible {
+        box-shadow: dt('galleria.indicator.button.focus.ring.shadow');
+        outline: dt('galleria.indicator.button.focus.ring.width') dt('galleria.indicator.button.focus.ring.style') dt('galleria.indicator.button.focus.ring.color');
+        outline-offset: dt('galleria.indicator.button.focus.ring.offset');
+    }
+
+    .h-galleria-indicator-active .h-galleria-indicator-button {
+        background: dt('galleria.indicator.button.active.background');
+    }
+
+    .h-galleria-indicators-left .h-galleria-items-container,
+    .h-galleria-indicators-right .h-galleria-items-container {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .h-galleria-indicators-left .h-galleria-items,
+    .h-galleria-indicators-top .h-galleria-items {
+        order: 2;
+    }
+
+    .h-galleria-indicators-left .h-galleria-indicator-list,
+    .h-galleria-indicators-top .h-galleria-indicator-list {
+        order: 1;
+    }
+
+    .h-galleria-indicators-left .h-galleria-indicator-list,
+    .h-galleria-indicators-right .h-galleria-indicator-list {
+        flex-direction: column;
+    }
+
+    .h-galleria-inset-indicators .h-galleria-indicator-list {
+        position: absolute;
+        display: flex;
+        z-index: 1;
+        background: dt('galleria.inset.indicator.list.background');
+    }
+
+    .h-galleria-inset-indicators .h-galleria-indicator-button {
+        background: dt('galleria.inset.indicator.button.background');
+    }
+
+    .h-galleria-inset-indicators .h-galleria-indicator-button:hover {
+        background: dt('galleria.inset.indicator.button.hover.background');
+    }
+
+    .h-galleria-inset-indicators .h-galleria-indicator-active .h-galleria-indicator-button {
+        background: dt('galleria.inset.indicator.button.active.background');
+    }
+
+    .h-galleria-inset-indicators.h-galleria-indicators-top .h-galleria-indicator-list {
+        top: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-start;
+    }
+
+    .h-galleria-inset-indicators.h-galleria-indicators-right .h-galleria-indicator-list {
+        right: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-end;
+    }
+
+    .h-galleria-inset-indicators.h-galleria-indicators-bottom .h-galleria-indicator-list {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-end;
+    }
+
+    .h-galleria-inset-indicators.h-galleria-indicators-left .h-galleria-indicator-list {
+        left: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-start;
+    }
+
+    .h-galleria-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .h-galleria-close-button {
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        margin: dt('galleria.close.button.gutter');
+        background: dt('galleria.close.button.background');
+        color: dt('galleria.close.button.color');
+        width: dt('galleria.close.button.size');
+        height: dt('galleria.close.button.size');
+        padding: 0;
+        border: none;
+        user-select: none;
+        cursor: pointer;
+        border-radius: dt('galleria.close.button.border.radius');
+        outline-color: transparent;
+        transition:
+            background dt('galleria.transition.duration'),
+            color dt('galleria.transition.duration'),
+            outline-color dt('galleria.transition.duration');
+    }
+
+    .h-galleria-close-icon {
+        font-size: dt('galleria.close.button.icon.size');
+        width: dt('galleria.close.button.icon.size');
+        height: dt('galleria.close.button.icon.size');
+    }
+
+    .h-galleria-close-button:hover {
+        background: dt('galleria.close.button.hover.background');
+        color: dt('galleria.close.button.hover.color');
+    }
+
+    .h-galleria-close-button:focus-visible {
+        box-shadow: dt('galleria.close.button.focus.ring.shadow');
+        outline: dt('galleria.close.button.focus.ring.width') dt('galleria.close.button.focus.ring.style') dt('galleria.close.button.focus.ring.color');
+        outline-offset: dt('galleria.close.button.focus.ring.offset');
+    }
+
+    .h-galleria-mask .h-galleria-nav-button {
+        position: fixed;
+        top: 50%;
+    }
+
+       .h-items-hidden .h-galleria-thumbnail-item {
+        visibility: hidden;
+    }
+
+    .h-items-hidden .h-galleria-thumbnail-item.h-galleria-thumbnail-item-active {
+        visibility: visible;
+    }
+
+    .h-galleria-enter-active {
+        animation: h-animate-galleria-enter 300ms cubic-bezier(.19,1,.22,1);
+    }
+
+    .h-galleria-leave-active {
+        animation: h-animate-galleria-leave 300ms cubic-bezier(.19,1,.22,1);
+    }
+
+    .h-galleria-enter-active .h-galleria-nav-button {
+        opacity: 0;
+    }
+
+    @keyframes h-animate-galleria-enter {
+        from {
+            opacity: 0;
+            transform: scale(0.93);
+        }
+    }
+
+    @keyframes h-animate-galleria-leave {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+        to {
+            opacity: 0;
+            transform: scale(0.93);
+        }
+    }
+`;
+
+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'
+};
+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
+ *
+ */
+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";
+})(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: `
+        @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: `
+        @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 = `
+            #${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 += `
+                    @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.
+ */
+
+export { Galleria, GalleriaClasses, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaStyle, GalleriaThumbnails };
+//# sourceMappingURL=gravionlabs-helix-core-galleria.mjs.map