vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5592 - For Media section components

pull/5677/head
tugcekucukoglu 2024-04-30 12:39:18 +03:00
parent 527bae0beb
commit 2c45303235
12 changed files with 82 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/carousel/Carousel.d.ts vendored
View File

@ -76,31 +76,31 @@ export interface CarouselPassThroughOptions {
* Used to pass attributes to the header's DOM element. * Used to pass attributes to the header's DOM element.
*/ */
header?: CarouselPassThroughOptionType; header?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the content container's DOM element.
*/
contentContainer?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: CarouselPassThroughOptionType; content?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the container's DOM element.
*/
container?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>; previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the items content's DOM element. * Used to pass attributes to the viewport's DOM element.
*/ */
itemsContent?: CarouselPassThroughOptionType; viewport?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the items container's DOM element. * Used to pass attributes to the items list's DOM element.
*/ */
itemsContainer?: CarouselPassThroughOptionType; itemList?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the item cloned's DOM element. * Used to pass attributes to the item clone's DOM element.
*/ */
itemCloned?: CarouselPassThroughOptionType; itemClone?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
@ -111,9 +111,9 @@ export interface CarouselPassThroughOptions {
*/ */
nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>; nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the indicators's DOM element. * Used to pass attributes to the indicator list's DOM element.
*/ */
indicators?: CarouselPassThroughOptionType; indicatorList?: CarouselPassThroughOptionType;
/** /**
* Used to pass attributes to the indicator's DOM element. * Used to pass attributes to the indicator's DOM element.
*/ */

17
components/lib/carousel/Carousel.vue
View File

@ -3,8 +3,8 @@
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')"> <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')"> <div v-if="!empty" :class="[cx('contentContainer'), containerClass]" v-bind="ptm('contentContainer')">
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')"> <div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
<Button <Button
v-if="showNavigators" v-if="showNavigators"
:class="cx('previousButton')" :class="cx('previousButton')"
@ -22,15 +22,14 @@
</slot> </slot>
</template> </template>
</Button> </Button>
<div :class="cx('viewport')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('viewport')">
<div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')"> <div ref="itemsContainer" :class="cx('itemList')" @transitionend="onTransitionEnd" v-bind="ptm('itemList')">
<div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
<template v-if="isCircular()"> <template v-if="isCircular()">
<div <div
v-for="(item, index) of value.slice(-1 * d_numVisible)" v-for="(item, index) of value.slice(-1 * d_numVisible)"
:key="index + '_scloned'" :key="index + '_scloned'"
:class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" :class="cx('itemClone', { index, value, totalShiftedItems, d_numVisible })"
v-bind="ptm('itemCloned')" v-bind="ptm('itemClone')"
:data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible" :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
:data-p-carousel-item-start="index === 0" :data-p-carousel-item-start="index === 0"
:data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index" :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
@ -54,7 +53,7 @@
<slot name="item" :data="item" :index="index"></slot> <slot name="item" :data="item" :index="index"></slot>
</div> </div>
<template v-if="isCircular()"> <template v-if="isCircular()">
<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')"> <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemClone', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemClone')">
<slot name="item" :data="item" :index="index"></slot> <slot name="item" :data="item" :index="index"></slot>
</div> </div>
</template> </template>
@ -78,7 +77,7 @@
</template> </template>
</Button> </Button>
</div> </div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')"> <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i"> <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
<button <button
:class="cx('indicatorButton')" :class="cx('indicatorButton')"

12
components/lib/carousel/style/CarouselStyle.js
View File

@ -9,17 +9,17 @@ const classes = {
} }
], ],
header: 'p-carousel-header', header: 'p-carousel-header',
content: 'p-carousel-content-container', contentContainer: 'p-carousel-content-container',
container: 'p-carousel-content', content: 'p-carousel-content',
previousButton: ({ instance }) => [ previousButton: ({ instance }) => [
'p-carousel-prev-button', 'p-carousel-prev-button',
{ {
'p-disabled': instance.backwardIsDisabled 'p-disabled': instance.backwardIsDisabled
} }
], ],
itemsContent: 'p-carousel-viewport', viewport: 'p-carousel-viewport',
itemsContainer: 'p-carousel-items', itemList: 'p-carousel-item-list',
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [ itemClone: ({ index, value, totalShiftedItems, d_numVisible }) => [
'p-carousel-item p-carousel-item-clone', 'p-carousel-item p-carousel-item-clone',
{ {
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible, 'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
@ -41,7 +41,7 @@ const classes = {
'p-disabled': instance.forwardIsDisabled 'p-disabled': instance.forwardIsDisabled
} }
], ],
indicators: 'p-carousel-indicators', indicatorList: 'p-carousel-indicator-list',
indicator: ({ instance, index }) => [ indicator: ({ instance, index }) => [
'p-carousel-indicator', 'p-carousel-indicator',
{ {

26
components/lib/galleria/Galleria.d.ts vendored
View File

@ -90,14 +90,14 @@ export interface GalleriaPassThroughOptions {
* Used to pass attributes to the footer's DOM element. * Used to pass attributes to the footer's DOM element.
*/ */
footer?: GalleriaPassThroughOptionType; footer?: GalleriaPassThroughOptionType;
/**
* Used to pass attributes to the item wrapper's DOM element.
*/
itemWrapper?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the item container's DOM element. * Used to pass attributes to the item container's DOM element.
*/ */
itemContainer?: GalleriaPassThroughOptionType; itemsContainer?: GalleriaPassThroughOptionType;
/**
* Used to pass attributes to the items' DOM element.
*/
items?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the previous item button's DOM element. * Used to pass attributes to the previous item button's DOM element.
*/ */
@ -123,9 +123,9 @@ export interface GalleriaPassThroughOptions {
*/ */
caption?: GalleriaPassThroughOptionType; caption?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the indicators's DOM element. * Used to pass attributes to the indicator list's DOM element.
*/ */
indicators?: GalleriaPassThroughOptionType; indicatorList?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the indicator's DOM element. * Used to pass attributes to the indicator's DOM element.
*/ */
@ -135,13 +135,13 @@ export interface GalleriaPassThroughOptions {
*/ */
indicatorButton?: GalleriaPassThroughOptionType; indicatorButton?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the thumbnail wrapper's DOM element. * Used to pass attributes to the thumbnails' DOM element.
*/ */
thumbnailWrapper?: GalleriaPassThroughOptionType; thumbnails?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the thumbnail container's DOM element. * Used to pass attributes to the thumbnail content's DOM element.
*/ */
thumbnailContainer?: GalleriaPassThroughOptionType; thumbnailContent?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the previous thumbnail button's DOM element. * Used to pass attributes to the previous thumbnail button's DOM element.
*/ */
@ -163,9 +163,9 @@ export interface GalleriaPassThroughOptions {
*/ */
thumbnailItem?: GalleriaPassThroughOptionType; thumbnailItem?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the thumbnail item content's DOM element. * Used to pass attributes to the thumbnail's DOM element.
*/ */
thumbnailItemContent?: GalleriaPassThroughOptionType; thumbnail?: GalleriaPassThroughOptionType;
/** /**
* Used to pass attributes to the next thumbnail button's DOM element. * Used to pass attributes to the next thumbnail button's DOM element.
*/ */

6
components/lib/galleria/GalleriaItem.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')"> <div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')">
<div :class="cx('itemContainer')" v-bind="ptm('itemContainer')"> <div :class="cx('items')" v-bind="ptm('items')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator"> <button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" /> <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
</button> </button>
@ -14,7 +14,7 @@
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" /> <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
</div> </div>
</div> </div>
<ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicators')" v-bind="ptm('indicators')"> <ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicatorList')" v-bind="ptm('indicatorList')">
<li <li
v-for="(item, index) of value" v-for="(item, index) of value"
:key="`p-galleria-indicator-${index}`" :key="`p-galleria-indicator-${index}`"

8
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="cx('thumbnailWrapper')" v-bind="ptm('thumbnailWrapper')"> <div :class="cx('thumbnails')" v-bind="ptm('thumbnails')">
<div :class="cx('thumbnailContainer')" v-bind="ptm('thumbnailContainer')"> <div :class="cx('thumbnailContent')" v-bind="ptm('thumbnailContent')">
<button <button
v-if="showThumbnailNavigators" v-if="showThumbnailNavigators"
v-ripple v-ripple
@ -41,12 +41,12 @@
:data-p-galleria-thumbnail-item-end="lastItemActiveIndex() === index" :data-p-galleria-thumbnail-item-end="lastItemActiveIndex() === index"
> >
<div <div
:class="cx('thumbnailItemContent')" :class="cx('thumbnail')"
:tabindex="activeIndex === index ? '0' : '-1'" :tabindex="activeIndex === index ? '0' : '-1'"
:aria-label="ariaPageLabel(index + 1)" :aria-label="ariaPageLabel(index + 1)"
:aria-current="activeIndex === index ? 'page' : undefined" :aria-current="activeIndex === index ? 'page' : undefined"
@click="onItemClick(index)" @click="onItemClick(index)"
v-bind="ptm('thumbnailItemContent')" v-bind="ptm('thumbnail')"
> >
<component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" /> <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
</div> </div>

12
components/lib/galleria/style/GalleriaStyle.js
View File

@ -27,8 +27,8 @@ const classes = {
header: 'p-galleria-header', header: 'p-galleria-header',
content: 'p-galleria-content', content: 'p-galleria-content',
footer: 'p-galleria-footer', footer: 'p-galleria-footer',
itemWrapper: 'p-galleria-items-container', itemsContainer: 'p-galleria-items-container',
itemContainer: 'p-galleria-items', items: 'p-galleria-items',
previousItemButton: ({ instance }) => [ previousItemButton: ({ instance }) => [
'p-galleria-prev-button p-galleria-navigate-button', 'p-galleria-prev-button p-galleria-navigate-button',
{ {
@ -45,7 +45,7 @@ const classes = {
], ],
nextItemIcon: 'p-galleria-next-icon', nextItemIcon: 'p-galleria-next-icon',
caption: 'p-galleria-caption', caption: 'p-galleria-caption',
indicators: 'p-galleria-indicators', indicatorList: 'p-galleria-indicator-list',
indicator: ({ instance, index }) => [ indicator: ({ instance, index }) => [
'p-galleria-indicator', 'p-galleria-indicator',
{ {
@ -53,8 +53,8 @@ const classes = {
} }
], ],
indicatorButton: 'p-galleria-indicator-button', indicatorButton: 'p-galleria-indicator-button',
thumbnailWrapper: 'p-galleria-thumbnails', thumbnails: 'p-galleria-thumbnails',
thumbnailContainer: 'p-galleria-thumbnails-content', thumbnailContent: 'p-galleria-thumbnails-content',
previousThumbnailButton: ({ instance }) => [ previousThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-prev-button', 'p-galleria-thumbnail-prev-button',
{ {
@ -73,7 +73,7 @@ const classes = {
'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index 'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
} }
], ],
thumbnailItemContent: 'p-galleria-thumbnail', thumbnail: 'p-galleria-thumbnail',
nextThumbnailButton: ({ instance }) => [ nextThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-next-button', 'p-galleria-thumbnail-next-button',
{ {

16
components/lib/image/Image.d.ts vendored
View File

@ -60,13 +60,13 @@ export interface ImagePassThroughOptions {
*/ */
image?: ImagePassThroughOptionType; image?: ImagePassThroughOptionType;
/** /**
* Used to pass attributes to the button's DOM element. * Used to pass attributes to the preview mask's DOM element.
*/ */
button?: ImagePassThroughOptionType; previewMask?: ImagePassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the preview icon's DOM element.
*/ */
icon?: ImagePassThroughOptionType; previewIcon?: ImagePassThroughOptionType;
/** /**
* Used to pass attributes to the mask's DOM element. * Used to pass attributes to the mask's DOM element.
*/ */
@ -116,13 +116,13 @@ export interface ImagePassThroughOptions {
*/ */
closeIcon?: ImagePassThroughOptionType; closeIcon?: ImagePassThroughOptionType;
/** /**
* Used to pass attributes to the preview container's DOM element. * Used to pass attributes to the original container's DOM element.
*/ */
previewContainer?: ImagePassThroughOptionType; originalContainer?: ImagePassThroughOptionType;
/** /**
* Used to pass attributes to the preview's DOM element. * Used to pass attributes to the original's DOM element.
*/ */
preview?: ImagePassThroughOptionType; original?: ImagePassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

12
components/lib/image/Image.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<span :class="containerClass" :style="style" v-bind="ptmi('root')"> <span :class="containerClass" :style="style" v-bind="ptmi('root')">
<slot name="image" :onError="onError" :errorCallback="onError"> <slot name="image" :onError="onError" :errorCallback="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" /> <img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot> </slot>
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }"> <button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('previewMask')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('previewMask') }">
<slot name="indicatoricon"> <slot name="indicatoricon">
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" /> <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
</slot> </slot>
</button> </button>
<Portal> <Portal>
@ -42,9 +42,9 @@
</button> </button>
</div> </div>
<transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')"> <transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="previewVisible" v-bind="ptm('previewContainer')"> <div v-if="previewVisible" v-bind="ptm('originalContainer')">
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick"> <slot name="preview" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
<img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" /> <img :src="$attrs.src" :class="cx('original')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('original')" />
</slot> </slot>
</div> </div>
</transition> </transition>

7
components/lib/image/style/ImageStyle.js
View File

@ -7,9 +7,8 @@ const classes = {
'p-image-preview': props.preview 'p-image-preview': props.preview
} }
], ],
image: ({ props }) => props.image, previewMask: 'p-image-preview-mask',
button: 'p-image-preview-mask', previewIcon: 'p-image-preview-icon',
icon: 'p-image-preview-icon',
mask: 'p-image-mask p-component-overlay p-component-overlay-enter', mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
toolbar: 'p-image-toolbar', toolbar: 'p-image-toolbar',
rotateRightButton: 'p-image-action p-image-rotate-right-button', rotateRightButton: 'p-image-action p-image-rotate-right-button',
@ -27,7 +26,7 @@ const classes = {
} }
], ],
closeButton: 'p-image-action p-image-close-button', closeButton: 'p-image-action p-image-close-button',
preview: 'p-image-original' original: 'p-image-original'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

6
components/lib/themes/primeone/base/carousel/index.js
View File

@ -21,7 +21,7 @@ export default {
width: 100%; width: 100%;
} }
.p-carousel-items { .p-carousel-item-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -31,7 +31,7 @@ export default {
align-self: center; align-self: center;
} }
.p-carousel-indicators { .p-carousel-indicator-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -76,7 +76,7 @@ export default {
flex-direction: column; flex-direction: column;
} }
.p-carousel-vertical .p-carousel-items { .p-carousel-vertical .p-carousel-item-list {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }

20
components/lib/themes/primeone/base/galleria/index.js
View File

@ -214,7 +214,7 @@ export default {
height: 100%; height: 100%;
} }
.p-galleria-indicators { .p-galleria-indicator-list {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -264,17 +264,17 @@ export default {
order: 2; order: 2;
} }
.p-galleria-indicators-left .p-galleria-indicators, .p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-top .p-galleria-indicators { .p-galleria-indicators-top .p-galleria-indicator-list {
order: 1; order: 1;
} }
.p-galleria-indicators-left .p-galleria-indicators, .p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-right .p-galleria-indicators { .p-galleria-indicators-right .p-galleria-indicator-list {
flex-direction: column; flex-direction: column;
} }
.p-galleria-inset-indicators .p-galleria-indicators { .p-galleria-inset-indicators .p-galleria-indicator-list {
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 1; z-index: 1;
@ -293,28 +293,28 @@ export default {
background: ${dt('galleria.inset.indicator.active.background')}; background: ${dt('galleria.inset.indicator.active.background')};
} }
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
} }
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
right: 0; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
align-items: flex-end; align-items: flex-end;
} }
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
align-items: flex-end; align-items: flex-end;
} }
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;