primevue 3.15.0 → 3.16.2

package/chips/chips.js

@@ -1,11 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.chips = (function (vue) {
+this.primevue.chips = (function (utils, vue) {
     'use strict';
 
     var script = {
         name: 'Chips',
-        inheritAttrs: false,
-        emits: ['update:modelValue', 'add', 'remove'],
+        emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
         props: {
             modelValue: {
                 type: Array,
@@ -27,13 +26,33 @@ this.primevue.chips = (function (vue) {
                 type: Boolean,
                 default: true
             },
-            class: null,
-            style: null
+            placeholder: {
+                type: String,
+                default: null
+            },
+            inputId: null,
+            inputClass: null,
+            inputStyle: null,
+            inputProps: null,
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            'aria-labelledby': {
+                type: String,
+    			default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            }
         },
         data() {
             return {
+                id: utils.UniqueComponentId(),
                 inputValue: null,
-                focused: false
+                focused: false,
+                focusedIndex: null
             };
         },
         methods: {
@@ -42,37 +61,53 @@ this.primevue.chips = (function (vue) {
             },
             onInput(event) {
                 this.inputValue = event.target.value;
+                this.focusedIndex = null;
             },
-            onFocus() {
+            onFocus(event) {
                 this.focused = true;
+                this.focusedIndex = null;
+                this.$emit('focus', event);
             },
             onBlur(event) {
                 this.focused = false;
+                this.focusedIndex = null;
                 if (this.addOnBlur) {
                     this.addItem(event, event.target.value, false);
                 }
+                this.$emit('blur', event);
             },
             onKeyDown(event) {
                 const inputValue = event.target.value;
 
-                switch(event.which) {
-                    //backspace
-                    case 8:
+                switch(event.code) {
+                    case 'Backspace':
                         if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-                            this.removeItem(event, this.modelValue.length - 1);
+                            if (this.focusedIndex !== null) {
+                                this.removeItem(event, this.focusedIndex);
+                            }
+                            else this.removeItem(event, this.modelValue.length - 1);
                         }
                     break;
 
-                    //enter
-                    case 13:
+                    case 'Enter':
                         if (inputValue && inputValue.trim().length && !this.maxedOut) {
                             this.addItem(event, inputValue, true);
                         }
                     break;
 
+                    case 'ArrowLeft':
+                        if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+                            this.$refs.container.focus();
+                        }
+                    break;
+
+                    case 'ArrowRight':
+                        event.stopPropagation();
+                    break;
+
                     default:
                         if (this.separator) {
-                            if (this.separator === ',' && (event.which === 188 || event.which === 110)) {
+                            if (this.separator === ',' && event.key === ',') {
                                 this.addItem(event, inputValue, true);
                             }
                         }
@@ -91,6 +126,51 @@ this.primevue.chips = (function (vue) {
                     }
                 }
             },
+            onContainerFocus() {
+                this.focused = true;
+            },
+            onContainerBlur() {
+                this.focusedIndex = -1;
+                this.focused = false;
+            },
+            onContainerKeyDown(event) {
+                switch (event.code) {
+                    case 'ArrowLeft':
+                        this.onArrowLeftKeyOn(event);
+                        break;
+
+                    case 'ArrowRight':
+                        this.onArrowRightKeyOn(event);
+                        break;
+
+                    case 'Backspace':
+                        this.onBackspaceKeyOn(event);
+                        break;
+                }
+            },
+            onArrowLeftKeyOn() {
+                if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+                    this.focusedIndex = this.focusedIndex === null ? this.modelValue.length - 1 : this.focusedIndex - 1;
+                    if (this.focusedIndex < 0) this.focusedIndex = 0;
+                }
+            },
+            onArrowRightKeyOn() {
+                if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+
+                    if (this.focusedIndex === this.modelValue.length - 1) {
+                        this.focusedIndex = null;
+                        this.$refs.input.focus();
+                    }
+                    else {
+                        this.focusedIndex++;
+                    }
+                }
+            },
+            onBackspaceKeyOn(event) {
+                if (this.focusedIndex !== null) {
+                    this.removeItem(event, this.focusedIndex);
+                }
+            },
             updateModel(event, value, preventDefault) {
                 this.$emit('update:modelValue', value);
                 this.$emit('add', {
@@ -114,12 +194,14 @@ this.primevue.chips = (function (vue) {
                 }
             },
             removeItem(event, index) {
-                if (this.$attrs.disabled) {
+                if (this.disabled) {
                     return;
                 }
 
                 let values = [...this.modelValue];
                 const removedItem = values.splice(index, 1);
+                this.focusedIndex = null;
+                this.$refs.input.focus();
                 this.$emit('update:modelValue', values);
                 this.$emit('remove', {
                     originalEvent: event,
@@ -132,57 +214,86 @@ this.primevue.chips = (function (vue) {
                 return this.max && this.modelValue && this.max === this.modelValue.length;
             },
             containerClass() {
-                return ['p-chips p-component p-inputwrapper', this.class, {
+                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 this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
             }
         }
     };
 
-    const _hoisted_1 = { class: "p-chips-token-label" };
-    const _hoisted_2 = ["onClick"];
-    const _hoisted_3 = { class: "p-chips-input-token" };
-    const _hoisted_4 = ["disabled"];
+    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 = {
+      class: "p-chips-input-token",
+      role: "option"
+    };
+    const _hoisted_6 = ["id", "disabled", "placeholder"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
-        style: vue.normalizeStyle($props.style)
+        class: vue.normalizeClass($options.containerClass)
       }, [
         vue.createElementVNode("ul", {
-          class: vue.normalizeClass(['p-inputtext p-chips-multiple-container', {'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-          onClick: _cache[5] || (_cache[5] = $event => ($options.onWrapperClick()))
+          ref: "container",
+          class: "p-inputtext p-chips-multiple-container",
+          tabindex: "-1",
+          role: "listbox",
+          "aria-orientation": "horizontal",
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+          onClick: _cache[5] || (_cache[5] = $event => ($options.onWrapperClick())),
+          onFocus: _cache[6] || (_cache[6] = (...args) => ($options.onContainerFocus && $options.onContainerFocus(...args))),
+          onBlur: _cache[7] || (_cache[7] = (...args) => ($options.onContainerBlur && $options.onContainerBlur(...args))),
+          onKeydown: _cache[8] || (_cache[8] = (...args) => ($options.onContainerKeyDown && $options.onContainerKeyDown(...args)))
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.modelValue, (val, i) => {
             return (vue.openBlock(), vue.createElementBlock("li", {
               key: `${i}_${val}`,
-              class: "p-chips-token"
+              id: $data.id + '_chips_item_' + i,
+              role: "option",
+              class: vue.normalizeClass(['p-chips-token', {'p-focus': $data.focusedIndex === i}]),
+              "aria-label": val,
+              "aria-selected": true,
+              "aria-setsize": $props.modelValue.length,
+              "aria-posinset": i + 1
             }, [
               vue.renderSlot(_ctx.$slots, "chip", { value: val }, () => [
-                vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(val), 1)
+                vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(val), 1)
               ]),
               vue.createElementVNode("span", {
                 class: "p-chips-token-icon pi pi-times-circle",
-                onClick: $event => ($options.removeItem($event, i))
-              }, null, 8, _hoisted_2)
-            ]))
+                onClick: $event => ($options.removeItem($event, i)),
+                "aria-hidden": "true"
+              }, null, 8, _hoisted_4)
+            ], 10, _hoisted_2))
           }), 128)),
-          vue.createElementVNode("li", _hoisted_3, [
+          vue.createElementVNode("li", _hoisted_5, [
             vue.createElementVNode("input", vue.mergeProps({
               ref: "input",
-              type: "text"
-            }, _ctx.$attrs, {
-              onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
+              type: "text",
+              id: $props.inputId,
+              class: $props.inputClass,
+              style: $props.inputStyle,
+              disabled: $props.disabled || $options.maxedOut,
+              placeholder: $props.placeholder,
+              onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
               onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
               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))),
-              disabled: _ctx.$attrs.disabled || $options.maxedOut
-            }), null, 16, _hoisted_4)
+              onPaste: _cache[4] || (_cache[4] = $event => ($options.onPaste($event)))
+            }, $props.inputProps), null, 16, _hoisted_6)
           ])
-        ], 2)
-      ], 6))
+        ], 40, _hoisted_1)
+      ], 2))
     }
 
     function styleInject(css, ref) {
@@ -219,4 +330,4 @@ this.primevue.chips = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.utils, Vue);

package/chips/chips.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chips=function(e){"use strict";var t={name:"Chips",inheritAttrs:!1,emits:["update:modelValue","add","remove"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:String,default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},class:null,style:null},data:()=>({inputValue:null,focused:!1}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value},onFocus(){this.focused=!0},onBlur(e){this.focused=!1,this.addOnBlur&&this.addItem(e,e.target.value,!1)},onKeyDown(e){const t=e.target.value;switch(e.which){case 8:0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,this.modelValue.length-1);break;case 13:t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;default:this.separator&&(","!==this.separator||188!==e.which&&110!==e.which||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)}}},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",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.$attrs.disabled)return;let n=[...this.modelValue];const l=n.splice(t,1);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",this.class,{"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]}}};const n={class:"p-chips-token-label"},l=["onClick"],i={class:"p-chips-input-token"},a=["disabled"];return 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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-chips-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\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    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),t.render=function(t,s,o,p,r,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.containerClass),style:e.normalizeStyle(o.style)},[e.createElementVNode("ul",{class:e.normalizeClass(["p-inputtext p-chips-multiple-container",{"p-disabled":t.$attrs.disabled,"p-focus":r.focused}]),onClick:s[5]||(s[5]=e=>d.onWrapperClick())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.modelValue,((i,a)=>(e.openBlock(),e.createElementBlock("li",{key:`${a}_${i}`,class:"p-chips-token"},[e.renderSlot(t.$slots,"chip",{value:i},(()=>[e.createElementVNode("span",n,e.toDisplayString(i),1)])),e.createElementVNode("span",{class:"p-chips-token-icon pi pi-times-circle",onClick:e=>d.removeItem(e,a)},null,8,l)])))),128)),e.createElementVNode("li",i,[e.createElementVNode("input",e.mergeProps({ref:"input",type:"text"},t.$attrs,{onFocus:s[0]||(s[0]=(...e)=>d.onFocus&&d.onFocus(...e)),onBlur:s[1]||(s[1]=e=>d.onBlur(e)),onInput:s[2]||(s[2]=(...e)=>d.onInput&&d.onInput(...e)),onKeydown:s[3]||(s[3]=e=>d.onKeyDown(e)),onPaste:s[4]||(s[4]=e=>d.onPaste(e)),disabled:t.$attrs.disabled||d.maxedOut}),null,16,a)])],2)],6)},t}(Vue);
+this.primevue=this.primevue||{},this.primevue.chips=function(e,t){"use strict";var n={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:String,default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},inputId:null,inputClass:null,inputStyle:null,inputProps:null,disabled:{type:Boolean,default:!1},"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&&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="",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 i=["aria-labelledby","aria-label","aria-activedescendant"],l=["id","aria-label","aria-setsize","aria-posinset"],a={class:"p-chips-token-label"},s=["onClick"],o={class:"p-chips-input-token",role:"option"},d=["id","disabled","placeholder"];return 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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\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: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-chips-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\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    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),n.render=function(e,n,u,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(u.modelValue,((n,i)=>(t.openBlock(),t.createElementBlock("li",{key:`${i}_${n}`,id:p.id+"_chips_item_"+i,role:"option",class:t.normalizeClass(["p-chips-token",{"p-focus":p.focusedIndex===i}]),"aria-label":n,"aria-selected":!0,"aria-setsize":u.modelValue.length,"aria-posinset":i+1},[t.renderSlot(e.$slots,"chip",{value:n},(()=>[t.createElementVNode("span",a,t.toDisplayString(n),1)])),t.createElementVNode("span",{class:"p-chips-token-icon pi pi-times-circle",onClick:e=>c.removeItem(e,i),"aria-hidden":"true"},null,8,s)],10,l)))),128)),t.createElementVNode("li",o,[t.createElementVNode("input",t.mergeProps({ref:"input",type:"text",id:u.inputId,class:u.inputClass,style:u.inputStyle,disabled:u.disabled||c.maxedOut,placeholder:u.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))},u.inputProps),null,16,d)])],40,i)],2)},n}(primevue.utils,Vue);

package/colorpicker/ColorPicker.d.ts

@@ -2,7 +2,7 @@ import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type ColorPickerFormatType = 'hex' | 'rgb' | 'hsb' | undefined;
 
-type ColorPickerAppendToType = 'body' | 'self' | string | undefined;
+type ColorPickerAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
 
 export interface ColorPickerChangeEvent {
     /**
@@ -53,16 +53,13 @@ export interface ColorPickerProps {
      * Default value is 0.
      */
     baseZIndex?: number | undefined;
-    /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-     */
-    ariaLabelledBy?: string | undefined;
     /**
      * Style class of the overlay panel.
      */
     panelClass?: any;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
+     * @see ColorPickerAppendToType
      * Default value is 'body'.
      */
     appendTo?: ColorPickerAppendToType;
@@ -86,7 +83,7 @@ export declare type ColorPickerEmits = {
      * Callback to invoke when input is cleared by the user.
      */
     'show': () => void;
-     /**
+    /**
      * Callback to invoke when input is cleared by the user.
      */
     'hide': () => void;

package/colorpicker/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass">
         <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
-            @click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
+            @click="onInputClick" @keydown="onInputKeydown" v-if="!inline"/>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
@@ -64,10 +64,6 @@ export default {
             type: Number,
             default: 0
         },
-        ariaLabelledBy: {
-            type: String,
-            default: null
-        },
         appendTo: {
             type: String,
             default: 'body'

package/colorpicker/colorpicker.cjs.js

@@ -46,10 +46,6 @@ var script = {
             type: Number,
             default: 0
         },
-        ariaLabelledBy: {
-            type: String,
-            default: null
-        },
         appendTo: {
             type: String,
             default: 'body'
@@ -559,7 +555,7 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["tabindex", "disabled", "aria-labelledby"];
+const _hoisted_1 = ["tabindex", "disabled"];
 const _hoisted_2 = { class: "p-colorpicker-content" };
 const _hoisted_3 = { class: "p-colorpicker-color" };
 
@@ -580,8 +576,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           tabindex: $props.tabindex,
           disabled: $props.disabled,
           onClick: _cache[0] || (_cache[0] = (...args) => ($options.onInputClick && $options.onInputClick(...args))),
-          onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args))),
-          "aria-labelledby": $props.ariaLabelledBy
+          onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args)))
         }, null, 42, _hoisted_1))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_Portal, {

package/colorpicker/colorpicker.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),i=require("primevue/portal"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(t),r={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},ariaLabelledBy:{type:String,default:null},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.ZIndexUtils.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),l=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:l}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var l=o,r=(255-n)*o/255,s=i%60*(l-r)/60;360===i&&(i=0),i<60?(t.r=l,t.b=r,t.g=r+s):i<120?(t.g=l,t.b=r,t.r=l-s):i<180?(t.g=l,t.r=r,t.b=r+s):i<240?(t.b=l,t.r=r,t.g=l-s):i<300?(t.b=l,t.g=r,t.r=r+s):i<360?(t.r=l,t.g=r,t.b=l-s):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.picker,this.$refs.input):e.DomHandler.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(t){this.disabled||(this.colorDragging=!0,this.pickColor(t),e.DomHandler.addClass(this.$el,"p-colorpicker-dragging"),t.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,e.DomHandler.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(t){this.disabled||(this.hueDragging=!0,this.pickHue(t),e.DomHandler.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){l.default.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o(i).default}};const s=["tabindex","disabled","aria-labelledby"],a={class:"p-colorpicker-content"},d={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n"),r.render=function(e,t,i,o,l,r){const h=n.resolveComponent("Portal");return n.openBlock(),n.createElementBlock("div",{ref:"container",class:n.normalizeClass(r.containerClass)},[i.inline?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock("input",{key:0,ref:"input",type:"text",class:n.normalizeClass(r.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>r.onInputClick&&r.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>r.onInputKeydown&&r.onInputKeydown(...e)),"aria-labelledby":i.ariaLabelledBy},null,42,s)),n.createVNode(h,{appendTo:i.appendTo,disabled:i.inline},{default:n.withCtx((()=>[n.createVNode(n.Transition,{name:"p-connected-overlay",onEnter:r.onOverlayEnter,onLeave:r.onOverlayLeave,onAfterLeave:r.onOverlayAfterLeave},{default:n.withCtx((()=>[i.inline||l.overlayVisible?(n.openBlock(),n.createElementBlock("div",{key:0,ref:r.pickerRef,class:n.normalizeClass(r.pickerClass),onClick:t[10]||(t[10]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))},[n.createElementVNode("div",a,[n.createElementVNode("div",{ref:r.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>r.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>r.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>r.onDrag(e)),onTouchend:t[5]||(t[5]=e=>r.onDragEnd())},[n.createElementVNode("div",d,[n.createElementVNode("div",{ref:r.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),n.createElementVNode("div",{ref:r.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>r.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>r.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>r.onDrag(e)),onTouchend:t[9]||(t[9]=e=>r.onDragEnd())},[n.createElementVNode("div",{ref:r.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)},module.exports=r;
+"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),i=require("primevue/portal"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(t),l={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.ZIndexUtils.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),s=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:s}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var s=o,l=(255-n)*o/255,r=i%60*(s-l)/60;360===i&&(i=0),i<60?(t.r=s,t.b=l,t.g=l+r):i<120?(t.g=s,t.b=l,t.r=s-r):i<180?(t.g=s,t.r=l,t.b=l+r):i<240?(t.b=s,t.r=l,t.g=s-r):i<300?(t.b=s,t.g=l,t.r=l+r):i<360?(t.r=s,t.g=l,t.b=s-r):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.picker,this.$refs.input):e.DomHandler.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(t){this.disabled||(this.colorDragging=!0,this.pickColor(t),e.DomHandler.addClass(this.$el,"p-colorpicker-dragging"),t.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,e.DomHandler.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(t){this.disabled||(this.hueDragging=!0,this.pickHue(t),e.DomHandler.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){s.default.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o(i).default}};const r=["tabindex","disabled"],a={class:"p-colorpicker-content"},d={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n"),l.render=function(e,t,i,o,s,l){const h=n.resolveComponent("Portal");return n.openBlock(),n.createElementBlock("div",{ref:"container",class:n.normalizeClass(l.containerClass)},[i.inline?n.createCommentVNode("",!0):(n.openBlock(),n.createElementBlock("input",{key:0,ref:"input",type:"text",class:n.normalizeClass(l.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>l.onInputClick&&l.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>l.onInputKeydown&&l.onInputKeydown(...e))},null,42,r)),n.createVNode(h,{appendTo:i.appendTo,disabled:i.inline},{default:n.withCtx((()=>[n.createVNode(n.Transition,{name:"p-connected-overlay",onEnter:l.onOverlayEnter,onLeave:l.onOverlayLeave,onAfterLeave:l.onOverlayAfterLeave},{default:n.withCtx((()=>[i.inline||s.overlayVisible?(n.openBlock(),n.createElementBlock("div",{key:0,ref:l.pickerRef,class:n.normalizeClass(l.pickerClass),onClick:t[10]||(t[10]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))},[n.createElementVNode("div",a,[n.createElementVNode("div",{ref:l.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>l.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>l.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>l.onDrag(e)),onTouchend:t[5]||(t[5]=e=>l.onDragEnd())},[n.createElementVNode("div",d,[n.createElementVNode("div",{ref:l.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),n.createElementVNode("div",{ref:l.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>l.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>l.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>l.onDrag(e)),onTouchend:t[9]||(t[9]=e=>l.onDragEnd())},[n.createElementVNode("div",{ref:l.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)},module.exports=l;

package/colorpicker/colorpicker.esm.js

@@ -39,10 +39,6 @@ var script = {
             type: Number,
             default: 0
         },
-        ariaLabelledBy: {
-            type: String,
-            default: null
-        },
         appendTo: {
             type: String,
             default: 'body'
@@ -552,7 +548,7 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["tabindex", "disabled", "aria-labelledby"];
+const _hoisted_1 = ["tabindex", "disabled"];
 const _hoisted_2 = { class: "p-colorpicker-content" };
 const _hoisted_3 = { class: "p-colorpicker-color" };
 
@@ -573,8 +569,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           tabindex: $props.tabindex,
           disabled: $props.disabled,
           onClick: _cache[0] || (_cache[0] = (...args) => ($options.onInputClick && $options.onInputClick(...args))),
-          onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args))),
-          "aria-labelledby": $props.ariaLabelledBy
+          onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args)))
         }, null, 42, _hoisted_1))
       : createCommentVNode("", true),
     createVNode(_component_Portal, {

package/colorpicker/colorpicker.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import o from"primevue/portal";import{resolveComponent as s,openBlock as l,createElementBlock as r,normalizeClass as a,createCommentVNode as h,createVNode as d,withCtx as u,Transition as p,createElementVNode as c}from"vue";var b={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},ariaLabelledBy:{type:String,default:null},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),s=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:s}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var s=o,l=(255-n)*o/255,r=i%60*(s-l)/60;360===i&&(i=0),i<60?(t.r=s,t.b=l,t.g=l+r):i<120?(t.g=s,t.b=l,t.r=s-r):i<180?(t.g=s,t.r=l,t.b=l+r):i<240?(t.b=s,t.r=l,t.g=s-r):i<300?(t.b=s,t.g=l,t.r=l+r):i<360?(t.r=s,t.g=l,t.b=s-r):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){"self"===this.appendTo?t.relativePosition(this.picker,this.$refs.input):t.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(e){this.disabled||(this.colorDragging=!0,this.pickColor(e),t.addClass(this.$el,"p-colorpicker-dragging"),e.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,t.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(e){this.disabled||(this.hueDragging=!0,this.pickHue(e),t.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o}};const g=["tabindex","disabled","aria-labelledby"],m={class:"p-colorpicker-content"},v={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n"),b.render=function(e,t,i,n,o,b){const f=s("Portal");return l(),r("div",{ref:"container",class:a(b.containerClass)},[i.inline?h("",!0):(l(),r("input",{key:0,ref:"input",type:"text",class:a(b.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>b.onInputClick&&b.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>b.onInputKeydown&&b.onInputKeydown(...e)),"aria-labelledby":i.ariaLabelledBy},null,42,g)),d(f,{appendTo:i.appendTo,disabled:i.inline},{default:u((()=>[d(p,{name:"p-connected-overlay",onEnter:b.onOverlayEnter,onLeave:b.onOverlayLeave,onAfterLeave:b.onOverlayAfterLeave},{default:u((()=>[i.inline||o.overlayVisible?(l(),r("div",{key:0,ref:b.pickerRef,class:a(b.pickerClass),onClick:t[10]||(t[10]=(...e)=>b.onOverlayClick&&b.onOverlayClick(...e))},[c("div",m,[c("div",{ref:b.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>b.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>b.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>b.onDrag(e)),onTouchend:t[5]||(t[5]=e=>b.onDragEnd())},[c("div",v,[c("div",{ref:b.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),c("div",{ref:b.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>b.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>b.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>b.onDrag(e)),onTouchend:t[9]||(t[9]=e=>b.onDragEnd())},[c("div",{ref:b.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):h("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)};export{b as default};
+import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import o from"primevue/portal";import{resolveComponent as s,openBlock as r,createElementBlock as l,normalizeClass as a,createCommentVNode as h,createVNode as u,withCtx as d,Transition as p,createElementVNode as c}from"vue";var b={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),s=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:s}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var s=o,r=(255-n)*o/255,l=i%60*(s-r)/60;360===i&&(i=0),i<60?(t.r=s,t.b=r,t.g=r+l):i<120?(t.g=s,t.b=r,t.r=s-l):i<180?(t.g=s,t.r=r,t.b=r+l):i<240?(t.b=s,t.r=r,t.g=s-l):i<300?(t.b=s,t.g=r,t.r=r+l):i<360?(t.r=s,t.g=r,t.b=s-l):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){"self"===this.appendTo?t.relativePosition(this.picker,this.$refs.input):t.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(e){this.disabled||(this.colorDragging=!0,this.pickColor(e),t.addClass(this.$el,"p-colorpicker-dragging"),e.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,t.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(e){this.disabled||(this.hueDragging=!0,this.pickHue(e),t.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o}};const g=["tabindex","disabled"],m={class:"p-colorpicker-content"},v={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n"),b.render=function(e,t,i,n,o,b){const f=s("Portal");return r(),l("div",{ref:"container",class:a(b.containerClass)},[i.inline?h("",!0):(r(),l("input",{key:0,ref:"input",type:"text",class:a(b.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>b.onInputClick&&b.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>b.onInputKeydown&&b.onInputKeydown(...e))},null,42,g)),u(f,{appendTo:i.appendTo,disabled:i.inline},{default:d((()=>[u(p,{name:"p-connected-overlay",onEnter:b.onOverlayEnter,onLeave:b.onOverlayLeave,onAfterLeave:b.onOverlayAfterLeave},{default:d((()=>[i.inline||o.overlayVisible?(r(),l("div",{key:0,ref:b.pickerRef,class:a(b.pickerClass),onClick:t[10]||(t[10]=(...e)=>b.onOverlayClick&&b.onOverlayClick(...e))},[c("div",m,[c("div",{ref:b.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>b.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>b.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>b.onDrag(e)),onTouchend:t[5]||(t[5]=e=>b.onDragEnd())},[c("div",v,[c("div",{ref:b.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),c("div",{ref:b.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>b.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>b.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>b.onDrag(e)),onTouchend:t[9]||(t[9]=e=>b.onDragEnd())},[c("div",{ref:b.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):h("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)};export{b as default};

package/colorpicker/colorpicker.js

@@ -43,10 +43,6 @@ this.primevue.colorpicker = (function (utils, OverlayEventBus, Portal, vue) {
                 type: Number,
                 default: 0
             },
-            ariaLabelledBy: {
-                type: String,
-                default: null
-            },
             appendTo: {
                 type: String,
                 default: 'body'
@@ -556,7 +552,7 @@ this.primevue.colorpicker = (function (utils, OverlayEventBus, Portal, vue) {
         }
     };
 
-    const _hoisted_1 = ["tabindex", "disabled", "aria-labelledby"];
+    const _hoisted_1 = ["tabindex", "disabled"];
     const _hoisted_2 = { class: "p-colorpicker-content" };
     const _hoisted_3 = { class: "p-colorpicker-color" };
 
@@ -577,8 +573,7 @@ this.primevue.colorpicker = (function (utils, OverlayEventBus, Portal, vue) {
               tabindex: $props.tabindex,
               disabled: $props.disabled,
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.onInputClick && $options.onInputClick(...args))),
-              onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args))),
-              "aria-labelledby": $props.ariaLabelledBy
+              onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onInputKeydown && $options.onInputKeydown(...args)))
             }, null, 42, _hoisted_1))
           : vue.createCommentVNode("", true),
         vue.createVNode(_component_Portal, {