primevue 3.20.0 → 3.22.0

package/galleria/galleria.js

@@ -1,13 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
+this.primevue.galleria = (function (FocusTrap, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
-    var script$4 = {
+    var script$3 = {
         name: 'GalleriaItem',
         emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
         props: {
@@ -46,6 +47,10 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             templates: {
                 type: null,
                 default: null
+            },
+            id: {
+                type: String,
+                default: null
             }
         },
         mounted() {
@@ -98,10 +103,21 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                     this.$emit('update:activeIndex', index);
                 }
             },
-            onIndicatorKeyDown(index) {
-                this.stopSlideShow();
+            onIndicatorKeyDown(event, index) {
+                switch (event.code) {
+                    case 'Enter':
+                    case 'Space':
+                        this.stopSlideShow();
 
-                this.$emit('update:activeIndex', index);
+                        this.$emit('update:activeIndex', index);
+                        event.preventDefault();
+                        break;
+
+                    case 'ArrowDown':
+                    case 'ArrowUp':
+                        event.preventDefault();
+                        break;
+                }
             },
             isIndicatorItemActive(index) {
                 return this.activeIndex === index;
@@ -111,6 +127,12 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             },
             isNavForwardDisabled() {
                 return !this.circular && this.activeIndex === this.value.length - 1;
+            },
+            ariaSlideNumber(value) {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
+            },
+            ariaPageLabel(value) {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
             }
         },
         computed: {
@@ -132,6 +154,9 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                         'p-disabled': this.isNavForwardDisabled()
                     }
                 ];
+            },
+            ariaSlideLabel() {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
             }
         },
         directives: {
@@ -139,15 +164,15 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
         }
     };
 
-    const _hoisted_1$2 = { class: "p-galleria-item-wrapper" };
+    const _hoisted_1$3 = { class: "p-galleria-item-wrapper" };
     const _hoisted_2$2 = { class: "p-galleria-item-container" };
     const _hoisted_3$2 = ["disabled"];
     const _hoisted_4$2 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-galleria-item-prev-icon pi pi-chevron-left" }, null, -1);
     const _hoisted_5$2 = [
       _hoisted_4$2
     ];
-    const _hoisted_6$1 = { class: "p-galleria-item" };
-    const _hoisted_7 = ["disabled"];
+    const _hoisted_6$2 = ["id", "aria-label", "aria-roledescription"];
+    const _hoisted_7$1 = ["disabled"];
     const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-galleria-item-next-icon pi pi-chevron-right" }, null, -1);
     const _hoisted_9 = [
       _hoisted_8
@@ -160,7 +185,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
       key: 0,
       class: "p-galleria-indicators p-reset"
     };
-    const _hoisted_12 = ["onClick", "onMouseenter", "onKeydown"];
+    const _hoisted_12 = ["aria-label", "aria-selected", "aria-controls", "onClick", "onMouseenter", "onKeydown"];
     const _hoisted_13 = {
       key: 0,
       type: "button",
@@ -171,7 +196,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
         vue.createElementVNode("div", _hoisted_2$2, [
           ($props.showItemNavigators)
             ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -184,14 +209,20 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_6$1, [
+          vue.createElementVNode("div", {
+            id: $props.id + '_item_' + $props.activeIndex,
+            class: "p-galleria-item",
+            role: "group",
+            "aria-label": $options.ariaSlideNumber($props.activeIndex + 1),
+            "aria-roledescription": $options.ariaSlideLabel
+          }, [
             ($props.templates.item)
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                   key: 0,
                   item: $options.activeItem
                 }, null, 8, ["item"]))
               : vue.createCommentVNode("", true)
-          ]),
+          ], 8, _hoisted_6$2),
           ($props.showItemNavigators)
             ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                 key: 1,
@@ -199,7 +230,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                 class: vue.normalizeClass($options.navForwardClass),
                 onClick: _cache[1] || (_cache[1] = $event => ($options.navForward($event))),
                 disabled: $options.isNavForwardDisabled()
