primevue 3.34.0 → 3.35.0

package/calendar/calendar.cjs.js

@@ -32,7 +32,7 @@ function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function"
 function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$2(key) === "symbol" ? key : String(key); }
 function _toPrimitive$1(input, hint) { if (_typeof$2(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$2(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var styles = "\n.p-calendar {\n    display: inline-flex;\n    max-width: 100%;\n}\n\n.p-calendar .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n.p-calendar-w-btn .p-inputtext {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-calendar-w-btn .p-datepicker-trigger {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n/* Fluid */\n.p-fluid .p-calendar {\n    display: flex;\n}\n\n.p-fluid .p-calendar .p-inputtext {\n    width: 1%;\n}\n\n/* Datepicker */\n.p-calendar .p-datepicker {\n    min-width: 100%;\n}\n\n.p-datepicker {\n    width: auto;\n}\n\n.p-datepicker-inline {\n    display: inline-block;\n    overflow-x: auto;\n}\n\n/* Header */\n.p-datepicker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.p-datepicker-header .p-datepicker-title {\n    margin: 0 auto;\n}\n\n.p-datepicker-prev,\n.p-datepicker-next {\n    cursor: pointer;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Multiple Month DatePicker */\n.p-datepicker-multiple-month .p-datepicker-group-container {\n    display: flex;\n}\n\n.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n    flex: 1 1 auto;\n}\n\n/* DatePicker Table */\n.p-datepicker table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.p-datepicker td > span {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Month Picker */\n.p-monthpicker-month {\n    width: 33.3%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Year Picker */\n.p-yearpicker-year {\n    width: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n\n/*  Button Bar */\n.p-datepicker-buttonbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n/* Time Picker */\n.p-timepicker {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.p-timepicker button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-timepicker > div {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n\n/* Touch UI */\n.p-datepicker-touch-ui,\n.p-calendar .p-datepicker-touch-ui {\n    min-width: 80vw;\n}\n";
+var styles = "\n@layer primevue {\n    .p-calendar {\n        display: inline-flex;\n        max-width: 100%;\n    }\n    \n    .p-calendar .p-inputtext {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n    \n    .p-calendar-w-btn .p-inputtext {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n    \n    .p-calendar-w-btn .p-datepicker-trigger {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-calendar {\n        display: flex;\n    }\n    \n    .p-fluid .p-calendar .p-inputtext {\n        width: 1%;\n    }\n    \n    /* Datepicker */\n    .p-calendar .p-datepicker {\n        min-width: 100%;\n    }\n    \n    .p-datepicker {\n        width: auto;\n    }\n    \n    .p-datepicker-inline {\n        display: inline-block;\n        overflow-x: auto;\n    }\n    \n    /* Header */\n    .p-datepicker-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-datepicker-header .p-datepicker-title {\n        margin: 0 auto;\n    }\n    \n    .p-datepicker-prev,\n    .p-datepicker-next {\n        cursor: pointer;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n    \n    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n        flex: 1 1 auto;\n    }\n    \n    /* DatePicker Table */\n    .p-datepicker table {\n        width: 100%;\n        border-collapse: collapse;\n    }\n    \n    .p-datepicker td > span {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        margin: 0 auto;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Month Picker */\n    .p-monthpicker-month {\n        width: 33.3%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Year Picker */\n    .p-yearpicker-year {\n        width: 50%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /*  Button Bar */\n    .p-datepicker-buttonbar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    \n    /* Time Picker */\n    .p-timepicker {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    \n    .p-timepicker button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-timepicker > div {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n    }\n    \n    /* Touch UI */\n    .p-datepicker-touch-ui,\n    .p-calendar .p-datepicker-touch-ui {\n        min-width: 80vw;\n    }\n}\n";
 var inlineStyles = {
   root: function root(_ref) {
     var props = _ref.props;
@@ -50,7 +50,8 @@ var classes = (_classes = {
       'p-calendar-timeonly': props.timeOnly,
       'p-calendar-disabled': props.disabled,
       'p-inputwrapper-filled': props.modelValue,
-      'p-inputwrapper-focus': state.focused
+      'p-inputwrapper-focus': state.focused,
+      'p-focus': state.focused || state.overlayVisible
     }];
   },
   input: 'p-inputtext p-component',
@@ -98,7 +99,7 @@ var classes = (_classes = {
     var instance = _ref5.instance,
       date = _ref5.date;
     return [{
-      'p-highlight': instance.isSelected(date),
+      'p-highlight': instance.isSelected(date) && date.selectable,
       'p-disabled': !date.selectable
     }];
   },
@@ -1435,6 +1436,7 @@ var script = {
         this.mask.addEventListener('click', this.maskClickListener);
         document.body.appendChild(this.mask);
         utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+        document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
       }
     },
     disableModality: function disableModality() {
@@ -1466,6 +1468,7 @@ var script = {
       }
       if (!hasBlockerMasks) {
         utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        document.body.style.removeProperty('--scrollbar-width');
       }
     },
     updateCurrentMetaData: function updateCurrentMetaData() {
@@ -1776,30 +1779,35 @@ var script = {
         case 'ArrowUp':
           {
             cellContent.tabIndex = '-1';
-            var prevRow = cell.parentElement.previousElementSibling;
-            if (prevRow) {
-              var _tableRowIndex = utils.DomHandler.index(cell.parentElement);
-              var _tableRows = Array.from(cell.parentElement.parentElement.children);
-              var prevTableRows = _tableRows.slice(0, _tableRowIndex).reverse();
-              var _hasNextFocusableDate = prevTableRows.find(function (el) {
-                var focusCell = el.children[cellIndex].children[0];
-                return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
-              });
-              if (_hasNextFocusableDate) {
-                var _focusCell = _hasNextFocusableDate.children[cellIndex].children[0];
-                _focusCell.tabIndex = '0';
-                _focusCell.focus();
+            if (event.altKey) {
+              this.overlayVisible = false;
+              this.focused = true;
+            } else {
+              var prevRow = cell.parentElement.previousElementSibling;
+              if (prevRow) {
+                var _tableRowIndex = utils.DomHandler.index(cell.parentElement);
+                var _tableRows = Array.from(cell.parentElement.parentElement.children);
+                var prevTableRows = _tableRows.slice(0, _tableRowIndex).reverse();
+                var _hasNextFocusableDate = prevTableRows.find(function (el) {
+                  var focusCell = el.children[cellIndex].children[0];
+                  return !utils.DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                });
+                if (_hasNextFocusableDate) {
+                  var _focusCell = _hasNextFocusableDate.children[cellIndex].children[0];
+                  _focusCell.tabIndex = '0';
+                  _focusCell.focus();
+                } else {
+                  this.navigationState = {
+                    backward: true
+                  };
+                  this.navBackward(event);
+                }
               } else {
                 this.navigationState = {
                   backward: true
                 };
                 this.navBackward(event);
               }
-            } else {
-              this.navigationState = {
-                backward: true
-              };
-              this.navBackward(event);
             }
             event.preventDefault();
             break;
@@ -2185,14 +2193,14 @@ var script = {
       } else {
         cell = utils.DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
         if (!cell) {
-          var todayCell = utils.DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)');
-          if (todayCell) cell = todayCell;else cell = utils.DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+          var todayCell = utils.DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+          if (todayCell) cell = todayCell;else cell = utils.DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
         }
       }
       if (cell) {
         cell.tabIndex = '0';
         if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
-          cell.focus();
+          if (!this.manualInput) cell.focus();
         }
         this.preventFocus = false;
       }
@@ -2618,21 +2626,23 @@ var _hoisted_4 = ["disabled", "aria-label"];
 var _hoisted_5 = ["disabled", "aria-label"];
 var _hoisted_6 = ["disabled", "aria-label"];
 var _hoisted_7 = ["disabled", "aria-label"];
-var _hoisted_8 = ["data-p-disabled"];
-var _hoisted_9 = ["abbr"];
+var _hoisted_8 = ["disabled", "aria-label"];
+var _hoisted_9 = ["disabled", "aria-label"];
 var _hoisted_10 = ["data-p-disabled"];
-var _hoisted_11 = ["aria-label", "data-p-today", "data-p-other-month"];
-var _hoisted_12 = ["onClick", "onKeydown", "aria-selected", "aria-disabled", "data-p-disabled", "data-p-highlight"];
-var _hoisted_13 = ["onClick", "onKeydown", "data-p-disabled", "data-p-highlight"];
-var _hoisted_14 = ["onClick", "onKeydown", "data-p-disabled", "data-p-highlight"];
-var _hoisted_15 = ["aria-label"];
-var _hoisted_16 = ["aria-label"];
-var _hoisted_17 = ["aria-label", "disabled"];
-var _hoisted_18 = ["aria-label", "disabled"];
+var _hoisted_11 = ["abbr"];
+var _hoisted_12 = ["data-p-disabled"];
+var _hoisted_13 = ["aria-label", "data-p-today", "data-p-other-month"];
+var _hoisted_14 = ["onClick", "onKeydown", "aria-selected", "aria-disabled", "data-p-disabled", "data-p-highlight"];
+var _hoisted_15 = ["onClick", "onKeydown", "data-p-disabled", "data-p-highlight"];
+var _hoisted_16 = ["onClick", "onKeydown", "data-p-disabled", "data-p-highlight"];
+var _hoisted_17 = ["aria-label"];
+var _hoisted_18 = ["aria-label"];
 var _hoisted_19 = ["aria-label", "disabled"];
 var _hoisted_20 = ["aria-label", "disabled"];
 var _hoisted_21 = ["aria-label", "disabled"];
 var _hoisted_22 = ["aria-label", "disabled"];
+var _hoisted_23 = ["aria-label", "disabled"];
+var _hoisted_24 = ["aria-label", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CalendarButton = vue.resolveComponent("CalendarButton");
   var _component_Portal = vue.resolveComponent("Portal");
@@ -2694,11 +2704,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-pc-section": "dropdownbutton"
   }, {
     icon: vue.withCtx(function () {
-      return [vue.renderSlot(_ctx.$slots, "dropdownicon", {}, function () {
+      return [vue.renderSlot(_ctx.$slots, "dropdownicon", {
+        "class": vue.normalizeClass(_ctx.icon)
+      }, function () {
         return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon ? 'span' : 'CalendarIcon'), vue.mergeProps({
           "class": _ctx.icon
         }, _ctx.ptm('dropdownButton')['icon'], {
-          "data-pc-section": "icon"
+          "data-pc-section": "dropdownicon"
         }), null, 16, ["class"]))];
       })];
     }),
@@ -2710,7 +2722,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "default": vue.withCtx(function () {
       return [vue.createVNode(vue.Transition, vue.mergeProps({
         name: "p-connected-overlay",
-        onEnter: _cache[70] || (_cache[70] = function ($event) {
+        onEnter: _cache[74] || (_cache[74] = function ($event) {
           return $options.onOverlayEnter($event);
         }),
         onAfterEnter: $options.onOverlayEnterComplete,
@@ -2727,13 +2739,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             role: _ctx.inline ? null : 'dialog',
             "aria-modal": _ctx.inline ? null : 'true',
             "aria-label": _ctx.$primevue.config.locale.chooseDate,
-            onClick: _cache[67] || (_cache[67] = function () {
+            onClick: _cache[71] || (_cache[71] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
             }),
-            onKeydown: _cache[68] || (_cache[68] = function () {
+            onKeydown: _cache[72] || (_cache[72] = function () {
               return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
             }),
-            onMouseup: _cache[69] || (_cache[69] = function () {
+            onMouseup: _cache[73] || (_cache[73] = function () {
               return $options.onOverlayMouseUp && $options.onOverlayMouseUp.apply($options, arguments);
             })
           }, _objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.ptm('panel'))), [!_ctx.timeOnly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -2769,27 +2781,59 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, _ctx.ptm('previousIcon')), null, 16, ["class"]))];
             })], 16, _hoisted_4)), [[vue.vShow, _ctx.showOtherMonths ? groupIndex === 0 : false], [_directive_ripple]]), vue.createElementVNode("div", vue.mergeProps({
               "class": _ctx.cx('title')
-            }, _ctx.ptm('title')), [$data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+            }, _ctx.ptm('title')), [_ctx.$primevue.config.locale.showMonthAfterYear ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: 0
+            }, [$data.currentView !== 'year' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               key: 0,
               type: "button",
               onClick: _cache[7] || (_cache[7] = function () {
-                return $options.switchToMonthView && $options.switchToMonthView.apply($options, arguments);
+                return $options.switchToYearView && $options.switchToYearView.apply($options, arguments);
               }),
               onKeydown: _cache[8] || (_cache[8] = function () {
                 return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
               }),
+              "class": _ctx.cx('yearTitle'),
+              disabled: $options.switchViewButtonDisabled,
+              "aria-label": _ctx.$primevue.config.locale.chooseYear
+            }, _ctx.ptm('yearTitle'), {
+              "data-pc-group-section": "view"
+            }), vue.toDisplayString($options.getYear(month)), 17, _hoisted_5)) : vue.createCommentVNode("", true), $data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+              key: 1,
+              type: "button",
+              onClick: _cache[9] || (_cache[9] = function () {
+                return $options.switchToMonthView && $options.switchToMonthView.apply($options, arguments);
+              }),
+              onKeydown: _cache[10] || (_cache[10] = function () {
+                return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
+              }),
+              "class": _ctx.cx('monthTitle'),
+              disabled: $options.switchViewButtonDisabled,
+              "aria-label": _ctx.$primevue.config.locale.chooseMonth
+            }, _ctx.ptm('monthTitle'), {
+              "data-pc-group-section": "view"
+            }), vue.toDisplayString($options.getMonthName(month.month)), 17, _hoisted_6)) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: 1
+            }, [$data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+              key: 0,
+              type: "button",
+              onClick: _cache[11] || (_cache[11] = function () {
+                return $options.switchToMonthView && $options.switchToMonthView.apply($options, arguments);
+              }),
+              onKeydown: _cache[12] || (_cache[12] = function () {
+                return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
+              }),
               "class": _ctx.cx('monthTitle'),
               disabled: $options.switchViewButtonDisabled,
               "aria-label": _ctx.$primevue.config.locale.chooseMonth
             }, _ctx.ptm('monthTitle'), {
               "data-pc-group-section": "view"
-            }), vue.toDisplayString($options.getMonthName(month.month)), 17, _hoisted_5)) : vue.createCommentVNode("", true), $data.currentView !== 'year' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+            }), vue.toDisplayString($options.getMonthName(month.month)), 17, _hoisted_7)) : vue.createCommentVNode("", true), $data.currentView !== 'year' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               key: 1,
               type: "button",
