primevue 3.26.1 → 3.28.0

package/chip/chip.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"Chip",emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:"pi pi-times-circle"}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]},iconClass(){return["p-chip-icon",this.icon]},removeIconClass(){return["p-chip-remove-icon",this.removeIcon]}}};const t=["aria-label"],l=["src"],o={key:2,class:"p-chip-text"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),n.render=function(n,i,c,a,s,r){return s.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.containerClass),"aria-label":c.label},[e.renderSlot(n.$slots,"default",{},(()=>[c.image?(e.openBlock(),e.createElementBlock("img",{key:0,src:c.image},null,8,l)):c.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(r.iconClass)},null,2)):e.createCommentVNode("",!0),c.label?(e.openBlock(),e.createElementBlock("div",o,e.toDisplayString(c.label),1)):e.createCommentVNode("",!0)])),c.removable?(e.openBlock(),e.createElementBlock("span",{key:0,tabindex:"0",class:e.normalizeClass(r.removeIconClass),onClick:i[0]||(i[0]=(...e)=>r.close&&r.close(...e)),onKeydown:i[1]||(i[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},null,34)):e.createCommentVNode("",!0)],10,t)):e.createCommentVNode("",!0)},module.exports=n;
+"use strict";var e=require("primevue/basecomponent"),n=require("primevue/icons/timescircle"),o=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e),l=t(n),c={name:"Chip",extends:i.default,emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:void 0}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]}},components:{TimesCircleIcon:l.default}};const r=["aria-label"],s=["src"];!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),c.render=function(e,n,t,i,l,c){return l.visible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,class:c.containerClass,"aria-label":t.label},e.ptm("root")),[o.renderSlot(e.$slots,"default",{},(()=>[t.image?(o.openBlock(),o.createElementBlock("img",o.mergeProps({key:0,src:t.image},e.ptm("image")),null,16,s)):e.$slots.icon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.$slots.icon),o.mergeProps({key:1,class:"p-chip-icon"},e.ptm("icon")),null,16)):t.icon?(o.openBlock(),o.createElementBlock("span",o.mergeProps({key:2,class:["p-chip-icon",t.icon]},e.ptm("icon")),null,16)):o.createCommentVNode("",!0),t.label?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:3,class:"p-chip-text"},e.ptm("label")),o.toDisplayString(t.label),17)):o.createCommentVNode("",!0)])),t.removable?o.renderSlot(e.$slots,"removeicon",{key:0,onClick:c.close,onKeydown:c.onKeydown},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.removeIcon?"span":"TimesCircleIcon"),o.mergeProps({tabindex:"0",class:["p-chip-remove-icon",t.removeIcon],onClick:c.close,onKeydown:c.onKeydown},e.ptm("removeIcon")),null,16,["class","onClick","onKeydown"]))])):o.createCommentVNode("",!0)],16,r)):o.createCommentVNode("",!0)},module.exports=c;

package/chip/chip.esm.js

