primereact 10.4.0 → 10.5.0

package/knob/knob.js

@@ -88,6 +88,7 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       disabled: false,
       readOnly: false,
       showValue: true,
+      tabIndex: 0,
       step: 1,
       min: 0,
       max: 100,
@@ -251,6 +252,15 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
         });
       }
     };
+    var updateModelValue = function updateModelValue(newValue) {
+      var currentValue;
+      if (newValue > props.max) currentValue = props.max;else if (newValue < props.min) currentValue = props.min;else currentValue = newValue;
+      if (props.onChange) {
+        props.onChange({
+          value: currentValue
+        });
+      }
+    };
     var _onClick = function onClick(event) {
       if (!props.disabled && !props.readOnly) {
         updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
@@ -273,6 +283,48 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       unbindWindowTouchMoveListener();
       unbindWindowTouchEndListener();
     };
+    var _onKeyDown = function onKeyDown(event) {
+      if (!props.disabled && !props.readonly) {
+        switch (event.code) {
+          case 'ArrowRight':
+          case 'ArrowUp':
+            event.preventDefault();
+            updateModelValue(props.value + 1);
+            break;
+          case 'ArrowLeft':
+          case 'ArrowDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 1);
+              break;
+            }
+          case 'Home':
+            {
+              event.preventDefault();
+              updateModelValue(props.min);
+              break;
+            }
+          case 'End':
+            {
+              event.preventDefault();
+              updateModelValue(props.max);
+              break;
+            }
+          case 'PageUp':
+            {
+              event.preventDefault();
+              updateModelValue(props.value + 10);
+              break;
+            }
+          case 'PageDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 10);
+              break;
+            }
+        }
+      }
+    };
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -300,6 +352,13 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       viewBox: '0 0 100 100',
       width: props.size,
       height: props.size,
+      'aria-valuemin': props.min,
+      'aria-valuemax': props.max,
+      'aria-valuenow': props.value,
+      'aria-labelledby': props.ariaLabelledby,
+      'aria-label': props.ariaLabel,
+      role: 'slider',
+      tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
       onClick: function onClick(e) {
         return _onClick(e);
       },
@@ -314,6 +373,9 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       },
       onTouchEnd: function onTouchEnd(e) {
         return _onTouchEnd();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
       }
     }, ptm('svg'));
     var rangeProps = mergeProps({

package/knob/knob.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,r,a,o){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=i(t);function s(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function f(e,t){if(e){if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e,t){return s(e)||c(e,t)||f(e,t)||m()}var p=r.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return o.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,h=4*Math.PI/3,y=-Math.PI/3,b=l.memo(l.forwardRef((function(e,t){var o=a.useMergeProps(),i=l.useContext(n.PrimeReactContext),s=p.getProps(e,i),c=p.setMetaData({props:s}),u=c.ptm,f=c.cx;r.useHandleStyle(p.css.styles,c.isUnstyled,{name:"knob"});var m=l.useRef(null),b=!s.disabled&&!s.readOnly,g=d(a.useEventListener({target:"window",type:"mousemove",listener:function(e){_(e.offsetX,e.offsetY),e.preventDefault()},when:b}),2),M=g[0],k=g[1],w=d(a.useEventListener({target:"window",type:"mouseup",listener:function(e){k(),E(),e.preventDefault()},when:b}),2),x=w[0],E=w[1],C=d(a.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=m.current.getBoundingClientRect(),n=e.targetTouches.item(0);_(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:b}),2),O=C[0],P=C[1],j=d(a.useEventListener({target:"window",type:"touchend",listener:function(){P(),A()},when:b}),2),I=j[0],A=j[1],N=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},S=function(){return N(s.min>0&&s.max>0?s.min:0,s.min,s.max,h,y)},z=function(){return N(s.value,s.min,s.max,h,y)},D="M ".concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(y)*v," ").concat(50-Math.sin(y)*v),T="M ".concat(50+Math.cos(S())*v," ").concat(50-Math.sin(S())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(S()-z())<Math.PI?0:1," ").concat(z()>S()?0:1," ").concat(50+Math.cos(z())*v," ").concat(50-Math.sin(z())*v),_=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),r=-Math.PI/2-Math.PI/6;B(n,r)},B=function(e,t){var n;if(e>y)n=N(e,h,y,s.min,s.max);else{if(!(e<t))return;n=N(e+2*Math.PI,h,y,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})};l.useImperativeHandle(t,(function(){return{props:s,getElement:function(){return m.current}}}));var L=o({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:f("label"),name:s.name},u("label")),R=s.showValue&&l.createElement("text",L,s.valueTemplate.replace("{value}",s.value.toString())),W=o({ref:m,id:s.id,className:f("root"),style:s.style},u("root")),Y=o({viewBox:"0 0 100 100",width:s.size,height:s.size,onClick:function(e){return t=e,void(s.disabled||s.readOnly||_(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,M(),x(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void E()},onTouchStart:function(e){return O(),void I()},onTouchEnd:function(e){return P(),void A()}},u("svg")),K=o({d:D,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:f("range")},u("range")),U=o({d:T,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:f("value")},u("value"));return l.createElement("div",W,l.createElement("svg",Y,l.createElement("path",K),l.createElement("path",U),R))})));return b.displayName="Knob",e.Knob=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,a,r,o){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=l(t);function s(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],s=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);s=!0);}catch(e){u=!0,r=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return i}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function f(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e,t){return s(e)||u(e,t)||f(e,t)||m()}var v=a.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex:0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return o.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),p=40,h=4*Math.PI/3,b=-Math.PI/3,y=i.memo(i.forwardRef((function(e,t){var o=r.useMergeProps(),l=i.useContext(n.PrimeReactContext),s=v.getProps(e,l),u=v.setMetaData({props:s}),c=u.ptm,f=u.cx;a.useHandleStyle(v.css.styles,u.isUnstyled,{name:"knob"});var m=i.useRef(null),y=!s.disabled&&!s.readOnly,g=d(r.useEventListener({target:"window",type:"mousemove",listener:function(e){T(e.offsetX,e.offsetY),e.preventDefault()},when:y}),2),w=g[0],k=g[1],x=d(r.useEventListener({target:"window",type:"mouseup",listener:function(e){k(),C(),e.preventDefault()},when:y}),2),M=x[0],C=x[1],E=d(r.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=m.current.getBoundingClientRect(),n=e.targetTouches.item(0);T(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:y}),2),D=E[0],P=E[1],O=d(r.useEventListener({target:"window",type:"touchend",listener:function(){P(),I()},when:y}),2),A=O[0],I=O[1],j=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return j(s.min>0&&s.max>0?s.min:0,s.min,s.max,h,b)},N=function(){return j(s.value,s.min,s.max,h,b)},S="M ".concat(50+Math.cos(h)*p," ").concat(50-Math.sin(h)*p," A ").concat(p," ").concat(p," 0 1 1 ").concat(50+Math.cos(b)*p," ").concat(50-Math.sin(b)*p),z="M ".concat(50+Math.cos(L())*p," ").concat(50-Math.sin(L())*p," A ").concat(p," ").concat(p," 0 ").concat(Math.abs(L()-N())<Math.PI?0:1," ").concat(N()>L()?0:1," ").concat(50+Math.cos(N())*p," ").concat(50-Math.sin(N())*p),T=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),a=-Math.PI/2-Math.PI/6;R(n,a)},R=function(e,t){var n;if(e>b)n=j(e,h,b,s.min,s.max);else{if(!(e<t))return;n=j(e+2*Math.PI,h,b,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})},_=function(e){var t;t=e>s.max?s.max:e<s.min?s.min:e,s.onChange&&s.onChange({value:t})},B=function(e){if(!s.disabled&&!s.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),_(s.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),_(s.value-1);break;case"Home":e.preventDefault(),_(s.min);break;case"End":e.preventDefault(),_(s.max);break;case"PageUp":e.preventDefault(),_(s.value+10);break;case"PageDown":e.preventDefault(),_(s.value-10)}};i.useImperativeHandle(t,(function(){return{props:s,getElement:function(){return m.current}}}));var U=o({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:f("label"),name:s.name},c("label")),W=s.showValue&&i.createElement("text",U,s.valueTemplate.replace("{value}",s.value.toString())),K=o({ref:m,id:s.id,className:f("root"),style:s.style},c("root")),Y=o({viewBox:"0 0 100 100",width:s.size,height:s.size,"aria-valuemin":s.min,"aria-valuemax":s.max,"aria-valuenow":s.value,"aria-labelledby":s.ariaLabelledby,"aria-label":s.ariaLabel,role:"slider",tabIndex:s.readonly||s.disabled?-1:s.tabIndex,onClick:function(e){return t=e,void(s.disabled||s.readOnly||T(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,w(),M(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void C()},onTouchStart:function(e){return D(),void A()},onTouchEnd:function(e){return P(),void I()},onKeyDown:function(e){return B(e)}},c("svg")),H=o({d:S,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:f("range")},c("range")),X=o({d:z,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:f("value")},c("value"));return i.createElement("div",K,i.createElement("svg",Y,i.createElement("path",H),i.createElement("path",X),W))})));return y.displayName="Knob",e.Knob=y,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);