primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-galleria.mjs

@@ -518,6 +518,130 @@ class GalleriaStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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"] = "p-galleria-mask";
+    /**
+     * Class name of the root element
+     */
+    GalleriaClasses["root"] = "p-galleria";
+    /**
+     * Class name of the close button element
+     */
+    GalleriaClasses["closeButton"] = "p-galleria-close-button";
+    /**
+     * Class name of the close icon element
+     */
+    GalleriaClasses["closeIcon"] = "p-galleria-close-icon";
+    /**
+     * Class name of the header element
+     */
+    GalleriaClasses["header"] = "p-galleria-header";
+    /**
+     * Class name of the content element
+     */
+    GalleriaClasses["content"] = "p-galleria-content";
+    /**
+     * Class name of the footer element
+     */
+    GalleriaClasses["footer"] = "p-galleria-footer";
+    /**
+     * Class name of the items container element
+     */
+    GalleriaClasses["itemsContainer"] = "p-galleria-items-container";
+    /**
+     * Class name of the items element
+     */
+    GalleriaClasses["items"] = "p-galleria-items";
+    /**
+     * Class name of the previous item button element
+     */
+    GalleriaClasses["prevButton"] = "p-galleria-prev-button";
+    /**
+     * Class name of the previous item icon element
+     */
+    GalleriaClasses["prevIcon"] = "p-galleria-prev-icon";
+    /**
+     * Class name of the item element
+     */
+    GalleriaClasses["item"] = "p-galleria-item";
+    /**
+     * Class name of the next item button element
+     */
+    GalleriaClasses["nextButton"] = "p-galleria-next-button";
+    /**
+     * Class name of the next item icon element
+     */
+    GalleriaClasses["nextIcon"] = "p-galleria-next-icon";
+    /**
+     * Class name of the caption element
+     */
+    GalleriaClasses["caption"] = "p-galleria-caption";
+    /**
+     * Class name of the indicator list element
+     */
+    GalleriaClasses["indicatorList"] = "p-galleria-indicator-list";
+    /**
+     * Class name of the indicator element
+     */
+    GalleriaClasses["indicator"] = "p-galleria-indicator";
+    /**
+     * Class name of the indicator button element
+     */
+    GalleriaClasses["indicatorButton"] = "p-galleria-indicator-button";
+    /**
+     * Class name of the thumbnails element
+     */
+    GalleriaClasses["thumbnails"] = "p-galleria-thumbnails";
+    /**
+     * Class name of the thumbnail content element
+     */
+    GalleriaClasses["thumbnailContent"] = "p-galleria-thumbnails-content";
+    /**
+     * Class name of the previous thumbnail button element
+     */
+    GalleriaClasses["previousThumbnailButton"] = "p-galleria-thumbnail-prev-button";
+    /**
+     * Class name of the previous thumbnail icon element
+     */
+    GalleriaClasses["previousThumbnailIcon"] = "p-galleria-thumbnail-prev-icon";
+    /**
+     * Class name of the thumbnails viewport element
+     */
+    GalleriaClasses["thumbnailsViewport"] = "p-galleria-thumbnails-viewport";
+    /**
+     * Class name of the thumbnail items element
+     */
+    GalleriaClasses["thumbnailItems"] = "p-galleria-thumbnail-items";
+    /**
+     * Class name of the thumbnail item element
+     */
+    GalleriaClasses["thumbnailItem"] = "p-galleria-thumbnail-item";
+    /**
+     * Class name of the thumbnail element
+     */
+    GalleriaClasses["thumbnail"] = "p-galleria-thumbnail";
+    /**
+     * Class name of the next thumbnail button element
+     */
+    GalleriaClasses["nextThumbnailButton"] = "p-galleria-thumbnail-next-button";
+    /**
+     * Class name of the next thumbnail icon element
+     */
+    GalleriaClasses["nextThumbnailIcon"] = "p-galleria-thumbnail-next-icon";
+})(GalleriaClasses || (GalleriaClasses = {}));
 
 /**
  * Galleria is an advanced content gallery component.
@@ -1466,70 +1590,63 @@ class GalleriaItem {
             : undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: GalleriaItem, 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" }, usesOnChanges: true, ngImport: i0, template: `
-        <div class="p-galleria-items-container">
-            <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" [styleClass]="'p-galleria-prev-icon'" />
-                    <ng-template *ngTemplateOutlet="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>
-                <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" [styleClass]="'p-galleria-next-icon'" />
-                    <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
-                </button>
-                <div class="p-galleria-caption" *ngIf="captionFacet">
-                    <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
-                </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: GalleriaItem, 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" [styleClass]="'p-galleria-prev-icon'" />
+                <ng-template *ngTemplateOutlet="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>
+            <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" [styleClass]="'p-galleria-next-icon'" />
+                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
+            </button>
+            <div class="p-galleria-caption" *ngIf="captionFacet">
+                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
             </div>
-            <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
-                <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) }"
-                    [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"></button>
-                    <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
-                </li>
-            </ul>
         </div>
+        <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
+            <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) }"
+                [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"></button>
+                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+            </li>
+        </ul>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.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: "18.2.2", ngImport: i0, type: GalleriaItem, decorators: [{
@@ -1537,70 +1654,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             args: [{
                     selector: 'p-galleriaItem',
                     template: `
-        <div class="p-galleria-items-container">
-            <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" [styleClass]="'p-galleria-prev-icon'" />
-                    <ng-template *ngTemplateOutlet="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>
-                <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" [styleClass]="'p-galleria-next-icon'" />
-                    <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
-                </button>
-                <div class="p-galleria-caption" *ngIf="captionFacet">
-                    <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
-                </div>
+        <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" [styleClass]="'p-galleria-prev-icon'" />
+                <ng-template *ngTemplateOutlet="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>
+            <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" [styleClass]="'p-galleria-next-icon'" />
+                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
+            </button>
+            <div class="p-galleria-caption" *ngIf="captionFacet">
+                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
             </div>
-            <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
-                <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) }"
-                    [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"></button>
-                    <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
-                </li>
-            </ul>
         </div>
+        <ul *ngIf="showIndicators" class="p-galleria-indicator-list">
+            <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) }"
+                [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"></button>
+                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+            </li>
+        </ul>
     `,
+                    host: {
+                        class: 'p-galleria-items-container',
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
@@ -2290,5 +2403,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Galleria, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaThumbnails };
+export { Galleria, GalleriaClasses, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaStyle, GalleriaThumbnails };
 //# sourceMappingURL=primeng-galleria.mjs.map