@@ -1,7 +1,10 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, toDisplayString } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+import { openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Chip',
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         label: {
@@ -22,7 +25,7 @@ var script = {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -49,56 +52,62 @@ var script = {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["src"];
-const _hoisted_3 = {
-  key: 2,
-  class: "p-chip-text"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return ($data.visible)
-    ? (openBlock(), createElementBlock("div", {
+    ? (openBlock(), createElementBlock("div", mergeProps({
         key: 0,
-        class: normalizeClass($options.containerClass),
+        class: $options.containerClass,
         "aria-label": $props.label
-      }, [
+      }, _ctx.ptm('root')), [
         renderSlot(_ctx.$slots, "default", {}, () => [
           ($props.image)
-            ? (openBlock(), createElementBlock("img", {
+            ? (openBlock(), createElementBlock("img", mergeProps({
                 key: 0,
                 src: $props.image
-              }, null, 8, _hoisted_2))
-            : ($props.icon)
-              ? (openBlock(), createElementBlock("span", {
+              }, _ctx.ptm('image')), null, 16, _hoisted_2))
+            : (_ctx.$slots.icon)
+              ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), mergeProps({
                   key: 1,
-                  class: normalizeClass($options.iconClass)
-                }, null, 2))
-              : createCommentVNode("", true),
+                  class: "p-chip-icon"
+                }, _ctx.ptm('icon')), null, 16))
+              : ($props.icon)
+                ? (openBlock(), createElementBlock("span", mergeProps({
+                    key: 2,
+                    class: ['p-chip-icon', $props.icon]
+                  }, _ctx.ptm('icon')), null, 16))
+                : createCommentVNode("", true),
           ($props.label)
-            ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString($props.label), 1))
+            ? (openBlock(), createElementBlock("div", mergeProps({
+                key: 3,
+                class: "p-chip-text"
+              }, _ctx.ptm('label')), toDisplayString($props.label), 17))
             : createCommentVNode("", true)
         ]),
         ($props.removable)
-          ? (openBlock(), createElementBlock("span", {
+          ? renderSlot(_ctx.$slots, "removeicon", {
               key: 0,
-              tabindex: "0",
-              class: normalizeClass($options.removeIconClass),
-              onClick: _cache[0] || (_cache[0] = (...args) => ($options.close && $options.close(...args))),
-              onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-            }, null, 34))
+              onClick: $options.close,
+              onKeydown: $options.onKeydown
+            }, () => [
+              (openBlock(), createBlock(resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), mergeProps({
+                tabindex: "0",
+                class: ['p-chip-remove-icon', $props.removeIcon],
+                onClick: $options.close,
+                onKeydown: $options.onKeydown
+              }, _ctx.ptm('removeIcon')), null, 16, ["class", "onClick", "onKeydown"]))
+            ])
           : createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     : createCommentVNode("", true)
 }
 

package/chip/chip.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,normalizeClass as i,renderSlot as t,createCommentVNode as l,toDisplayString as o}from"vue";var s={name:"Chip",emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:"pi pi-times-circle"}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]},iconClass(){return["p-chip-icon",this.icon]},removeIconClass(){return["p-chip-remove-icon",this.removeIcon]}}};const a=["aria-label"],c=["src"],r={key:2,class:"p-chip-text"};!function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),s.render=function(s,p,d,m,h,u){return h.visible?(e(),n("div",{key:0,class:i(u.containerClass),"aria-label":d.label},[t(s.$slots,"default",{},(()=>[d.image?(e(),n("img",{key:0,src:d.image},null,8,c)):d.icon?(e(),n("span",{key:1,class:i(u.iconClass)},null,2)):l("",!0),d.label?(e(),n("div",r,o(d.label),1)):l("",!0)])),d.removable?(e(),n("span",{key:0,tabindex:"0",class:i(u.removeIconClass),onClick:p[0]||(p[0]=(...e)=>u.close&&u.close(...e)),onKeydown:p[1]||(p[1]=(...e)=>u.onKeydown&&u.onKeydown(...e))},null,34)):l("",!0)],10,a)):l("",!0)};export{s as default};
+import e from"primevue/basecomponent";import n from"primevue/icons/timescircle";import{openBlock as i,createElementBlock as o,mergeProps as t,renderSlot as l,createBlock as c,resolveDynamicComponent as s,createCommentVNode as a,toDisplayString as p}from"vue";var r={name:"Chip",extends:e,emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:void 0}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]}},components:{TimesCircleIcon:n}};const m=["aria-label"],d=["src"];!function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===i&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),r.render=function(e,n,r,h,u,y){return u.visible?(i(),o("div",t({key:0,class:y.containerClass,"aria-label":r.label},e.ptm("root")),[l(e.$slots,"default",{},(()=>[r.image?(i(),o("img",t({key:0,src:r.image},e.ptm("image")),null,16,d)):e.$slots.icon?(i(),c(s(e.$slots.icon),t({key:1,class:"p-chip-icon"},e.ptm("icon")),null,16)):r.icon?(i(),o("span",t({key:2,class:["p-chip-icon",r.icon]},e.ptm("icon")),null,16)):a("",!0),r.label?(i(),o("div",t({key:3,class:"p-chip-text"},e.ptm("label")),p(r.label),17)):a("",!0)])),r.removable?l(e.$slots,"removeicon",{key:0,onClick:y.close,onKeydown:y.onKeydown},(()=>[(i(),c(s(r.removeIcon?"span":"TimesCircleIcon"),t({tabindex:"0",class:["p-chip-remove-icon",r.removeIcon],onClick:y.close,onKeydown:y.onKeydown},e.ptm("removeIcon")),null,16,["class","onClick","onKeydown"]))])):a("",!0)],16,m)):a("",!0)};export{r as default};