-              }, _hoisted_9, 10, _hoisted_7)), [
+              }, _hoisted_9, 10, _hoisted_7$1)), [
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true),
@@ -219,11 +250,14 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (item, index) => {
                 return (vue.openBlock(), vue.createElementBlock("li", {
                   key: `p-galleria-indicator-${index}`,
+                  class: vue.normalizeClass(['p-galleria-indicator', { 'p-highlight': $options.isIndicatorItemActive(index) }]),
                   tabindex: "0",
+                  "aria-label": $options.ariaPageLabel(index + 1),
+                  "aria-selected": $props.activeIndex === index,
+                  "aria-controls": $props.id + '_item_' + index,
                   onClick: $event => ($options.onIndicatorClick(index)),
                   onMouseenter: $event => ($options.onIndicatorMouseEnter(index)),
-                  onKeydown: vue.withKeys($event => ($options.onIndicatorKeyDown(index)), ["enter"]),
-                  class: vue.normalizeClass(['p-galleria-indicator', { 'p-highlight': $options.isIndicatorItemActive(index) }])
+                  onKeydown: $event => ($options.onIndicatorKeyDown($event, index))
                 }, [
                   (!$props.templates['indicator'])
                     ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_13))
@@ -241,9 +275,9 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
       ]))
     }
 
-    script$4.render = render$3;
+    script$3.render = render$3;
 
-    var script$3 = {
+    var script$2 = {
         name: 'GalleriaThumbnails',
         emits: ['stop-slideshow', 'update:activeIndex'],
         props: {
@@ -290,6 +324,14 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             templates: {
                 type: null,
                 default: null
+            },
+            prevButtonProps: {
+                type: null,
+                default: null
+            },
+            nextButtonProps: {
+                type: null,
+                default: null
             }
         },
         startPos: null,
@@ -458,6 +500,86 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                     this.$emit('update:activeIndex', selectedItemIndex);
                 }
             },
+            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;
+                }
+            },
+            onRightKey() {
+                const indicators = utils.DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+                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 = utils.DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+                const activeIndex = this.findFocusedIndicatorIndex();
+
+                this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+            },
+            onTabKey() {
+                const indicators = [...utils.DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')];
+                const highlightedIndex = indicators.findIndex((ind) => utils.DomHandler.hasClass(ind, 'p-galleria-thumbnail-item-current'));
+
+                const activeIndicator = utils.DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [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 = [...utils.DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')];
+                const activeIndicator = utils.DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [tabindex="0"]');
+
+                return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+            },
+            changedFocusedIndicator(prevInd, nextInd) {
+                const indicators = utils.DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+
+                indicators[prevInd].children[0].tabIndex = '-1';
+                indicators[nextInd].children[0].tabIndex = '0';
+                indicators[nextInd].children[0].focus();
+            },
             onTransitionEnd() {
                 if (this.$refs.itemsContainer) {
                     utils.DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
@@ -591,6 +713,9 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             },
             isItemActive(index) {
                 return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
+            },
+            ariaPageLabel(value) {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
             }
         },
         computed: {
@@ -627,6 +752,12 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                         'pi-chevron-down': this.isVertical
                     }
                 ];
+            },
+            ariaPrevButtonLabel() {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;
+            },
+            ariaNextButtonLabel() {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
             }
         },
         directives: {
@@ -634,29 +765,31 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
         }
     };
 
-    const _hoisted_1$1 = { class: "p-galleria-thumbnail-wrapper" };
+    const _hoisted_1$2 = { class: "p-galleria-thumbnail-wrapper" };
     const _hoisted_2$1 = { class: "p-galleria-thumbnail-container" };
-    const _hoisted_3$1 = ["disabled"];
-    const _hoisted_4$1 = ["tabindex", "onClick", "onKeydown"];
-    const _hoisted_5$1 = ["disabled"];
+    const _hoisted_3$1 = ["disabled", "aria-label"];
+    const _hoisted_4$1 = ["aria-selected", "aria-controls", "onKeydown"];
+    const _hoisted_5$1 = ["tabindex", "aria-label", "aria-current", "onClick"];
+    const _hoisted_6$1 = ["disabled", "aria-label"];
 
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
         vue.createElementVNode("div", _hoisted_2$1, [
           ($props.showThumbnailNavigators)
-            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 key: 0,
-                class: vue.normalizeClass($options.navBackwardClass),
-                onClick: _cache[0] || (_cache[0] = $event => ($options.navBackward($event))),
+                class: $options.navBackwardClass,
                 disabled: $options.isNavBackwardDisabled(),
-                type: "button"
-              }, [
+                type: "button",
+                "aria-label": $options.ariaPrevButtonLabel,
+                onClick: _cache[0] || (_cache[0] = $event => ($options.navBackward($event)))
+              }, $props.prevButtonProps), [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass($options.navBackwardIconClass)
                 }, null, 2)
