@progress/kendo-react-inputs 9.0.0-develop.8 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/colors/ColorInput.js +1 -1
- package/colors/ColorInput.mjs +19 -19
- package/colors/HexInput.js +1 -1
- package/colors/HexInput.mjs +9 -8
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +20 -86
- package/index.d.ts +20 -86
- package/index.js +1 -1
- package/index.mjs +65 -66
- package/input/Input.js +1 -1
- package/input/Input.mjs +144 -183
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
package/colors/ColorInput.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";const b=require("react"),o=require("../numerictextbox/NumericTextBox.js"),u=require("./HexInput.js"),m=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function
|
|
8
|
+
"use client";"use strict";const b=require("react"),o=require("../numerictextbox/NumericTextBox.js"),u=require("./HexInput.js"),m=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function f(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const a=f(b),r=["rgba","rgb","hex"];class c extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||r[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),n=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),g=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),p=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),d=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(m.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:x.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(u,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},n)),a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},g)),a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},p))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},d)))}dispatchRgbaChange(e,t){const n={...this.props.rgba};e.r!==void 0&&(n.r=e.r),e.g!==void 0&&(n.g=e.g),e.b!==void 0&&(n.b=e.b),e.a!==void 0&&(n.a=e.a),this.props.onRgbaChange(n,t)}onToggleModeChange(){const e=r.length-1===r.indexOf(this.state.inputMode)?0:r.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:r[e]});else{const t=r[e]==="rgba"?e+1:e;this.setState({inputMode:r[t]})}}}l.registerForIntl(c);l.registerForLocalization(c);module.exports=c;
|
package/colors/ColorInput.mjs
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as a from "react";
|
|
10
10
|
import { NumericTextBox as r } from "../numerictextbox/NumericTextBox.mjs";
|
|
11
|
-
import
|
|
12
|
-
import { Button as
|
|
13
|
-
import { caretAltExpandIcon as
|
|
14
|
-
import { provideLocalizationService as
|
|
15
|
-
import { colorGradientHex as o, messages as
|
|
16
|
-
const
|
|
11
|
+
import v from "./HexInput.mjs";
|
|
12
|
+
import { Button as x } from "@progress/kendo-react-buttons";
|
|
13
|
+
import { caretAltExpandIcon as C } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { provideLocalizationService as k, registerForIntl as E, registerForLocalization as M } from "@progress/kendo-react-intl";
|
|
15
|
+
import { colorGradientHex as o, messages as n, colorGradientR as l, colorGradientG as g, colorGradientB as p, colorGradientA as c, colorGradientToggleInputsButton as h } from "../messages/index.mjs";
|
|
16
|
+
const i = ["rgba", "rgb", "hex"];
|
|
17
17
|
class d extends a.Component {
|
|
18
18
|
constructor(e) {
|
|
19
19
|
super(e), this.onRgbaRChange = (t) => {
|
|
@@ -24,31 +24,31 @@ class d extends a.Component {
|
|
|
24
24
|
this.dispatchRgbaChange({ b: t.value }, t);
|
|
25
25
|
}, this.onRgbaAChange = (t) => {
|
|
26
26
|
this.dispatchRgbaChange({ a: t.value }, t);
|
|
27
|
-
}, this.state = { inputMode: e.defaultInputMode ||
|
|
27
|
+
}, this.state = { inputMode: e.defaultInputMode || i[1] };
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
const e =
|
|
30
|
+
const e = k(this), t = e.toLanguageString(o, n[o]), s = e.toLanguageString(l, n[l]), m = e.toLanguageString(g, n[g]), b = e.toLanguageString(p, n[p]), u = e.toLanguageString(c, n[c]), f = e.toLanguageString(
|
|
31
31
|
h,
|
|
32
|
-
|
|
32
|
+
n[h]
|
|
33
33
|
);
|
|
34
34
|
return /* @__PURE__ */ a.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
|
|
35
|
-
|
|
35
|
+
x,
|
|
36
36
|
{
|
|
37
|
-
"aria-label":
|
|
37
|
+
"aria-label": f,
|
|
38
38
|
fillMode: "flat",
|
|
39
39
|
icon: "caret-alt-expand",
|
|
40
|
-
svgIcon:
|
|
40
|
+
svgIcon: C,
|
|
41
41
|
className: "k-colorgradient-toggle-mode",
|
|
42
42
|
onClick: this.onToggleModeChange.bind(this)
|
|
43
43
|
}
|
|
44
|
-
)), this.state.inputMode === "hex" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ a.createElement(
|
|
45
|
-
|
|
44
|
+
)), this.state.inputMode === "hex" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ a.createElement(
|
|
45
|
+
v,
|
|
46
46
|
{
|
|
47
47
|
hex: this.props.hex,
|
|
48
48
|
onHexChange: this.props.onHexChange,
|
|
49
49
|
disabled: this.props.disabled
|
|
50
50
|
}
|
|
51
|
-
)
|
|
51
|
+
), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, t)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
|
|
52
52
|
r,
|
|
53
53
|
{
|
|
54
54
|
inputType: "number",
|
|
@@ -108,12 +108,12 @@ class d extends a.Component {
|
|
|
108
108
|
e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, t);
|
|
109
109
|
}
|
|
110
110
|
onToggleModeChange() {
|
|
111
|
-
const e =
|
|
111
|
+
const e = i.length - 1 === i.indexOf(this.state.inputMode) ? 0 : i.indexOf(this.state.inputMode) + 1;
|
|
112
112
|
if (this.props.opacity)
|
|
113
|
-
this.setState({ inputMode:
|
|
113
|
+
this.setState({ inputMode: i[e] });
|
|
114
114
|
else {
|
|
115
|
-
const t =
|
|
116
|
-
this.setState({ inputMode:
|
|
115
|
+
const t = i[e] === "rgba" ? e + 1 : e;
|
|
116
|
+
this.setState({ inputMode: i[t] });
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
}
|
package/colors/HexInput.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";const
|
|
8
|
+
"use client";"use strict";const c=require("react"),o=require("./utils/color-parser.js"),i=require("./utils/misc.js"),l=require("../textbox/Textbox.js");function h(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=h(c);class u extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,n=o.parseColor(s,"rgba");this.setState({hex:s}),i.isPresent(n)&&this.props.onHexChange(s,n,t)},this.onBlur=()=>{i.isPresent(o.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(l.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value"})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=u;
|
package/colors/HexInput.mjs
CHANGED
|
@@ -7,26 +7,27 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as i from "react";
|
|
10
|
-
import { parseColor as
|
|
11
|
-
import { isPresent as
|
|
12
|
-
import {
|
|
10
|
+
import { parseColor as a } from "./utils/color-parser.mjs";
|
|
11
|
+
import { isPresent as o } from "./utils/misc.mjs";
|
|
12
|
+
import { TextBox as h } from "../textbox/Textbox.mjs";
|
|
13
13
|
class p extends i.Component {
|
|
14
14
|
constructor(e) {
|
|
15
15
|
super(e), this.onChange = (t) => {
|
|
16
|
-
const
|
|
17
|
-
this.setState({ hex:
|
|
16
|
+
const s = t.target.value, r = a(s, "rgba");
|
|
17
|
+
this.setState({ hex: s }), o(r) && this.props.onHexChange(s, r, t);
|
|
18
18
|
}, this.onBlur = () => {
|
|
19
|
-
a(
|
|
19
|
+
o(a(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
|
|
20
20
|
}, this.state = { hex: this.props.hex, originalHex: this.props.hex };
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
23
|
return /* @__PURE__ */ i.createElement(
|
|
24
|
-
|
|
24
|
+
h,
|
|
25
25
|
{
|
|
26
26
|
value: this.state.hex,
|
|
27
27
|
onChange: this.onChange,
|
|
28
28
|
onBlur: this.onBlur,
|
|
29
|
-
disabled: this.props.disabled
|
|
29
|
+
disabled: this.props.disabled,
|
|
30
|
+
className: "k-hex-value"
|
|
30
31
|
}
|
|
31
32
|
);
|
|
32
33
|
}
|