primevue 3.27.0 → 3.29.0

package/multiselect/multiselect.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var api = require('primevue/api');
+var BaseComponent = require('primevue/basecomponent');
 var CheckIcon = require('primevue/icons/check');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
 var SearchIcon = require('primevue/icons/search');
@@ -16,6 +17,7 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
 var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
 var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
@@ -29,6 +31,7 @@ var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScrolle
 
 var script = {
     name: 'MultiSelect',
+    extends: BaseComponent__default["default"],
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
     props: {
         modelValue: null,
@@ -250,6 +253,23 @@ var script = {
         getOptionRenderKey(option) {
             return this.dataKey ? utils.ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
+        getHeaderCheckboxPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.allSelected,
+                    focused: this.headerCheckboxFocused
+                }
+            });
+        },
+        getCheckboxPTOptions(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) {
             if (this.maxSelectionLimitReached && !this.isSelected(option)) {
                 return true;
@@ -1066,55 +1086,14 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-hidden-accessible" };
-const _hoisted_2 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
-const _hoisted_3 = { class: "p-multiselect-label-container" };
-const _hoisted_4 = { class: "p-multiselect-token-label" };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { class: "p-multiselect-trigger" };
-const _hoisted_7 = {
-  key: 0,
-  class: "p-multiselect-header"
-};
-const _hoisted_8 = { class: "p-hidden-accessible" };
-const _hoisted_9 = ["checked", "aria-label"];
-const _hoisted_10 = {
-  key: 1,
-  class: "p-multiselect-filter-container"
-};
-const _hoisted_11 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
-const _hoisted_12 = {
-  key: 2,
-  role: "status",
-  "aria-live": "polite",
-  class: "p-hidden-accessible"
-};
-const _hoisted_13 = ["aria-label"];
-const _hoisted_14 = ["id"];
-const _hoisted_15 = ["id"];
-const _hoisted_16 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
-const _hoisted_17 = { class: "p-checkbox p-component" };
-const _hoisted_18 = {
-  key: 0,
-  class: "p-multiselect-empty-message",
-  role: "option"
-};
-const _hoisted_19 = {
-  key: 1,
-  class: "p-multiselect-empty-message",
-  role: "option"
-};
-const _hoisted_20 = {
-  key: 1,
-  role: "status",
-  "aria-live": "polite",
-  class: "p-hidden-accessible"
-};
-const _hoisted_21 = {
-  role: "status",
-  "aria-live": "polite",
-  class: "p-hidden-accessible"
-};
+const _hoisted_1 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["checked", "aria-label"];
+const _hoisted_4 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
+const _hoisted_5 = ["aria-label"];
+const _hoisted_6 = ["id"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TimesCircleIcon = vue.resolveComponent("TimesCircleIcon");
@@ -1123,12 +1102,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   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",
-    class: vue.normalizeClass($options.containerClass),
+    class: $options.containerClass,
     onClick: _cache[15] || (_cache[15] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
-  }, [
-    vue.createElementVNode("div", _hoisted_1, [
+  }, _ctx.ptm('root')), [
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
       vue.createElementVNode("input", vue.mergeProps({
         ref: "focusInput",
         id: $props.inputId,
@@ -1147,12 +1126,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
         onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
         onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-      }, $props.inputProps), null, 16, _hoisted_2)
-    ]),
-    vue.createElementVNode("div", _hoisted_3, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass($options.labelClass)
-      }, [
+      }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, _hoisted_1)
+    ], 16),
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-multiselect-label-container" }, _ctx.ptm('labelContainer')), [
+      vue.createElementVNode("div", vue.mergeProps({ class: $options.labelClass }, _ctx.ptm('label')), [
         vue.renderSlot(_ctx.$slots, "value", {
           value: $props.modelValue,
           placeholder: $props.placeholder
@@ -1164,12 +1141,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : ($props.display === 'chip')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.chipSelectedItems, (item) => {
-                    return (vue.openBlock(), vue.createElementBlock("div", {
+                    return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                       key: $options.getLabelByValue(item),
                       class: "p-multiselect-token"
-                    }, [
+                    }, _ctx.ptm('token')), [
                       vue.renderSlot(_ctx.$slots, "chip", { value: item }, () => [
-                        vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.getLabelByValue(item)), 1)
+                        vue.createElementVNode("span", vue.mergeProps({ class: "p-multiselect-token-label" }, _ctx.ptm('tokenLabel')), vue.toDisplayString($options.getLabelByValue(item)), 17)
                       ]),
                       (!$props.disabled)
                         ? vue.renderSlot(_ctx.$slots, "removetokenicon", {
@@ -1178,19 +1155,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             onClick: (event) => $options.removeOption(event, item)
                           }, () => [
                             ($props.removeTokenIcon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                   key: 0,
-                                  class: vue.normalizeClass(['p-multiselect-token-icon', $props.removeTokenIcon]),
+                                  class: ['p-multiselect-token-icon', $props.removeTokenIcon],
                                   onClick: vue.withModifiers($event => ($options.removeOption($event, item)), ["stop"])
-                                }, null, 10, _hoisted_5))
-                              : (vue.openBlock(), vue.createBlock(_component_TimesCircleIcon, {
+                                }, _ctx.ptm('removeTokenIcon')), null, 16, _hoisted_2))
+                              : (vue.openBlock(), vue.createBlock(_component_TimesCircleIcon, vue.mergeProps({
                                   key: 1,
                                   class: "p-multiselect-token-icon",
                                   onClick: vue.withModifiers($event => ($options.removeOption($event, item)), ["stop"])
-                                }, null, 8, ["onClick"]))
+                                }, _ctx.ptm('removeTokenIcon')), null, 16, ["onClick"]))
                           ])
                         : vue.createCommentVNode("", true)
-                    ]))
+                    ], 16))
                   }), 128)),
                   (!$props.modelValue || $props.modelValue.length === 0)
                     ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -1200,37 +1177,37 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ], 64))
               : vue.createCommentVNode("", true)
         ])
-      ], 2)
-    ]),
-    vue.createElementVNode("div", _hoisted_6, [
+      ], 16)
+    ], 16),
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-multiselect-trigger" }, _ctx.ptm('trigger')), [
       ($props.loading)
         ? vue.renderSlot(_ctx.$slots, "loadingicon", {
             key: 0,
             class: "p-multiselect-trigger-icon"
           }, () => [
             ($props.loadingIcon)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
+              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                   key: 0,
-                  class: vue.normalizeClass(['p-multiselect-trigger-icon pi-spin', $props.loadingIcon]),
+                  class: ['p-multiselect-trigger-icon pi-spin', $props.loadingIcon],
                   "aria-hidden": "true"
-                }, null, 2))
-              : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                }, _ctx.ptm('triggerIcon')), null, 16))
+              : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                   key: 1,
                   class: "p-multiselect-trigger-icon",
                   spin: "",
                   "aria-hidden": "true"
-                }))
+                }, _ctx.ptm('triggerIcon')), null, 16))
           ])
         : vue.renderSlot(_ctx.$slots, "dropdownicon", {
             key: 1,
             class: "p-multiselect-trigger-icon"
           }, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), {
-              class: vue.normalizeClass(['p-multiselect-trigger-icon', $props.dropdownIcon]),
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+              class: ['p-multiselect-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, {
@@ -1249,58 +1226,64 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   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[3] || (_cache[3] = (...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.showToggleAll && $props.selectionLimit == null) || $props.filter)
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                        key: 0,
+                        class: "p-multiselect-header"
+                      }, _ctx.ptm('header')), [
                         ($props.showToggleAll && $props.selectionLimit == null)
-                          ? (vue.openBlock(), vue.createElementBlock("div", {
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                               key: 0,
-                              class: vue.normalizeClass($options.headerCheckboxClass),
+                              class: $options.headerCheckboxClass,
                               onClick: _cache[6] || (_cache[6] = (...args) => ($options.onToggleAll && $options.onToggleAll(...args)))
-                            }, [
-                              vue.createElementVNode("div", _hoisted_8, [
-                                vue.createElementVNode("input", {
+                            }, _ctx.ptm('headerCheckboxContainer')), [
+                              vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
+                                vue.createElementVNode("input", vue.mergeProps({
                                   type: "checkbox",
                                   readonly: "",
                                   checked: $options.allSelected,
                                   "aria-label": $options.toggleAllAriaLabel,
                                   onFocus: _cache[4] || (_cache[4] = (...args) => ($options.onHeaderCheckboxFocus && $options.onHeaderCheckboxFocus(...args))),
                                   onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onHeaderCheckboxBlur && $options.onHeaderCheckboxBlur(...args)))
-                                }, null, 40, _hoisted_9)
-                              ]),
-                              vue.createElementVNode("div", {
-                                class: vue.normalizeClass(['p-checkbox-box', { 'p-highlight': $options.allSelected, 'p-focus': $data.headerCheckboxFocused }])
-                              }, [
+                                }, _ctx.ptm('headerCheckbox')), null, 16, _hoisted_3)
+                              ], 16),
+                              vue.createElementVNode("div", vue.mergeProps({
+                                class: ['p-checkbox-box', { 'p-highlight': $options.allSelected, 'p-focus': $data.headerCheckboxFocused }]
+                              }, $options.getHeaderCheckboxPTOptions('headerCheckbox')), [
                                 vue.renderSlot(_ctx.$slots, "headercheckboxicon", {
                                   allSelected: $options.allSelected,
                                   class: "p-checkbox-icon"
                                 }, () => [
-                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), {
-                                    class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.allSelected }])
-                                  }, null, 8, ["class"]))
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
+                                    class: ['p-checkbox-icon', { [$props.checkboxIcon]: $options.allSelected }]
+                                  }, $options.getHeaderCheckboxPTOptions('headerCheckboxIcon')), null, 16, ["class"]))
                                 ])
-                              ], 2)
-                            ], 2))
+                              ], 16)
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.filter)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 1,
+                              class: "p-multiselect-filter-container"
+                            }, _ctx.ptm('filterContainer')), [
                               vue.createElementVNode("input", vue.mergeProps({
                                 ref: "filterInput",
                                 type: "text",
                                 value: $data.filterValue,
-                                onVnodeUpdated: _cache[7] || (_cache[7] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
+                                onVnodeMounted: _cache[7] || (_cache[7] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                                 class: "p-multiselect-filter p-inputtext p-component",
                                 placeholder: $props.filterPlaceholder,
                                 role: "searchbox",
@@ -1310,76 +1293,81 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 onKeydown: _cache[8] || (_cache[8] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
                                 onBlur: _cache[9] || (_cache[9] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
                                 onInput: _cache[10] || (_cache[10] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
-                              }, $props.filterInputProps), null, 16, _hoisted_11),
+                              }, { ...$props.filterInputProps, ..._ctx.ptm('filterInput') }), null, 16, _hoisted_4),
                               vue.renderSlot(_ctx.$slots, "filtericon", { class: "p-multiselect-filter-icon" }, () => [
-                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'SearchIcon'), {
-                                  class: vue.normalizeClass(['p-multiselect-filter-icon', $props.filterIcon])
-                                }, null, 8, ["class"]))
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'SearchIcon'), vue.mergeProps({
+                                  class: ['p-multiselect-filter-icon', $props.filterIcon]
+                                }, _ctx.ptm('filterIcon')), null, 16, ["class"]))
                               ])
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true),
                         ($props.filter)
-                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString($options.filterResultMessageText), 1))
+                          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                              key: 2,
+                              role: "status",
+                              "aria-live": "polite",
+                              class: "p-hidden-accessible"
+                            }, _ctx.ptm('hiddenFilterResult')), vue.toDisplayString($options.filterResultMessageText), 17))
                           : vue.createCommentVNode("", true),
                         vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                           class: "p-multiselect-close p-link",
                           "aria-label": $options.closeAriaLabel,
                           onClick: _cache[11] || (_cache[11] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
                           type: "button"
-                        }, $props.closeButtonProps), [
+                        }, { ...$props.closeButtonProps, ..._ctx.ptm('closeButton') }), [
                           vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-multiselect-close-icon" }, () => [
-                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                              class: vue.normalizeClass(['p-multiselect-close-icon', $props.closeIcon])
-                            }, null, 8, ["class"]))
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                              class: ['p-multiselect-close-icon', $props.closeIcon]
+                            }, _ctx.ptm('closeIcon')), null, 16, ["class"]))
                           ])
-                        ], 16, _hoisted_13)), [
+                        ], 16, _hoisted_5)), [
                           [_directive_ripple]
                         ])
-                      ]))
+                      ], 16))
                     : vue.createCommentVNode("", true),
-                  vue.createElementVNode("div", {
+                  vue.createElementVNode("div", vue.mergeProps({
                     class: "p-multiselect-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-multiselect-items p-component', styleClass]),
-                          style: vue.normalizeStyle(contentStyle),
+                          class: ['p-multiselect-items p-component', styleClass],
+                          style: contentStyle,
                           role: "listbox",
                           "aria-multiselectable": "true"
-                        }, [
+                        }, _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-multiselect-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_15))
-                                : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                                  ], 16, _hoisted_7))
+                                : 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-multiselect-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-multiselect-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),
@@ -1388,46 +1376,54 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     "aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
                                     onClick: $event => ($options.onOptionSelect($event, option, $options.getOptionIndex(i, getItemOptions), true)),
                                     onMousemove: $event => ($options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions)))
-                                  }, [
-                                    vue.createElementVNode("div", _hoisted_17, [
-                                      vue.createElementVNode("div", {
-                                        class: vue.normalizeClass(['p-checkbox-box', { 'p-highlight': $options.isSelected(option) }])
-                                      }, [
+                                  }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'item')), [
+                                    vue.createElementVNode("div", vue.mergeProps({ class: "p-checkbox p-component" }, _ctx.ptm('checkboxContainer')), [
+                                      vue.createElementVNode("div", vue.mergeProps({
+                                        class: ['p-checkbox-box', { 'p-highlight': $options.isSelected(option) }]
+                                      }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')), [
                                         vue.renderSlot(_ctx.$slots, "itemcheckboxicon", {
                                           selected: $options.isSelected(option),
                                           class: "p-checkbox-icon"
                                         }, () => [
-                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), {
-                                            class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.isSelected(option) }])
-                                          }, null, 8, ["class"]))
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
+                                            class: ['p-checkbox-icon', { [$props.checkboxIcon]: $options.isSelected(option) }]
+                                          }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')), null, 16, ["class"]))
                                         ])
-                                      ], 2)
-                                    ]),
+                                      ], 16)
+                                    ], 16),
                                     vue.renderSlot(_ctx.$slots, "option", {
                                       option: option,
                                       index: $options.getOptionIndex(i, getItemOptions)
                                     }, () => [
-                                      vue.createElementVNode("span", null, vue.toDisplayString($options.getOptionLabel(option)), 1)
+                                      vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('option'))), vue.toDisplayString($options.getOptionLabel(option)), 17)
                                     ])
-                                  ], 46, _hoisted_16)), [
+                                  ], 16, _hoisted_8)), [
                                     [_directive_ripple]
                                   ])
                             ], 64))
                           }), 128)),
                           ($data.filterValue && (!items || (items && items.length === 0)))
-                            ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_18, [
+                            ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                key: 0,
+                                class: "p-multiselect-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_19, [
+                              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                  key: 1,
+                                  class: "p-multiselect-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_14)
+                        ], 16, _hoisted_6)
                       ]),
                       _: 2
                     }, [
@@ -1441,23 +1437,32 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           }
                         : 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_20, 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_21, 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)
           ]),
@@ -1466,7 +1471,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     }, 8, ["appendTo"])
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {