1622 lines
198 KiB
JavaScript
1622 lines
198 KiB
JavaScript
|
import { animate, style, transition, trigger } from '@angular/animations';
|
||
|
|
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
|
||
|
|
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Inject, Input, NgModule, Output, PLATFORM_ID, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';
|
||
|
|
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
import { ChevronLeftIcon } from 'primeng/icons/chevronleft';
|
||
|
|
import { ChevronRightIcon } from 'primeng/icons/chevronright';
|
||
|
|
import { TimesIcon } from 'primeng/icons/times';
|
||
|
|
import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';
|
||
|
|
import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
|
||
|
|
import { RippleModule } from 'primeng/ripple';
|
||
|
|
import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
|
||
|
|
import { FocusTrapModule } from 'primeng/focustrap';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "primeng/api";
|
||
|
|
import * as i2 from "@angular/common";
|
||
|
|
import * as i3 from "primeng/ripple";
|
||
|
|
import * as i4 from "primeng/focustrap";
|
||
|
|
/**
|
||
|
|
* Galleria is an advanced content gallery component.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
export class Galleria {
|
||
|
|
document;
|
||
|
|
platformId;
|
||
|
|
element;
|
||
|
|
cd;
|
||
|
|
config;
|
||
|
|
/**
|
||
|
|
* Index of the first item.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get activeIndex() {
|
||
|
|
return this._activeIndex;
|
||
|
|
}
|
||
|
|
set activeIndex(activeIndex) {
|
||
|
|
this._activeIndex = activeIndex;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Whether to display the component on fullscreen.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
fullScreen = false;
|
||
|
|
/**
|
||
|
|
* Unique identifier of the element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
id;
|
||
|
|
/**
|
||
|
|
* An array of objects to display.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
value;
|
||
|
|
/**
|
||
|
|
* Number of items per page.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
numVisible = 3;
|
||
|
|
/**
|
||
|
|
* An array of options for responsive design.
|
||
|
|
* @see {GalleriaResponsiveOptions}
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
responsiveOptions;
|
||
|
|
/**
|
||
|
|
* Whether to display navigation buttons in item section.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showItemNavigators = false;
|
||
|
|
/**
|
||
|
|
* Whether to display navigation buttons in thumbnail container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showThumbnailNavigators = true;
|
||
|
|
/**
|
||
|
|
* Whether to display navigation buttons on item hover.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showItemNavigatorsOnHover = false;
|
||
|
|
/**
|
||
|
|
* When enabled, item is changed on indicator hover.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
changeItemOnIndicatorHover = false;
|
||
|
|
/**
|
||
|
|
* Defines if scrolling would be infinite.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
circular = false;
|
||
|
|
/**
|
||
|
|
* Items are displayed with a slideshow in autoPlay mode.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
autoPlay = false;
|
||
|
|
/**
|
||
|
|
* When enabled, autorun should stop by click.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
shouldStopAutoplayByClick = true;
|
||
|
|
/**
|
||
|
|
* Time in milliseconds to scroll items.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
transitionInterval = 4000;
|
||
|
|
/**
|
||
|
|
* Whether to display thumbnail container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showThumbnails = true;
|
||
|
|
/**
|
||
|
|
* Position of thumbnails.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
thumbnailsPosition = 'bottom';
|
||
|
|
/**
|
||
|
|
* Height of the viewport in vertical thumbnail.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
verticalThumbnailViewPortHeight = '300px';
|
||
|
|
/**
|
||
|
|
* Whether to display indicator container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showIndicators = false;
|
||
|
|
/**
|
||
|
|
* When enabled, indicator container is displayed on item container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showIndicatorsOnItem = false;
|
||
|
|
/**
|
||
|
|
* Position of indicators.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
indicatorsPosition = 'bottom';
|
||
|
|
/**
|
||
|
|
* Base zIndex value to use in layering.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
baseZIndex = 0;
|
||
|
|
/**
|
||
|
|
* Style class of the mask on fullscreen mode.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
maskClass;
|
||
|
|
/**
|
||
|
|
* Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
containerClass;
|
||
|
|
/**
|
||
|
|
* Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
containerStyle;
|
||
|
|
/**
|
||
|
|
* Transition options of the show animation.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
||
|
|
/**
|
||
|
|
* Transition options of the hide animation.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
||
|
|
/**
|
||
|
|
* Specifies the visibility of the mask on fullscreen mode.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get visible() {
|
||
|
|
return this._visible;
|
||
|
|
}
|
||
|
|
set visible(visible) {
|
||
|
|
this._visible = visible;
|
||
|
|
if (this._visible && !this.maskVisible) {
|
||
|
|
this.maskVisible = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Callback to invoke on active index change.
|
||
|
|
* @param {number} number - Active index.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
activeIndexChange = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke on visiblity change.
|
||
|
|
* @param {boolean} boolean - Visible value.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
visibleChange = new EventEmitter();
|
||
|
|
mask;
|
||
|
|
container;
|
||
|
|
templates;
|
||
|
|
_visible = false;
|
||
|
|
_activeIndex = 0;
|
||
|
|
headerFacet;
|
||
|
|
footerFacet;
|
||
|
|
indicatorFacet;
|
||
|
|
captionFacet;
|
||
|
|
closeIconTemplate;
|
||
|
|
previousThumbnailIconTemplate;
|
||
|
|
nextThumbnailIconTemplate;
|
||
|
|
itemPreviousIconTemplate;
|
||
|
|
itemNextIconTemplate;
|
||
|
|
maskVisible = false;
|
||
|
|
numVisibleLimit = 0;
|
||
|
|
constructor(document, platformId, element, cd, config) {
|
||
|
|
this.document = document;
|
||
|
|
this.platformId = platformId;
|
||
|
|
this.element = element;
|
||
|
|
this.cd = cd;
|
||
|
|
this.config = config;
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates?.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'header':
|
||
|
|
this.headerFacet = item.template;
|
||
|
|
break;
|
||
|
|
case 'footer':
|
||
|
|
this.footerFacet = item.template;
|
||
|
|
break;
|
||
|
|
case 'indicator':
|
||
|
|
this.indicatorFacet = item.template;
|
||
|
|
break;
|
||
|
|
case 'closeicon':
|
||
|
|
this.closeIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'itemnexticon':
|
||
|
|
this.itemNextIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'itempreviousicon':
|
||
|
|
this.itemPreviousIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'previousthumbnailicon':
|
||
|
|
this.previousThumbnailIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'nextthumbnailicon':
|
||
|
|
this.nextThumbnailIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'caption':
|
||
|
|
this.captionFacet = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnChanges(simpleChanges) {
|
||
|
|
if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
|
||
|
|
this.numVisibleLimit = simpleChanges.value.currentValue.length;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.numVisibleLimit = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onMaskHide() {
|
||
|
|
this.visible = false;
|
||
|
|
this.visibleChange.emit(false);
|
||
|
|
}
|
||
|
|
onActiveItemChange(index) {
|
||
|
|
if (this.activeIndex !== index) {
|
||
|
|
this.activeIndex = index;
|
||
|
|
this.activeIndexChange.emit(index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onAnimationStart(event) {
|
||
|
|
switch (event.toState) {
|
||
|
|
case 'visible':
|
||
|
|
this.enableModality();
|
||
|
|
setTimeout(() => {
|
||
|
|
DomHandler.focus(DomHandler.findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]'));
|
||
|
|
}, 25);
|
||
|
|
break;
|
||
|
|
case 'void':
|
||
|
|
DomHandler.addClass(this.mask?.nativeElement, 'p-component-overlay-leave');
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onAnimationEnd(event) {
|
||
|
|
switch (event.toState) {
|
||
|
|
case 'void':
|
||
|
|
this.disableModality();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
enableModality() {
|
||
|
|
DomHandler.blockBodyScroll();
|
||
|
|
this.cd.markForCheck();
|
||
|
|
if (this.mask) {
|
||
|
|
ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
disableModality() {
|
||
|
|
DomHandler.unblockBodyScroll();
|
||
|
|
this.maskVisible = false;
|
||
|
|
this.cd.markForCheck();
|
||
|
|
if (this.mask) {
|
||
|
|
ZIndexUtils.clear(this.mask.nativeElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
if (this.fullScreen) {
|
||
|
|
DomHandler.removeClass(this.document.body, 'p-overflow-hidden');
|
||
|
|
}
|
||
|
|
if (this.mask) {
|
||
|
|
this.disableModality();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Galleria, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: Galleria, 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" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
||
|
|
<div *ngIf="fullScreen; else windowed" #container>
|
||
|
|
<div
|
||
|
|
*ngIf="maskVisible"
|
||
|
|
#mask
|
||
|
|
[ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
|
||
|
|
[class]="maskClass"
|
||
|
|
[attr.role]="fullScreen ? 'dialog' : 'region'"
|
||
|
|
[attr.aria-modal]="fullScreen ? 'true' : undefined"
|
||
|
|
>
|
||
|
|
<p-galleriaContent
|
||
|
|
*ngIf="visible"
|
||
|
|
[@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
|
||
|
|
(@animation.start)="onAnimationStart($event)"
|
||
|
|
(@animation.done)="onAnimationEnd($event)"
|
||
|
|
[value]="value"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[numVisible]="numVisibleLimit || numVisible"
|
||
|
|
(maskHide)="onMaskHide()"
|
||
|
|
(activeItemChange)="onActiveItemChange($event)"
|
||
|
|
[ngStyle]="containerStyle"
|
||
|
|
></p-galleriaContent>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ng-template #windowed>
|
||
|
|
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
|
||
|
|
</ng-template>
|
||
|
|
`, isInline: true, styles: ["@layer primeng{.p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{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-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{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;background-color:transparent;
|
||
|
|
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 }))])
|
||
|
|
])
|
||
|
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Galleria, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'p-galleria', template: `
|
||
|
|
<div *ngIf="fullScreen; else windowed" #container>
|
||
|
|
<div
|
||
|
|
*ngIf="maskVisible"
|
||
|
|
#mask
|
||
|
|
[ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
|
||
|
|
[class]="maskClass"
|
||
|
|
[attr.role]="fullScreen ? 'dialog' : 'region'"
|
||
|
|
[attr.aria-modal]="fullScreen ? 'true' : undefined"
|
||
|
|
>
|
||
|
|
<p-galleriaContent
|
||
|
|
*ngIf="visible"
|
||
|
|
[@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
|
||
|
|
(@animation.start)="onAnimationStart($event)"
|
||
|
|
(@animation.done)="onAnimationEnd($event)"
|
||
|
|
[value]="value"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[numVisible]="numVisibleLimit || numVisible"
|
||
|
|
(maskHide)="onMaskHide()"
|
||
|
|
(activeItemChange)="onActiveItemChange($event)"
|
||
|
|
[ngStyle]="containerStyle"
|
||
|
|
></p-galleriaContent>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ng-template #windowed>
|
||
|
|
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
|
||
|
|
</ng-template>
|
||
|
|
`, 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 }))])
|
||
|
|
])
|
||
|
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}, styles: ["@layer primeng{.p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{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-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{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;background-color:transparent;
|
||
|
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [PLATFORM_ID]
|
||
|
|
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }], propDecorators: { activeIndex: [{
|
||
|
|
type: Input
|
||
|
|
}], fullScreen: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], id: [{
|
||
|
|
type: Input
|
||
|
|
}], value: [{
|
||
|
|
type: Input
|
||
|
|
}], numVisible: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], responsiveOptions: [{
|
||
|
|
type: Input
|
||
|
|
}], showItemNavigators: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], showThumbnailNavigators: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], showItemNavigatorsOnHover: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], changeItemOnIndicatorHover: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], circular: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], autoPlay: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], shouldStopAutoplayByClick: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], transitionInterval: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], showThumbnails: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], thumbnailsPosition: [{
|
||
|
|
type: Input
|
||
|
|
}], verticalThumbnailViewPortHeight: [{
|
||
|
|
type: Input
|
||
|
|
}], showIndicators: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], showIndicatorsOnItem: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], indicatorsPosition: [{
|
||
|
|
type: Input
|
||
|
|
}], baseZIndex: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], maskClass: [{
|
||
|
|
type: Input
|
||
|
|
}], containerClass: [{
|
||
|
|
type: Input
|
||
|
|
}], containerStyle: [{
|
||
|
|
type: Input
|
||
|
|
}], showTransitionOptions: [{
|
||
|
|
type: Input
|
||
|
|
}], hideTransitionOptions: [{
|
||
|
|
type: Input
|
||
|
|
}], visible: [{
|
||
|
|
type: Input
|
||
|
|
}], activeIndexChange: [{
|
||
|
|
type: Output
|
||
|
|
}], visibleChange: [{
|
||
|
|
type: Output
|
||
|
|
}], mask: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['mask']
|
||
|
|
}], container: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['container']
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}] } });
|
||
|
|
export class GalleriaContent {
|
||
|
|
galleria;
|
||
|
|
cd;
|
||
|
|
differs;
|
||
|
|
config;
|
||
|
|
get activeIndex() {
|
||
|
|
return this._activeIndex;
|
||
|
|
}
|
||
|
|
set activeIndex(activeIndex) {
|
||
|
|
this._activeIndex = activeIndex;
|
||
|
|
}
|
||
|
|
value = [];
|
||
|
|
numVisible;
|
||
|
|
maskHide = new EventEmitter();
|
||
|
|
activeItemChange = new EventEmitter();
|
||
|
|
closeButton;
|
||
|
|
id;
|
||
|
|
_activeIndex = 0;
|
||
|
|
slideShowActive = true;
|
||
|
|
interval;
|
||
|
|
styleClass;
|
||
|
|
differ;
|
||
|
|
constructor(galleria, cd, differs, config) {
|
||
|
|
this.galleria = galleria;
|
||
|
|
this.cd = cd;
|
||
|
|
this.differs = differs;
|
||
|
|
this.config = config;
|
||
|
|
this.id = this.galleria.id || UniqueComponentId();
|
||
|
|
this.differ = this.differs.find(this.galleria).create();
|
||
|
|
}
|
||
|
|
ngDoCheck() {
|
||
|
|
if (isPlatformBrowser(this.galleria.platformId)) {
|
||
|
|
const changes = this.differ.diff(this.galleria);
|
||
|
|
if (changes && changes.forEachItem.length > 0) {
|
||
|
|
// Because we change the properties of the parent component,
|
||
|
|
// and the children take our entity from the injector.
|
||
|
|
// We can tell the children to redraw themselves when we change the properties of the parent component.
|
||
|
|
// Since we have an onPush strategy
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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(() => {
|
||
|
|
let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
|
||
|
|
this.onActiveIndexChange(activeIndex);
|
||
|
|
this.activeIndex = activeIndex;
|
||
|
|
}, this.galleria.transitionInterval);
|
||
|
|
this.slideShowActive = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stopSlideShow() {
|
||
|
|
if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.interval) {
|
||
|
|
clearInterval(this.interval);
|
||
|
|
}
|
||
|
|
this.slideShowActive = false;
|
||
|
|
}
|
||
|
|
getPositionClass(preClassName, position) {
|
||
|
|
const positions = ['top', 'left', 'bottom', 'right'];
|
||
|
|
const pos = positions.find((item) => item === position);
|
||
|
|
return pos ? `${preClassName}-${pos}` : '';
|
||
|
|
}
|
||
|
|
isVertical() {
|
||
|
|
return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
|
||
|
|
}
|
||
|
|
onActiveIndexChange(index) {
|
||
|
|
if (this.activeIndex !== index) {
|
||
|
|
this.activeIndex = index;
|
||
|
|
this.activeItemChange.emit(this.activeIndex);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
closeAriaLabel() {
|
||
|
|
return this.config.translation.aria ? this.config.translation.aria.close : undefined;
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: 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-indicator-onitem': this.galleria.showIndicatorsOnItem,
|
||
|
|
'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
|
||
|
|
}"
|
||
|
|
[ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
|
||
|
|
[class]="galleriaClass()"
|
||
|
|
pFocusTrap
|
||
|
|
>
|
||
|
|
<button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
|
||
|
|
<TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
|
||
|
|
<p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
<div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
|
||
|
|
<p-galleriaItem
|
||
|
|
[id]="id"
|
||
|
|
[value]="value"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[circular]="galleria.circular"
|
||
|
|
[templates]="galleria.templates"
|
||
|
|
(onActiveIndexChange)="onActiveIndexChange($event)"
|
||
|
|
[showIndicators]="galleria.showIndicators"
|
||
|
|
[changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
|
||
|
|
[indicatorFacet]="galleria.indicatorFacet"
|
||
|
|
[captionFacet]="galleria.captionFacet"
|
||
|
|
[showItemNavigators]="galleria.showItemNavigators"
|
||
|
|
[autoPlay]="galleria.autoPlay"
|
||
|
|
[slideShowActive]="slideShowActive"
|
||
|
|
(startSlideShow)="startSlideShow()"
|
||
|
|
(stopSlideShow)="stopSlideShow()"
|
||
|
|
></p-galleriaItem>
|
||
|
|
|
||
|
|
<p-galleriaThumbnails
|
||
|
|
*ngIf="galleria.showThumbnails"
|
||
|
|
[containerId]="id"
|
||
|
|
[value]="value"
|
||
|
|
(onActiveIndexChange)="onActiveIndexChange($event)"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[templates]="galleria.templates"
|
||
|
|
[numVisible]="numVisible"
|
||
|
|
[responsiveOptions]="galleria.responsiveOptions"
|
||
|
|
[circular]="galleria.circular"
|
||
|
|
[isVertical]="isVertical()"
|
||
|
|
[contentHeight]="galleria.verticalThumbnailViewPortHeight"
|
||
|
|
[showThumbnailNavigators]="galleria.showThumbnailNavigators"
|
||
|
|
[slideShowActive]="slideShowActive"
|
||
|
|
(stopSlideShow)="stopSlideShow()"
|
||
|
|
></p-galleriaThumbnails>
|
||
|
|
</div>
|
||
|
|
<div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
|
||
|
|
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => i4.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: "17.3.7", ngImport: i0, type: GalleriaContent, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-galleriaContent',
|
||
|
|
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-indicator-onitem': this.galleria.showIndicatorsOnItem,
|
||
|
|
'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
|
||
|
|
}"
|
||
|
|
[ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
|
||
|
|
[class]="galleriaClass()"
|
||
|
|
pFocusTrap
|
||
|
|
>
|
||
|
|
<button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
|
||
|
|
<TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
|
||
|
|
<p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
<div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
|
||
|
|
<p-galleriaItem
|
||
|
|
[id]="id"
|
||
|
|
[value]="value"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[circular]="galleria.circular"
|
||
|
|
[templates]="galleria.templates"
|
||
|
|
(onActiveIndexChange)="onActiveIndexChange($event)"
|
||
|
|
[showIndicators]="galleria.showIndicators"
|
||
|
|
[changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
|
||
|
|
[indicatorFacet]="galleria.indicatorFacet"
|
||
|
|
[captionFacet]="galleria.captionFacet"
|
||
|
|
[showItemNavigators]="galleria.showItemNavigators"
|
||
|
|
[autoPlay]="galleria.autoPlay"
|
||
|
|
[slideShowActive]="slideShowActive"
|
||
|
|
(startSlideShow)="startSlideShow()"
|
||
|
|
(stopSlideShow)="stopSlideShow()"
|
||
|
|
></p-galleriaItem>
|
||
|
|
|
||
|
|
<p-galleriaThumbnails
|
||
|
|
*ngIf="galleria.showThumbnails"
|
||
|
|
[containerId]="id"
|
||
|
|
[value]="value"
|
||
|
|
(onActiveIndexChange)="onActiveIndexChange($event)"
|
||
|
|
[activeIndex]="activeIndex"
|
||
|
|
[templates]="galleria.templates"
|
||
|
|
[numVisible]="numVisible"
|
||
|
|
[responsiveOptions]="galleria.responsiveOptions"
|
||
|
|
[circular]="galleria.circular"
|
||
|
|
[isVertical]="isVertical()"
|
||
|
|
[contentHeight]="galleria.verticalThumbnailViewPortHeight"
|
||
|
|
[showThumbnailNavigators]="galleria.showThumbnailNavigators"
|
||
|
|
[slideShowActive]="slideShowActive"
|
||
|
|
(stopSlideShow)="stopSlideShow()"
|
||
|
|
></p-galleriaThumbnails>
|
||
|
|
</div>
|
||
|
|
<div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
|
||
|
|
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i1.PrimeNGConfig }], propDecorators: { activeIndex: [{
|
||
|
|
type: Input
|
||
|
|
}], value: [{
|
||
|
|
type: Input
|
||
|
|
}], numVisible: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], maskHide: [{
|
||
|
|
type: Output
|
||
|
|
}], activeItemChange: [{
|
||
|
|
type: Output
|
||
|
|
}], closeButton: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['closeButton']
|
||
|
|
}] } });
|
||
|
|
export class GalleriaItemSlot {
|
||
|
|
templates;
|
||
|
|
index;
|
||
|
|
get item() {
|
||
|
|
return this._item;
|
||
|
|
}
|
||
|
|
set item(item) {
|
||
|
|
this._item = item;
|
||
|
|
if (this.templates) {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
if (item.getType() === this.type) {
|
||
|
|
switch (this.type) {
|
||
|
|
case 'item':
|
||
|
|
case 'caption':
|
||
|
|
case 'thumbnail':
|
||
|
|
this.context = { $implicit: this.item };
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
type;
|
||
|
|
contentTemplate;
|
||
|
|
context;
|
||
|
|
_item;
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates?.forEach((item) => {
|
||
|
|
if (item.getType() === this.type) {
|
||
|
|
switch (this.type) {
|
||
|
|
case 'item':
|
||
|
|
case 'caption':
|
||
|
|
case 'thumbnail':
|
||
|
|
this.context = { $implicit: this.item };
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'indicator':
|
||
|
|
this.context = { $implicit: this.index };
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.context = {};
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: GalleriaItemSlot, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
|
||
|
|
<ng-container *ngIf="contentTemplate">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaItemSlot, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-galleriaItemSlot',
|
||
|
|
template: `
|
||
|
|
<ng-container *ngIf="contentTemplate">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
`,
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
}]
|
||
|
|
}], propDecorators: { templates: [{
|
||
|
|
type: Input
|
||
|
|
}], index: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], item: [{
|
||
|
|
type: Input
|
||
|
|
}], type: [{
|
||
|
|
type: Input
|
||
|
|
}] } });
|
||
|
|
export class GalleriaItem {
|
||
|
|
galleria;
|
||
|
|
id;
|
||
|
|
circular = false;
|
||
|
|
value;
|
||
|
|
showItemNavigators = false;
|
||
|
|
showIndicators = true;
|
||
|
|
slideShowActive = true;
|
||
|
|
changeItemOnIndicatorHover = true;
|
||
|
|
autoPlay = false;
|
||
|
|
templates;
|
||
|
|
indicatorFacet;
|
||
|
|
captionFacet;
|
||
|
|
startSlideShow = new EventEmitter();
|
||
|
|
stopSlideShow = new EventEmitter();
|
||
|
|
onActiveIndexChange = new EventEmitter();
|
||
|
|
get activeIndex() {
|
||
|
|
return this._activeIndex;
|
||
|
|
}
|
||
|
|
set activeIndex(activeIndex) {
|
||
|
|
this._activeIndex = activeIndex;
|
||
|
|
}
|
||
|
|
get activeItem() {
|
||
|
|
return this.value && this.value[this._activeIndex];
|
||
|
|
}
|
||
|
|
_activeIndex = 0;
|
||
|
|
constructor(galleria) {
|
||
|
|
this.galleria = galleria;
|
||
|
|
}
|
||
|
|
ngOnChanges({ autoPlay }) {
|
||
|
|
if (autoPlay?.currentValue) {
|
||
|
|
this.startSlideShow.emit();
|
||
|
|
}
|
||
|
|
if (autoPlay && autoPlay.currentValue === false) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
next() {
|
||
|
|
let nextItemIndex = this.activeIndex + 1;
|
||
|
|
let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;
|
||
|
|
this.onActiveIndexChange.emit(activeIndex);
|
||
|
|
}
|
||
|
|
prev() {
|
||
|
|
let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
|
||
|
|
let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
|
||
|
|
this.onActiveIndexChange.emit(activeIndex);
|
||
|
|
}
|
||
|
|
stopTheSlideShow() {
|
||
|
|
if (this.slideShowActive && this.stopSlideShow) {
|
||
|
|
this.stopSlideShow.emit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
navForward(e) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
this.next();
|
||
|
|
if (e && e.cancelable) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
navBackward(e) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
this.prev();
|
||
|
|
if (e && e.cancelable) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onIndicatorClick(index) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
this.onActiveIndexChange.emit(index);
|
||
|
|
}
|
||
|
|
onIndicatorMouseEnter(index) {
|
||
|
|
if (this.changeItemOnIndicatorHover) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
this.onActiveIndexChange.emit(index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onIndicatorKeyDown(event, index) {
|
||
|
|
switch (event.code) {
|
||
|
|
case 'Enter':
|
||
|
|
case 'Space':
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
this.onActiveIndexChange.emit(index);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'ArrowDown':
|
||
|
|
case 'ArrowUp':
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
isNavForwardDisabled() {
|
||
|
|
return !this.circular && this.activeIndex === this.value.length - 1;
|
||
|
|
}
|
||
|
|
isNavBackwardDisabled() {
|
||
|
|
return !this.circular && this.activeIndex === 0;
|
||
|
|
}
|
||
|
|
isIndicatorItemActive(index) {
|
||
|
|
return this.activeIndex === index;
|
||
|
|
}
|
||
|
|
ariaSlideLabel() {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : undefined;
|
||
|
|
}
|
||
|
|
ariaSlideNumber(value) {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
|
||
|
|
}
|
||
|
|
ariaPageLabel(value) {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", 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-item-wrapper">
|
||
|
|
<div class="p-galleria-item-container">
|
||
|
|
<button
|
||
|
|
*ngIf="showItemNavigators"
|
||
|
|
type="button"
|
||
|
|
role="navigation"
|
||
|
|
[ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
|
||
|
|
(click)="navBackward($event)"
|
||
|
|
[disabled]="isNavBackwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-item-prev-icon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div [id]="id + '_item_' + activeIndex" role="group" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()" [style.width]="'100%'">
|
||
|
|
<p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="showItemNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
|
||
|
|
(click)="navForward($event)"
|
||
|
|
[disabled]="isNavForwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
role="navigation"
|
||
|
|
>
|
||
|
|
<ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-item-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>
|
||
|
|
<ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
|
||
|
|
<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-highlight': 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-link" *ngIf="!indicatorFacet"></button>
|
||
|
|
<p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
`, 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: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { 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: "17.3.7", ngImport: i0, type: GalleriaItem, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-galleriaItem',
|
||
|
|
template: `
|
||
|
|
<div class="p-galleria-item-wrapper">
|
||
|
|
<div class="p-galleria-item-container">
|
||
|
|
<button
|
||
|
|
*ngIf="showItemNavigators"
|
||
|
|
type="button"
|
||
|
|
role="navigation"
|
||
|
|
[ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
|
||
|
|
(click)="navBackward($event)"
|
||
|
|
[disabled]="isNavBackwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
>
|
||
|
|
<ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-item-prev-icon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div [id]="id + '_item_' + activeIndex" role="group" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()" [style.width]="'100%'">
|
||
|
|
<p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="showItemNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
|
||
|
|
(click)="navForward($event)"
|
||
|
|
[disabled]="isNavForwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
role="navigation"
|
||
|
|
>
|
||
|
|
<ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-item-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>
|
||
|
|
<ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
|
||
|
|
<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-highlight': 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-link" *ngIf="!indicatorFacet"></button>
|
||
|
|
<p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
|
||
|
|
type: Input
|
||
|
|
}], circular: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], value: [{
|
||
|
|
type: Input
|
||
|
|
}], showItemNavigators: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], showIndicators: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], slideShowActive: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], changeItemOnIndicatorHover: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], autoPlay: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], templates: [{
|
||
|
|
type: Input
|
||
|
|
}], indicatorFacet: [{
|
||
|
|
type: Input
|
||
|
|
}], captionFacet: [{
|
||
|
|
type: Input
|
||
|
|
}], startSlideShow: [{
|
||
|
|
type: Output
|
||
|
|
}], stopSlideShow: [{
|
||
|
|
type: Output
|
||
|
|
}], onActiveIndexChange: [{
|
||
|
|
type: Output
|
||
|
|
}], activeIndex: [{
|
||
|
|
type: Input
|
||
|
|
}] } });
|
||
|
|
export class GalleriaThumbnails {
|
||
|
|
galleria;
|
||
|
|
document;
|
||
|
|
platformId;
|
||
|
|
renderer;
|
||
|
|
cd;
|
||
|
|
containerId;
|
||
|
|
value;
|
||
|
|
isVertical = false;
|
||
|
|
slideShowActive = false;
|
||
|
|
circular = false;
|
||
|
|
responsiveOptions;
|
||
|
|
contentHeight = '300px';
|
||
|
|
showThumbnailNavigators = true;
|
||
|
|
templates;
|
||
|
|
onActiveIndexChange = new EventEmitter();
|
||
|
|
stopSlideShow = new EventEmitter();
|
||
|
|
itemsContainer;
|
||
|
|
get numVisible() {
|
||
|
|
return this._numVisible;
|
||
|
|
}
|
||
|
|
set numVisible(numVisible) {
|
||
|
|
this._numVisible = numVisible;
|
||
|
|
this._oldNumVisible = this.d_numVisible;
|
||
|
|
this.d_numVisible = numVisible;
|
||
|
|
}
|
||
|
|
get activeIndex() {
|
||
|
|
return this._activeIndex;
|
||
|
|
}
|
||
|
|
set activeIndex(activeIndex) {
|
||
|
|
this._oldactiveIndex = this._activeIndex;
|
||
|
|
this._activeIndex = activeIndex;
|
||
|
|
}
|
||
|
|
index;
|
||
|
|
startPos = null;
|
||
|
|
thumbnailsStyle = null;
|
||
|
|
sortedResponsiveOptions = null;
|
||
|
|
totalShiftedItems = 0;
|
||
|
|
page = 0;
|
||
|
|
documentResizeListener;
|
||
|
|
_numVisible = 0;
|
||
|
|
d_numVisible = 0;
|
||
|
|
_oldNumVisible = 0;
|
||
|
|
_activeIndex = 0;
|
||
|
|
_oldactiveIndex = 0;
|
||
|
|
constructor(galleria, document, platformId, renderer, cd) {
|
||
|
|
this.galleria = galleria;
|
||
|
|
this.document = document;
|
||
|
|
this.platformId = platformId;
|
||
|
|
this.renderer = renderer;
|
||
|
|
this.cd = cd;
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
this.createStyle();
|
||
|
|
if (this.responsiveOptions) {
|
||
|
|
this.bindDocumentListeners();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngAfterContentChecked() {
|
||
|
|
let totalShiftedItems = this.totalShiftedItems;
|
||
|
|
if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
|
||
|
|
if (this._activeIndex <= this.getMedianItemIndex()) {
|
||
|
|
totalShiftedItems = 0;
|
||
|
|
}
|
||
|
|
else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
|
||
|
|
totalShiftedItems = this.d_numVisible - this.value.length;
|
||
|
|
}
|
||
|
|
else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
|
||
|
|
totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex() + 1;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
totalShiftedItems = this._activeIndex * -1 + this.getMedianItemIndex();
|
||
|
|
}
|
||
|
|
if (totalShiftedItems !== this.totalShiftedItems) {
|
||
|
|
this.totalShiftedItems = totalShiftedItems;
|
||
|
|
}
|
||
|
|
if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
||
|
|
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
||
|
|
}
|
||
|
|
if (this._oldactiveIndex !== this._activeIndex) {
|
||
|
|
DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
||
|
|
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
||
|
|
}
|
||
|
|
this._oldactiveIndex = this._activeIndex;
|
||
|
|
this._oldNumVisible = this.d_numVisible;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngAfterViewInit() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
this.calculatePosition();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
createStyle() {
|
||
|
|
if (!this.thumbnailsStyle) {
|
||
|
|
this.thumbnailsStyle = this.document.createElement('style');
|
||
|
|
this.document.body.appendChild(this.thumbnailsStyle);
|
||
|
|
}
|
||
|
|
let innerHTML = `
|
||
|
|
#${this.containerId} .p-galleria-thumbnail-item {
|
||
|
|
flex: 1 0 ${100 / this.d_numVisible}%
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
if (this.responsiveOptions) {
|
||
|
|
this.sortedResponsiveOptions = [...this.responsiveOptions];
|
||
|
|
this.sortedResponsiveOptions.sort((data1, data2) => {
|
||
|
|
const value1 = data1.breakpoint;
|
||
|
|
const value2 = data2.breakpoint;
|
||
|
|
let result = null;
|
||
|
|
if (value1 == null && value2 != null)
|
||
|
|
result = -1;
|
||
|
|
else if (value1 != null && value2 == null)
|
||
|
|
result = 1;
|
||
|
|
else if (value1 == null && value2 == null)
|
||
|
|
result = 0;
|
||
|
|
else if (typeof value1 === 'string' && typeof value2 === 'string')
|
||
|
|
result = value1.localeCompare(value2, undefined, { numeric: true });
|
||
|
|
else
|
||
|
|
result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
||
|
|
return -1 * result;
|
||
|
|
});
|
||
|
|
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
||
|
|
let res = this.sortedResponsiveOptions[i];
|
||
|
|
innerHTML += `
|
||
|
|
@media screen and (max-width: ${res.breakpoint}) {
|
||
|
|
#${this.containerId} .p-galleria-thumbnail-item {
|
||
|
|
flex: 1 0 ${100 / res.numVisible}%
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.thumbnailsStyle.innerHTML = innerHTML;
|
||
|
|
}
|
||
|
|
calculatePosition() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
if (this.itemsContainer && this.sortedResponsiveOptions) {
|
||
|
|
let windowWidth = window.innerWidth;
|
||
|
|
let matchedResponsiveData = {
|
||
|
|
numVisible: this._numVisible
|
||
|
|
};
|
||
|
|
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
||
|
|
let res = this.sortedResponsiveOptions[i];
|
||
|
|
if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
||
|
|
matchedResponsiveData = res;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.d_numVisible !== matchedResponsiveData.numVisible) {
|
||
|
|
this.d_numVisible = matchedResponsiveData.numVisible;
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getTabIndex(index) {
|
||
|
|
return this.isItemActive(index) ? 0 : null;
|
||
|
|
}
|
||
|
|
navForward(e) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
let nextItemIndex = this._activeIndex + 1;
|
||
|
|
if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
|
||
|
|
this.step(-1);
|
||
|
|
}
|
||
|
|
let activeIndex = this.circular && this.value.length - 1 === this._activeIndex ? 0 : nextItemIndex;
|
||
|
|
this.onActiveIndexChange.emit(activeIndex);
|
||
|
|
if (e.cancelable) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
navBackward(e) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
|
||
|
|
let diff = prevItemIndex + this.totalShiftedItems;
|
||
|
|
if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
|
||
|
|
this.step(1);
|
||
|
|
}
|
||
|
|
let activeIndex = this.circular && this._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
|
||
|
|
this.onActiveIndexChange.emit(activeIndex);
|
||
|
|
if (e.cancelable) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onItemClick(index) {
|
||
|
|
this.stopTheSlideShow();
|
||
|
|
let selectedItemIndex = index;
|
||
|
|
if (selectedItemIndex !== this._activeIndex) {
|
||
|
|
const diff = selectedItemIndex + this.totalShiftedItems;
|
||
|
|
let dir = 0;
|
||
|
|
if (selectedItemIndex < this._activeIndex) {
|
||
|
|
dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
|
||
|
|
if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
|
||
|
|
this.step(dir);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
dir = this.getMedianItemIndex() - diff;
|
||
|
|
if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
|
||
|
|
this.step(dir);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.activeIndex = selectedItemIndex;
|
||
|
|
this.onActiveIndexChange.emit(this.activeIndex);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onThumbnailKeydown(event, index) {
|
||
|
|
if (event.code === 'Enter' || event.code === 'Space') {
|
||
|
|
this.onItemClick(index);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
switch (event.code) {
|
||
|
|
case 'ArrowRight':
|
||
|
|
this.onRightKey();
|
||
|
|
break;
|
||
|
|
case 'ArrowLeft':
|
||
|
|
this.onLeftKey();
|
||
|
|
break;
|
||
|
|
case 'Home':
|
||
|
|
this.onHomeKey();
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'End':
|
||
|
|
this.onEndKey();
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'ArrowUp':
|
||
|
|
case 'ArrowDown':
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'Tab':
|
||
|
|
this.onTabKey();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onRightKey() {
|
||
|
|
const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
|
||
|
|
const activeIndex = this.findFocusedIndicatorIndex();
|
||
|
|
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
|
||
|
|
}
|
||
|
|
onLeftKey() {
|
||
|
|
const activeIndex = this.findFocusedIndicatorIndex();
|
||
|
|
this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
|
||
|
|
}
|
||
|
|
onHomeKey() {
|
||
|
|
const activeIndex = this.findFocusedIndicatorIndex();
|
||
|
|
this.changedFocusedIndicator(activeIndex, 0);
|
||
|
|
}
|
||
|
|
onEndKey() {
|
||
|
|
const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
|
||
|
|
const activeIndex = this.findFocusedIndicatorIndex();
|
||
|
|
this.changedFocusedIndicator(activeIndex, indicators.length - 1);
|
||
|
|
}
|
||
|
|
onTabKey() {
|
||
|
|
const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
|
||
|
|
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
|
||
|
|
const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]');
|
||
|
|
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
|
||
|
|
indicators[activeIndex].children[0].tabIndex = '-1';
|
||
|
|
indicators[highlightedIndex].children[0].tabIndex = '0';
|
||
|
|
}
|
||
|
|
findFocusedIndicatorIndex() {
|
||
|
|
const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
|
||
|
|
const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
|
||
|
|
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
|
||
|
|
}
|
||
|
|
changedFocusedIndicator(prevInd, nextInd) {
|
||
|
|
const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
|
||
|
|
indicators[prevInd].children[0].tabIndex = '-1';
|
||
|
|
indicators[nextInd].children[0].tabIndex = '0';
|
||
|
|
indicators[nextInd].children[0].focus();
|
||
|
|
}
|
||
|
|
step(dir) {
|
||
|
|
let totalShiftedItems = this.totalShiftedItems + dir;
|
||
|
|
if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
|
||
|
|
totalShiftedItems = this.d_numVisible - this.value.length;
|
||
|
|
}
|
||
|
|
else if (dir > 0 && totalShiftedItems > 0) {
|
||
|
|
totalShiftedItems = 0;
|
||
|
|
}
|
||
|
|
if (this.circular) {
|
||
|
|
if (dir < 0 && this.value.length - 1 === this._activeIndex) {
|
||
|
|
totalShiftedItems = 0;
|
||
|
|
}
|
||
|
|
else if (dir > 0 && this._activeIndex === 0) {
|
||
|
|
totalShiftedItems = this.d_numVisible - this.value.length;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.itemsContainer) {
|
||
|
|
DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
||
|
|
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
||
|
|
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
||
|
|
}
|
||
|
|
this.totalShiftedItems = totalShiftedItems;
|
||
|
|
}
|
||
|
|
stopTheSlideShow() {
|
||
|
|
if (this.slideShowActive && this.stopSlideShow) {
|
||
|
|
this.stopSlideShow.emit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
changePageOnTouch(e, diff) {
|
||
|
|
if (diff < 0) {
|
||
|
|
// left
|
||
|
|
this.navForward(e);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// right
|
||
|
|
this.navBackward(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getTotalPageNumber() {
|
||
|
|
return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
|
||
|
|
}
|
||
|
|
getMedianItemIndex() {
|
||
|
|
let index = Math.floor(this.d_numVisible / 2);
|
||
|
|
return this.d_numVisible % 2 ? index : index - 1;
|
||
|
|
}
|
||
|
|
onTransitionEnd() {
|
||
|
|
if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
||
|
|
DomHandler.addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
||
|
|
this.itemsContainer.nativeElement.style.transition = '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onTouchEnd(e) {
|
||
|
|
let touchobj = e.changedTouches[0];
|
||
|
|
if (this.isVertical) {
|
||
|
|
this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onTouchMove(e) {
|
||
|
|
if (e.cancelable) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onTouchStart(e) {
|
||
|
|
let touchobj = e.changedTouches[0];
|
||
|
|
this.startPos = {
|
||
|
|
x: touchobj.pageX,
|
||
|
|
y: touchobj.pageY
|
||
|
|
};
|
||
|
|
}
|
||
|
|
isNavBackwardDisabled() {
|
||
|
|
return (!this.circular && this._activeIndex === 0) || this.value.length <= this.d_numVisible;
|
||
|
|
}
|
||
|
|
isNavForwardDisabled() {
|
||
|
|
return (!this.circular && this._activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
|
||
|
|
}
|
||
|
|
firstItemAciveIndex() {
|
||
|
|
return this.totalShiftedItems * -1;
|
||
|
|
}
|
||
|
|
lastItemActiveIndex() {
|
||
|
|
return this.firstItemAciveIndex() + this.d_numVisible - 1;
|
||
|
|
}
|
||
|
|
isItemActive(index) {
|
||
|
|
return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
|
||
|
|
}
|
||
|
|
bindDocumentListeners() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
const window = this.document.defaultView || 'window';
|
||
|
|
this.documentResizeListener = this.renderer.listen(window, 'resize', () => {
|
||
|
|
this.calculatePosition();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
unbindDocumentListeners() {
|
||
|
|
if (this.documentResizeListener) {
|
||
|
|
this.documentResizeListener();
|
||
|
|
this.documentResizeListener = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
if (this.responsiveOptions) {
|
||
|
|
this.unbindDocumentListeners();
|
||
|
|
}
|
||
|
|
if (this.thumbnailsStyle) {
|
||
|
|
this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ariaPrevButtonLabel() {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : undefined;
|
||
|
|
}
|
||
|
|
ariaNextButtonLabel() {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : undefined;
|
||
|
|
}
|
||
|
|
ariaPageLabel(value) {
|
||
|
|
return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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: "17.3.7", type: GalleriaThumbnails, 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-thumbnail-wrapper">
|
||
|
|
<div class="p-galleria-thumbnail-container">
|
||
|
|
<button
|
||
|
|
*ngIf="showThumbnailNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
|
||
|
|
(click)="navBackward($event)"
|
||
|
|
[disabled]="isNavBackwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
[attr.aria-label]="ariaPrevButtonLabel()"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!galleria.previousThumbnailIconTemplate">
|
||
|
|
<ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
|
||
|
|
<ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
|
||
|
|
</ng-container>
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
|
||
|
|
<div #itemsContainer class="p-galleria-thumbnail-items" (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
|
||
|
|
}"
|
||
|
|
[attr.aria-selected]="activeIndex === index"
|
||
|
|
[attr.aria-controls]="containerId + '_item_' + index"
|
||
|
|
[attr.data-pc-section]="'thumbnailitem'"
|
||
|
|
[attr.data-p-active]="activeIndex === index"
|
||
|
|
(keydown)="onThumbnailKeydown($event, index)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="p-galleria-thumbnail-item-content"
|
||
|
|
[attr.tabindex]="activeIndex === index ? 0 : -1"
|
||
|
|
[attr.aria-current]="activeIndex === index ? 'page' : undefined"
|
||
|
|
[attr.aria-label]="ariaPageLabel(index + 1)"
|
||
|
|
(click)="onItemClick(index)"
|
||
|
|
(touchend)="onItemClick(index)"
|
||
|
|
(keydown.enter)="onItemClick(index)"
|
||
|
|
>
|
||
|
|
<p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="showThumbnailNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
|
||
|
|
(click)="navForward($event)"
|
||
|
|
[disabled]="isNavForwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
[attr.aria-label]="ariaNextButtonLabel()"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!galleria.nextThumbnailIconTemplate">
|
||
|
|
<ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
|
||
|
|
<ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
|
||
|
|
</ng-container>
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`, 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: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { 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: "17.3.7", ngImport: i0, type: GalleriaThumbnails, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'p-galleriaThumbnails',
|
||
|
|
template: `
|
||
|
|
<div class="p-galleria-thumbnail-wrapper">
|
||
|
|
<div class="p-galleria-thumbnail-container">
|
||
|
|
<button
|
||
|
|
*ngIf="showThumbnailNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
|
||
|
|
(click)="navBackward($event)"
|
||
|
|
[disabled]="isNavBackwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
[attr.aria-label]="ariaPrevButtonLabel()"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!galleria.previousThumbnailIconTemplate">
|
||
|
|
<ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
|
||
|
|
<ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
|
||
|
|
</ng-container>
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
<div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
|
||
|
|
<div #itemsContainer class="p-galleria-thumbnail-items" (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
|
||
|
|
}"
|
||
|
|
[attr.aria-selected]="activeIndex === index"
|
||
|
|
[attr.aria-controls]="containerId + '_item_' + index"
|
||
|
|
[attr.data-pc-section]="'thumbnailitem'"
|
||
|
|
[attr.data-p-active]="activeIndex === index"
|
||
|
|
(keydown)="onThumbnailKeydown($event, index)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="p-galleria-thumbnail-item-content"
|
||
|
|
[attr.tabindex]="activeIndex === index ? 0 : -1"
|
||
|
|
[attr.aria-current]="activeIndex === index ? 'page' : undefined"
|
||
|
|
[attr.aria-label]="ariaPageLabel(index + 1)"
|
||
|
|
(click)="onItemClick(index)"
|
||
|
|
(touchend)="onItemClick(index)"
|
||
|
|
(keydown.enter)="onItemClick(index)"
|
||
|
|
>
|
||
|
|
<p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
*ngIf="showThumbnailNavigators"
|
||
|
|
type="button"
|
||
|
|
[ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
|
||
|
|
(click)="navForward($event)"
|
||
|
|
[disabled]="isNavForwardDisabled()"
|
||
|
|
pRipple
|
||
|
|
[attr.aria-label]="ariaNextButtonLabel()"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="!galleria.nextThumbnailIconTemplate">
|
||
|
|
<ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
|
||
|
|
<ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
|
||
|
|
</ng-container>
|
||
|
|
<ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate"></ng-template>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
}]
|
||
|
|
}], 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: [{
|
||
|
|
type: Input
|
||
|
|
}], value: [{
|
||
|
|
type: Input
|
||
|
|
}], isVertical: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], slideShowActive: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], circular: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], responsiveOptions: [{
|
||
|
|
type: Input
|
||
|
|
}], contentHeight: [{
|
||
|
|
type: Input
|
||
|
|
}], showThumbnailNavigators: [{
|
||
|
|
type: Input
|
||
|
|
}], templates: [{
|
||
|
|
type: Input
|
||
|
|
}], onActiveIndexChange: [{
|
||
|
|
type: Output
|
||
|
|
}], stopSlideShow: [{
|
||
|
|
type: Output
|
||
|
|
}], itemsContainer: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['itemsContainer']
|
||
|
|
}], numVisible: [{
|
||
|
|
type: Input
|
||
|
|
}], activeIndex: [{
|
||
|
|
type: Input
|
||
|
|
}] } });
|
||
|
|
export class GalleriaModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule, CommonModule, SharedModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: GalleriaModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule],
|
||
|
|
exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
|
||
|
|
declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyaWEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvZ2FsbGVyaWEvZ2FsbGVyaWEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFrQixPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRixPQUFPLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVFLE9BQU8sRUFHSCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULGVBQWUsRUFHZixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFFTCxRQUFRLEVBSVIsTUFBTSxFQUNOLFdBQVcsRUFLWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLGdCQUFnQixFQUNoQixlQUFlLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBaUIsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN6RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDaEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTlDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7Ozs7QUFDcEQ7OztHQUdHO0FBNkNILE1BQU0sT0FBTyxRQUFRO0lBb01xQjtJQUFnRDtJQUF3QjtJQUE0QjtJQUE4QjtJQW5NeEs7OztPQUdHO0lBQ0gsSUFBYSxXQUFXO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUM3QixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsV0FBVztRQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLFdBQVcsQ0FBQztJQUNwQyxDQUFDO0lBQ0Q7OztPQUdHO0lBQ3FDLFVBQVUsR0FBWSxLQUFLLENBQUM7SUFDcEU7OztPQUdHO0lBQ00sRUFBRSxDQUFxQjtJQUNoQzs7O09BR0c7SUFDTSxLQUFLLENBQW9CO0lBQ2xDOzs7T0FHRztJQUNvQyxVQUFVLEdBQVcsQ0FBQyxDQUFDO0lBQzlEOzs7O09BSUc7SUFDTSxpQkFBaUIsQ0FBMEM7SUFDcEU7OztPQUdHO0lBQ3FDLGtCQUFrQixHQUFZLEtBQUssQ0FBQztJQUM1RTs7O09BR0c7SUFDcUMsdUJBQXVCLEdBQVksSUFBSSxDQUFDO0lBQ2hGOzs7T0FHRztJQUNxQyx5QkFBeUIsR0FBWSxLQUFLLENBQUM7SUFDbkY7OztPQUdHO0lBQ3FDLDBCQUEwQixHQUFZLEtBQUssQ0FBQztJQUNwRjs7O09BR0c7SUFDcUMsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUNsRTs7O09BR0c7SUFDcUMsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUNsRTs7O09BR0c7SUFDcUMseUJBQXlCLEdBQVksSUFBSSxDQUFDO0lBQ2xGOzs7T0FHRztJQUNvQyxrQkFBa0IsR0FBVyxJQUFJLENBQUM7SUFDekU7OztPQUdHO0lBQ3FDLGNBQWMsR0FBWSxJQUFJLENBQUM7SUFDdkU7OztPQUdHO0lBQ00sa0JBQWtCLEdBQW9ELFFBQVEsQ0FBQztJQUN4Rjs7O09BR0c7SUFDTSwrQkFBK0IsR0FBVyxPQUFPLENBQUM7SUFDM0Q7OztPQUdHO0lBQ3FDLGNBQWMsR0FBWSxLQUFLLENBQUM7SUFDeEU7OztPQUdHO0lBQ3FDLG9CQUFvQixHQUFZLEtBQUssQ0FBQztJQUM5RTs7O09BR0c7SUFDTSxrQkFBa0IsR0FBb0QsUUFBUSxDQUFDO0lBQ3hGOzs7T0FHRztJQUNvQyxVQUFVLEdBQVcsQ0FBQyxDQUFDO0lBQzlEOzs7T0FHRztJQUNNLFNBQVMsQ0FBcUI7SUFDdkM7OztPQUdHO0lBQ00sY0FBYyxDQUFxQjtJQUM1Qzs7O09BR0c7SUFDTSxjQUFjLENBQThDO0lBQ3JFOzs7T0FHRztJQUNNLHFCQUFxQixHQUFXLGtDQUFrQyxDQUFDO0lBQzVFOzs7T0FHRztJQUNNLHFCQUFxQixHQUFXLGtDQUFrQyxDQUFDO0lBQzVFOzs7T0FHRztJQUNILElBQWEsT0FBTztRQUNoQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekIsQ0FBQztJQUNELElBQUksT0FBTyxDQUFDLE9BQWdCO1FBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDO1FBRXhCLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7U0FDM0I7SUFDTCxDQUFDO0lBQ0Q7Ozs7T0FJRztJQUNPLGlCQUFpQixHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO0lBQy9FOzs7O09BSUc7SUFDTyxhQUFhLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7SUFFMUQsSUFBSSxDQUF5QjtJQUV4QixTQUFTLENBQXlCO0lBRTFCLFNBQVMsQ0FBdUM7SUFFaEYsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUUxQixZQUFZLEdBQVcsQ0FBQyxDQUFDO0lBRXpCLFdBQVcsQ0FBTTtJQUVqQixXQUFXLENBQU07SUFFakIsY0FBYyxDQUFNO0lBRXBCLFlBQVksQ0FBTTtJQUVsQixpQkFBaUIsQ0FBK0I7SUFFaEQsNkJBQTZCLENBQStCO0lBRTVELHlCQUF5QixDQUErQjtJQUV4RCx3QkFBd0IsQ0FBK0I7SUFFdkQsb0JBQW9CLENBQStCO0lBRW5ELFdBQVcsR0FBWSxLQUFLLENBQUM7SUFFN0IsZUFBZSxHQUFHLENBQUMsQ0FBQztJQUVwQixZQUFzQyxRQUFrQixFQUE4QixVQUFlLEVBQVMsT0FBbUIsRUFBUyxFQUFxQixFQUFTLE1BQXFCO1FBQXZKLGFBQVEsR0FBUixRQUFRLENBQVU7UUFBOEIsZUFBVSxHQUFWLFVBQVUsQ0FBSztRQUFTLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBUyxPQUFFLEdBQUYsRUFBRSxDQUFtQjtRQUFTLFdBQU0sR0FBTixNQUFNLENBQWU7SUFBRyxDQUFDO0lBRWpNLGtCQUFrQjtRQUNkLElBQUksQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDN0IsUUFBUSxJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUU7Z0JBQ3BCLEtBQUssUUFBUTtvQkFDV
|