-              ], 10, _hoisted_3$1)), [
+              ], 16, _hoisted_3$1)), [
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true),
@@ -667,6 +800,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             vue.createElementVNode("div", {
               ref: "itemsContainer",
               class: "p-galleria-thumbnail-items",
+              role: "tablist",
               onTransitionend: _cache[1] || (_cache[1] = (...args) => ($options.onTransitionEnd && $options.onTransitionEnd(...args))),
               onTouchstart: _cache[2] || (_cache[2] = $event => ($options.onTouchStart($event))),
               onTouchmove: _cache[3] || (_cache[3] = $event => ($options.onTouchMove($event))),
@@ -683,13 +817,18 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                                     'p-galleria-thumbnail-item-start': $options.firstItemAciveIndex() === index,
                                     'p-galleria-thumbnail-item-end': $options.lastItemActiveIndex() === index
                                 }
-                            ])
+                            ]),
+                  role: "tab",
+                  "aria-selected": $props.activeIndex === index,
+                  "aria-controls": $props.containerId + '_item_' + index,
+                  onKeydown: $event => ($options.onThumbnailKeydown($event, index))
                 }, [
                   vue.createElementVNode("div", {
                     class: "p-galleria-thumbnail-item-content",
-                    tabindex: $options.isItemActive(index) ? 0 : null,
-                    onClick: $event => ($options.onItemClick(index)),
-                    onKeydown: vue.withKeys($event => ($options.onItemClick(index)), ["enter"])
+                    tabindex: $props.activeIndex === index ? '0' : '-1',
+                    "aria-label": $options.ariaPageLabel(index + 1),
+                    "aria-current": $props.activeIndex === index ? 'page' : undefined,
+                    onClick: $event => ($options.onItemClick(index))
                   }, [
                     ($props.templates.thumbnail)
                       ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.thumbnail), {
@@ -697,23 +836,24 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                           item: item
                         }, null, 8, ["item"]))
                       : vue.createCommentVNode("", true)
-                  ], 40, _hoisted_4$1)
-                ], 2))
+                  ], 8, _hoisted_5$1)
+                ], 42, _hoisted_4$1))
               }), 128))
             ], 544)
           ], 4),
           ($props.showThumbnailNavigators)
-            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 key: 1,
-                class: vue.normalizeClass($options.navForwardClass),
-                onClick: _cache[5] || (_cache[5] = $event => ($options.navForward($event))),
+                class: $options.navForwardClass,
                 disabled: $options.isNavForwardDisabled(),
-                type: "button"
-              }, [
+                type: "button",
+                "aria-label": $options.ariaNextButtonLabel,
+                onClick: _cache[5] || (_cache[5] = $event => ($options.navForward($event)))
+              }, $props.nextButtonProps), [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass($options.navForwardIconClass)
                 }, null, 2)
-              ], 10, _hoisted_5$1)), [
+              ], 16, _hoisted_6$1)), [
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true)
@@ -721,59 +861,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
       ]))
     }
 
-    script$3.render = render$2;
-
-    var script$2 = {
-        functional: true,
-        props: {
-            item: {
-                type: null,
-                default: null
-            },
-            index: {
-                type: Number,
-                default: 0
-            },
-            templates: {
-                type: null,
-                default: null
-            },
-            type: {
-                type: String,
-                default: null
-            }
-        },
-        render(createElement, context) {
-            const { item, index, templates, type } = context.props;
-            const template = templates && templates[type];
-
-            if (template) {
-                let content;
-
-                switch (type) {
-                    case 'item':
-                    case 'caption':
-                    case 'thumbnail':
-                        content = template({
-                            item
-                        });
-                        break;
-                    case 'indicator':
-                        content = template({
-                            index
-                        });
-                        break;
-                    default:
-                        content = template({});
-                        break;
-                }
-
-                return content ? [content] : null;
-            }
-
-            return null;
-        }
-    };
+    script$2.render = render$2;
 
     var script$1 = {
         name: 'GalleriaContent',
@@ -855,29 +943,32 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                     indicatorPosClass,
                     this.$attrs.containerClass
                 ];
