primevue 3.28.0 → 3.29.0

package/calendar/calendar.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Button = require('primevue/button');
 var CalendarIcon = require('primevue/icons/calendar');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
@@ -14,6 +15,7 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var CalendarIcon__default = /*#__PURE__*/_interopDefaultLegacy(CalendarIcon);
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
@@ -26,6 +28,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Calendar',
+    extends: BaseComponent__default["default"],
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     props: {
         modelValue: null,
@@ -2271,7 +2274,7 @@ var script = {
             this.$emit('input', event);
         },
         onInputClick() {
-            if (this.isEnabled() && !this.overlayVisible) {
+            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
                 this.overlayVisible = true;
             }
         },
@@ -2666,113 +2669,34 @@ var script = {
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "placeholder", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "disabled", "readonly"];
 const _hoisted_3 = ["id", "role", "aria-modal", "aria-label"];
-const _hoisted_4 = { class: "p-datepicker-group-container" };
-const _hoisted_5 = { class: "p-datepicker-header" };
+const _hoisted_4 = ["disabled", "aria-label"];
+const _hoisted_5 = ["disabled", "aria-label"];
 const _hoisted_6 = ["disabled", "aria-label"];
-const _hoisted_7 = { class: "p-datepicker-title" };
-const _hoisted_8 = ["disabled", "aria-label"];
-const _hoisted_9 = ["disabled", "aria-label"];
-const _hoisted_10 = {
-  key: 2,
-  class: "p-datepicker-decade"
-};
-const _hoisted_11 = ["disabled", "aria-label"];
-const _hoisted_12 = {
-  key: 0,
-  class: "p-datepicker-calendar-container"
-};
-const _hoisted_13 = {
-  class: "p-datepicker-calendar",
-  role: "grid"
-};
-const _hoisted_14 = {
-  key: 0,
-  scope: "col",
-  class: "p-datepicker-weekheader p-disabled"
-};
-const _hoisted_15 = ["abbr"];
-const _hoisted_16 = {
-  key: 0,
-  class: "p-datepicker-weeknumber"
-};
-const _hoisted_17 = { class: "p-disabled" };
-const _hoisted_18 = {
-  key: 0,
-  style: {"visibility":"hidden"}
-};
-const _hoisted_19 = ["aria-label"];
-const _hoisted_20 = ["onClick", "onKeydown", "aria-selected"];
-const _hoisted_21 = {
-  key: 0,
-  class: "p-hidden-accessible",
-  "aria-live": "polite"
-};
-const _hoisted_22 = {
-  key: 0,
-  class: "p-monthpicker"
-};
-const _hoisted_23 = ["onClick", "onKeydown"];
-const _hoisted_24 = {
-  key: 0,
-  class: "p-hidden-accessible",
-  "aria-live": "polite"
-};
-const _hoisted_25 = {
-  key: 1,
-  class: "p-yearpicker"
-};
-const _hoisted_26 = ["onClick", "onKeydown"];
-const _hoisted_27 = {
-  key: 0,
-  class: "p-hidden-accessible",
-  "aria-live": "polite"
-};
-const _hoisted_28 = {
-  key: 1,
-  class: "p-timepicker"
-};
-const _hoisted_29 = { class: "p-hour-picker" };
-const _hoisted_30 = ["aria-label"];
-const _hoisted_31 = ["aria-label"];
-const _hoisted_32 = { class: "p-separator" };
-const _hoisted_33 = { class: "p-minute-picker" };
-const _hoisted_34 = ["aria-label", "disabled"];
-const _hoisted_35 = ["aria-label", "disabled"];
-const _hoisted_36 = {
-  key: 0,
-  class: "p-separator"
-};
-const _hoisted_37 = {
-  key: 1,
-  class: "p-second-picker"
-};
-const _hoisted_38 = ["aria-label", "disabled"];
-const _hoisted_39 = ["aria-label", "disabled"];
-const _hoisted_40 = {
-  key: 2,
-  class: "p-separator"
-};
-const _hoisted_41 = {
-  key: 3,
-  class: "p-ampm-picker"
-};
-const _hoisted_42 = ["aria-label", "disabled"];
-const _hoisted_43 = ["aria-label", "disabled"];
-const _hoisted_44 = {
-  key: 2,
-  class: "p-datepicker-buttonbar"
-};
+const _hoisted_7 = ["disabled", "aria-label"];
+const _hoisted_8 = ["abbr"];
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = ["onClick", "onKeydown", "aria-selected"];
+const _hoisted_11 = ["onClick", "onKeydown"];
+const _hoisted_12 = ["onClick", "onKeydown"];
+const _hoisted_13 = ["aria-label"];
+const _hoisted_14 = ["aria-label"];
+const _hoisted_15 = ["aria-label", "disabled"];
+const _hoisted_16 = ["aria-label", "disabled"];
+const _hoisted_17 = ["aria-label", "disabled"];
+const _hoisted_18 = ["aria-label", "disabled"];
+const _hoisted_19 = ["aria-label", "disabled"];
+const _hoisted_20 = ["aria-label", "disabled"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CalendarButton = vue.resolveComponent("CalendarButton");
   const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createElementBlock("span", {
+  return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
     ref: "container",
     id: $props.id,
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
     (!$props.inline)
       ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
           key: 0,
@@ -2799,7 +2723,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onFocus: _cache[2] || (_cache[2] = (...args) => ($options.onFocus && $options.onFocus(...args))),
           onBlur: _cache[3] || (_cache[3] = (...args) => ($options.onBlur && $options.onBlur(...args))),
           onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-        }, $props.inputProps), null, 16, _hoisted_2))
