primevue 3.28.0 → 3.29.0

package/core/core.js

@@ -1914,7 +1914,7 @@ this.primevue.portal = (function (utils, vue) {
 })(primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.basecomponent = (function (utils) {
+this.primevue.basecomponent = (function (utils, vue) {
     'use strict';
 
     var script = {
@@ -1926,17 +1926,22 @@ this.primevue.basecomponent = (function (utils) {
             }
         },
         methods: {
-            getPTItem(obj = {}, key = '') {
+            getOption(obj = {}, key = '') {
                 const fKey = utils.ObjectUtils.convertToFlatCase(key);
 
                 return obj[Object.keys(obj).find((k) => utils.ObjectUtils.convertToFlatCase(k) === fKey) || ''];
             },
             getPTValue(obj = {}, key = '', params = {}) {
-                const self = utils.ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
-                const globalComponentPT = this.getPTItem(this.$primevue.config.pt, this.$.type.name);
-                const global = utils.ObjectUtils.getItemValue(this.getPTItem(globalComponentPT, key), params);
+                const self = utils.ObjectUtils.getItemValue(this.getOption(obj, key), params);
+                const globalPT = utils.ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+                const merged = vue.mergeProps(self, globalPT);
 
-                return { ...global, ...self };
+                return merged;
+                /*
+                 * @todo: The 'class' option in self can always be more powerful to style the component easily.
+                 *
+                 * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+                 */
             },
             ptm(key = '', params = {}) {
                 return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
@@ -1944,12 +1949,20 @@ this.primevue.basecomponent = (function (utils) {
             ptmo(obj = {}, key = '', params = {}) {
                 return this.getPTValue(obj, key, params);
             }
+        },
+        computed: {
+            defaultPT() {
+                return utils.ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+            },
+            defaultsParams() {
+                return { instance: this.$ };
+            }
         }
     };
 
     return script;
 
-})(primevue.utils);
+})(primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.baseicon = (function (utils) {
@@ -4042,6 +4055,8 @@ this.primevue = this.primevue || {};
 this.primevue.tooltip = (function (utils) {
     'use strict';
 
+    let timer;
+
     function bindEvents(el) {
         const modifiers = el.$_ptooltipModifiers;
 
@@ -4089,30 +4104,45 @@ this.primevue.tooltip = (function (utils) {
     }
 
     function onMouseEnter(event) {
-        show(event.currentTarget);
+        const el = event.currentTarget;
+        const showDelay = el.$_ptooltipShowDelay;
+
+        show(el, showDelay);
     }
 
     function onMouseLeave(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onFocus(event) {
-        show(event.currentTarget);
+        const el = event.currentTarget;
+        const showDelay = el.$_ptooltipShowDelay;
+
+        show(el, showDelay);
     }
 
     function onBlur(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onClick(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onKeydown(event) {
-        event.code === 'Escape' && hide(event.currentTarget);
+        event.code === 'Escape' && hide(event.currentTarget, hideDelay);
     }
 
-    function show(el) {
+    function tooltipActions(el) {
         if (el.$_ptooltipDisabled) {
             return;
         }
@@ -4134,11 +4164,29 @@ this.primevue.tooltip = (function (utils) {
         utils.ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
     }
 
-    function hide(el) {
+    function show(el, showDelay) {
+        if (showDelay !== undefined) {
+            timer = setTimeout(() => tooltipActions(el), showDelay);
+        } else {
+            tooltipActions(el);
+        }
+    }
+
+    function tooltipRemoval(el) {
         remove(el);
         unbindScrollListener(el);
     }
 
+    function hide(el, hideDelay) {
+        clearTimeout(timer);
+
+        if (hideDelay !== undefined) {
+            setTimeout(() => tooltipRemoval(el), hideDelay);
+        } else {
+            tooltipRemoval(el);
+        }
+    }
+
     function getTooltipElement(el) {
         return document.getElementById(el.$_ptooltipId);
     }
@@ -4363,7 +4411,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
                 target.$_ptooltipFitContent = true;
-                target.$_ptooltipIdAttr = '';
+                target.$_ptooltipShowDelay = 0;
+                target.$_ptooltipHideDelay = 0;
             } else if (typeof options.value === 'object' && options.value) {
                 if (utils.ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
                 else {
@@ -4374,6 +4423,8 @@ this.primevue.tooltip = (function (utils) {
                     target.$_ptooltipClass = options.value.class;
                     target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                     target.$_ptooltipIdAttr = options.value.id || '';
+                    target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                    target.$_ptooltipHideDelay = options.value.hideDelay || 0;
                 }
             }
 
@@ -4405,6 +4456,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
                 target.$_ptooltipIdAttr = '';
+                target.$_ptooltipShowDelay = 0;
+                target.$_ptooltipHideDelay = 0;
 
                 bindEvents(target);
             } else if (typeof options.value === 'object' && options.value) {
@@ -4419,6 +4472,8 @@ this.primevue.tooltip = (function (utils) {
                     target.$_ptooltipClass = options.value.class;
                     target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                     target.$_ptooltipIdAttr = options.value.id || '';
+                    target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                    target.$_ptooltipHideDelay = options.value.hideDelay || 0;
 
                     bindEvents(target);
                 }
@@ -4550,15 +4605,17 @@ this.primevue.focustrap = (function (utils) {
 })(primevue.utils);
 
 this.primevue = this.primevue || {};
-this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
+this.primevue.virtualscroller = (function (BaseComponent, SpinnerIcon, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
 
     var script = {
         name: 'VirtualScroller',
+        extends: BaseComponent__default["default"],
         emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
         props: {
             id: {
@@ -5267,14 +5324,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
 
       return (!$props.disabled)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             ref: $options.elementRef,
-            class: vue.normalizeClass($options.containerClass),
+            class: $options.containerClass,
             tabindex: $props.tabindex,
-            style: vue.normalizeStyle($props.style),
+            style: $props.style,
             onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args)))
-          }, [
+          }, _ctx.ptm('root')), [
             vue.renderSlot(_ctx.$slots, "content", {
               styleClass: $options.contentClass,
               items: $options.loadedItems,
@@ -5291,11 +5348,11 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
               horizontal: $options.isHorizontal(),
               both: $options.isBoth()
             }, () => [
-              vue.createElementVNode("div", {
+              vue.createElementVNode("div", vue.mergeProps({
                 ref: $options.contentRef,
-                class: vue.normalizeClass($options.contentClass),
-                style: vue.normalizeStyle($data.contentStyle)
-              }, [
+                class: $options.contentClass,
+                style: $data.contentStyle
+              }, _ctx.ptm('content')), [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.loadedItems, (item, index) => {
                   return vue.renderSlot(_ctx.$slots, "item", {
                     key: index,
@@ -5303,20 +5360,20 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
                     options: $options.getOptions(index)
                   })
                 }), 128))
-              ], 6)
+              ], 16)
             ]),
             ($props.showSpacer)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
+              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 0,
                   class: "p-virtualscroller-spacer",
-                  style: vue.normalizeStyle($data.spacerStyle)
-                }, null, 4))
+                  style: $data.spacerStyle
+                }, _ctx.ptm('spacer')), null, 16))
               : vue.createCommentVNode("", true),
             (!$props.loaderDisabled && $props.showLoader && $data.d_loading)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
+              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 1,
-                  class: vue.normalizeClass($options.loaderClass)
-                }, [
+                  class: $options.loaderClass
+                }, _ctx.ptm('loader')), [
                   (_ctx.$slots && _ctx.$slots.loader)
                     ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($data.loaderArr, (_, index) => {
                         return vue.renderSlot(_ctx.$slots, "loader", {
@@ -5326,14 +5383,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
                       }), 128))
                     : vue.createCommentVNode("", true),
                   vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
-                    vue.createVNode(_component_SpinnerIcon, {
+                    vue.createVNode(_component_SpinnerIcon, vue.mergeProps({
                       spin: "",
                       class: "p-virtualscroller-loading-icon"
-                    })
+                    }, _ctx.ptm('loadingIcon')), null, 16)
                   ])
-                ], 2))
+                ], 16))
               : vue.createCommentVNode("", true)
-          ], 46, _hoisted_1))
+          ], 16, _hoisted_1))
         : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.renderSlot(_ctx.$slots, "default"),
             vue.renderSlot(_ctx.$slots, "content", {
@@ -5378,7 +5435,7 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
 
     return script;
 
-})(primevue.icons.spinner, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.spinner, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.confirmationeventbus = (function (utils) {
@@ -5708,11 +5765,16 @@ this.primevue.button = (function (BaseComponent, SpinnerIcon, Ripple, vue) {
 })(primevue.basecomponent, primevue.icons.spinner, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.inputtext = (function (vue) {
+this.primevue.inputtext = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'InputText',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue'],
         props: {
             modelValue: null
@@ -5732,25 +5794,26 @@ this.primevue.inputtext = (function (vue) {
     const _hoisted_1 = ["value"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("input", {
-        class: vue.normalizeClass(['p-inputtext p-component', { 'p-filled': $options.filled }]),
+      return (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+        class: ['p-inputtext p-component', { 'p-filled': $options.filled }],
         value: $props.modelValue,
         onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
-      }, null, 42, _hoisted_1))
+      }, _ctx.ptm('root')), null, 16, _hoisted_1))
     }
 
     script.render = render;
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, InputText, utils, vue) {
+this.primevue.inputnumber = (function (BaseComponent, Button, AngleDownIcon, AngleUpIcon, InputText, utils, vue) {
     'use strict';
 
     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 AngleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDownIcon);
     var AngleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleUpIcon);
@@ -5758,6 +5821,7 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
 
     var script = {
         name: 'InputNumber',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue', 'input', 'focus', 'blur'],
         props: {
             modelValue: {
@@ -6817,18 +6881,11 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-inputnumber-button-group"
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_INInputText = vue.resolveComponent("INInputText");
       const _component_INButton = vue.resolveComponent("INButton");
 
-      return (vue.openBlock(), vue.createElementBlock("span", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         vue.createVNode(_component_INInputText, vue.mergeProps({
           ref: "input",
           id: $props.inputId,
@@ -6851,19 +6908,20 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
           onClick: $options.onInputClick,
           onFocus: $options.onInputFocus,
           onBlur: $options.onInputBlur
-        }, $props.inputProps), null, 16, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur"]),
+        }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur"]),
         ($props.showButtons && $props.buttonLayout === 'stacked')
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 0,
+              class: "p-inputnumber-button-group"
+            }, _ctx.ptm('buttonGroup')), [
               vue.createVNode(_component_INButton, vue.mergeProps({ class: $options.upButtonClass }, vue.toHandlers($options.upButtonListeners), {
                 disabled: $props.disabled,
                 tabindex: -1,
                 "aria-hidden": "true"
-              }, $props.incrementButtonProps), {
+              }, { ...$props.incrementButtonProps, ..._ctx.ptm('incrementButton') }), {
                 icon: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "incrementbuttonicon", {}, () => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), {
-                      class: vue.normalizeClass($props.incrementButtonIcon)
-                    }, null, 8, ["class"]))
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), vue.mergeProps({ class: $props.incrementButtonIcon }, _ctx.ptm('incrementButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
@@ -6872,17 +6930,15 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
                 disabled: $props.disabled,
                 tabindex: -1,
                 "aria-hidden": "true"
-              }, $props.decrementButtonProps), {
+              }, { ...$props.decrementButtonProps, ..._ctx.ptm('decrementButton') }), {
                 icon: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "decrementbuttonicon", {}, () => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), {
-                      class: vue.normalizeClass($props.decrementButtonIcon)
-                    }, null, 8, ["class"]))
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), vue.mergeProps({ class: $props.decrementButtonIcon }, _ctx.ptm('decrementButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
               }, 16, ["class", "disabled"])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.showButtons && $props.buttonLayout !== 'stacked')
           ? (vue.openBlock(), vue.createBlock(_component_INButton, vue.mergeProps({
@@ -6892,12 +6948,10 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
               disabled: $props.disabled,
               tabindex: -1,
               "aria-hidden": "true"
-            }, $props.incrementButtonProps), {
+            }, { ...$props.incrementButtonProps, ..._ctx.ptm('incrementButton') }), {
               icon: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "incrementbuttonicon", {}, () => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), {
-                    class: vue.normalizeClass($props.incrementButtonIcon)
-                  }, null, 8, ["class"]))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), vue.mergeProps({ class: $props.incrementButtonIcon }, _ctx.ptm('incrementButton')['icon']), null, 16, ["class"]))
                 ])
               ]),
               _: 3