+            },
+            closeAriaLabel() {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
             }
         },
         components: {
-            GalleriaItem: script$4,
-            GalleriaThumbnails: script$3,
-            GalleriaItemSlot: script$2
+            GalleriaItem: script$3,
+            GalleriaThumbnails: script$2
         },
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1 = ["id"];
-    const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-galleria-close-icon pi pi-times" }, null, -1);
-    const _hoisted_3 = [
-      _hoisted_2
+    const _hoisted_1$1 = ["id"];
+    const _hoisted_2 = ["aria-label"];
+    const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-galleria-close-icon pi pi-times" }, null, -1);
+    const _hoisted_4 = [
+      _hoisted_3
     ];
-    const _hoisted_4 = {
+    const _hoisted_5 = {
       key: 1,
       class: "p-galleria-header"
     };
-    const _hoisted_5 = { class: "p-galleria-content" };
-    const _hoisted_6 = {
+    const _hoisted_6 = ["aria-live"];
+    const _hoisted_7 = {
       key: 2,
       class: "p-galleria-footer"
     };
@@ -888,29 +979,35 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (_ctx.$attrs.value && _ctx.$attrs.value.length > 0)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             id: $data.id,
-            class: vue.normalizeClass($options.galleriaClass),
-            style: vue.normalizeStyle(_ctx.$attrs.containerStyle)
-          }, [
+            class: $options.galleriaClass,
+            style: _ctx.$attrs.containerStyle
+          }, _ctx.$attrs.containerProps), [
             (_ctx.$attrs.fullScreen)
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
+                  autofocus: "",
                   type: "button",
                   class: "p-galleria-close p-link",
+                  "aria-label": $options.closeAriaLabel,
                   onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('mask-hide')))
-                }, _hoisted_3)), [
+                }, _hoisted_4, 8, _hoisted_2)), [
                   [_directive_ripple]
                 ])
               : vue.createCommentVNode("", true),
             (_ctx.$attrs.templates && _ctx.$attrs.templates['header'])
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
                   (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$attrs.templates['header'])))
                 ]))
               : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", {
+              class: "p-galleria-content",
+              "aria-live": _ctx.$attrs.autoPlay ? 'polite' : 'off'
+            }, [
               vue.createVNode(_component_GalleriaItem, {
+                id: $data.id,
                 activeIndex: $data.activeIndex,
                 "onUpdate:activeIndex": _cache[1] || (_cache[1] = $event => (($data.activeIndex) = $event)),
                 slideShowActive: $data.slideShowActive,
@@ -924,7 +1021,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                 autoPlay: _ctx.$attrs.autoPlay,
                 onStartSlideshow: $options.startSlideShow,
                 onStopSlideshow: $options.stopSlideShow
-              }, null, 8, ["activeIndex", "slideShowActive", "value", "circular", "templates", "showIndicators", "changeItemOnIndicatorHover", "showItemNavigators", "autoPlay", "onStartSlideshow", "onStopSlideshow"]),
+              }, null, 8, ["id", "activeIndex", "slideShowActive", "value", "circular", "templates", "showIndicators", "changeItemOnIndicatorHover", "showItemNavigators", "autoPlay", "onStartSlideshow", "onStopSlideshow"]),
               (_ctx.$attrs.showThumbnails)
                 ? (vue.openBlock(), vue.createBlock(_component_GalleriaThumbnails, {
                     key: 0,
@@ -941,16 +1038,18 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                     isVertical: $options.isVertical(),
                     contentHeight: _ctx.$attrs.verticalThumbnailViewPortHeight,
                     showThumbnailNavigators: _ctx.$attrs.showThumbnailNavigators,
+                    prevButtonProps: _ctx.$attrs.prevButtonProps,
+                    nextButtonProps: _ctx.$attrs.nextButtonProps,
                     onStopSlideshow: $options.stopSlideShow
-                  }, null, 8, ["activeIndex", "slideShowActive", "containerId", "value", "templates", "numVisible", "responsiveOptions", "circular", "isVertical", "contentHeight", "showThumbnailNavigators", "onStopSlideshow"]))
+                  }, null, 8, ["activeIndex", "slideShowActive", "containerId", "value", "templates", "numVisible", "responsiveOptions", "circular", "isVertical", "contentHeight", "showThumbnailNavigators", "prevButtonProps", "nextButtonProps", "onStopSlideshow"]))
                 : vue.createCommentVNode("", true)
-            ]),
+            ], 8, _hoisted_6),
             (_ctx.$attrs.templates && _ctx.$attrs.templates['footer'])
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
                   (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$attrs.templates['footer'])))
                 ]))
               : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1))
+          ], 16, _hoisted_1$1))
         : vue.createCommentVNode("", true)
     }
 
@@ -1049,8 +1148,26 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                 type: String,
                 default: null
             },
-            containerStyle: null,
-            containerClass: null
+            containerStyle: {
+                type: null,
+                default: null
+            },
+            containerClass: {
+                type: null,
+                default: null
+            },
+            containerProps: {
+                type: null,
+                default: null
+            },
+            prevButtonProps: {
+                type: null,
+                default: null
+            },
+            nextButtonProps: {
+                type: null,
+                default: null
+            }
         },
         container: null,
         mask: null,
@@ -1083,6 +1200,7 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             onEnter(el) {
                 this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
                 utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+                this.focus();
             },
             onBeforeLeave() {
                 utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
@@ -1105,6 +1223,13 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
             },
             maskRef(el) {
                 this.mask = el;
+            },
+            focus() {
+                let focusTarget = this.container.$el.querySelector('[autofocus]');
+
+                if (focusTarget) {
+                    focusTarget.focus();
+                }
             }
         },
         computed: {
@@ -1122,12 +1247,18 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
         components: {
             GalleriaContent: script$1,
             Portal: Portal__default["default"]
+        },
+        directives: {
+            focustrap: FocusTrap__default["default"]
         }
     };
 
+    const _hoisted_1 = ["role", "aria-modal"];
+
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_GalleriaContent = vue.resolveComponent("GalleriaContent");
       const _component_Portal = vue.resolveComponent("Portal");
+      const _directive_focustrap = vue.resolveDirective("focustrap");
 
       return ($props.fullScreen)
         ? (vue.openBlock(), vue.createBlock(_component_Portal, { key: 0 }, {
@@ -1136,7 +1267,9 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                 ? (vue.openBlock(), vue.createElementBlock("div", {
                     key: 0,
                     ref: $options.maskRef,
-                    class: vue.normalizeClass($options.maskContentClass)
+                    class: vue.normalizeClass($options.maskContentClass),
+                    role: $props.fullScreen ? 'dialog' : 'region',
+                    "aria-modal": $props.fullScreen ? 'true' : undefined
                   }, [
                     vue.createVNode(vue.Transition, {
                       name: "p-galleria",
@@ -1148,19 +1281,21 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
                     }, {
                       default: vue.withCtx(() => [
                         ($props.visible)
-                          ? (vue.openBlock(), vue.createBlock(_component_GalleriaContent, vue.mergeProps({
+                          ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_GalleriaContent, vue.mergeProps({
                               key: 0,
                               ref: $options.containerRef
                             }, _ctx.$props, {
                               onMaskHide: $options.maskHide,
                               templates: _ctx.$slots,
                               onActiveitemChange: $options.onActiveItemChange
-                            }), null, 16, ["onMaskHide", "templates", "onActiveitemChange"]))
+                            }), null, 16, ["onMaskHide", "templates", "onActiveitemChange"])), [
+                              [_directive_focustrap]
+                            ])
                           : vue.createCommentVNode("", true)
                       ]),
                       _: 1
                     }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onAfterLeave"])
-                  ], 2))
+                  ], 10, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
             _: 1
@@ -1198,11 +1333,11 @@ this.primevue.galleria = (function (utils, Ripple, vue, Portal) {
       }
     }
 
-    var css_248z = "\n.p-galleria-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-item-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    position: relative;\n}\n.p-galleria-item-container {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    height: 100%;\n}\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-galleria-item {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: 100%;\n    width: 100%;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    -webkit-transition: opacity 0.2s ease-in-out;\n    transition: opacity 0.2s ease-in-out;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    overflow: auto;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    -ms-flex-item-align: center;\n        align-self: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-thumbnail-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n    width: 100%;\n}\n.p-galleria-thumbnail-items {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    -webkit-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-galleria-indicator > button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-galleria-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
+    var css_248z = "\n.p-galleria-content {\n    display: flex;\n    flex-direction: column;\n}\n.p-galleria-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n.p-galleria-item-container {\n    position: relative;\n    display: flex;\n    height: 100%;\n}\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-galleria-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex-shrink: 0;\n}\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    align-self: center;\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-galleria-thumbnail-container {\n    display: flex;\n    flex-direction: row;\n}\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n    width: 100%;\n}\n.p-galleria-thumbnail-items {\n    display: flex;\n}\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    transition: opacity 0.3s;\n}\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    order: 2;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    order: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    flex-direction: column;\n    flex-grow: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-galleria-indicator > button {\n    display: inline-flex;\n    align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    flex-direction: row;\n    align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    order: 2;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    order: 1;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    flex-direction: column;\n}\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: flex;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-start;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-galleria-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(primevue.utils, primevue.ripple, Vue, primevue.portal);
+})(primevue.focustrap, primevue.portal, primevue.utils, primevue.ripple, Vue);