+        }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, _hoisted_2))
       : vue.createCommentVNode("", true),
     ($props.showIcon)
       ? (vue.openBlock(), vue.createBlock(_component_CalendarButton, {
@@ -2811,17 +2735,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-label": _ctx.$primevue.config.locale.chooseDate,
           "aria-haspopup": "dialog",
           "aria-expanded": $data.overlayVisible,
-          "aria-controls": $options.panelId
+          "aria-controls": $options.panelId,
+          pt: _ctx.ptm('dropdownButton')
         }, {
           icon: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "dropdownicon", {}, () => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'CalendarIcon'), {
-                class: vue.normalizeClass($props.icon)
-              }, null, 8, ["class"]))
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'CalendarIcon'), vue.mergeProps({ class: $props.icon }, _ctx.ptm('dropdownButton')['icon']), null, 16, ["class"]))
             ])
           ]),
           _: 3
-        }, 8, ["disabled", "onClick", "aria-label", "aria-expanded", "aria-controls"]))
+        }, 8, ["disabled", "onClick", "aria-label", "aria-expanded", "aria-controls", "pt"]))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_Portal, {
       appendTo: $props.appendTo,
@@ -2849,37 +2772,37 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onClick: _cache[65] || (_cache[65] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                   onKeydown: _cache[66] || (_cache[66] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args))),
                   onMouseup: _cache[67] || (_cache[67] = (...args) => ($options.onOverlayMouseUp && $options.onOverlayMouseUp(...args)))