@@ -6911,18 +6965,16 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
               disabled: $props.disabled,
               tabindex: -1,
               "aria-hidden": "true"
-            }, $props.decrementButtonProps), {
+            }, { ...$props.decrementButtonProps, ..._ctx.ptm('decrementButton') }), {
               icon: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "decrementbuttonicon", {}, () => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), {
-                    class: vue.normalizeClass($props.decrementButtonIcon)
-                  }, null, 8, ["class"]))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), vue.mergeProps({ class: $props.decrementButtonIcon }, _ctx.ptm('decrementButton')['icon']), null, 16, ["class"]))
                 ])
               ]),
               _: 3
             }, 16, ["class", "disabled"]))
           : vue.createCommentVNode("", true)
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -6959,7 +7011,7 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
 
     return script;
 
-})(primevue.button, primevue.icons.angledown, primevue.icons.angleup, primevue.inputtext, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.button, primevue.icons.angledown, primevue.icons.angleup, primevue.inputtext, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.message = (function (BaseComponent, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
@@ -7279,11 +7331,12 @@ this.primevue.progressbar = (function (BaseComponent, vue) {
 })(primevue.basecomponent, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIcon, TimesIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, vue) {
+this.primevue.dropdown = (function (api, BaseComponent, ChevronDownIcon, FilterIcon, SpinnerIcon, TimesIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
@@ -7295,6 +7348,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
 
     var script = {
         name: 'Dropdown',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
         props: {
             modelValue: null,
@@ -7515,6 +7569,15 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
             getOptionRenderKey(option, index) {
                 return (this.dataKey ? utils.ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
             },
+            getPTOptions(option, itemOptions, index, key) {
+                return this.ptm(key, {
+                    context: {
+                        selected: this.isSelected(option),
+                        focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                        disabled: this.isOptionDisabled(option)
+                    }
+                });
+            },
             isOptionDisabled(option) {
                 return this.optionDisabled ? utils.ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
             },
@@ -8199,42 +8262,10 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
     const _hoisted_1 = ["id"];
     const _hoisted_2 = ["id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
     const _hoisted_3 = ["id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-disabled"];
-    const _hoisted_4 = { class: "p-dropdown-trigger" };
-    const _hoisted_5 = {
-      key: 0,
-      class: "p-dropdown-header"
-    };
-    const _hoisted_6 = { class: "p-dropdown-filter-container" };
-    const _hoisted_7 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
-    const _hoisted_8 = {
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
-    const _hoisted_9 = ["id"];
-    const _hoisted_10 = ["id"];
-    const _hoisted_11 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
-    const _hoisted_12 = {
-      key: 0,
-      class: "p-dropdown-empty-message",
-      role: "option"
-    };
-    const _hoisted_13 = {
-      key: 1,
-      class: "p-dropdown-empty-message",
-      role: "option"
-    };
-    const _hoisted_14 = {
-      key: 1,
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
-    const _hoisted_15 = {
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
+    const _hoisted_4 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
+    const _hoisted_5 = ["id"];
+    const _hoisted_6 = ["id"];
+    const _hoisted_7 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
@@ -8242,12 +8273,12 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
       const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
         id: $data.id,
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         onClick: _cache[15] || (_cache[15] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
-      }, [
+      }, _ctx.ptm('root')), [
         ($props.editable)
           ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
               key: 0,
@@ -8272,7 +8303,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
               onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
               onInput: _cache[3] || (_cache[3] = (...args) => ($options.onEditableInput && $options.onEditableInput(...args)))
-            }, $props.inputProps), null, 16, _hoisted_2))
+            }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, _hoisted_2))
           : (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 1,
               ref: "focusInput",
@@ -8291,7 +8322,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               onFocus: _cache[4] || (_cache[4] = (...args) => ($options.onFocus && $options.onFocus(...args))),
               onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onBlur && $options.onBlur(...args))),
               onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-            }, $props.inputProps), [
+            }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
               vue.renderSlot(_ctx.$slots, "value", {
                 value: $props.modelValue,
                 placeholder: $props.placeholder
@@ -8307,38 +8338,38 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clearIcon ? 'i' : 'TimesIcon'), vue.mergeProps({
                 class: ['p-dropdown-clear-icon', $props.clearIcon],
                 onClick: $options.onClearClick
-              }, $props.clearIconProps), null, 16, ["class", "onClick"]))
+              }, { ...$props.clearIconProps, ..._ctx.ptm('clearIcon') }), null, 16, ["class", "onClick"]))
             ])
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4, [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-dropdown-trigger" }, _ctx.ptm('trigger')), [
           ($props.loading)
             ? vue.renderSlot(_ctx.$slots, "loadingicon", {
                 key: 0,
                 class: "p-dropdown-trigger-icon"
               }, () => [
                 ($props.loadingIcon)
-                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                       key: 0,
-                      class: vue.normalizeClass(['p-dropdown-trigger-icon pi-spin', $props.loadingIcon]),
+                      class: ['p-dropdown-trigger-icon pi-spin', $props.loadingIcon],
                       "aria-hidden": "true"
-                    }, null, 2))
-                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                       key: 1,
                       class: "p-dropdown-trigger-icon",
                       spin: "",
                       "aria-hidden": "true"
-                    }))
+                    }, _ctx.ptm('loadingIcon')), null, 16))
               ])
             : vue.renderSlot(_ctx.$slots, "dropdownicon", {
                 key: 1,
                 class: "p-dropdown-trigger-icon"
               }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), {
-                  class: vue.normalizeClass(['p-dropdown-trigger-icon', $props.dropdownIcon]),
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+                  class: ['p-dropdown-trigger-icon', $props.dropdownIcon],
                   "aria-hidden": "true"
-                }, null, 8, ["class"]))
+                }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))
               ])
-        ]),
+        ], 16),
         vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
           default: vue.withCtx(() => [
             vue.createVNode(vue.Transition, {
@@ -8357,27 +8388,30 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                       class: $options.panelStyleClass,
                       onClick: _cache[13] || (_cache[13] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                       onKeydown: _cache[14] || (_cache[14] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args)))
-                    }, $props.panelProps), [
-                      vue.createElementVNode("span", {
+                    }, { ...$props.panelProps, ..._ctx.ptm('panel') }), [
+                      vue.createElementVNode("span", vue.mergeProps({
                         ref: "firstHiddenFocusableElementOnOverlay",
                         role: "presentation",
                         "aria-hidden": "true",
                         class: "p-hidden-accessible p-hidden-focusable",
                         tabindex: 0,
                         onFocus: _cache[7] || (_cache[7] = (...args) => ($options.onFirstHiddenFocus && $options.onFirstHiddenFocus(...args)))
-                      }, null, 544),
+                      }, _ctx.ptm('hiddenFirstFocusableEl')), null, 16),
                       vue.renderSlot(_ctx.$slots, "header", {
                         value: $props.modelValue,
                         options: $options.visibleOptions
                       }),
                       ($props.filter)
-                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-                            vue.createElementVNode("div", _hoisted_6, [
+                        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                            key: 0,
+                            class: "p-dropdown-header"
+                          }, _ctx.ptm('header')), [
+                            vue.createElementVNode("div", vue.mergeProps({ class: "p-dropdown-filter-container" }, _ctx.ptm('filterContainer')), [
                               vue.createElementVNode("input", vue.mergeProps({
                                 ref: "filterInput",
                                 type: "text",
                                 value: $data.filterValue,
-                                onVnodeUpdated: _cache[8] || (_cache[8] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
+                                onVnodeMounted: _cache[8] || (_cache[8] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                                 class: "p-dropdown-filter p-inputtext p-component",
                                 placeholder: $props.filterPlaceholder,
                                 role: "searchbox",
@@ -8387,58 +8421,62 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                                 onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
                                 onBlur: _cache[10] || (_cache[10] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
                                 onInput: _cache[11] || (_cache[11] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
-                              }, $props.filterInputProps), null, 16, _hoisted_7),
+                              }, { ...$props.filterInputProps, ..._ctx.ptm('filterInput') }), null, 16, _hoisted_4),
                               vue.renderSlot(_ctx.$slots, "filtericon", {}, () => [
-                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'FilterIcon'), {
-                                  class: vue.normalizeClass(['p-dropdown-filter-icon', $props.filterIcon])
-                                }, null, 8, ["class"]))
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'FilterIcon'), vue.mergeProps({
+                                  class: ['p-dropdown-filter-icon', $props.filterIcon]
+                                }, _ctx.ptm('filterIcon')), null, 16, ["class"]))
                               ])
-                            ]),
-                            vue.createElementVNode("span", _hoisted_8, vue.toDisplayString($options.filterResultMessageText), 1)
-                          ]))
+                            ], 16),
+                            vue.createElementVNode("span", vue.mergeProps({
+                              role: "status",
+                              "aria-live": "polite",
+                              class: "p-hidden-accessible"
+                            }, _ctx.ptm('hiddenFilterResult')), vue.toDisplayString($options.filterResultMessageText), 17)
+                          ], 16))
                         : vue.createCommentVNode("", true),
-                      vue.createElementVNode("div", {
+                      vue.createElementVNode("div", vue.mergeProps({
                         class: "p-dropdown-items-wrapper",
-                        style: vue.normalizeStyle({ 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
-                      }, [
-                        vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
+                        style: { 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
+                      }, _ctx.ptm('wrapper')), [
+                        vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, { ...$props.virtualScrollerOptions, ..._ctx.ptm('virtualScroller') }, {
                           items: $options.visibleOptions,
                           style: { height: $props.scrollHeight },
                           tabindex: -1,
                           disabled: $options.virtualScrollerDisabled
                         }), vue.createSlots({
                           content: vue.withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }) => [
-                            vue.createElementVNode("ul", {
+                            vue.createElementVNode("ul", vue.mergeProps({
                               ref: (el) => $options.listRef(el, contentRef),
                               id: $data.id + '_list',
-                              class: vue.normalizeClass(['p-dropdown-items', styleClass]),
-                              style: vue.normalizeStyle(contentStyle),
+                              class: ['p-dropdown-items', styleClass],
+                              style: contentStyle,
                               role: "listbox"
-                            }, [
+                            }, _ctx.ptm('list')), [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (option, i) => {
                                 return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                   key: $options.getOptionRenderKey(option, $options.getOptionIndex(i, getItemOptions))
                                 }, [
                                   ($options.isOptionGroup(option))
-                                    ? (vue.openBlock(), vue.createElementBlock("li", {
+                                    ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                         key: 0,
                                         id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
+                                        style: { height: itemSize ? itemSize + 'px' : undefined },
                                         class: "p-dropdown-item-group",
                                         role: "option"
-                                      }, [
+                                      }, _ctx.ptm('itemGroup')), [
                                         vue.renderSlot(_ctx.$slots, "optiongroup", {
                                           option: option.optionGroup,
                                           index: $options.getOptionIndex(i, getItemOptions)
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)
                                         ])
-                                      ], 12, _hoisted_10))
-                                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                                      ], 16, _hoisted_6))
+                                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                         key: 1,
                                         id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
-                                        class: vue.normalizeClass(['p-dropdown-item', { 'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option) }]),
+                                        style: { height: itemSize ? itemSize + 'px' : undefined },
+                                        class: ['p-dropdown-item', { 'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option) }],
                                         role: "option",
                                         "aria-label": $options.getOptionLabel(option),
                                         "aria-selected": $options.isSelected(option),
@@ -8447,32 +8485,40 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                                         "aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
                                         onClick: $event => ($options.onOptionSelect($event, option)),
                                         onMousemove: $event => ($options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions)))
-                                      }, [
+                                      }, $options.getPTOptions(option, getItemOptions, i, 'item')), [
                                         vue.renderSlot(_ctx.$slots, "option", {
                                           option: option,
                                           index: $options.getOptionIndex(i, getItemOptions)
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionLabel(option)), 1)
                                         ])
-                                      ], 46, _hoisted_11)), [
+                                      ], 16, _hoisted_7)), [
                                         [_directive_ripple]
                                       ])
                                 ], 64))
                               }), 128)),
                               ($data.filterValue && (!items || (items && items.length === 0)))
-                                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_12, [
+                                ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                    key: 0,
+                                    class: "p-dropdown-empty-message",
+                                    role: "option"
+                                  }, _ctx.ptm('emptyMessage')), [
                                     vue.renderSlot(_ctx.$slots, "emptyfilter", {}, () => [
                                       vue.createTextVNode(vue.toDisplayString($options.emptyFilterMessageText), 1)
                                     ])
-                                  ]))
+                                  ], 16))
                                 : (!$props.options || ($props.options && $props.options.length === 0))
-                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_13, [
+                                  ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                      key: 1,
+                                      class: "p-dropdown-empty-message",
+                                      role: "option"
+                                    }, _ctx.ptm('emptyMessage')), [
                                       vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
                                       ])
-                                    ]))
+                                    ], 16))
                                   : vue.createCommentVNode("", true)
-                            ], 14, _hoisted_9)
+                            ], 16, _hoisted_5)
                           ]),
                           _: 2
                         }, [
@@ -8486,23 +8532,32 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                               }
                             : undefined
                         ]), 1040, ["items", "style", "disabled"])
-                      ], 4),
+                      ], 16),
                       vue.renderSlot(_ctx.$slots, "footer", {
                         value: $props.modelValue,
                         options: $options.visibleOptions
                       }),
                       (!$props.options || ($props.options && $props.options.length === 0))
-                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString($options.emptyMessageText), 1))
+                        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                            key: 1,
+                            role: "status",
+                            "aria-live": "polite",
+                            class: "p-hidden-accessible"
+                          }, _ctx.ptm('emptyMessage')), vue.toDisplayString($options.emptyMessageText), 17))
                         : vue.createCommentVNode("", true),
-                      vue.createElementVNode("span", _hoisted_15, vue.toDisplayString($options.selectedMessageText), 1),
-                      vue.createElementVNode("span", {
+                      vue.createElementVNode("span", vue.mergeProps({
+                        role: "status",
+                        "aria-live": "polite",
+                        class: "p-hidden-accessible"
+                      }, _ctx.ptm('hiddenSelectedMessage')), vue.toDisplayString($options.selectedMessageText), 17),
+                      vue.createElementVNode("span", vue.mergeProps({
                         ref: "lastHiddenFocusableElementOnOverlay",
                         role: "presentation",
                         "aria-hidden": "true",
                         class: "p-hidden-accessible p-hidden-focusable",
                         tabindex: 0,
                         onFocus: _cache[12] || (_cache[12] = (...args) => ($options.onLastHiddenFocus && $options.onLastHiddenFocus(...args)))
-                      }, null, 544)
+                      }, _ctx.ptm('hiddenLastFocusableEl')), null, 16)
                     ], 16))
                   : vue.createCommentVNode("", true)
               ]),
@@ -8511,7 +8566,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
           ]),
           _: 3
         }, 8, ["appendTo"])
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -8548,7 +8603,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
 
     return script;
 
-})(primevue.api, primevue.icons.chevrondown, primevue.icons.filter, primevue.icons.spinner, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, Vue);
+})(primevue.api, primevue.basecomponent, primevue.icons.chevrondown, primevue.icons.filter, primevue.icons.spinner, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Portal, Ripple, utils, vue) {
@@ -9034,7 +9089,7 @@ this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMax
     const _hoisted_1 = ["aria-labelledby", "aria-modal"];
     const _hoisted_2 = ["id"];
     const _hoisted_3 = ["autofocus", "tabindex"];
-    const _hoisted_4 = ["autofocus", "aria-label", "pt"];
+    const _hoisted_4 = ["autofocus", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
@@ -9111,13 +9166,12 @@ this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMax
                                         class: "p-dialog-header-icon p-dialog-header-close p-link",
                                         onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
                                         "aria-label": $options.closeAriaLabel,
-                                        type: "button",
-                                        pt: _ctx.ptm('closeButton')
-                                      }, $props.closeButtonProps), [
+                                        type: "button"
+                                      }, { ...$props.closeButtonProps, ..._ctx.ptm('closeButton') }), [
                                         vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
                                           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
                                             class: ['p-dialog-header-close-icon', $props.closeIcon]
-                                          }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
+                                          }, _ctx.ptm('closeButtonIcon')), null, 16, ["class"]))
                                         ])
                                       ], 16, _hoisted_4)), [
                                         [_directive_ripple]
@@ -9195,11 +9249,12 @@ this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMax
 })(primevue.basecomponent, primevue.focustrap, primevue.icons.times, primevue.icons.windowmaximize, primevue.icons.windowminimize, primevue.portal, primevue.ripple, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
+this.primevue.paginator = (function (BaseComponent, utils, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var AngleDoubleLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDoubleLeftIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
@@ -9210,6 +9265,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$9 = {
         name: 'CurrentPageReport',
+        extends: BaseComponent__default["default"],
         props: {
             pageCount: {
                 type: Number,
@@ -9255,22 +9311,30 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         }
     };
 
-    const _hoisted_1$2 = { class: "p-paginator-current" };
-
     function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, vue.toDisplayString($options.text), 1))
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-current" }, _ctx.ptm('current')), vue.toDisplayString($options.text), 17))
     }
 
     script$9.render = render$9;
 
     var script$8 = {
         name: 'FirstPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9292,12 +9356,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('firstPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('firstPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9306,6 +9370,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$7 = {
         name: 'JumpToPageDropdown',
+        extends: BaseComponent__default["default"],
         emits: ['page-change'],
         props: {
             page: Number,
@@ -9343,14 +9408,16 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         optionValue: "value",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
         class: "p-paginator-page-options",
-        disabled: $props.disabled
-      }, null, 8, ["modelValue", "options", "disabled"]))
+        disabled: $props.disabled,
+        pt: _ctx.ptm('JTPDropdown')
+      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
     }
 
     script$7.render = render$7;
 
     var script$6 = {
         name: 'JumpToPageInput',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['page-change'],
         props: {
@@ -9395,20 +9462,31 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         class: "p-paginator-page-input",
         "aria-label": $options.inputArialabel,
         disabled: $props.disabled,
-        "onUpdate:modelValue": $options.onChange
-      }, null, 8, ["modelValue", "aria-label", "disabled", "onUpdate:modelValue"]))
+        "onUpdate:modelValue": $options.onChange,
+        pt: _ctx.ptm('JTPInput')
+      }, null, 8, ["modelValue", "aria-label", "disabled", "onUpdate:modelValue", "pt"]))
     }
 
     script$6.render = render$6;
 
     var script$5 = {
         name: 'LastPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9430,12 +9508,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('lastPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('lastPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9444,12 +9522,22 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$4 = {
         name: 'NextPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9471,12 +9559,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('nextPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('nextPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9485,6 +9573,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$3 = {
         name: 'PageLinks',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['click'],
         props: {
@@ -9492,6 +9581,13 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
             page: Number
         },
         methods: {
+            getPTOptions(pageLink, key) {
+                return this.ptm(key, {
+                    context: {
+                        active: pageLink === this.page
+                    }
+                });
+            },
             onPageLinkClick(event, pageLink) {
                 this.$emit('click', {
                     originalEvent: event,
@@ -9502,46 +9598,54 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
             }
         },
-        computed: {},
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1$1 = { class: "p-paginator-pages" };
-    const _hoisted_2$1 = ["aria-label", "aria-current", "onClick"];
+    const _hoisted_1 = ["aria-label", "aria-current", "onClick"];
 
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-pages" }, _ctx.ptm('pages')), [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (pageLink) => {
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             key: pageLink,
-            class: vue.normalizeClass(['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }]),
+            class: ['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }],
             type: "button",
             "aria-label": $options.ariaPageLabel(pageLink),
             "aria-current": pageLink - 1 === $props.page ? 'page' : undefined,
             onClick: $event => ($options.onPageLinkClick($event, pageLink))
-          }, [
+          }, $options.getPTOptions(pageLink - 1, 'pageButton')), [
             vue.createTextVNode(vue.toDisplayString(pageLink), 1)
-          ], 10, _hoisted_2$1)), [
+          ], 16, _hoisted_1)), [
             [_directive_ripple]
           ])
         }), 128))
-      ]))
+      ], 16))
     }
 
     script$3.render = render$3;
 
     var script$2 = {
         name: 'PrevPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9563,12 +9667,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('prevPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('prevPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9577,6 +9681,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$1 = {
         name: 'RowsPerPageDropdown',
+        extends: BaseComponent__default["default"],
         emits: ['rows-change'],
         props: {
             options: Array,
@@ -9616,14 +9721,16 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         optionValue: "value",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
         class: "p-paginator-rpp-options",
-        disabled: $props.disabled
-      }, null, 8, ["modelValue", "options", "disabled"]))
+        disabled: $props.disabled,
+        pt: _ctx.ptm('RPPDropdown')
+      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'Paginator',
+        extends: BaseComponent__default["default"],
         emits: ['update:first', 'update:rows', 'page'],
         props: {
             totalRecords: {
@@ -9896,16 +10003,6 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         }
     };
 
-    const _hoisted_1 = { key: 0 };
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-paginator-left-content"
-    };
-    const _hoisted_3 = {
-      key: 1,
-      class: "p-paginator-right-content"
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
       const _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
@@ -9918,18 +10015,21 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
       const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
 
       return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
-        ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+        ? (vue.openBlock(), vue.createElementBlock("nav", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('root'))), [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (value, key) => {
-              return (vue.openBlock(), vue.createElementBlock("div", {
+              return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: key,
                 ref_for: true,
                 ref: "paginator",
-                class: vue.normalizeClass(["p-paginator p-component", $options.getPaginatorClasses(key)])
-              }, [
+                class: ["p-paginator p-component", $options.getPaginatorClasses(key)]
+              }, _ctx.ptm('paginator')), [
                 (_ctx.$slots.start)
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                      key: 0,
+                      class: "p-paginator-left-content"
+                    }, _ctx.ptm('left')), [
                       vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
-                    ]))
+                    ], 16))
                   : vue.createCommentVNode("", true),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, (item) => {
                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
@@ -9939,40 +10039,45 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                           "aria-label": $options.getAriaLabel('firstPageLabel'),
                           template: _ctx.$slots.firstpagelinkicon,
                           onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
-                          disabled: $options.isFirstPage || $options.empty
-                        }, null, 8, ["aria-label", "template", "disabled"]))
+                          disabled: $options.isFirstPage || $options.empty,
+                          pt: _ctx.pt
+                        }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                       : (item === 'PrevPageLink')
                         ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
                             key: 1,
                             "aria-label": $options.getAriaLabel('prevPageLabel'),
                             template: _ctx.$slots.prevpagelinkicon,
                             onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
-                            disabled: $options.isFirstPage || $options.empty
-                          }, null, 8, ["aria-label", "template", "disabled"]))
+                            disabled: $options.isFirstPage || $options.empty,
+                            pt: _ctx.pt
+                          }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                         : (item === 'NextPageLink')
                           ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
                               key: 2,
                               "aria-label": $options.getAriaLabel('nextPageLabel'),
                               template: _ctx.$slots.nextpagelinkicon,
                               onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
-                              disabled: $options.isLastPage || $options.empty
-                            }, null, 8, ["aria-label", "template", "disabled"]))
+                              disabled: $options.isLastPage || $options.empty,
+                              pt: _ctx.pt
+                            }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                           : (item === 'LastPageLink')
                             ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
                                 key: 3,
                                 "aria-label": $options.getAriaLabel('lastPageLabel'),
                                 template: _ctx.$slots.lastpagelinkicon,
                                 onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
-                                disabled: $options.isLastPage || $options.empty
-                              }, null, 8, ["aria-label", "template", "disabled"]))
+                                disabled: $options.isLastPage || $options.empty,
+                                pt: _ctx.pt
+                              }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                             : (item === 'PageLinks')
                               ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
                                   key: 4,
                                   "aria-label": $options.getAriaLabel('pageLabel'),
                                   value: $options.pageLinks,
                                   page: $options.page,
-                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
-                                }, null, 8, ["aria-label", "value", "page"]))
+                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event))),
+                                  pt: _ctx.pt
+                                }, null, 8, ["aria-label", "value", "page", "pt"]))
                               : (item === 'CurrentPageReport')
                                 ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
                                     key: 5,
@@ -9983,8 +10088,9 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                     pageCount: $options.pageCount,
                                     first: $data.d_first,
                                     rows: $data.d_rows,
-                                    totalRecords: $props.totalRecords
-                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
+                                    totalRecords: $props.totalRecords,
+                                    pt: _ctx.pt
+                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords", "pt"]))
                                 : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
                                   ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
                                       key: 6,
@@ -9992,8 +10098,9 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                       rows: $data.d_rows,
                                       options: $props.rowsPerPageOptions,
                                       onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
-                                      disabled: $options.empty
-                                    }, null, 8, ["aria-label", "rows", "options", "disabled"]))
+                                      disabled: $options.empty,
+                                      pt: _ctx.pt
+                                    }, null, 8, ["aria-label", "rows", "options", "disabled", "pt"]))
                                   : (item === 'JumpToPageDropdown')
                                     ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
                                         key: 7,
@@ -10001,26 +10108,31 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                         page: $options.page,
                                         pageCount: $options.pageCount,
                                         onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
-                                        disabled: $options.empty
-                                      }, null, 8, ["aria-label", "page", "pageCount", "disabled"]))
+                                        disabled: $options.empty,
+                                        pt: _ctx.pt
+                                      }, null, 8, ["aria-label", "page", "pageCount", "disabled", "pt"]))
                                     : (item === 'JumpToPageInput')
                                       ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
                                           key: 8,
                                           page: $options.currentPage,
                                           onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
-                                          disabled: $options.empty
-                                        }, null, 8, ["page", "disabled"]))
+                                          disabled: $options.empty,
+                                          pt: _ctx.pt
+                                        }, null, 8, ["page", "disabled", "pt"]))
                                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128)),
                 (_ctx.$slots.end)
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                      key: 1,
+                      class: "p-paginator-right-content"
+                    }, _ctx.ptm('end')), [
                       vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
-                    ]))
+                    ], 16))
                   : vue.createCommentVNode("", true)
-              ], 2))
+              ], 16))
             }), 128))
-          ]))
+          ], 16))
         : vue.createCommentVNode("", true)
     }
 
@@ -10058,14 +10170,15 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     return script;
 
-})(primevue.utils, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);
+})(primevue.basecomponent, primevue.utils, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);
 
 this.primevue = this.primevue || {};
-this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple, vue) {
+this.primevue.tree = (function (BaseComponent, SearchIcon, SpinnerIcon, utils, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
@@ -10076,6 +10189,7 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
 
     var script$1 = {
         name: 'TreeNode',
+        extends: BaseComponent__default["default"],
         emits: ['node-toggle', 'node-click', 'checkbox-change'],
         props: {
             node: {
@@ -10127,6 +10241,15 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
             onChildNodeToggle(node) {
                 this.$emit('node-toggle', node);
             },
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        expanded: this.expanded,
+                        selected: this.selected,
+                        checked: this.checked
+                    }
+                });
+            },
             onClick(event) {
                 if (this.toggleClicked || utils.DomHandler.hasClass(event.target, 'p-tree-toggler') || utils.DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
                     this.toggleClicked = false;
@@ -10464,25 +10587,14 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
     };
 
     const _hoisted_1$1 = ["aria-label", "aria-selected", "aria-expanded", "aria-setsize", "aria-posinset", "aria-level", "aria-checked", "tabindex"];
-    const _hoisted_2$1 = {
-      key: 0,
-      class: "p-checkbox p-component",
-      "aria-hidden": "true"
-    };
-    const _hoisted_3$1 = { class: "p-treenode-label" };
-    const _hoisted_4$1 = {
-      key: 0,
-      class: "p-treenode-children",
-      role: "group"
-    };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TreeNode = vue.resolveComponent("TreeNode", true);
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("li", {
+      return (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
         ref: "currentNode",
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         role: "treeitem",
         "aria-label": $options.label($props.node),
         "aria-selected": $options.ariaSelected,
@@ -10493,20 +10605,20 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
         "aria-checked": $options.ariaChecked,
         tabindex: $props.index === 0 ? 0 : -1,
         onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-      }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass($options.contentClass),
+      }, $options.getPTOptions('node')), [
+        vue.createElementVNode("div", vue.mergeProps({
+          class: $options.contentClass,
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
           onTouchend: _cache[2] || (_cache[2] = (...args) => ($options.onTouchEnd && $options.onTouchEnd(...args))),
-          style: vue.normalizeStyle($props.node.style)
-        }, [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+          style: $props.node.style
+        }, $options.getPTOptions('content')), [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             type: "button",
             class: "p-tree-toggler p-link",
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
             tabindex: "-1",
             "aria-hidden": "true"
-          }, [
+          }, $options.getPTOptions('toggler')), [
             ($props.templates['togglericon'])
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['togglericon']), {
                   key: 0,
@@ -10515,23 +10627,27 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                   class: "p-tree-toggler-icon"
                 }, null, 8, ["node", "expanded"]))
               : ($options.expanded)
-                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), {
+                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
                     key: 1,
                     class: "p-tree-toggler-icon"
-                  }))
-                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), {
+                  }, $options.getPTOptions('togglerIcon')), null, 16))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
                     key: 2,
                     class: "p-tree-toggler-icon"
-                  }))
-          ])), [
+                  }, $options.getPTOptions('togglerIcon')), null, 16))
+          ], 16)), [
             [_directive_ripple]
           ]),
           ($options.checkboxMode)
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass($options.checkboxClass),
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                class: "p-checkbox p-component",
+                "aria-hidden": "true"
+              }, $options.getPTOptions('checkboxContainer')), [
+                vue.createElementVNode("div", vue.mergeProps({
+                  class: $options.checkboxClass,
                   role: "checkbox"
-                }, [
+                }, $options.getPTOptions('checkbox')), [
                   ($props.templates['checkboxicon'])
                     ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
                         key: 0,
@@ -10539,17 +10655,15 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                         partialChecked: $options.partialChecked,
                         class: "p-checkbox-icon"
                       }, null, 8, ["checked", "partialChecked"]))
-                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : $options.partialChecked ? 'MinusIcon' : null), {
+                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : $options.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
                         key: 1,
                         class: "p-checkbox-icon"
-                      }))
-                ], 2)
-              ]))
+                      }, $options.getPTOptions('checkboxIcon')), null, 16))
+                ], 16)
+              ], 16))
             : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass($options.icon)
-          }, null, 2),
-          vue.createElementVNode("span", _hoisted_3$1, [
+          vue.createElementVNode("span", vue.mergeProps({ class: $options.icon }, $options.getPTOptions('nodeIcon')), null, 16),
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-treenode-label" }, $options.getPTOptions('label')), [
             ($props.templates[$props.node.type] || $props.templates['default'])
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates[$props.node.type] || $props.templates['default']), {
                   key: 0,
@@ -10558,10 +10672,14 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   vue.createTextVNode(vue.toDisplayString($options.label($props.node)), 1)
                 ], 64))
-          ])
-        ], 38),
+          ], 16)
+        ], 16),
         ($options.hasChildren && $options.expanded)
-          ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_4$1, [
+          ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
+              key: 0,
+              class: "p-treenode-children",
+              role: "group"
+            }, _ctx.ptm('subgroup')), [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.node.children, (childNode) => {
                 return (vue.openBlock(), vue.createBlock(_component_TreeNode, {
                   key: childNode.key,
@@ -10573,18 +10691,20 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                   onNodeClick: $options.onChildNodeClick,
                   selectionMode: $props.selectionMode,
                   selectionKeys: $props.selectionKeys,
-                  onCheckboxChange: $options.propagateUp
-                }, null, 8, ["node", "templates", "level", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange"]))
+                  onCheckboxChange: $options.propagateUp,
+                  pt: _ctx.pt
+                }, null, 8, ["node", "templates", "level", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "pt"]))
               }), 128))
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 42, _hoisted_1$1))
+      ], 16, _hoisted_1$1))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'Tree',
+        extends: BaseComponent__default["default"],
         emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
         props: {
             value: {
@@ -10856,68 +10976,64 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-tree-loading-overlay p-component-overlay"
-    };
-    const _hoisted_2 = {
-      key: 1,
-      class: "p-tree-filter-container"
-    };
-    const _hoisted_3 = ["placeholder"];
-    const _hoisted_4 = ["aria-labelledby", "aria-label"];
+    const _hoisted_1 = ["placeholder"];
+    const _hoisted_2 = ["aria-labelledby", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _component_SearchIcon = vue.resolveComponent("SearchIcon");
       const _component_TreeNode = vue.resolveComponent("TreeNode");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         ($props.loading)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 0,
+              class: "p-tree-loading-overlay p-component-overlay"
+            }, _ctx.ptm('loadingOverlay')), [
               vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
                 ($props.loadingIcon)
-                  ? (vue.openBlock(), vue.createElementBlock("i", {
+                  ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                       key: 0,
-                      class: vue.normalizeClass(['p-tree-loading-icon pi-spin', $props.loadingIcon])
-                    }, null, 2))
-                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                      class: ['p-tree-loading-icon pi-spin', $props.loadingIcon]
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                       key: 1,
                       spin: "",
                       class: "p-tree-loading-icon"
-                    }))
+                    }, _ctx.ptm('loadingIcon')), null, 16))
               ])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.filter)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.withDirectives(vue.createElementVNode("input", {
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-tree-filter-container"
+            }, _ctx.ptm('filterContainer')), [
+              vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.filterValue) = $event)),
                 type: "text",
                 autocomplete: "off",
                 class: "p-tree-filter p-inputtext p-component",
                 placeholder: $props.filterPlaceholder,
                 onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onFilterKeydown && $options.onFilterKeydown(...args)))
-              }, null, 40, _hoisted_3), [
+              }, _ctx.ptm('input')), null, 16, _hoisted_1), [
                 [vue.vModelText, $data.filterValue]
               ]),
               vue.renderSlot(_ctx.$slots, "searchicon", {}, () => [
-                vue.createVNode(_component_SearchIcon, { class: "p-tree-filter-icon" })
+                vue.createVNode(_component_SearchIcon, vue.mergeProps({ class: "p-tree-filter-icon" }, _ctx.ptm('searchIcon')), null, 16)
               ])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
+        vue.createElementVNode("div", vue.mergeProps({
           class: "p-tree-wrapper",
-          style: vue.normalizeStyle({ maxHeight: $props.scrollHeight })
-        }, [
-          vue.createElementVNode("ul", {
+          style: { maxHeight: $props.scrollHeight }
+        }, _ctx.ptm('wrapper')), [
+          vue.createElementVNode("ul", vue.mergeProps({
             class: "p-tree-container",
             role: "tree",
             "aria-labelledby": _ctx.ariaLabelledby,
             "aria-label": _ctx.ariaLabel
-          }, [
+          }, _ctx.ptm('container')), [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.valueToRender, (node, index) => {
               return (vue.openBlock(), vue.createBlock(_component_TreeNode, {
                 key: node.key,
@@ -10930,12 +11046,13 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                 onNodeClick: $options.onNodeClick,
                 selectionMode: $props.selectionMode,
                 selectionKeys: $props.selectionKeys,
-                onCheckboxChange: $options.onCheckboxChange
-              }, null, 8, ["node", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange"]))
+                onCheckboxChange: $options.onCheckboxChange,
+                pt: _ctx.pt
+              }, null, 8, ["node", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "pt"]))
             }), 128))
-          ], 8, _hoisted_4)
-        ], 4)
-      ], 2))
+          ], 16, _hoisted_2)
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -10972,7 +11089,7 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
 
     return script;
 
-})(primevue.icons.search, primevue.icons.spinner, primevue.utils, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.search, primevue.icons.spinner, primevue.utils, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.menu = (function (BaseComponent, OverlayEventBus, Portal, utils, Ripple, vue) {