package/chip/chip.js

@@ -1,9 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.chip = (function (vue) {
+this.primevue.chip = (function (BaseComponent, TimesCircleIcon, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+    var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
     var script = {
         name: 'Chip',
+        extends: BaseComponent__default["default"],
         emits: ['remove'],
         props: {
             label: {
@@ -24,7 +30,7 @@ this.primevue.chip = (function (vue) {
             },
             removeIcon: {
                 type: String,
-                default: 'pi pi-times-circle'
+                default: undefined
             }
         },
         data() {
@@ -51,56 +57,62 @@ this.primevue.chip = (function (vue) {
                         'p-chip-image': this.image != null
                     }
                 ];
-            },
-            iconClass() {
-                return ['p-chip-icon', this.icon];
-            },
-            removeIconClass() {
-                return ['p-chip-remove-icon', this.removeIcon];
             }
+        },
+        components: {
+            TimesCircleIcon: TimesCircleIcon__default["default"]
         }
     };
 
     const _hoisted_1 = ["aria-label"];
     const _hoisted_2 = ["src"];
-    const _hoisted_3 = {
-      key: 2,
-      class: "p-chip-text"
-    };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return ($data.visible)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
-            class: vue.normalizeClass($options.containerClass),
+            class: $options.containerClass,
             "aria-label": $props.label
-          }, [
+          }, _ctx.ptm('root')), [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
               ($props.image)
-                ? (vue.openBlock(), vue.createElementBlock("img", {
+                ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
                     key: 0,
                     src: $props.image
-                  }, null, 8, _hoisted_2))
-                : ($props.icon)
-                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                  }, _ctx.ptm('image')), null, 16, _hoisted_2))
+                : (_ctx.$slots.icon)
+                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), vue.mergeProps({
                       key: 1,
-                      class: vue.normalizeClass($options.iconClass)
-                    }, null, 2))
-                  : vue.createCommentVNode("", true),
+                      class: "p-chip-icon"
+                    }, _ctx.ptm('icon')), null, 16))
+                  : ($props.icon)
+                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                        key: 2,
+                        class: ['p-chip-icon', $props.icon]
+                      }, _ctx.ptm('icon')), null, 16))
+                    : vue.createCommentVNode("", true),
               ($props.label)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 3,
+                    class: "p-chip-text"
+                  }, _ctx.ptm('label')), vue.toDisplayString($props.label), 17))
                 : vue.createCommentVNode("", true)
             ]),
             ($props.removable)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
+              ? vue.renderSlot(_ctx.$slots, "removeicon", {
                   key: 0,
-                  tabindex: "0",
-                  class: vue.normalizeClass($options.removeIconClass),
-                  onClick: _cache[0] || (_cache[0] = (...args) => ($options.close && $options.close(...args))),
-                  onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-                }, null, 34))
+                  onClick: $options.close,
+                  onKeydown: $options.onKeydown
+                }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), vue.mergeProps({
+                    tabindex: "0",
+                    class: ['p-chip-remove-icon', $props.removeIcon],
+                    onClick: $options.close,
+                    onKeydown: $options.onKeydown
+                  }, _ctx.ptm('removeIcon')), null, 16, ["class", "onClick", "onKeydown"]))
+                ])
               : vue.createCommentVNode("", true)
-          ], 10, _hoisted_1))
+          ], 16, _hoisted_1))
         : vue.createCommentVNode("", true)
     }
 
@@ -138,4 +150,4 @@ this.primevue.chip = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, primevue.icons.timescircle, Vue);

package/chip/chip.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chip=function(e){"use strict";var n={name:"Chip",emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:"pi pi-times-circle"}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]},iconClass(){return["p-chip-icon",this.icon]},removeIconClass(){return["p-chip-remove-icon",this.removeIcon]}}};const t=["aria-label"],i=["src"],l={key:2,class:"p-chip-text"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),n.render=function(n,o,c,a,s,r){return s.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.containerClass),"aria-label":c.label},[e.renderSlot(n.$slots,"default",{},(()=>[c.image?(e.openBlock(),e.createElementBlock("img",{key:0,src:c.image},null,8,i)):c.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(r.iconClass)},null,2)):e.createCommentVNode("",!0),c.label?(e.openBlock(),e.createElementBlock("div",l,e.toDisplayString(c.label),1)):e.createCommentVNode("",!0)])),c.removable?(e.openBlock(),e.createElementBlock("span",{key:0,tabindex:"0",class:e.normalizeClass(r.removeIconClass),onClick:o[0]||(o[0]=(...e)=>r.close&&r.close(...e)),onKeydown:o[1]||(o[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},null,34)):e.createCommentVNode("",!0)],10,t)):e.createCommentVNode("",!0)},n}(Vue);
+this.primevue=this.primevue||{},this.primevue.chip=function(e,n,o){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e),l=t(n),c={name:"Chip",extends:i.default,emits:["remove"],props:{label:{type:String,default:null},icon:{type:String,default:null},image:{type:String,default:null},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:void 0}},data:()=>({visible:!0}),methods:{onKeydown(e){"Enter"!==e.key&&"Backspace"!==e.key||this.close(e)},close(e){this.visible=!1,this.$emit("remove",e)}},computed:{containerClass(){return["p-chip p-component",{"p-chip-image":null!=this.image}]}},components:{TimesCircleIcon:l.default}};const r=["aria-label"],s=["src"];return function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-chip {\n    display: inline-flex;\n    align-items: center;\n}\n.p-chip-text {\n    line-height: 1.5;\n}\n.p-chip-icon.pi {\n    line-height: 1.5;\n}\n.p-chip-remove-icon {\n    line-height: 1.5;\n    cursor: pointer;\n}\n.p-chip img {\n    border-radius: 50%;\n}\n"),c.render=function(e,n,t,i,l,c){return l.visible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,class:c.containerClass,"aria-label":t.label},e.ptm("root")),[o.renderSlot(e.$slots,"default",{},(()=>[t.image?(o.openBlock(),o.createElementBlock("img",o.mergeProps({key:0,src:t.image},e.ptm("image")),null,16,s)):e.$slots.icon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.$slots.icon),o.mergeProps({key:1,class:"p-chip-icon"},e.ptm("icon")),null,16)):t.icon?(o.openBlock(),o.createElementBlock("span",o.mergeProps({key:2,class:["p-chip-icon",t.icon]},e.ptm("icon")),null,16)):o.createCommentVNode("",!0),t.label?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:3,class:"p-chip-text"},e.ptm("label")),o.toDisplayString(t.label),17)):o.createCommentVNode("",!0)])),t.removable?o.renderSlot(e.$slots,"removeicon",{key:0,onClick:c.close,onKeydown:c.onKeydown},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.removeIcon?"span":"TimesCircleIcon"),o.mergeProps({tabindex:"0",class:["p-chip-remove-icon",t.removeIcon],onClick:c.close,onKeydown:c.onKeydown},e.ptm("removeIcon")),null,16,["class","onClick","onKeydown"]))])):o.createCommentVNode("",!0)],16,r)):o.createCommentVNode("",!0)},c}(primevue.basecomponent,primevue.icons.timescircle,Vue);

package/chips/Chips.d.ts

@@ -72,11 +72,12 @@ export interface ChipsProps {
     inputStyle?: object | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
      * Icon to display in chip remove action.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -110,6 +111,16 @@ export interface ChipsSlots {
          */
         value: any;
     }): VNode[];
+    /**
+     * Custom remove token icon template.
+     * @param {Object} scope - remove token icon slot's params.
+     */
+    removetokenicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        onClick(): void;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Chips component.

package/chips/Chips.vue

@@ -28,7 +28,9 @@
                 <slot name="chip" :value="val">
                     <span class="p-chips-token-label">{{ val }}</span>
                 </slot>
-                <span :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true"></span>
+                <slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
+                </slot>
             </li>
             <li class="p-chips-input-token" role="option">
                 <input
@@ -52,6 +54,7 @@
 </template>
 
 <script>
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
@@ -104,7 +107,7 @@ export default {
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         'aria-labelledby': {
             type: String,
@@ -309,6 +312,9 @@ export default {
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
+    },
+    components: {
+        TimesCircleIcon: TimesCircleIcon
     }
 };
 </script>

package/chips/chips.cjs.js

@@ -1,8 +1,13 @@
 'use strict';
 
+var TimesCircleIcon = require('primevue/icons/timescircle');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
 var script = {
     name: 'Chips',
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
@@ -53,7 +58,7 @@ var script = {
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         'aria-labelledby': {
             type: String,
@@ -255,18 +260,20 @@ var script = {
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
+    },
+    components: {
+        TimesCircleIcon: TimesCircleIcon__default["default"]
     }
 };
 
 const _hoisted_1 = ["aria-labelledby", "aria-label", "aria-activedescendant"];
 const _hoisted_2 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
 const _hoisted_3 = { class: "p-chips-token-label" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
+const _hoisted_4 = {
   class: "p-chips-input-token",
   role: "option"
 };
-const _hoisted_6 = ["id", "disabled", "placeholder"];
+const _hoisted_5 = ["id", "disabled", "placeholder"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
@@ -300,14 +307,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           vue.renderSlot(_ctx.$slots, "chip", { value: val }, () => [
             vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(val), 1)
           ]),
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(['p-chips-token-icon', $props.removeTokenIcon]),
-            onClick: $event => ($options.removeItem($event, i)),
-            "aria-hidden": "true"
-          }, null, 10, _hoisted_4)
+          vue.renderSlot(_ctx.$slots, "removetokenicon", {
+            onClick: (event) => $options.removeItem(event, i)
+          }, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeTokenIcon ? 'span' : 'TimesCircleIcon'), {
+              class: vue.normalizeClass(['p-chips-token-icon', $props.removeTokenIcon]),
+              onClick: $event => ($options.removeItem($event, i)),
+              "aria-hidden": "true"
+            }, null, 8, ["class", "onClick"]))
+          ])
         ], 10, _hoisted_2))
       }), 128)),
-      vue.createElementVNode("li", _hoisted_5, [
+      vue.createElementVNode("li", _hoisted_4, [
         vue.createElementVNode("input", vue.mergeProps({
           ref: "input",
           id: $props.inputId,
@@ -321,7 +332,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onInput: _cache[2] || (_cache[2] = (...args) => ($options.onInput && $options.onInput(...args))),
           onKeydown: _cache[3] || (_cache[3] = $event => ($options.onKeyDown($event))),
           onPaste: _cache[4] || (_cache[4] = $event => ($options.onPaste($event)))
-        }, $props.inputProps), null, 16, _hoisted_6)
+        }, $props.inputProps), null, 16, _hoisted_5)
       ])
     ], 40, _hoisted_1)
   ], 2))

package/chips/chips.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:"pi pi-times-circle"},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:e.UniqueComponentId(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],l=t.split(this.separator);l=l.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...l],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let l=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===l.indexOf(t))&&(l.push(t),this.updateModel(e,l,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const l=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:l})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}}};const l=["aria-labelledby","aria-label","aria-activedescendant"],i=["id","aria-label","aria-setsize","aria-posinset"],a={class:"p-chips-token-label"},o=["onClick"],s={class:"p-chips-input-token",role:"option"},u=["id","disabled","placeholder"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),n.render=function(e,n,d,r,p,c){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(c.containerClass)},[t.createElementVNode("ul",{ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":p.focused?c.focusedOptionId:void 0,onClick:n[5]||(n[5]=e=>c.onWrapperClick()),onFocus:n[6]||(n[6]=(...e)=>c.onContainerFocus&&c.onContainerFocus(...e)),onBlur:n[7]||(n[7]=(...e)=>c.onContainerBlur&&c.onContainerBlur(...e)),onKeydown:n[8]||(n[8]=(...e)=>c.onContainerKeyDown&&c.onContainerKeyDown(...e))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.modelValue,((n,l)=>(t.openBlock(),t.createElementBlock("li",{key:`${l}_${n}`,id:p.id+"_chips_item_"+l,role:"option",class:t.normalizeClass(["p-chips-token",{"p-focus":p.focusedIndex===l}]),"aria-label":n,"aria-selected":!0,"aria-setsize":d.modelValue.length,"aria-posinset":l+1},[t.renderSlot(e.$slots,"chip",{value:n},(()=>[t.createElementVNode("span",a,t.toDisplayString(n),1)])),t.createElementVNode("span",{class:t.normalizeClass(["p-chips-token-icon",d.removeTokenIcon]),onClick:e=>c.removeItem(e,l),"aria-hidden":"true"},null,10,o)],10,i)))),128)),t.createElementVNode("li",s,[t.createElementVNode("input",t.mergeProps({ref:"input",id:d.inputId,type:"text",class:d.inputClass,style:d.inputStyle,disabled:d.disabled||c.maxedOut,placeholder:d.placeholder,onFocus:n[0]||(n[0]=e=>c.onFocus(e)),onBlur:n[1]||(n[1]=e=>c.onBlur(e)),onInput:n[2]||(n[2]=(...e)=>c.onInput&&c.onInput(...e)),onKeydown:n[3]||(n[3]=e=>c.onKeyDown(e)),onPaste:n[4]||(n[4]=e=>c.onPaste(e))},d.inputProps),null,16,u)])],40,l)],2)},module.exports=n;
+"use strict";var e=require("primevue/icons/timescircle"),t=require("primevue/utils"),n=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:void 0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:t.UniqueComponentId(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],l=t.split(this.separator);l=l.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...l],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let l=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===l.indexOf(t))&&(l.push(t),this.updateModel(e,l,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const l=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:l})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}},components:{TimesCircleIcon:l(e).default}};const o=["aria-labelledby","aria-label","aria-activedescendant"],a=["id","aria-label","aria-setsize","aria-posinset"],s={class:"p-chips-token-label"},u={class:"p-chips-input-token",role:"option"},d=["id","disabled","placeholder"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),i.render=function(e,t,l,i,r,c){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(c.containerClass)},[n.createElementVNode("ul",{ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":r.focused?c.focusedOptionId:void 0,onClick:t[5]||(t[5]=e=>c.onWrapperClick()),onFocus:t[6]||(t[6]=(...e)=>c.onContainerFocus&&c.onContainerFocus(...e)),onBlur:t[7]||(t[7]=(...e)=>c.onContainerBlur&&c.onContainerBlur(...e)),onKeydown:t[8]||(t[8]=(...e)=>c.onContainerKeyDown&&c.onContainerKeyDown(...e))},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(l.modelValue,((t,i)=>(n.openBlock(),n.createElementBlock("li",{key:`${i}_${t}`,id:r.id+"_chips_item_"+i,role:"option",class:n.normalizeClass(["p-chips-token",{"p-focus":r.focusedIndex===i}]),"aria-label":t,"aria-selected":!0,"aria-setsize":l.modelValue.length,"aria-posinset":i+1},[n.renderSlot(e.$slots,"chip",{value:t},(()=>[n.createElementVNode("span",s,n.toDisplayString(t),1)])),n.renderSlot(e.$slots,"removetokenicon",{onClick:e=>c.removeItem(e,i)},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.removeTokenIcon?"span":"TimesCircleIcon"),{class:n.normalizeClass(["p-chips-token-icon",l.removeTokenIcon]),onClick:e=>c.removeItem(e,i),"aria-hidden":"true"},null,8,["class","onClick"]))]))],10,a)))),128)),n.createElementVNode("li",u,[n.createElementVNode("input",n.mergeProps({ref:"input",id:l.inputId,type:"text",class:l.inputClass,style:l.inputStyle,disabled:l.disabled||c.maxedOut,placeholder:l.placeholder,onFocus:t[0]||(t[0]=e=>c.onFocus(e)),onBlur:t[1]||(t[1]=e=>c.onBlur(e)),onInput:t[2]||(t[2]=(...e)=>c.onInput&&c.onInput(...e)),onKeydown:t[3]||(t[3]=e=>c.onKeyDown(e)),onPaste:t[4]||(t[4]=e=>c.onPaste(e))},l.inputProps),null,16,d)])],40,o)],2)},module.exports=i;

package/chips/chips.esm.js

@@ -1,5 +1,6 @@
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, renderSlot, toDisplayString, mergeProps } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, renderSlot, toDisplayString, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
 
 var script = {
     name: 'Chips',
@@ -51,7 +52,7 @@ var script = {
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         'aria-labelledby': {
             type: String,
@@ -253,18 +254,20 @@ var script = {
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
+    },
+    components: {
+        TimesCircleIcon: TimesCircleIcon
     }
 };
 
 const _hoisted_1 = ["aria-labelledby", "aria-label", "aria-activedescendant"];
 const _hoisted_2 = ["id", "aria-label", "aria-setsize", "aria-posinset"];
 const _hoisted_3 = { class: "p-chips-token-label" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
+const _hoisted_4 = {
   class: "p-chips-input-token",
   role: "option"
 };
-const _hoisted_6 = ["id", "disabled", "placeholder"];
+const _hoisted_5 = ["id", "disabled", "placeholder"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
@@ -298,14 +301,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           renderSlot(_ctx.$slots, "chip", { value: val }, () => [
             createElementVNode("span", _hoisted_3, toDisplayString(val), 1)
           ]),
-          createElementVNode("span", {
-            class: normalizeClass(['p-chips-token-icon', $props.removeTokenIcon]),
-            onClick: $event => ($options.removeItem($event, i)),
-            "aria-hidden": "true"
-          }, null, 10, _hoisted_4)
+          renderSlot(_ctx.$slots, "removetokenicon", {
+            onClick: (event) => $options.removeItem(event, i)
+          }, () => [
+            (openBlock(), createBlock(resolveDynamicComponent($props.removeTokenIcon ? 'span' : 'TimesCircleIcon'), {
+              class: normalizeClass(['p-chips-token-icon', $props.removeTokenIcon]),
+              onClick: $event => ($options.removeItem($event, i)),
+              "aria-hidden": "true"
+            }, null, 8, ["class", "onClick"]))
+          ])
         ], 10, _hoisted_2))
       }), 128)),
-      createElementVNode("li", _hoisted_5, [
+      createElementVNode("li", _hoisted_4, [
         createElementVNode("input", mergeProps({
           ref: "input",
           id: $props.inputId,
@@ -319,7 +326,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onInput: _cache[2] || (_cache[2] = (...args) => ($options.onInput && $options.onInput(...args))),
           onKeydown: _cache[3] || (_cache[3] = $event => ($options.onKeyDown($event))),
           onPaste: _cache[4] || (_cache[4] = $event => ($options.onPaste($event)))
-        }, $props.inputProps), null, 16, _hoisted_6)
+        }, $props.inputProps), null, 16, _hoisted_5)
       ])
     ], 40, _hoisted_1)
   ], 2))

package/chips/chips.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e}from"primevue/utils";import{openBlock as t,createElementBlock as n,normalizeClass as i,createElementVNode as l,Fragment as a,renderList as s,renderSlot as o,toDisplayString as u,mergeProps as d}from"vue";var r={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:"pi pi-times-circle"},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:e(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],i=t.split(this.separator);i=i.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...i],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let i=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===i.indexOf(t))&&(i.push(t),this.updateModel(e,i,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const i=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:i})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}}};const p=["aria-labelledby","aria-label","aria-activedescendant"],c=["id","aria-label","aria-setsize","aria-posinset"],h={class:"p-chips-token-label"},f=["onClick"],m={class:"p-chips-input-token",role:"option"},y=["id","disabled","placeholder"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),r.render=function(e,r,x,g,b,I){return t(),n("div",{class:i(I.containerClass)},[l("ul",{ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":b.focused?I.focusedOptionId:void 0,onClick:r[5]||(r[5]=e=>I.onWrapperClick()),onFocus:r[6]||(r[6]=(...e)=>I.onContainerFocus&&I.onContainerFocus(...e)),onBlur:r[7]||(r[7]=(...e)=>I.onContainerBlur&&I.onContainerBlur(...e)),onKeydown:r[8]||(r[8]=(...e)=>I.onContainerKeyDown&&I.onContainerKeyDown(...e))},[(t(!0),n(a,null,s(x.modelValue,((a,s)=>(t(),n("li",{key:`${s}_${a}`,id:b.id+"_chips_item_"+s,role:"option",class:i(["p-chips-token",{"p-focus":b.focusedIndex===s}]),"aria-label":a,"aria-selected":!0,"aria-setsize":x.modelValue.length,"aria-posinset":s+1},[o(e.$slots,"chip",{value:a},(()=>[l("span",h,u(a),1)])),l("span",{class:i(["p-chips-token-icon",x.removeTokenIcon]),onClick:e=>I.removeItem(e,s),"aria-hidden":"true"},null,10,f)],10,c)))),128)),l("li",m,[l("input",d({ref:"input",id:x.inputId,type:"text",class:x.inputClass,style:x.inputStyle,disabled:x.disabled||I.maxedOut,placeholder:x.placeholder,onFocus:r[0]||(r[0]=e=>I.onFocus(e)),onBlur:r[1]||(r[1]=e=>I.onBlur(e)),onInput:r[2]||(r[2]=(...e)=>I.onInput&&I.onInput(...e)),onKeydown:r[3]||(r[3]=e=>I.onKeyDown(e)),onPaste:r[4]||(r[4]=e=>I.onPaste(e))},x.inputProps),null,16,y)])],40,p)],2)};export{r as default};
+import e from"primevue/icons/timescircle";import{UniqueComponentId as t}from"primevue/utils";import{openBlock as n,createElementBlock as i,normalizeClass as l,createElementVNode as o,Fragment as a,renderList as s,renderSlot as u,toDisplayString as d,createBlock as r,resolveDynamicComponent as p,mergeProps as c}from"vue";var h={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:void 0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:t(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],i=t.split(this.separator);i=i.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...i],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let i=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===i.indexOf(t))&&(i.push(t),this.updateModel(e,i,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const i=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:i})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}},components:{TimesCircleIcon:e}};const f=["aria-labelledby","aria-label","aria-activedescendant"],m=["id","aria-label","aria-setsize","aria-posinset"],y={class:"p-chips-token-label"},x={class:"p-chips-input-token",role:"option"},g=["id","disabled","placeholder"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),h.render=function(e,t,h,I,b,v){return n(),i("div",{class:l(v.containerClass)},[o("ul",{ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":b.focused?v.focusedOptionId:void 0,onClick:t[5]||(t[5]=e=>v.onWrapperClick()),onFocus:t[6]||(t[6]=(...e)=>v.onContainerFocus&&v.onContainerFocus(...e)),onBlur:t[7]||(t[7]=(...e)=>v.onContainerBlur&&v.onContainerBlur(...e)),onKeydown:t[8]||(t[8]=(...e)=>v.onContainerKeyDown&&v.onContainerKeyDown(...e))},[(n(!0),i(a,null,s(h.modelValue,((t,a)=>(n(),i("li",{key:`${a}_${t}`,id:b.id+"_chips_item_"+a,role:"option",class:l(["p-chips-token",{"p-focus":b.focusedIndex===a}]),"aria-label":t,"aria-selected":!0,"aria-setsize":h.modelValue.length,"aria-posinset":a+1},[u(e.$slots,"chip",{value:t},(()=>[o("span",y,d(t),1)])),u(e.$slots,"removetokenicon",{onClick:e=>v.removeItem(e,a)},(()=>[(n(),r(p(h.removeTokenIcon?"span":"TimesCircleIcon"),{class:l(["p-chips-token-icon",h.removeTokenIcon]),onClick:e=>v.removeItem(e,a),"aria-hidden":"true"},null,8,["class","onClick"]))]))],10,m)))),128)),o("li",x,[o("input",c({ref:"input",id:h.inputId,type:"text",class:h.inputClass,style:h.inputStyle,disabled:h.disabled||v.maxedOut,placeholder:h.placeholder,onFocus:t[0]||(t[0]=e=>v.onFocus(e)),onBlur:t[1]||(t[1]=e=>v.onBlur(e)),onInput:t[2]||(t[2]=(...e)=>v.onInput&&v.onInput(...e)),onKeydown:t[3]||(t[3]=e=>v.onKeyDown(e)),onPaste:t[4]||(t[4]=e=>v.onPaste(e))},h.inputProps),null,16,g)])],40,f)],2)};export{h as default};