-                }, $props.panelProps), [
+                }, { ...$props.panelProps, ..._ctx.ptm('panel') }), [
                   (!$props.timeOnly)
                     ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        vue.createElementVNode("div", _hoisted_4, [
+                        vue.createElementVNode("div", vue.mergeProps({ class: "p-datepicker-group-container" }, _ctx.ptm('groupContainer')), [
                           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.months, (month, groupIndex) => {
-                            return (vue.openBlock(), vue.createElementBlock("div", {
+                            return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                               key: month.month + month.year,
                               class: "p-datepicker-group"
-                            }, [
-                              vue.createElementVNode("div", _hoisted_5, [
+                            }, _ctx.ptm('group')), [
+                              vue.createElementVNode("div", vue.mergeProps({ class: "p-datepicker-header" }, _ctx.ptm('header')), [
                                 vue.renderSlot(_ctx.$slots, "header"),
-                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                   class: "p-datepicker-prev p-link",
                                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.onPrevButtonClick && $options.onPrevButtonClick(...args))),
                                   type: "button",
                                   onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
                                   disabled: $props.disabled,
                                   "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.prevDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.prevYear : _ctx.$primevue.config.locale.prevMonth
-                                }, [
+                                }, _ctx.ptm('previousButton')), [
                                   vue.renderSlot(_ctx.$slots, "previousicon", {}, () => [
-                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.previousIcon ? 'span' : 'ChevronLeftIcon'), {
-                                      class: vue.normalizeClass(['p-datepicker-prev-icon', $props.previousIcon])
-                                    }, null, 8, ["class"]))
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.previousIcon ? 'span' : 'ChevronLeftIcon'), vue.mergeProps({
+                                      class: ['p-datepicker-prev-icon', $props.previousIcon]
+                                    }, _ctx.ptm('previousIcon')), null, 16, ["class"]))
                                   ])
-                                ], 40, _hoisted_6)), [
+                                ], 16, _hoisted_4)), [
                                   [vue.vShow, $props.showOtherMonths ? groupIndex === 0 : false],
                                   [_directive_ripple]
                                 ]),
-                                vue.createElementVNode("div", _hoisted_7, [
+                                vue.createElementVNode("div", vue.mergeProps({ class: "p-datepicker-title" }, _ctx.ptm('title')), [
                                   ($data.currentView === 'date')
-                                    ? (vue.openBlock(), vue.createElementBlock("button", {
+                                    ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                         key: 0,
                                         type: "button",
                                         onClick: _cache[7] || (_cache[7] = (...args) => ($options.switchToMonthView && $options.switchToMonthView(...args))),
@@ -2887,10 +2810,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                         class: "p-datepicker-month p-link",
                                         disabled: $options.switchViewButtonDisabled,
                                         "aria-label": _ctx.$primevue.config.locale.chooseMonth
-                                      }, vue.toDisplayString($options.getMonthName(month.month)), 41, _hoisted_8))
+                                      }, _ctx.ptm('monthTitle')), vue.toDisplayString($options.getMonthName(month.month)), 17, _hoisted_5))
                                     : vue.createCommentVNode("", true),
                                   ($data.currentView !== 'year')
-                                    ? (vue.openBlock(), vue.createElementBlock("button", {
+                                    ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                         key: 1,
                                         type: "button",
                                         onClick: _cache[9] || (_cache[9] = (...args) => ($options.switchToYearView && $options.switchToYearView(...args))),
@@ -2898,147 +2821,187 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                         class: "p-datepicker-year p-link",
                                         disabled: $options.switchViewButtonDisabled,
                                         "aria-label": _ctx.$primevue.config.locale.chooseYear
-                                      }, vue.toDisplayString($options.getYear(month)), 41, _hoisted_9))
+                                      }, _ctx.ptm('yearTitle')), vue.toDisplayString($options.getYear(month)), 17, _hoisted_6))
                                     : vue.createCommentVNode("", true),
                                   ($data.currentView === 'year')
-                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, [
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                        key: 2,
+                                        class: "p-datepicker-decade"
+                                      }, _ctx.ptm('decadeTitle')), [
                                         vue.renderSlot(_ctx.$slots, "decade", { years: $options.yearPickerValues }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0].value) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1].value), 1)
                                         ])
-                                      ]))
+                                      ], 16))
                                     : vue.createCommentVNode("", true)