-              onClick: _cache[9] || (_cache[9] = function () {
+              onClick: _cache[13] || (_cache[13] = function () {
                 return $options.switchToYearView && $options.switchToYearView.apply($options, arguments);
               }),
-              onKeydown: _cache[10] || (_cache[10] = function () {
+              onKeydown: _cache[14] || (_cache[14] = function () {
                 return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
               }),
               "class": _ctx.cx('yearTitle'),
@@ -2797,7 +2841,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-label": _ctx.$primevue.config.locale.chooseYear
             }, _ctx.ptm('yearTitle'), {
               "data-pc-group-section": "view"
-            }), vue.toDisplayString($options.getYear(month)), 17, _hoisted_6)) : vue.createCommentVNode("", true), $data.currentView === 'year' ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+            }), vue.toDisplayString($options.getYear(month)), 17, _hoisted_8)) : vue.createCommentVNode("", true)], 64)), $data.currentView === 'year' ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 2,
               "class": _ctx.cx('decadeTitle')
             }, _ctx.ptm('decadeTitle')), [vue.renderSlot(_ctx.$slots, "decade", {
@@ -2808,11 +2852,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true,
               ref: $options.nextButtonRef,
               "class": _ctx.cx('nextButton'),
-              onClick: _cache[11] || (_cache[11] = function () {
+              onClick: _cache[15] || (_cache[15] = function () {
                 return $options.onNextButtonClick && $options.onNextButtonClick.apply($options, arguments);
               }),
               type: "button",
-              onKeydown: _cache[12] || (_cache[12] = function () {
+              onKeydown: _cache[16] || (_cache[16] = function () {
                 return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
               }),
               disabled: _ctx.disabled,
@@ -2825,7 +2869,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.nextIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
                 "class": [_ctx.cx('nextIcon'), _ctx.nextIcon]
               }, _ctx.ptm('nextIcon')), null, 16, ["class"]))];
-            })], 16, _hoisted_7)), [[vue.vShow, _ctx.showOtherMonths ? _ctx.numberOfMonths === 1 ? true : groupIndex === _ctx.numberOfMonths - 1 : false], [_directive_ripple]])], 16), $data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            })], 16, _hoisted_9)), [[vue.vShow, _ctx.showOtherMonths ? _ctx.numberOfMonths === 1 ? true : groupIndex === _ctx.numberOfMonths - 1 : false], [_directive_ripple]])], 16), $data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
               "class": _ctx.cx('container')
             }, _ctx.ptm('container')), [vue.createElementVNode("table", vue.mergeProps({
@@ -2844,7 +2888,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "data-pc-group-section": "tableheadercell"
             }), [vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('weekLabel'), {
               "data-pc-group-section": "tableheadercelllabel"
-            }), vue.toDisplayString($options.weekHeaderLabel), 17)], 16, _hoisted_8)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.weekDays, function (weekDay) {
+            }), vue.toDisplayString($options.weekHeaderLabel), 17)], 16, _hoisted_10)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.weekDays, function (weekDay) {
               return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
                 key: weekDay,
                 scope: "col",
@@ -2853,7 +2897,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 "data-pc-group-section": "tableheadercell"
               }), [vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('weekDay'), {
                 "data-pc-group-section": "tableheadercelllabel"
-              }), vue.toDisplayString(weekDay), 17)], 16, _hoisted_9);
+              }), vue.toDisplayString(weekDay), 17)], 16, _hoisted_11);
             }), 128))], 16)], 16), vue.createElementVNode("tbody", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('tableBody'))), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(month.dates, function (week, i) {
               return vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                 key: week[0].day + '' + week[0].month
@@ -2876,7 +2920,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 style: {
                   "visibility": "hidden"
                 }
-              }, _ctx.ptm('weekLabel')), "0", 16)) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)], 16, _hoisted_10)], 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, function (date) {
+              }, _ctx.ptm('weekLabel')), "0", 16)) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)], 16, _hoisted_12)], 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, function (date) {
                 return vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
                   key: date.day + '' + date.month,
                   "aria-label": date.day,
@@ -2920,13 +2964,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   date: date
                 }, function () {
                   return [vue.createTextVNode(vue.toDisplayString(date.day), 1)];
-                })], 16, _hoisted_12)), [[_directive_ripple]]), $options.isSelected(date) ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                })], 16, _hoisted_14)), [[_directive_ripple]]), $options.isSelected(date) ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 0,
                   "class": "p-hidden-accessible",
                   "aria-live": "polite"
                 }, _ctx.ptm('hiddenSelectedDay'), {
                   "data-p-hidden-accessible": true
-                }), vue.toDisplayString(date.day), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_11);
+                }), vue.toDisplayString(date.day), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_13);
               }), 128))], 16);
             }), 128))], 16)], 16)], 16)) : vue.createCommentVNode("", true)], 16);
           }), 128))], 16), $data.currentView === 'month' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
@@ -2967,7 +3011,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-live": "polite"
             }, _ctx.ptm('hiddenMonth'), {
               "data-p-hidden-accessible": true
-            }), vue.toDisplayString(m.value), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_13)), [[_directive_ripple]]);
+            }), vue.toDisplayString(m.value), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_15)), [[_directive_ripple]]);
           }), 128))], 16)) : vue.createCommentVNode("", true), $data.currentView === 'year' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 1,
             "class": _ctx.cx('yearPicker')
@@ -2998,7 +3042,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-live": "polite"
             }, _ctx.ptm('hiddenYear'), {
               "data-p-hidden-accessible": true
-            }), vue.toDisplayString(y.value), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_14)), [[_directive_ripple]]);
+            }), vue.toDisplayString(y.value), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_16)), [[_directive_ripple]]);
           }), 128))], 16)) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true), (_ctx.showTime || _ctx.timeOnly) && $data.currentView === 'date' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 1,
             "class": _ctx.cx('timePicker')
@@ -3009,25 +3053,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), [vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('incrementButton'),
             "aria-label": _ctx.$primevue.config.locale.nextHour,
-            onMousedown: _cache[13] || (_cache[13] = function ($event) {
+            onMousedown: _cache[17] || (_cache[17] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, 1);
             }),
-            onMouseup: _cache[14] || (_cache[14] = function ($event) {
+            onMouseup: _cache[18] || (_cache[18] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[15] || (_cache[15] = function () {
+            onKeydown: [_cache[19] || (_cache[19] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[17] || (_cache[17] = vue.withKeys(function ($event) {
+            }), _cache[21] || (_cache[21] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, 1);
-            }, ["enter"])), _cache[18] || (_cache[18] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[22] || (_cache[22] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, 1);
             }, ["space"]))],
-            onMouseleave: _cache[16] || (_cache[16] = function ($event) {
+            onMouseleave: _cache[20] || (_cache[20] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[19] || (_cache[19] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[23] || (_cache[23] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[20] || (_cache[20] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[24] || (_cache[24] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3039,30 +3083,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('incrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_15)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('hour'), {
+          })], 16, _hoisted_17)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('hour'), {
             "data-pc-group-section": "timepickerlabel"
           }), vue.toDisplayString($options.formattedCurrentHour), 17), vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('decrementButton'),
             "aria-label": _ctx.$primevue.config.locale.prevHour,
-            onMousedown: _cache[21] || (_cache[21] = function ($event) {
+            onMousedown: _cache[25] || (_cache[25] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, -1);
             }),
-            onMouseup: _cache[22] || (_cache[22] = function ($event) {
+            onMouseup: _cache[26] || (_cache[26] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[23] || (_cache[23] = function () {
+            onKeydown: [_cache[27] || (_cache[27] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[25] || (_cache[25] = vue.withKeys(function ($event) {
+            }), _cache[29] || (_cache[29] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, -1);
-            }, ["enter"])), _cache[26] || (_cache[26] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[30] || (_cache[30] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 0, -1);
             }, ["space"]))],
-            onMouseleave: _cache[24] || (_cache[24] = function ($event) {
+            onMouseleave: _cache[28] || (_cache[28] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[27] || (_cache[27] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[31] || (_cache[31] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[28] || (_cache[28] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[32] || (_cache[32] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3074,7 +3118,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('decrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_16)), [[_directive_ripple]])], 16), vue.createElementVNode("div", vue.mergeProps({
+          })], 16, _hoisted_18)), [[_directive_ripple]])], 16), vue.createElementVNode("div", vue.mergeProps({
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {
             "data-pc-group-section": "timepickerContainer"
@@ -3087,26 +3131,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), [vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('incrementButton'),
             "aria-label": _ctx.$primevue.config.locale.nextMinute,
-            onMousedown: _cache[29] || (_cache[29] = function ($event) {
+            onMousedown: _cache[33] || (_cache[33] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, 1);
             }),
-            onMouseup: _cache[30] || (_cache[30] = function ($event) {
+            onMouseup: _cache[34] || (_cache[34] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[31] || (_cache[31] = function () {
+            onKeydown: [_cache[35] || (_cache[35] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[33] || (_cache[33] = vue.withKeys(function ($event) {
+            }), _cache[37] || (_cache[37] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, 1);
-            }, ["enter"])), _cache[34] || (_cache[34] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[38] || (_cache[38] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, 1);
             }, ["space"]))],
             disabled: _ctx.disabled,
-            onMouseleave: _cache[32] || (_cache[32] = function ($event) {
+            onMouseleave: _cache[36] || (_cache[36] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[35] || (_cache[35] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[39] || (_cache[39] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[36] || (_cache[36] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[40] || (_cache[40] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3118,31 +3162,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('incrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_17)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('minute'), {
+          })], 16, _hoisted_19)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('minute'), {
             "data-pc-group-section": "timepickerlabel"
           }), vue.toDisplayString($options.formattedCurrentMinute), 17), vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('decrementButton'),
             "aria-label": _ctx.$primevue.config.locale.prevMinute,
-            onMousedown: _cache[37] || (_cache[37] = function ($event) {
+            onMousedown: _cache[41] || (_cache[41] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, -1);
             }),
-            onMouseup: _cache[38] || (_cache[38] = function ($event) {
+            onMouseup: _cache[42] || (_cache[42] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[39] || (_cache[39] = function () {
+            onKeydown: [_cache[43] || (_cache[43] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[41] || (_cache[41] = vue.withKeys(function ($event) {
+            }), _cache[45] || (_cache[45] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, -1);
-            }, ["enter"])), _cache[42] || (_cache[42] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[46] || (_cache[46] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, -1);
             }, ["space"]))],
             disabled: _ctx.disabled,
-            onMouseleave: _cache[40] || (_cache[40] = function ($event) {
+            onMouseleave: _cache[44] || (_cache[44] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[43] || (_cache[43] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[47] || (_cache[47] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[44] || (_cache[44] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[48] || (_cache[48] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3154,7 +3198,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('decrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_18)), [[_directive_ripple]])], 16), _ctx.showSeconds ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          })], 16, _hoisted_20)), [[_directive_ripple]])], 16), _ctx.showSeconds ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {
@@ -3169,26 +3213,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), [vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('incrementButton'),
             "aria-label": _ctx.$primevue.config.locale.nextSecond,
-            onMousedown: _cache[45] || (_cache[45] = function ($event) {
+            onMousedown: _cache[49] || (_cache[49] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, 1);
             }),
-            onMouseup: _cache[46] || (_cache[46] = function ($event) {
+            onMouseup: _cache[50] || (_cache[50] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[47] || (_cache[47] = function () {
+            onKeydown: [_cache[51] || (_cache[51] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[49] || (_cache[49] = vue.withKeys(function ($event) {
+            }), _cache[53] || (_cache[53] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, 1);
-            }, ["enter"])), _cache[50] || (_cache[50] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[54] || (_cache[54] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, 1);
             }, ["space"]))],
             disabled: _ctx.disabled,
-            onMouseleave: _cache[48] || (_cache[48] = function ($event) {
+            onMouseleave: _cache[52] || (_cache[52] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[51] || (_cache[51] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[55] || (_cache[55] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[52] || (_cache[52] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[56] || (_cache[56] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3200,31 +3244,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('incrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_19)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('second'), {
+          })], 16, _hoisted_21)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('second'), {
             "data-pc-group-section": "timepickerlabel"
           }), vue.toDisplayString($options.formattedCurrentSecond), 17), vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('decrementButton'),
             "aria-label": _ctx.$primevue.config.locale.prevSecond,
-            onMousedown: _cache[53] || (_cache[53] = function ($event) {
+            onMousedown: _cache[57] || (_cache[57] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, -1);
             }),
-            onMouseup: _cache[54] || (_cache[54] = function ($event) {
+            onMouseup: _cache[58] || (_cache[58] = function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }),
-            onKeydown: [_cache[55] || (_cache[55] = function () {
+            onKeydown: [_cache[59] || (_cache[59] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
-            }), _cache[57] || (_cache[57] = vue.withKeys(function ($event) {
+            }), _cache[61] || (_cache[61] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, -1);
-            }, ["enter"])), _cache[58] || (_cache[58] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[62] || (_cache[62] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseDown($event, 2, -1);
             }, ["space"]))],
             disabled: _ctx.disabled,
-            onMouseleave: _cache[56] || (_cache[56] = function ($event) {
+            onMouseleave: _cache[60] || (_cache[60] = function ($event) {
               return $options.onTimePickerElementMouseLeave();
             }),
-            onKeyup: [_cache[59] || (_cache[59] = vue.withKeys(function ($event) {
+            onKeyup: [_cache[63] || (_cache[63] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[60] || (_cache[60] = vue.withKeys(function ($event) {
+            }, ["enter"])), _cache[64] || (_cache[64] = vue.withKeys(function ($event) {
               return $options.onTimePickerElementMouseUp($event);
             }, ["space"]))],
             type: "button"
@@ -3236,7 +3280,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('decrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_20)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true), _ctx.hourFormat == '12' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          })], 16, _hoisted_22)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true), _ctx.hourFormat == '12' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 2,
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {
@@ -3249,10 +3293,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('ampmPicker')), [vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('incrementButton'),
             "aria-label": _ctx.$primevue.config.locale.am,
-            onClick: _cache[61] || (_cache[61] = function ($event) {
+            onClick: _cache[65] || (_cache[65] = function ($event) {
               return $options.toggleAMPM($event);
             }),
-            onKeydown: _cache[62] || (_cache[62] = function () {
+            onKeydown: _cache[66] || (_cache[66] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
             }),
             type: "button",
@@ -3267,15 +3311,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('incrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_21)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('ampm'), {
+          })], 16, _hoisted_23)), [[_directive_ripple]]), vue.createElementVNode("span", vue.mergeProps(_ctx.ptm('ampm'), {
             "data-pc-group-section": "timepickerlabel"
           }), vue.toDisplayString($data.pm ? _ctx.$primevue.config.locale.pm : _ctx.$primevue.config.locale.am), 17), vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             "class": _ctx.cx('decrementButton'),
             "aria-label": _ctx.$primevue.config.locale.pm,
-            onClick: _cache[63] || (_cache[63] = function ($event) {
+            onClick: _cache[67] || (_cache[67] = function ($event) {
               return $options.toggleAMPM($event);
             }),
-            onKeydown: _cache[64] || (_cache[64] = function () {
+            onKeydown: _cache[68] || (_cache[68] = function () {
               return $options.onContainerButtonKeydown && $options.onContainerButtonKeydown.apply($options, arguments);
             }),
             type: "button",
@@ -3290,13 +3334,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('decrementIcon'), {
               "data-pc-group-section": "timepickerlabel"
             }), null, 16, ["class"]))];
-          })], 16, _hoisted_22)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true)], 16)) : vue.createCommentVNode("", true), _ctx.showButtonBar ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          })], 16, _hoisted_24)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true)], 16)) : vue.createCommentVNode("", true), _ctx.showButtonBar ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 2,
             "class": _ctx.cx('buttonbar')
           }, _ctx.ptm('buttonbar')), [vue.createVNode(_component_CalendarButton, {
             type: "button",
             label: $options.todayLabel,
-            onClick: _cache[65] || (_cache[65] = function ($event) {
+            onClick: _cache[69] || (_cache[69] = function ($event) {
               return $options.onTodayButtonClick($event);
             }),
             "class": vue.normalizeClass(_ctx.cx('todayButton')),
@@ -3308,7 +3352,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["label", "class", "onKeydown", "unstyled", "pt"]), vue.createVNode(_component_CalendarButton, {
             type: "button",
             label: $options.clearLabel,
-            onClick: _cache[66] || (_cache[66] = function ($event) {
+            onClick: _cache[70] || (_cache[70] = function ($event) {
               return $options.onClearButtonClick($event);
             }),
             "class": vue.normalizeClass(_ctx.cx('clearButton')),