primevue/chips/chips.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.chips=function(e,n,t,o,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),a=r(t),u=o.useStyle("\n.p-chips {\n    display: inline-flex;\n}\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\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n\n.p-chips-token-icon {\n    cursor: pointer;\n}\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\n.p-fluid .p-chips {\n    display: flex;\n}\n",{name:"chips",manual:!0});function s(e){return f(e)||d(e)||p(e)||c()}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e,n){if(e){if("string"==typeof e)return m(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?m(e,n):void 0}}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(e){if(Array.isArray(e))return m(e)}function m(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}var h={name:"Chips",extends:{name:"BaseChips",extends:a.default,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}},css:{classes:{root:function(e){var n=e.instance,t=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":t.disabled,"p-focus":n.focused,"p-inputwrapper-filled":t.modelValue&&t.modelValue.length||n.inputValue&&n.inputValue.length,"p-inputwrapper-focus":n.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(e){return["p-chips-token",{"p-focus":e.state.focusedIndex===e.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"},loadStyle:u.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:n.UniqueComponentId(),inputValue:null,focused:!1,focusedIndex:null}},methods:{onWrapperClick:function(){this.$refs.input.focus()},onInput:function(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus:function(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown:function(e){var n=e.target.value;switch(e.code){case"Backspace":0===n.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":n&&n.trim().length&&!this.maxedOut&&this.addItem(e,n,!0);break;case"ArrowLeft":0===n.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,n,!0)}},onPaste:function(e){var n=this;if(this.separator){var t=(e.clipboardData||window.clipboardData).getData("Text");if(t){var o=this.modelValue||[],i=t.split(this.separator);i=i.filter((function(e){return n.allowDuplicate||-1===o.indexOf(e)})),o=[].concat(s(o),s(i)),this.updateModel(e,o,!0)}}},onContainerFocus:function(){this.focused=!0},onContainerBlur:function(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown:function(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn:function(){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:function(){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:function(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel:function(e,n,t){var o=this;this.$emit("update:modelValue",n),this.$emit("add",{originalEvent:e,value:n}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),t&&e.preventDefault()},addItem:function(e,n,t){if(n&&n.trim().length){var o=this.modelValue?s(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(n))&&(o.push(n),this.updateModel(e,o,t))}},removeItem:function(e,n){if(!this.disabled){var t=s(this.modelValue),o=t.splice(n,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",t),this.$emit("remove",{originalEvent:e,value:o})}}},computed:{maxedOut:function(){return this.max&&this.modelValue&&this.max===this.modelValue.length},focusedOptionId:function(){return null!==this.focusedIndex?"".concat(this.id,"_chips_item_").concat(this.focusedIndex):null}},components:{TimesCircleIcon:l.default}};function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function b(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function v(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?b(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function g(e,n,t){return(n=x(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e){var n=I(e,"string");return"symbol"===y(n)?n:String(n)}function I(e,n){if("object"!==y(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==y(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var k=["aria-labelledby","aria-label","aria-activedescendant"],w=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],O=["id","disabled","placeholder"];return h.render=function(e,n,t,o,r,l){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"chips"}),[i.createElementVNode("ul",i.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":r.focused?l.focusedOptionId:void 0,onClick:n[5]||(n[5]=function(e){return l.onWrapperClick()}),onFocus:n[6]||(n[6]=function(){return l.onContainerFocus&&l.onContainerFocus.apply(l,arguments)}),onBlur:n[7]||(n[7]=function(){return l.onContainerBlur&&l.onContainerBlur.apply(l,arguments)}),onKeydown:n[8]||(n[8]=function(){return l.onContainerKeyDown&&l.onContainerKeyDown.apply(l,arguments)})},e.ptm("container")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.modelValue,(function(n,t){return i.openBlock(),i.createElementBlock("li",i.mergeProps({key:"".concat(t,"_").concat(n),id:r.id+"_chips_item_"+t,role:"option",class:e.cx("token",{index:t}),"aria-label":n,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":t+1},e.ptm("token"),{"data-p-focused":r.focusedIndex===t}),[i.renderSlot(e.$slots,"chip",{class:i.normalizeClass(e.cx("label")),value:n},(function(){return[i.createElementVNode("span",i.mergeProps({class:e.cx("label")},e.ptm("label")),i.toDisplayString(n),17)]})),i.renderSlot(e.$slots,"removetokenicon",{class:i.normalizeClass(e.cx("removeTokenIcon")),onClick:function(e){return l.removeItem(e,t)}},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),i.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return l.removeItem(e,t)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,w)})),128)),i.createElementVNode("li",i.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[i.createElementVNode("input",i.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||l.maxedOut,placeholder:e.placeholder,onFocus:n[0]||(n[0]=function(e){return l.onFocus(e)}),onBlur:n[1]||(n[1]=function(e){return l.onBlur(e)}),onInput:n[2]||(n[2]=function(){return l.onInput&&l.onInput.apply(l,arguments)}),onKeydown:n[3]||(n[3]=function(e){return l.onKeyDown(e)}),onPaste:n[4]||(n[4]=function(e){return l.onPaste(e)})},v(v({},e.inputProps),e.ptm("input"))),null,16,O)],16)],16,k)],16)},h}(primevue.icons.timescircle,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);