-                                ]),
-                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                ], 16),
+                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                   class: "p-datepicker-next p-link",
                                   onClick: _cache[11] || (_cache[11] = (...args) => ($options.onNextButtonClick && $options.onNextButtonClick(...args))),
                                   type: "button",
                                   onKeydown: _cache[12] || (_cache[12] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
                                   disabled: $props.disabled,
                                   "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.nextDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.nextYear : _ctx.$primevue.config.locale.nextMonth
-                                }, [
+                                }, _ctx.ptm('nextButton')), [
                                   vue.renderSlot(_ctx.$slots, "nexticon", {}, () => [
-                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.nextIcon ? 'span' : 'ChevronRightIcon'), {
-                                      class: vue.normalizeClass(['p-datepicker-next-icon', $props.nextIcon])
-                                    }, null, 8, ["class"]))
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.nextIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
+                                      class: ['p-datepicker-next-icon', $props.nextIcon]
+                                    }, _ctx.ptm('nextIcon')), null, 16, ["class"]))
                                   ])
-                                ], 40, _hoisted_11)), [
+                                ], 16, _hoisted_7)), [
                                   [vue.vShow, $props.showOtherMonths ? ($props.numberOfMonths === 1 ? true : groupIndex === $props.numberOfMonths - 1) : false],
                                   [_directive_ripple]
                                 ])
-                              ]),
+                              ], 16),
                               ($data.currentView === 'date')
-                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
-                                    vue.createElementVNode("table", _hoisted_13, [
-                                      vue.createElementVNode("thead", null, [
-                                        vue.createElementVNode("tr", null, [
+                                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                    key: 0,
+                                    class: "p-datepicker-calendar-container"
+                                  }, _ctx.ptm('container')), [
+                                    vue.createElementVNode("table", vue.mergeProps({
+                                      class: "p-datepicker-calendar",
+                                      role: "grid"
+                                    }, _ctx.ptm('table')), [
+                                      vue.createElementVNode("thead", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('tableHeader'))), [
+                                        vue.createElementVNode("tr", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('tableHeaderRow'))), [
                                           ($props.showWeek)
-                                            ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_14, [
-                                                vue.createElementVNode("span", null, vue.toDisplayString($options.weekHeaderLabel), 1)
-                                              ]))
+                                            ? (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
+                                                key: 0,
+                                                scope: "col",
+                                                class: "p-datepicker-weekheader p-disabled"
+                                              }, _ctx.ptm('tableHeaderCell')), [
+                                                vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('weekLabel'))), vue.toDisplayString($options.weekHeaderLabel), 17)
+                                              ], 16))
                                             : vue.createCommentVNode("", true),
                                           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.weekDays, (weekDay) => {
-                                            return (vue.openBlock(), vue.createElementBlock("th", {
+                                            return (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
                                               key: weekDay,
                                               scope: "col",
                                               abbr: weekDay
-                                            }, [
-                                              vue.createElementVNode("span", null, vue.toDisplayString(weekDay), 1)
-                                            ], 8, _hoisted_15))
+                                            }, _ctx.ptm('tableHeaderCell')), [
+                                              vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('weekDay'))), vue.toDisplayString(weekDay), 17)
+                                            ], 16, _hoisted_8))
                                           }), 128))
-                                        ])
-                                      ]),
-                                      vue.createElementVNode("tbody", null, [
+                                        ], 16)
+                                      ], 16),
+                                      vue.createElementVNode("tbody", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('tableBody'))), [
                                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(month.dates, (week, i) => {
-                                          return (vue.openBlock(), vue.createElementBlock("tr", {
+                                          return (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                                             key: week[0].day + '' + week[0].month
-                                          }, [
+                                          }, _ctx.ptm('tableBodyRow')), [
                                             ($props.showWeek)
-                                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_16, [
-                                                  vue.createElementVNode("span", _hoisted_17, [
+                                              ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
+                                                  key: 0,
+                                                  class: "p-datepicker-weeknumber"
+                                                }, _ctx.ptm('weekNumber')), [
+                                                  vue.createElementVNode("span", vue.mergeProps({ class: "p-disabled" }, _ctx.ptm('weekLabelContainer')), [
                                                     (month.weekNumbers[i] < 10)
-                                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18, "0"))
+                                                      ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                                          key: 0,
+                                                          style: {"visibility":"hidden"}
+                                                        }, _ctx.ptm('weekLabel')), "0", 16))
                                                       : vue.createCommentVNode("", true),
                                                     vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)
-                                                  ])
-                                                ]))
+                                                  ], 16)
+                                                ], 16))
                                               : vue.createCommentVNode("", true),
                                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, (date) => {
-                                              return (vue.openBlock(), vue.createElementBlock("td", {
+                                              return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
                                                 key: date.day + '' + date.month,
                                                 "aria-label": date.day,
-                                                class: vue.normalizeClass({ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today })
-                                              }, [
-                                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-                                                  class: vue.normalizeClass({ 'p-highlight': $options.isSelected(date), 'p-disabled': !date.selectable }),
+                                                class: { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }
+                                              }, _ctx.ptm('day')), [
+                                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                                  class: { 'p-highlight': $options.isSelected(date), 'p-disabled': !date.selectable },
                                                   onClick: $event => ($options.onDateSelect($event, date)),
                                                   draggable: "false",
                                                   onKeydown: $event => ($options.onDateCellKeydown($event, date, groupIndex)),
                                                   "aria-selected": $options.isSelected(date)
-                                                }, [
+                                                }, _ctx.ptm('dayLabel')), [
                                                   vue.renderSlot(_ctx.$slots, "date", { date: date }, () => [
                                                     vue.createTextVNode(vue.toDisplayString(date.day), 1)
                                                   ])
-                                                ], 42, _hoisted_20)), [
+                                                ], 16, _hoisted_10)), [
                                                   [_directive_ripple]
                                                 ]),
                                                 ($options.isSelected(date))
-                                                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, vue.toDisplayString(date.day), 1))
+                                                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                                      key: 0,
+                                                      class: "p-hidden-accessible",
+                                                      "aria-live": "polite"
+                                                    }, _ctx.ptm('ariaSelectedDay')), vue.toDisplayString(date.day), 17))
                                                   : vue.createCommentVNode("", true)
-                                              ], 10, _hoisted_19))
+                                              ], 16, _hoisted_9))
                                             }), 128))
-                                          ]))
+                                          ], 16))
                                         }), 128))
-                                      ])
-                                    ])
-                                  ]))
+                                      ], 16)
+                                    ], 16)
+                                  ], 16))
                                 : vue.createCommentVNode("", true)
-                            ]))
+                            ], 16))
                           }), 128))
-                        ]),
+                        ], 16),
                         ($data.currentView === 'month')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 0,
+                              class: "p-monthpicker"
+                            }, _ctx.ptm('monthPicker')), [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.monthPickerValues, (m, i) => {
-                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                   key: m,
                                   onClick: $event => ($options.onMonthSelect($event, { month: m, index: i })),
                                   onKeydown: $event => ($options.onMonthCellKeydown($event, { month: m, index: i })),
-                                  class: vue.normalizeClass(["p-monthpicker-month", { 'p-highlight': $options.isMonthSelected(i), 'p-disabled': !m.selectable }])
-                                }, [
+                                  class: ["p-monthpicker-month", { 'p-highlight': $options.isMonthSelected(i), 'p-disabled': !m.selectable }]
+                                }, _ctx.ptm('month')), [
                                   vue.createTextVNode(vue.toDisplayString(m.value) + " ", 1),
                                   ($options.isMonthSelected(i))
-                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, vue.toDisplayString(m.value), 1))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                        key: 0,
+                                        class: "p-hidden-accessible",
+                                        "aria-live": "polite"
+                                      }, _ctx.ptm('ariaMonth')), vue.toDisplayString(m.value), 17))
                                     : vue.createCommentVNode("", true)
-                                ], 42, _hoisted_23)), [
+                                ], 16, _hoisted_11)), [
                                   [_directive_ripple]
                                 ])
                               }), 128))
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($data.currentView === 'year')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_25, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 1,
+                              class: "p-yearpicker"
+                            }, _ctx.ptm('yearPicker')), [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.yearPickerValues, (y) => {
-                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                   key: y.value,
                                   onClick: $event => ($options.onYearSelect($event, y)),
                                   onKeydown: $event => ($options.onYearCellKeydown($event, y)),
-                                  class: vue.normalizeClass(["p-yearpicker-year", { 'p-highlight': $options.isYearSelected(y.value), 'p-disabled': !y.selectable }])
-                                }, [
+                                  class: ["p-yearpicker-year", { 'p-highlight': $options.isYearSelected(y.value), 'p-disabled': !y.selectable }]
+                                }, _ctx.ptm('year')), [
                                   vue.createTextVNode(vue.toDisplayString(y.value) + " ", 1),
                                   ($options.isYearSelected(y.value))
-                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_27, vue.toDisplayString(y.value), 1))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                        key: 0,
+                                        class: "p-hidden-accessible",
+                                        "aria-live": "polite"
+                                      }, _ctx.ptm('ariaYear')), vue.toDisplayString(y.value), 17))
                                     : vue.createCommentVNode("", true)
-                                ], 42, _hoisted_26)), [
+                                ], 16, _hoisted_12)), [
                                   [_directive_ripple]
                                 ])
                               }), 128))
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true)
                       ], 64))
                     : vue.createCommentVNode("", true),
                   (($props.showTime || $props.timeOnly) && $data.currentView === 'date')
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
-                        vue.createElementVNode("div", _hoisted_29, [
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                        key: 1,
+                        class: "p-timepicker"
+                      }, _ctx.ptm('timePicker')), [
+                        vue.createElementVNode("div", vue.mergeProps({ class: "p-hour-picker" }, _ctx.ptm('hourPicker')), [
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                             class: "p-link",
                             "aria-label": _ctx.$primevue.config.locale.nextHour,
                             onMousedown: _cache[13] || (_cache[13] = $event => ($options.onTimePickerElementMouseDown($event, 0, 1))),
@@ -3054,17 +3017,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[20] || (_cache[20] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, [
+                          }, _ctx.ptm('incrementButton')), [
                             vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
-                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
-                                class: vue.normalizeClass($props.incrementIcon)
-                              }, null, 8, ["class"]))
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({ class: $props.incrementIcon }, _ctx.ptm('incrementIcon')), null, 16, ["class"]))
                             ])
-                          ], 40, _hoisted_30)), [
+                          ], 16, _hoisted_13)), [
                             [_directive_ripple]
                           ]),
-                          vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentHour), 1),
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('hour'))), vue.toDisplayString($options.formattedCurrentHour), 17),
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                             class: "p-link",
                             "aria-label": _ctx.$primevue.config.locale.prevHour,
                             onMousedown: _cache[21] || (_cache[21] = $event => ($options.onTimePickerElementMouseDown($event, 0, -1))),
@@ -3080,21 +3041,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[28] || (_cache[28] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, [
+                          }, _ctx.ptm('decrementButton')), [
                             vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
-                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
-                                class: vue.normalizeClass($props.decrementIcon)
-                              }, null, 8, ["class"]))
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({ class: $props.decrementIcon }, _ctx.ptm('decrementIcon')), null, 16, ["class"]))
                             ])
-                          ], 40, _hoisted_31)), [
+                          ], 16, _hoisted_14)), [
                             [_directive_ripple]
                           ])
-                        ]),
-                        vue.createElementVNode("div", _hoisted_32, [
-                          vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                        ]),
-                        vue.createElementVNode("div", _hoisted_33, [
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                        ], 16),
+                        vue.createElementVNode("div", vue.mergeProps({ class: "p-separator" }, _ctx.ptm('separatorContainer')), [
+                          vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('separator'))), vue.toDisplayString($props.timeSeparator), 17)
+                        ], 16),
+                        vue.createElementVNode("div", vue.mergeProps({ class: "p-minute-picker" }, _ctx.ptm('minutePicker')), [
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                             class: "p-link",
                             "aria-label": _ctx.$primevue.config.locale.nextMinute,
                             onMousedown: _cache[29] || (_cache[29] = $event => ($options.onTimePickerElementMouseDown($event, 1, 1))),
@@ -3111,17 +3070,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[36] || (_cache[36] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, [
+                          }, _ctx.ptm('incrementButton')), [
                             vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
-                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
-                                class: vue.normalizeClass($props.incrementIcon)
-                              }, null, 8, ["class"]))
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({ class: $props.incrementIcon }, _ctx.ptm('incrementIcon')), null, 16, ["class"]))
                             ])
-                          ], 40, _hoisted_34)), [
+                          ], 16, _hoisted_15)), [
                             [_directive_ripple]
                           ]),
-                          vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentMinute), 1),
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('minute'))), vue.toDisplayString($options.formattedCurrentMinute), 17),
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                             class: "p-link",
                             "aria-label": _ctx.$primevue.config.locale.prevMinute,
                             onMousedown: _cache[37] || (_cache[37] = $event => ($options.onTimePickerElementMouseDown($event, 1, -1))),
@@ -3138,24 +3095,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[44] || (_cache[44] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, [
+                          }, _ctx.ptm('decrementButton')), [
                             vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
-                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
-                                class: vue.normalizeClass($props.decrementIcon)
-                              }, null, 8, ["class"]))
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({ class: $props.decrementIcon }, _ctx.ptm('decrementIcon')), null, 16, ["class"]))
                             ])
-                          ], 40, _hoisted_35)), [
+                          ], 16, _hoisted_16)), [
                             [_directive_ripple]
                           ])
-                        ]),
+                        ], 16),
                         ($props.showSeconds)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
-                              vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                            ]))
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 0,
+                              class: "p-separator"
+                            }, _ctx.ptm('separatorContainer')), [
+                              vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('separator'))), vue.toDisplayString($props.timeSeparator), 17)
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.showSeconds)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
-                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 1,
+                              class: "p-second-picker"
+                            }, _ctx.ptm('secondPicker')), [
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                 class: "p-link",
                                 "aria-label": _ctx.$primevue.config.locale.nextSecond,
                                 onMousedown: _cache[45] || (_cache[45] = $event => ($options.onTimePickerElementMouseDown($event, 2, 1))),
@@ -3172,17 +3133,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   _cache[52] || (_cache[52] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                                 ],
                                 type: "button"
-                              }, [
+                              }, _ctx.ptm('incrementButton')), [
                                 vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
-                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
-                                    class: vue.normalizeClass($props.incrementIcon)
-                                  }, null, 8, ["class"]))
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({ class: $props.incrementIcon }, _ctx.ptm('incrementIcon')), null, 16, ["class"]))
                                 ])
-                              ], 40, _hoisted_38)), [
+                              ], 16, _hoisted_17)), [
                                 [_directive_ripple]
                               ]),
-                              vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentSecond), 1),
-                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                              vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('second'))), vue.toDisplayString($options.formattedCurrentSecond), 17),
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                 class: "p-link",
                                 "aria-label": _ctx.$primevue.config.locale.prevSecond,
                                 onMousedown: _cache[53] || (_cache[53] = $event => ($options.onTimePickerElementMouseDown($event, 2, -1))),
@@ -3199,76 +3158,81 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   _cache[60] || (_cache[60] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                                 ],
                                 type: "button"
-                              }, [
+                              }, _ctx.ptm('decrementButton')), [
                                 vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
-                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
-                                    class: vue.normalizeClass($props.decrementIcon)
-                                  }, null, 8, ["class"]))
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({ class: $props.decrementIcon }, _ctx.ptm('decrementIcon')), null, 16, ["class"]))
                                 ])
-                              ], 40, _hoisted_39)), [
+                              ], 16, _hoisted_18)), [
                                 [_directive_ripple]
                               ])
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.hourFormat == '12')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
-                              vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                            ]))
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 2,
+                              class: "p-separator"
+                            }, _ctx.ptm('separatorContainer')), [
+                              vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('separator'))), vue.toDisplayString($props.timeSeparator), 17)
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.hourFormat == '12')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
-                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 3,
+                              class: "p-ampm-picker"
+                            }, _ctx.ptm('ampmPicker')), [
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                 class: "p-link",
                                 "aria-label": _ctx.$primevue.config.locale.am,
                                 onClick: _cache[61] || (_cache[61] = $event => ($options.toggleAMPM($event))),
                                 type: "button",
                                 disabled: $props.disabled
-                              }, [
+                              }, _ctx.ptm('incrementButton')), [
                                 vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
-                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
-                                    class: vue.normalizeClass($props.incrementIcon)
-                                  }, null, 8, ["class"]))
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), vue.mergeProps({ class: $props.incrementIcon }, _ctx.ptm('incrementIcon')), null, 16, ["class"]))
                                 ])
-                              ], 8, _hoisted_42)), [
+                              ], 16, _hoisted_19)), [
                                 [_directive_ripple]
                               ]),
-                              vue.createElementVNode("span", null, vue.toDisplayString($data.pm ? _ctx.$primevue.config.locale.pm : _ctx.$primevue.config.locale.am), 1),
-                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                              vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('ampm'))), 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: "p-link",
                                 "aria-label": _ctx.$primevue.config.locale.pm,
                                 onClick: _cache[62] || (_cache[62] = $event => ($options.toggleAMPM($event))),
                                 type: "button",
                                 disabled: $props.disabled
-                              }, [
+                              }, _ctx.ptm('decrementButton')), [
                                 vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
-                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
-                                    class: vue.normalizeClass($props.decrementIcon)
-                                  }, null, 8, ["class"]))
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({ class: $props.decrementIcon }, _ctx.ptm('decrementIcon')), null, 16, ["class"]))
                                 ])
-                              ], 8, _hoisted_43)), [
+                              ], 16, _hoisted_20)), [
                                 [_directive_ripple]
                               ])
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true)
-                      ]))
+                      ], 16))
                     : vue.createCommentVNode("", true),
                   ($props.showButtonBar)
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_44, [
+                    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                        key: 2,
+                        class: "p-datepicker-buttonbar"
+                      }, _ctx.ptm('buttonbar')), [
                         vue.createVNode(_component_CalendarButton, {
                           type: "button",
                           label: $options.todayLabel,
                           onClick: _cache[63] || (_cache[63] = $event => ($options.onTodayButtonClick($event))),
                           class: "p-button-text",
-                          onKeydown: $options.onContainerButtonKeydown
-                        }, null, 8, ["label", "onKeydown"]),
+                          onKeydown: $options.onContainerButtonKeydown,
+                          pt: _ctx.ptm('todayButton')
+                        }, null, 8, ["label", "onKeydown", "pt"]),
                         vue.createVNode(_component_CalendarButton, {
                           type: "button",
                           label: $options.clearLabel,
                           onClick: _cache[64] || (_cache[64] = $event => ($options.onClearButtonClick($event))),
                           class: "p-button-text",
-                          onKeydown: $options.onContainerButtonKeydown
-                        }, null, 8, ["label", "onKeydown"])
-                      ]))
+                          onKeydown: $options.onContainerButtonKeydown,
+                          pt: _ctx.ptm('clearButton')
+                        }, null, 8, ["label", "onKeydown", "pt"])
+                      ], 16))
                     : vue.createCommentVNode("", true),
                   vue.renderSlot(_ctx.$slots, "footer")
                 ], 16, _hoisted_3))
@@ -3279,7 +3243,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     }, 8, ["appendTo", "disabled"])
-  ], 10, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {