primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-galleria.mjs

@@ -1,458 +1,30 @@
-import { trigger, transition, style, animate } from '@angular/animations';
+import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, inject, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
-import { addClass, focus, findSingle, blockBodyScroll, unblockBodyScroll, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
+import { addClass, focus, findSingle, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
+import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/galleria';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-galleria {
-    overflow: hidden;
-    border-style: solid;
-    border-width: ${dt('galleria.border.width')};
-    border-color: ${dt('galleria.border.color')};
-    border-radius: ${dt('galleria.border.radius')};
-}
-
-.p-galleria-content {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-galleria-items-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.p-galleria-items {
-    position: relative;
-    display: flex;
-    height: 100%;
-}
-
-.p-galleria-nav-button {
-    position: absolute;
-    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;
-}
-
-.p-galleria-nav-button:not(.p-disabled):hover {
-    background: ${dt('galleria.nav.button.hover.background')};
-    color: ${dt('galleria.nav.button.hover.color')};
-}
-
-.p-galleria-nav-button:not(.p-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')};
-}
-
-.p-galleria-next-icon,
-.p-galleria-prev-icon {
-    font-size: ${dt('galleria.nav.icon.size')};
-    width: ${dt('galleria.nav.icon.size')};
-    height: ${dt('galleria.nav.icon.size')};
-}
-
-.p-galleria-prev-button {
-    border-radius: ${dt('galleria.nav.button.prev.border.radius')};
-    left: 0;
-}
-
-.p-galleria-next-button {
-    border-radius: ${dt('galleria.nav.button.next.border.radius')};
-    right: 0;
-}
-
-.p-galleria-prev-button:dir(rtl) {
-    left: auto;
-    right: 0;
-    transform: rotate(180deg);
-}
-
-.p-galleria-next-button:dir(rtl) {
-    right: auto;
-    left: 0;
-    transform: rotate(180deg);
-}
-
-.p-galleria-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.p-galleria-hover-navigators .p-galleria-nav-button {
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity ${dt('galleria.transition.duration')} ease-in-out;
-}
-
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
-    pointer-events: all;
-    opacity: 1;
-}
-
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
-    pointer-events: none;
-}
-
-.p-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')};
-}
-
-.p-galleria-thumbnails {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex-shrink: 0;
-}
-
-.p-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')};
-}
-
-.p-galleria-thumbnail-nav-button:hover {
-    background: ${dt('galleria.thumbnail.nav.button.hover.background')};
-    color: ${dt('galleria.thumbnail.nav.button.hover.color')};
-}
-
-.p-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')};
-}
-
-.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
-.p-galleria-thumbnail-nav-button .p-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')};
-}
-
-.p-galleria-thumbnails-content {
-    display: flex;
-    flex-direction: row;
-    background: ${dt('galleria.thumbnails.content.background')};
-    padding: ${dt('galleria.thumbnails.content.padding')};
-}
-
-.p-galleria-thumbnails-viewport {
-    overflow: hidden;
-    width: 100%;
-}
-
-.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
-.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
-    transform: rotate(180deg);
-}
-
-.p-galleria-thumbnail-items {
-    display: flex;
-}
-
-.p-galleria-thumbnail-item {
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0.5;
-}
-
-.p-galleria-thumbnail {
-    outline-color: transparent;
-}
-
-.p-galleria-thumbnail-item:hover {
-    opacity: 1;
-    transition: opacity 0.3s;
-}
-
-.p-galleria-thumbnail-item-current {
-    opacity: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-content,
-.p-galleria-thumbnails-right .p-galleria-content {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-items-container,
-.p-galleria-thumbnails-right .p-galleria-items-container {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-items-container,
-.p-galleria-thumbnails-top .p-galleria-items-container {
-    order: 2;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnails,
-.p-galleria-thumbnails-top .p-galleria-thumbnails {
-    order: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
-.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
-    flex-direction: column;
-    flex-grow: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-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;
-}
-
-.p-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;
-}
-
-.p-galleria-indicator-button:hover {
-    background: ${dt('galleria.indicator.button.hover.background')};
-}
-
-.p-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')};
-}
-
-.p-galleria-indicator-active .p-galleria-indicator-button {
-    background: ${dt('galleria.indicator.button.active.background')};
-}
-
-.p-galleria-indicators-left .p-galleria-items-container,
-.p-galleria-indicators-right .p-galleria-items-container {
-    flex-direction: row;
-    align-items: center;
-}
-
-.p-galleria-indicators-left .p-galleria-items,
-.p-galleria-indicators-top .p-galleria-items {
-    order: 2;
-}
-
-.p-galleria-indicators-left .p-galleria-indicator-list,
-.p-galleria-indicators-top .p-galleria-indicator-list {
-    order: 1;
-}
-
-.p-galleria-indicators-left .p-galleria-indicator-list,
-.p-galleria-indicators-right .p-galleria-indicator-list {
-    flex-direction: column;
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-list {
-    position: absolute;
-    display: flex;
-    z-index: 1;
-    background: ${dt('galleria.inset.indicator.list.background')};
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-button {
-    background: ${dt('galleria.inset.indicator.button.background')};
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-button:hover {
-    background: ${dt('galleria.inset.indicator.button.hover.background')};
-}
-
-.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
-    background: ${dt('galleria.inset.indicator.button.active.background')};
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
-    top: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-start;
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
-    right: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
-    left: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-start;
-}
-
-.p-galleria-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-galleria-close-button {
-    position: absolute;
-    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')};
-}
-
-.p-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')};
-}
-
-.p-galleria-close-button:hover {
-    background: ${dt('galleria.close.button.hover.background')};
-    color: ${dt('galleria.close.button.hover.color')};
-}
-
-.p-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')};
-}
-
-.p-galleria-mask .p-galleria-nav-button {
-    position: fixed;
-    top: 50%;
-}
-
-.p-galleria-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-galleria-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.p-galleria-enter-from,
-.p-galleria-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-.p-galleria-enter-active .p-galleria-nav-button {
-    opacity: 0;
-}
-
-.p-items-hidden .p-galleria-thumbnail-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-    visibility: visible;
-}
-`;
 const classes = {
     mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
     root: ({ instance }) => {
-        const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
-        const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
+        const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.galleria.thumbnailsPosition);
+        const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.galleria.indicatorsPosition);
         return [
             'p-galleria p-component',
             {
-                'p-galleria-fullscreen': instance.$attrs.fullScreen,
-                'p-galleria-inset-indicators': instance.$attrs.showIndicatorsOnItem,
-                'p-galleria-hover-navigators': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen
+                'p-galleria-fullscreen': instance.galleria.fullScreen,
+                'p-galleria-inset-indicators': instance.galleria.showIndicatorsOnItem,
+                'p-galleria-hover-navigators': instance.galleria.showItemNavigatorsOnHover && !instance.galleria.fullScreen
             },
             thumbnailsPosClass,
             indicatorPosClass
@@ -520,12 +92,12 @@ const classes = {
 };
 class GalleriaStyle extends BaseStyle {
     name = 'galleria';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -959,10 +531,10 @@ class Galleria extends BaseComponent {
             this.disableModality();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Galleria, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Galleria, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div *ngIf="fullScreen; else windowed" #container>
-            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-overlay-mask p-overlay-mask-enter': true }" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined">
+            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide()">
                 <p-galleriaContent
                     *ngIf="visible"
                     [@animation]="{
@@ -987,19 +559,19 @@ class Galleria extends BaseComponent {
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], animations: [
             trigger('animation', [
-                transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
-                transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
+                transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+                transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Galleria, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Galleria, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleria',
                     standalone: false,
                     template: `
         <div *ngIf="fullScreen; else windowed" #container>
-            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-overlay-mask p-overlay-mask-enter': true }" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined">
+            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide()">
                 <p-galleriaContent
                     *ngIf="visible"
                     [@animation]="{
@@ -1025,8 +597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     `,
                     animations: [
                         trigger('animation', [
-                            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
-                            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
+                            transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
+                            transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
                         ])
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1168,6 +740,7 @@ class GalleriaContent extends BaseComponent {
     maskHide = new EventEmitter();
     activeItemChange = new EventEmitter();
     closeButton;
+    _componentStyle = inject(GalleriaStyle);
     id;
     _activeIndex = 0;
     slideShowActive = true;
@@ -1207,11 +780,6 @@ class GalleriaContent extends BaseComponent {
     shouldRenderFooter() {
         return (this.galleria.footerFacet && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;
     }
-    galleriaClass() {
-        const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
-        const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
-        return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');
-    }
     startSlideShow() {
         if (isPlatformBrowser(this.galleria.platformId)) {
             this.interval = setInterval(() => {
@@ -1248,31 +816,17 @@ class GalleriaContent extends BaseComponent {
     closeAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria.close : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: GalleriaContent, isStandalone: false, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div
-            [attr.id]="id"
-            [attr.role]="'region'"
-            *ngIf="value && value.length > 0"
-            [ngClass]="{
-                'p-galleria p-component': true,
-                'p-galleria-fullscreen': this.galleria.fullScreen,
-                'p-galleria-inset-indicators': this.galleria.showIndicatorsOnItem,
-                'p-galleria-hover-navigators': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
-            }"
-            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
-            [class]="galleriaClass()"
-            pFocusTrap
-            [pFocusTrapDisabled]="!fullScreen"
-        >
-            <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close-button" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
-                <TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: GalleriaContent, isStandalone: false, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
+            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
+                <TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" class="p-galleria-header">
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
-            <div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <p-galleriaItem
                     [id]="id"
                     [value]="value"
@@ -1308,41 +862,27 @@ class GalleriaContent extends BaseComponent {
                     (stopSlideShow)="stopSlideShow()"
                 ></p-galleriaThumbnails>
             </div>
-            <div *ngIf="shouldRenderFooter()" class="p-galleria-footer">
+            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "p-galleriaThumbnails", 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: "19.2.10", ngImport: i0, type: GalleriaContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleriaContent',
                     standalone: false,
                     template: `
-        <div
-            [attr.id]="id"
-            [attr.role]="'region'"
-            *ngIf="value && value.length > 0"
-            [ngClass]="{
-                'p-galleria p-component': true,
-                'p-galleria-fullscreen': this.galleria.fullScreen,
-                'p-galleria-inset-indicators': this.galleria.showIndicatorsOnItem,
-                'p-galleria-hover-navigators': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
-            }"
-            [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
-            [class]="galleriaClass()"
-            pFocusTrap
-            [pFocusTrapDisabled]="!fullScreen"
-        >
-            <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close-button" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
-                <TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
+        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
+            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
+                <TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" class="p-galleria-header">
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
-            <div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <p-galleriaItem
                     [id]="id"
                     [value]="value"
@@ -1378,12 +918,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     (stopSlideShow)="stopSlideShow()"
                 ></p-galleriaThumbnails>
             </div>
-            <div *ngIf="shouldRenderFooter()" class="p-galleria-footer">
+            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
         </div>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
                 }]
         }], ctorParameters: () => [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.ElementRef }], propDecorators: { activeIndex: [{
                 type: Input
@@ -1510,14 +1051,14 @@ class GalleriaItemSlot {
             this.getContentTemplate();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: GalleriaItemSlot, isStandalone: false, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: GalleriaItemSlot, isStandalone: false, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
         <ng-container *ngIf="shouldRender()">
             <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaItemSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaItemSlot, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleriaItemSlot',
@@ -1539,7 +1080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], type: [{
                 type: Input
             }] } });
-class GalleriaItem {
+class GalleriaItem extends BaseComponent {
     galleria;
     id;
     circular = false;
@@ -1555,6 +1096,7 @@ class GalleriaItem {
     startSlideShow = new EventEmitter();
     stopSlideShow = new EventEmitter();
     onActiveIndexChange = new EventEmitter();
+    _componentStyle = inject(GalleriaStyle);
     get activeIndex() {
         return this._activeIndex;
     }
@@ -1568,9 +1110,11 @@ class GalleriaItem {
     leftButtonFocused = false;
     rightButtonFocused = false;
     constructor(galleria) {
+        super();
         this.galleria = galleria;
     }
     ngOnChanges({ autoPlay }) {
+        super.ngOnChanges({ autoPlay });
         if (autoPlay?.currentValue) {
             this.startSlideShow.emit();
         }
@@ -1665,121 +1209,86 @@ class GalleriaItem {
     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: "19.2.10", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: GalleriaItem, isStandalone: false, selector: "p-galleriaItem", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, host: { classAttribute: "p-galleria-items-container" }, usesOnChanges: true, ngImport: i0, template: `
-        <div class="p-galleria-items">
-            <button
-                *ngIf="showItemNavigators"
-                type="button"
-                role="navigation"
-                [ngClass]="{ 'p-galleria-prev-button p-galleria-nav-button': true, 'p-disabled': this.isNavBackwardDisabled() }"
-                (click)="navBackward($event)"
-                [disabled]="isNavBackwardDisabled()"
-                (focus)="onButtonFocus('left')"
-                (blur)="onButtonBlur('left')"
-            >
-                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: GalleriaItem, isStandalone: false, selector: "p-galleriaItem", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, host: { properties: { "class": "cx('itemsContainer')" } }, providers: [GalleriaStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('items')">
+            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
+                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="cx('prevIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
             </button>
-            <div [id]="id + '_item_' + activeIndex" role="group" class="p-galleria-item" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
+                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
             </div>
-            <button
-                *ngIf="showItemNavigators"
-                type="button"
-                [ngClass]="{ 'p-galleria-next-button p-galleria-nav-button': true, 'p-disabled': this.isNavForwardDisabled() }"
-                (click)="navForward($event)"
-                [disabled]="isNavForwardDisabled()"
-                role="navigation"
-                (focus)="onButtonFocus('right')"
-                (blur)="onButtonBlur('right')"
-            >
-                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
+            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
+                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="cx('nextIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
             </button>
-            <div class="p-galleria-caption" *ngIf="captionFacet || galleria.captionTemplate">
+            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
                 <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
             </div>
         </div>
-        <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
+        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
             <li
                 *ngFor="let item of value; let index = index"
                 tabindex="0"
                 (click)="onIndicatorClick(index)"
                 (mouseenter)="onIndicatorMouseEnter(index)"
                 (keydown)="onIndicatorKeyDown($event, index)"
-                [ngClass]="{ 'p-galleria-indicator': true, 'p-galleria-indicator-active': isIndicatorItemActive(index) }"
+                [class]="cx('indicator', { index })"
                 [attr.aria-label]="ariaPageLabel(index + 1)"
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
             >
-                <button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
+                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
                 <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
             </li>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleriaItem',
                     standalone: false,
                     template: `
-        <div class="p-galleria-items">
-            <button
-                *ngIf="showItemNavigators"
-                type="button"
-                role="navigation"
-                [ngClass]="{ 'p-galleria-prev-button p-galleria-nav-button': true, 'p-disabled': this.isNavBackwardDisabled() }"
-                (click)="navBackward($event)"
-                [disabled]="isNavBackwardDisabled()"
-                (focus)="onButtonFocus('left')"
-                (blur)="onButtonBlur('left')"
-            >
-                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
+        <div [class]="cx('items')">
+            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
+                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="cx('prevIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
             </button>
-            <div [id]="id + '_item_' + activeIndex" role="group" class="p-galleria-item" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
+                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
             </div>
-            <button
-                *ngIf="showItemNavigators"
-                type="button"
-                [ngClass]="{ 'p-galleria-next-button p-galleria-nav-button': true, 'p-disabled': this.isNavForwardDisabled() }"
-                (click)="navForward($event)"
-                [disabled]="isNavForwardDisabled()"
-                role="navigation"
-                (focus)="onButtonFocus('right')"
-                (blur)="onButtonBlur('right')"
-            >
-                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
+            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
+                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="cx('nextIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
             </button>
-            <div class="p-galleria-caption" *ngIf="captionFacet || galleria.captionTemplate">
+            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
                 <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
             </div>
         </div>
-        <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
+        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
             <li
                 *ngFor="let item of value; let index = index"
                 tabindex="0"
                 (click)="onIndicatorClick(index)"
                 (mouseenter)="onIndicatorMouseEnter(index)"
                 (keydown)="onIndicatorKeyDown($event, index)"
-                [ngClass]="{ 'p-galleria-indicator': true, 'p-galleria-indicator-active': isIndicatorItemActive(index) }"
+                [class]="cx('indicator', { index })"
                 [attr.aria-label]="ariaPageLabel(index + 1)"
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
             >
-                <button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
+                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
                 <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
             </li>
         </ul>
     `,
                     host: {
-                        class: 'p-galleria-items-container'
+                        '[class]': "cx('itemsContainer')"
                     },
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
                 }]
         }], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
                 type: Input
@@ -1818,12 +1327,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], activeIndex: [{
                 type: Input
             }] } });
-class GalleriaThumbnails {
+class GalleriaThumbnails extends BaseComponent {
     galleria;
-    document;
-    platformId;
-    renderer;
-    cd;
     containerId;
     value;
     isVertical = false;
@@ -1863,14 +1368,13 @@ class GalleriaThumbnails {
     _oldNumVisible = 0;
     _activeIndex = 0;
     _oldactiveIndex = 0;
-    constructor(galleria, document, platformId, renderer, cd) {
+    _componentStyle = inject(GalleriaStyle);
+    constructor(galleria) {
+        super();
         this.galleria = galleria;
-        this.document = document;
-        this.platformId = platformId;
-        this.renderer = renderer;
-        this.cd = cd;
     }
     ngOnInit() {
+        super.ngOnInit();
         if (isPlatformBrowser(this.platformId)) {
             this.createStyle();
             if (this.responsiveOptions) {
@@ -1908,6 +1412,7 @@ class GalleriaThumbnails {
         }
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         if (isPlatformBrowser(this.platformId)) {
             this.calculatePosition();
         }
@@ -2194,6 +1699,7 @@ class GalleriaThumbnails {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this.responsiveOptions) {
             this.unbindDocumentListeners();
         }
@@ -2210,39 +1716,22 @@ class GalleriaThumbnails {
     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: "19.2.10", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: GalleriaThumbnails, isStandalone: false, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], ngImport: i0, template: `
-        <div class="p-galleria-thumbnails">
-            <div class="p-galleria-thumbnails-content">
-                <button
-                    *ngIf="showThumbnailNavigators"
-                    type="button"
-                    [ngClass]="{
-                        'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button': true,
-                        'p-disabled': this.isNavBackwardDisabled()
-                    }"
-                    (click)="navBackward($event)"
-                    [disabled]="isNavBackwardDisabled()"
-                    pRipple
-                    [attr.aria-label]="ariaPrevButtonLabel()"
-                >
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: GalleriaThumbnails, isStandalone: false, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [class]="cx('thumbnails')">
+            <div [class]="cx('thumbnailContent')">
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
                     <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
-                        <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
-                        <ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
+                        <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="cx('thumbnailPrevIcon')" />
+                        <ChevronUpIcon *ngIf="isVertical" [styleClass]="cx('thumbnailPrevIcon')" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
                 </button>
-                <div class="p-galleria-thumbnails-viewport" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
                         <div
                             *ngFor="let item of value; let index = index"
-                            [ngClass]="{
-                                'p-galleria-thumbnail-item': true,
-                                'p-galleria-thumbnail-item-current': activeIndex === index,
-                                'p-galleria-thumbnail-item-active': isItemActive(index),
-                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
-                            }"
+                            [class]="cx('thumbnailItem', { index, activeIndex })"
                             [attr.aria-selected]="activeIndex === index"
                             [attr.aria-controls]="containerId + '_item_' + index"
                             [attr.data-pc-section]="'thumbnailitem'"
@@ -2250,7 +1739,7 @@ class GalleriaThumbnails {
                             (keydown)="onThumbnailKeydown($event, index)"
                         >
                             <div
-                                class="p-galleria-thumbnail"
+                                [class]="cx('thumbnail')"
                                 [attr.tabindex]="activeIndex === index ? 0 : -1"
                                 [attr.aria-current]="activeIndex === index ? 'page' : undefined"
                                 [attr.aria-label]="ariaPageLabel(index + 1)"
@@ -2263,21 +1752,10 @@ class GalleriaThumbnails {
                         </div>
                     </div>
                 </div>
-                <button
-                    *ngIf="showThumbnailNavigators"
-                    type="button"
-                    [ngClass]="{
-                        'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button': true,
-                        'p-disabled': this.isNavForwardDisabled()
-                    }"
-                    (click)="navForward($event)"
-                    [disabled]="isNavForwardDisabled()"
-                    pRipple
-                    [attr.aria-label]="ariaNextButtonLabel()"
-                >
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
                     <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
-                        <ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
-                        <ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
+                        <ChevronRightIcon *ngIf="!isVertical" [ngClass]="cx('thumbnailNextIcon')" />
+                        <ChevronDownIcon *ngIf="isVertical" [ngClass]="cx('thumbnailNextIcon')" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
                 </button>
@@ -2285,43 +1763,26 @@ class GalleriaThumbnails {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "ChevronUpIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "ChevronLeftIcon" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaThumbnails, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaThumbnails, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleriaThumbnails',
                     standalone: false,
                     template: `
-        <div class="p-galleria-thumbnails">
-            <div class="p-galleria-thumbnails-content">
-                <button
-                    *ngIf="showThumbnailNavigators"
-                    type="button"
-                    [ngClass]="{
-                        'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button': true,
-                        'p-disabled': this.isNavBackwardDisabled()
-                    }"
-                    (click)="navBackward($event)"
-                    [disabled]="isNavBackwardDisabled()"
-                    pRipple
-                    [attr.aria-label]="ariaPrevButtonLabel()"
-                >
+        <div [class]="cx('thumbnails')">
+            <div [class]="cx('thumbnailContent')">
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
                     <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
-                        <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
-                        <ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
+                        <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="cx('thumbnailPrevIcon')" />
+                        <ChevronUpIcon *ngIf="isVertical" [styleClass]="cx('thumbnailPrevIcon')" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
                 </button>
-                <div class="p-galleria-thumbnails-viewport" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
                         <div
                             *ngFor="let item of value; let index = index"
-                            [ngClass]="{
-                                'p-galleria-thumbnail-item': true,
-                                'p-galleria-thumbnail-item-current': activeIndex === index,
-                                'p-galleria-thumbnail-item-active': isItemActive(index),
-                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
-                            }"
+                            [class]="cx('thumbnailItem', { index, activeIndex })"
                             [attr.aria-selected]="activeIndex === index"
                             [attr.aria-controls]="containerId + '_item_' + index"
                             [attr.data-pc-section]="'thumbnailitem'"
@@ -2329,7 +1790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             (keydown)="onThumbnailKeydown($event, index)"
                         >
                             <div
-                                class="p-galleria-thumbnail"
+                                [class]="cx('thumbnail')"
                                 [attr.tabindex]="activeIndex === index ? 0 : -1"
                                 [attr.aria-current]="activeIndex === index ? 'page' : undefined"
                                 [attr.aria-label]="ariaPageLabel(index + 1)"
@@ -2342,36 +1803,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         </div>
                     </div>
                 </div>
-                <button
-                    *ngIf="showThumbnailNavigators"
-                    type="button"
-                    [ngClass]="{
-                        'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button': true,
-                        'p-disabled': this.isNavForwardDisabled()
-                    }"
-                    (click)="navForward($event)"
-                    [disabled]="isNavForwardDisabled()"
-                    pRipple
-                    [attr.aria-label]="ariaNextButtonLabel()"
-                >
+                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
                     <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
-                        <ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
-                        <ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
+                        <ChevronRightIcon *ngIf="!isVertical" [ngClass]="cx('thumbnailNextIcon')" />
+                        <ChevronDownIcon *ngIf="isVertical" [ngClass]="cx('thumbnailNextIcon')" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
                 </button>
             </div>
         </div>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [GalleriaStyle]
                 }]
-        }], ctorParameters: () => [{ type: Galleria }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { containerId: [{
+        }], ctorParameters: () => [{ type: Galleria }], propDecorators: { containerId: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -2405,11 +1850,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }] } });
 class GalleriaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrap], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, CommonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrap], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: GalleriaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GalleriaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrap],