primevue 3.26.0 → 3.27.0

package/checkbox/checkbox.esm.js

@@ -1,5 +1,6 @@
+import CheckIcon from 'primevue/icons/check';
 import { ObjectUtils } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, normalizeStyle } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, normalizeStyle, renderSlot, createBlock, resolveDynamicComponent } from 'vue';
 
 var script = {
     name: 'Checkbox',
@@ -108,6 +109,9 @@ var script = {
                 }
             ];
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 
@@ -142,9 +146,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]),
       style: normalizeStyle($props.inputStyle)
     }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $options.checked }])
-      }, null, 2)
+      renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
+        (openBlock(), createBlock(resolveDynamicComponent($options.checked ? 'CheckIcon' : null), { class: "p-checkbox-icon" }))
+      ])
     ], 6)
   ], 2))
 }

package/checkbox/checkbox.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import{openBlock as l,createElementBlock as t,normalizeClass as a,createElementVNode as i,mergeProps as u,normalizeStyle as d}from"vue";var s={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const n={class:"p-hidden-accessible"},c=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];s.render=function(e,s,o,r,h,p){return l(),t("div",{class:a(p.containerClass),onClick:s[2]||(s[2]=e=>p.onClick(e))},[i("div",n,[i("input",u({ref:"input",id:o.inputId,type:"checkbox",value:o.value,name:o.name,checked:p.checked,tabindex:o.tabindex,disabled:o.disabled,readonly:o.readonly,required:o.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:s[0]||(s[0]=e=>p.onFocus(e)),onBlur:s[1]||(s[1]=e=>p.onBlur(e))},o.inputProps),null,16,c)]),i("div",{ref:"box",class:a(["p-checkbox-box",o.inputClass,{"p-highlight":p.checked,"p-disabled":o.disabled,"p-focus":h.focused}]),style:d(o.inputStyle)},[i("span",{class:a(["p-checkbox-icon",{"pi pi-check":p.checked}])},null,2)],6)],2)};export{s as default};
+import e from"primevue/icons/check";import{ObjectUtils as l}from"primevue/utils";import{openBlock as t,createElementBlock as a,normalizeClass as i,createElementVNode as u,mergeProps as d,normalizeStyle as n,renderSlot as s,createBlock as c,resolveDynamicComponent as o}from"vue";var r={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!l.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",t),this.$emit("change",e),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:l.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:e}};const h={class:"p-hidden-accessible"},p=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];r.render=function(e,l,r,b,f,m){return t(),a("div",{class:i(m.containerClass),onClick:l[2]||(l[2]=e=>m.onClick(e))},[u("div",h,[u("input",d({ref:"input",id:r.inputId,type:"checkbox",value:r.value,name:r.name,checked:m.checked,tabindex:r.tabindex,disabled:r.disabled,readonly:r.readonly,required:r.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>m.onFocus(e)),onBlur:l[1]||(l[1]=e=>m.onBlur(e))},r.inputProps),null,16,p)]),u("div",{ref:"box",class:i(["p-checkbox-box",r.inputClass,{"p-highlight":m.checked,"p-disabled":r.disabled,"p-focus":f.focused}]),style:n(r.inputStyle)},[s(e.$slots,"icon",{checked:m.checked},(()=>[(t(),c(o(m.checked?"CheckIcon":null),{class:"p-checkbox-icon"}))]))],6)],2)};export{r as default};

package/checkbox/checkbox.js

@@ -1,7 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.checkbox = (function (utils, vue) {
+this.primevue.checkbox = (function (CheckIcon, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+
     var script = {
         name: 'Checkbox',
         emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
@@ -109,6 +113,9 @@ this.primevue.checkbox = (function (utils, vue) {
                     }
                 ];
             }
+        },
+        components: {
+            CheckIcon: CheckIcon__default["default"]
         }
     };
 
@@ -143,9 +150,9 @@ this.primevue.checkbox = (function (utils, vue) {
           class: vue.normalizeClass(['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]),
           style: vue.normalizeStyle($props.inputStyle)
         }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(['p-checkbox-icon', { 'pi pi-check': $options.checked }])
-          }, null, 2)
+          vue.renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : null), { class: "p-checkbox-icon" }))
+          ])
         ], 6)
       ], 2))
     }
@@ -154,4 +161,4 @@ this.primevue.checkbox = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.icons.check, primevue.utils, Vue);

package/checkbox/checkbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l){"use strict";var t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},t}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!l.ObjectUtils.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",t),this.$emit("change",e),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:l.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:i(e).default}};const u={class:"p-hidden-accessible"},n=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return a.render=function(e,l,i,a,c,s){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(s.containerClass),onClick:l[2]||(l[2]=e=>s.onClick(e))},[t.createElementVNode("div",u,[t.createElementVNode("input",t.mergeProps({ref:"input",id:i.inputId,type:"checkbox",value:i.value,name:i.name,checked:s.checked,tabindex:i.tabindex,disabled:i.disabled,readonly:i.readonly,required:i.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>s.onFocus(e)),onBlur:l[1]||(l[1]=e=>s.onBlur(e))},i.inputProps),null,16,n)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-checkbox-box",i.inputClass,{"p-highlight":s.checked,"p-disabled":i.disabled,"p-focus":c.focused}]),style:t.normalizeStyle(i.inputStyle)},[t.renderSlot(e.$slots,"icon",{checked:s.checked},(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.checked?"CheckIcon":null),{class:"p-checkbox-icon"}))]))],6)],2)},a}(primevue.icons.check,primevue.utils,Vue);

package/chip/Chip.d.ts

@@ -20,6 +20,7 @@ export interface ChipProps {
     label?: string;
     /**
      * Defines the icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string;
     /**
@@ -33,7 +34,7 @@ export interface ChipProps {
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removeicon' slot.
      */
     removeIcon?: string;
 }
@@ -46,6 +47,24 @@ export interface ChipSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom remove icon template of chip component.
+     * @param {Object} scope - remove icon slot's params.
+     */
+    removeicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        onClick(): void;
+        /**
+         * Remove icon keydown event
+         */
+        onKeydown(): void;
+    }): VNode[];
 }
 
 /**

package/chip/Chip.vue

@@ -1,15 +1,21 @@
 <template>
     <div v-if="visible" :class="containerClass" :aria-label="label">
-        <slot>
+        <slot></slot>
+        <template v-if="!$slots.default">
             <img v-if="image" :src="image" />
-            <span v-else-if="icon" :class="iconClass"></span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" />
+            <span v-else-if="icon" :class="['p-chip-icon', icon]" />
             <div v-if="label" class="p-chip-text">{{ label }}</div>
+        </template>
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown="onKeydown"></span>
     </div>
 </template>
 
 <script>
+import TimesCircleIcon from 'primevue/icons/timescircle';
+
 export default {
     name: 'Chip',
     emits: ['remove'],
@@ -32,7 +38,7 @@ export default {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -59,13 +65,10 @@ export default {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 </script>

package/chip/chip.cjs.js

@@ -1,7 +1,12 @@
 'use strict';
 
+var TimesCircleIcon = require('primevue/icons/timescircle');
 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: 'Chip',
     emits: ['remove'],
@@ -24,7 +29,7 @@ var script = {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -51,20 +56,17 @@ 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: TimesCircleIcon__default["default"]
     }
 };
 
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["src"];
 const _hoisted_3 = {
-  key: 2,
+  key: 3,
   class: "p-chip-text"
 };
 
@@ -75,30 +77,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         class: vue.normalizeClass($options.containerClass),
         "aria-label": $props.label
       }, [
-        vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          ($props.image)
-            ? (vue.openBlock(), vue.createElementBlock("img", {
-                key: 0,
-                src: $props.image
-              }, null, 8, _hoisted_2))
-            : ($props.icon)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
-                  key: 1,
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2))
-              : vue.createCommentVNode("", true),
-          ($props.label)
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
-            : vue.createCommentVNode("", true)
-        ]),
+        vue.renderSlot(_ctx.$slots, "default"),
+        (!_ctx.$slots.default)
+          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              ($props.image)
+                ? (vue.openBlock(), vue.createElementBlock("img", {
+                    key: 0,
+                    src: $props.image
+                  }, null, 8, _hoisted_2))
+                : (_ctx.$slots.icon)
+                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                      key: 1,
+                      class: "p-chip-icon"
+                    }))
+                  : ($props.icon)
+                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                        key: 2,
+                        class: vue.normalizeClass(['p-chip-icon', $props.icon])
+                      }, null, 2))
+                    : vue.createCommentVNode("", true),
+              ($props.label)
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
+                : vue.createCommentVNode("", true)
+            ], 64))
+          : vue.createCommentVNode("", true),
         ($props.removable)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
-              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))
+          ? vue.renderSlot(_ctx.$slots, "removeicon", {
+              key: 1,
+              onClick: $options.close,
+              onKeydown: $options.onKeydown
+            }, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), {
+                tabindex: "0",
+                class: vue.normalizeClass(['p-chip-remove-icon', $props.removeIcon]),
+                onClick: $options.close,
+                onKeydown: $options.onKeydown
+              }, null, 40, ["class", "onClick", "onKeydown"]))
+            ])
           : vue.createCommentVNode("", true)
       ], 10, _hoisted_1))
     : vue.createCommentVNode("", true)

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/icons/timescircle"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t={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: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:o(e).default}};const l=["aria-label"],i=["src"],c={key:3,class:"p-chip-text"};!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&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"),t.render=function(e,o,t,a,r,s){return r.visible?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(s.containerClass),"aria-label":t.label},[n.renderSlot(e.$slots,"default"),e.$slots.default?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[t.image?(n.openBlock(),n.createElementBlock("img",{key:0,src:t.image},null,8,i)):e.$slots.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.icon),{key:1,class:"p-chip-icon"})):t.icon?(n.openBlock(),n.createElementBlock("span",{key:2,class:n.normalizeClass(["p-chip-icon",t.icon])},null,2)):n.createCommentVNode("",!0),t.label?(n.openBlock(),n.createElementBlock("div",c,n.toDisplayString(t.label),1)):n.createCommentVNode("",!0)],64)),t.removable?n.renderSlot(e.$slots,"removeicon",{key:1,onClick:s.close,onKeydown:s.onKeydown},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.removeIcon?"span":"TimesCircleIcon"),{tabindex:"0",class:n.normalizeClass(["p-chip-remove-icon",t.removeIcon]),onClick:s.close,onKeydown:s.onKeydown},null,40,["class","onClick","onKeydown"]))])):n.createCommentVNode("",!0)],10,l)):n.createCommentVNode("",!0)},module.exports=t;

package/chip/chip.esm.js

@@ -1,4 +1,5 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, toDisplayString } from 'vue';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Chip',
@@ -22,7 +23,7 @@ var script = {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -49,20 +50,17 @@ 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,
+  key: 3,
   class: "p-chip-text"
 };
 
@@ -73,30 +71,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass($options.containerClass),
         "aria-label": $props.label
       }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          ($props.image)
-            ? (openBlock(), createElementBlock("img", {
-                key: 0,
-                src: $props.image
-              }, null, 8, _hoisted_2))
-            : ($props.icon)
-              ? (openBlock(), createElementBlock("span", {
-                  key: 1,
-                  class: normalizeClass($options.iconClass)
-                }, null, 2))
-              : createCommentVNode("", true),
-          ($props.label)
-            ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString($props.label), 1))
-            : createCommentVNode("", true)
-        ]),
+        renderSlot(_ctx.$slots, "default"),
+        (!_ctx.$slots.default)
+          ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              ($props.image)
+                ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    src: $props.image
+                  }, null, 8, _hoisted_2))
+                : (_ctx.$slots.icon)
+                  ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), {
+                      key: 1,
+                      class: "p-chip-icon"
+                    }))
+                  : ($props.icon)
+                    ? (openBlock(), createElementBlock("span", {
+                        key: 2,
+                        class: normalizeClass(['p-chip-icon', $props.icon])
+                      }, null, 2))
+                    : createCommentVNode("", true),
+              ($props.label)
+                ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString($props.label), 1))
+                : createCommentVNode("", true)
+            ], 64))
+          : createCommentVNode("", true),
         ($props.removable)
-          ? (openBlock(), createElementBlock("span", {
-              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))
+          ? renderSlot(_ctx.$slots, "removeicon", {
+              key: 1,
+              onClick: $options.close,
+              onKeydown: $options.onKeydown
+            }, () => [
+              (openBlock(), createBlock(resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), {
+                tabindex: "0",
+                class: normalizeClass(['p-chip-remove-icon', $props.removeIcon]),
+                onClick: $options.close,
+                onKeydown: $options.onKeydown
+              }, null, 40, ["class", "onClick", "onKeydown"]))
+            ])
           : createCommentVNode("", true)
       ], 10, _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/icons/timescircle";import{openBlock as n,createElementBlock as i,normalizeClass as o,renderSlot as t,Fragment as l,createBlock as c,resolveDynamicComponent as s,createCommentVNode as a,toDisplayString as r}from"vue";var p={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: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:e}};const d=["aria-label"],m=["src"],h={key:3,class:"p-chip-text"};!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"),p.render=function(e,p,u,y,v,f){return v.visible?(n(),i("div",{key:0,class:o(f.containerClass),"aria-label":u.label},[t(e.$slots,"default"),e.$slots.default?a("",!0):(n(),i(l,{key:0},[u.image?(n(),i("img",{key:0,src:u.image},null,8,m)):e.$slots.icon?(n(),c(s(e.$slots.icon),{key:1,class:"p-chip-icon"})):u.icon?(n(),i("span",{key:2,class:o(["p-chip-icon",u.icon])},null,2)):a("",!0),u.label?(n(),i("div",h,r(u.label),1)):a("",!0)],64)),u.removable?t(e.$slots,"removeicon",{key:1,onClick:f.close,onKeydown:f.onKeydown},(()=>[(n(),c(s(u.removeIcon?"span":"TimesCircleIcon"),{tabindex:"0",class:o(["p-chip-remove-icon",u.removeIcon]),onClick:f.close,onKeydown:f.onKeydown},null,40,["class","onClick","onKeydown"]))])):a("",!0)],10,d)):a("",!0)};export{p as default};

package/chip/chip.js

@@ -1,7 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.chip = (function (vue) {
+this.primevue.chip = (function (TimesCircleIcon, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
     var script = {
         name: 'Chip',
         emits: ['remove'],
@@ -24,7 +28,7 @@ this.primevue.chip = (function (vue) {
             },
             removeIcon: {
                 type: String,
-                default: 'pi pi-times-circle'
+                default: undefined
             }
         },
         data() {
@@ -51,20 +55,17 @@ 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,
+      key: 3,
       class: "p-chip-text"
     };
 
@@ -75,30 +76,43 @@ this.primevue.chip = (function (vue) {
             class: vue.normalizeClass($options.containerClass),
             "aria-label": $props.label
           }, [
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              ($props.image)
-                ? (vue.openBlock(), vue.createElementBlock("img", {
-                    key: 0,
-                    src: $props.image
-                  }, null, 8, _hoisted_2))
-                : ($props.icon)
-                  ? (vue.openBlock(), vue.createElementBlock("span", {
-                      key: 1,
-                      class: vue.normalizeClass($options.iconClass)
-                    }, null, 2))
-                  : vue.createCommentVNode("", true),
-              ($props.label)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
-                : vue.createCommentVNode("", true)
-            ]),
+            vue.renderSlot(_ctx.$slots, "default"),
+            (!_ctx.$slots.default)
+              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  ($props.image)
+                    ? (vue.openBlock(), vue.createElementBlock("img", {
+                        key: 0,
+                        src: $props.image
+                      }, null, 8, _hoisted_2))
+                    : (_ctx.$slots.icon)
+                      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                          key: 1,
+                          class: "p-chip-icon"
+                        }))
+                      : ($props.icon)
+                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                            key: 2,
+                            class: vue.normalizeClass(['p-chip-icon', $props.icon])
+                          }, null, 2))
+                        : vue.createCommentVNode("", true),
+                  ($props.label)
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
+                    : vue.createCommentVNode("", true)
+                ], 64))
+              : vue.createCommentVNode("", true),
             ($props.removable)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
-                  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))
+              ? vue.renderSlot(_ctx.$slots, "removeicon", {
+                  key: 1,
+                  onClick: $options.close,
+                  onKeydown: $options.onKeydown
+                }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), {
+                    tabindex: "0",
+                    class: vue.normalizeClass(['p-chip-remove-icon', $props.removeIcon]),
+                    onClick: $options.close,
+                    onKeydown: $options.onKeydown
+                  }, null, 40, ["class", "onClick", "onKeydown"]))
+                ])
               : vue.createCommentVNode("", true)
           ], 10, _hoisted_1))
         : vue.createCommentVNode("", true)
@@ -138,4 +152,4 @@ this.primevue.chip = (function (vue) {
 
     return script;
 
-})(Vue);
+})(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){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t={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: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:o(e).default}};const l=["aria-label"],i=["src"],c={key:3,class:"p-chip-text"};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],l=document.createElement("style");l.type="text/css","top"===o&&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"),t.render=function(e,o,t,a,s,r){return s.visible?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(r.containerClass),"aria-label":t.label},[n.renderSlot(e.$slots,"default"),e.$slots.default?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[t.image?(n.openBlock(),n.createElementBlock("img",{key:0,src:t.image},null,8,i)):e.$slots.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.icon),{key:1,class:"p-chip-icon"})):t.icon?(n.openBlock(),n.createElementBlock("span",{key:2,class:n.normalizeClass(["p-chip-icon",t.icon])},null,2)):n.createCommentVNode("",!0),t.label?(n.openBlock(),n.createElementBlock("div",c,n.toDisplayString(t.label),1)):n.createCommentVNode("",!0)],64)),t.removable?n.renderSlot(e.$slots,"removeicon",{key:1,onClick:r.close,onKeydown:r.onKeydown},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.removeIcon?"span":"TimesCircleIcon"),{tabindex:"0",class:n.normalizeClass(["p-chip-remove-icon",t.removeIcon]),onClick:r.close,onKeydown:r.onKeydown},null,40,["class","onClick","onKeydown"]))])):n.createCommentVNode("",!0)],10,l)):n.createCommentVNode("",!0)},t}(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.