@progress/kendo-react-inputs 9.0.0-develop.2 → 9.0.0-develop.3
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/README.md +63 -62
- package/colors/ColorContrastLabels.mjs +10 -1
- package/colors/ColorContrastSvg.mjs +14 -2
- package/colors/ColorInput.js +1 -1
- package/colors/ColorInput.mjs +12 -9
- package/colors/ColorPalette.js +1 -1
- package/colors/ColorPalette.mjs +13 -14
- package/colors/ColorPicker.mjs +62 -79
- package/colors/FlatColorPicker.mjs +68 -22
- package/colors/models/palette-presets.mjs +656 -12
- package/colors/utils/color-cache.js +1 -1
- package/colors/utils/color-cache.mjs +3 -6
- package/colors/utils/color-parser.js +1 -1
- package/colors/utils/color-parser.mjs +2 -5
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +1 -1
- package/index.d.ts +1 -1
- package/input/Input.js +1 -1
- package/input/Input.mjs +14 -10
- package/input/InputClearValue.mjs +6 -11
- package/input/InputPrefix.mjs +17 -18
- package/input/InputSeparator.mjs +12 -10
- package/input/InputSuffix.mjs +17 -18
- package/input/InputValidationIcon.mjs +3 -1
- package/maskedtextbox/masking.service.js +1 -1
- package/maskedtextbox/masking.service.mjs +2 -2
- package/maskedtextbox/parsing/parsers.js +1 -1
- package/maskedtextbox/parsing/parsers.mjs +22 -23
- package/numerictextbox/NumericTextBox.mjs +259 -320
- package/numerictextbox/utils/index.mjs +16 -14
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/radiobutton/RadioButton.mjs +7 -18
- package/radiobutton/RadioGroup.mjs +3 -6
- package/range-slider/RangeSlider.mjs +68 -62
- package/rating/Rating.mjs +73 -90
- package/rating/RatingItem.mjs +29 -50
- package/signature/Signature.mjs +60 -93
- package/slider/SliderLabel.mjs +6 -10
- package/switch/Switch.mjs +9 -5
- package/textarea/TextArea.mjs +19 -47
- package/textbox/Textbox.mjs +37 -55
package/README.md
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
# KendoReact Inputs Library for React
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
|
-
>
|
|
9
|
-
>
|
|
10
|
-
>
|
|
11
|
-
>
|
|
8
|
+
>
|
|
9
|
+
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—a commercial UI library.
|
|
10
|
+
> - You will need to install a license key when adding the package to your project. For more information, please refer to the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
|
|
11
|
+
> - To receive a license key, you need to either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs). Doing so indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
|
|
12
|
+
> - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
|
|
12
13
|
>
|
|
13
14
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) and speed up your development process!
|
|
14
15
|
|
|
@@ -16,24 +17,24 @@ The React Inputs, part of KendoReact, offer a highly customizable interface for
|
|
|
16
17
|
|
|
17
18
|
What's in this package (ToC):
|
|
18
19
|
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
20
|
+
- [KendoReact Inputs Library for React](#kendoreact-inputs-library-for-react)
|
|
21
|
+
- [React Checkbox Component](#react-checkbox-component)
|
|
22
|
+
- [React ColorGradient Component](#react-colorgradient-component)
|
|
23
|
+
- [React ColorPalette Component](#react-colorpalette-component)
|
|
24
|
+
- [React ColorPicker Component](#react-colorpicker-component)
|
|
25
|
+
- [Key Features](#key-features)
|
|
26
|
+
- [React Input Component](#react-input-component)
|
|
27
|
+
- [React MaskedTextBox Component](#react-maskedtextbox-component)
|
|
28
|
+
- [React NumericTextBox Component](#react-numerictextbox-component)
|
|
29
|
+
- [React RadioButton Component](#react-radiobutton-component)
|
|
30
|
+
- [React RadioButtonGroup Component](#react-radiobuttongroup-component)
|
|
31
|
+
- [React RangeSlider Component](#react-rangeslider-component)
|
|
32
|
+
- [React Slider Component](#react-slider-component)
|
|
33
|
+
- [React Switch Component](#react-switch-component)
|
|
34
|
+
- [React TextArea Component](#react-textarea-component)
|
|
35
|
+
- [React Inputs Components Library Features](#react-inputs-components-library-features)
|
|
36
|
+
- [Support Options](#support-options)
|
|
37
|
+
- [Resources](#resources)
|
|
37
38
|
|
|
38
39
|
## React Checkbox Component
|
|
39
40
|
|
|
@@ -53,8 +54,8 @@ What's in this package (ToC):
|
|
|
53
54
|
|
|
54
55
|
### Key Features
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
- **View Types**—The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette.
|
|
58
|
+
- **Contrast Color Tool**—Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
|
|
58
59
|
|
|
59
60
|
## React Input Component
|
|
60
61
|
|
|
@@ -96,52 +97,52 @@ Popularized by iOS, Android, and other mobile operating systems, [the KendoReact
|
|
|
96
97
|
|
|
97
98
|
Among the many features which the KendoReact Inputs deliver are:
|
|
98
99
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
100
|
+
- **Labels**—To make implementing the KendoReact Inputs as easy as possible, the React UI component comes with a built-in Label property, which can be placed before or after the actual element. For scenarios where the built-in label is not suitable, a custom label can be easily applied.
|
|
101
|
+
- **Setting the default value**—Easily configure the initial value that the Inputs render.
|
|
102
|
+
- **Form validation**—Validate input values, set validation requirements (such as minimum and maximum) and prevent the submission of forms which are in an invalid state.
|
|
103
|
+
- **Formats and placeholders**—Control the placeholders for the input field, including custom formats.
|
|
104
|
+
- **Controlled state**—Control the value Inputs.
|
|
105
|
+
- **Accessibility support**—The Inputs are compliant with WAI-ARIA and Section 508.
|
|
106
|
+
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—The KendoReact Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
106
107
|
|
|
107
108
|
## Support Options
|
|
108
109
|
|
|
109
110
|
For any issues you might encounter while working with the KendoReact Inputs, use any of the available support channels:
|
|
110
111
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
- Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-tickets?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
|
|
113
|
+
- Product forums—The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) are part of the free support you can get from the community and from the KendoReact team.
|
|
114
|
+
- Feedback portal—The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is where you can request and vote for new features to be added.
|
|
114
115
|
|
|
115
116
|
## Resources
|
|
116
117
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
119
|
+
- [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
120
|
+
- [API Reference of the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
121
|
+
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
122
|
+
- [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
123
|
+
- [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
124
|
+
- [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
125
|
+
- [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
125
126
|
|
|
126
127
|
High-level component overview pages
|
|
127
128
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
129
|
+
- [React Checkbox Component](https://www.telerik.com/kendo-react-ui/checkbox)
|
|
130
|
+
- [React ColorGradient Component](https://www.telerik.com/kendo-react-ui/colorgradient)
|
|
131
|
+
- [React ColorPalette Component](https://www.telerik.com/kendo-react-ui/colorpalette)
|
|
132
|
+
- [React ColorPicker Component](https://www.telerik.com/kendo-react-ui/colorpicker)
|
|
133
|
+
- [React FlatColorPicker Component](https://www.telerik.com/kendo-react-ui/flatcolorpicker)
|
|
134
|
+
- [React Input Component](https://www.telerik.com/kendo-react-ui/input)
|
|
135
|
+
- [React MaskedTextBox Component](https://www.telerik.com/kendo-react-ui/maskedtextbox)
|
|
136
|
+
- [React NumericTextBox Component](https://www.telerik.com/kendo-react-ui/numerictextbox)
|
|
137
|
+
- [React RadioButton Component](https://www.telerik.com/kendo-react-ui/radiobutton)
|
|
138
|
+
- [React RadioButtonGroup Component](https://www.telerik.com/kendo-react-ui/radiogroup)
|
|
139
|
+
- [React RangeSlider Component](https://www.telerik.com/kendo-react-ui/rangeslider)
|
|
140
|
+
- [React Rating Component](https://www.telerik.com/kendo-react-ui/rating)
|
|
141
|
+
- [React Signature Component](https://www.telerik.com/kendo-react-ui/signature)
|
|
142
|
+
- [React Slider Component](https://www.telerik.com/kendo-react-ui/slider)
|
|
143
|
+
- [React Switch Component](https://www.telerik.com/kendo-react-ui/switch)
|
|
144
|
+
- [React TextArea Component](https://www.telerik.com/kendo-react-ui/textarea)
|
|
145
|
+
|
|
146
|
+
_Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._
|
|
147
|
+
|
|
148
|
+
_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._
|
|
@@ -14,7 +14,16 @@ import { IconWrap as n } from "@progress/kendo-react-common";
|
|
|
14
14
|
import { checkIcon as r, xIcon as p } from "@progress/kendo-svg-icons";
|
|
15
15
|
class G extends e.Component {
|
|
16
16
|
render() {
|
|
17
|
-
const t = N(this), x = t.toLanguageString(
|
|
17
|
+
const t = N(this), x = t.toLanguageString(
|
|
18
|
+
i,
|
|
19
|
+
o[i]
|
|
20
|
+
), k = t.toLanguageString(
|
|
21
|
+
l,
|
|
22
|
+
o[l]
|
|
23
|
+
), u = t.toLanguageString(
|
|
24
|
+
m,
|
|
25
|
+
o[m]
|
|
26
|
+
), v = t.toLanguageString(g, o[g]), A = t.toLanguageString(d, o[d]), a = F(this.props.rgba, this.props.bgColor), E = 4.5.toFixed(1), L = 7 .toFixed(1), C = `${x}: ${a.toFixed(2)}`, f = `${k}: ${E}`, h = `${u}: ${L}`, s = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-success" }, v, " ", /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })), c = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-error" }, A, " ", /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }));
|
|
18
27
|
return /* @__PURE__ */ e.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" }, /* @__PURE__ */ e.createElement("div", { className: "k-contrast-ratio" }, /* @__PURE__ */ e.createElement("span", { className: "k-contrast-ratio-text" }, C), a >= 4.5 ? /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-success" }, /* @__PURE__ */ e.createElement(n, { name: "check", icon: r }), a >= 7 && /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })) : /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-error" }, /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }))), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, f), a >= 4.5 ? s : c), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, h), a >= 7 ? s : c));
|
|
19
28
|
}
|
|
20
29
|
}
|
|
@@ -13,12 +13,24 @@ const C = 4.5, g = 7, v = 16;
|
|
|
13
13
|
class w extends h.Component {
|
|
14
14
|
renderSvgCurveLine() {
|
|
15
15
|
const t = this.props.metrics, d = (n, i, r, e, s) => {
|
|
16
|
-
const l = (r + e) / 2, a = Object.assign({}, this.props.hsva, {
|
|
16
|
+
const l = (r + e) / 2, a = Object.assign({}, this.props.hsva, {
|
|
17
|
+
s: i / t.width,
|
|
18
|
+
v: 1 - l / t.height
|
|
19
|
+
}), o = S(
|
|
20
|
+
m(T(a)),
|
|
21
|
+
m(this.props.backgroundColor || "")
|
|
22
|
+
);
|
|
17
23
|
return r + 0.5 > e ? o < n + 1 && o > n - 1 ? l : null : s(o, n) ? d(n, i, r, e - (e - r) / 2, s) : d(n, i, r + (e - r) / 2, e, s);
|
|
18
24
|
}, u = (n, i, r = !1) => {
|
|
19
25
|
const e = [];
|
|
20
26
|
for (let s = 0; s <= t.width; s += t.width / i) {
|
|
21
|
-
const l = d(
|
|
27
|
+
const l = d(
|
|
28
|
+
n,
|
|
29
|
+
s,
|
|
30
|
+
0,
|
|
31
|
+
t.height,
|
|
32
|
+
r ? (a, o) => a < o : (a, o) => a > o
|
|
33
|
+
);
|
|
22
34
|
l !== null && e.push([s, l]);
|
|
23
35
|
}
|
|
24
36
|
return e;
|
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 k(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=k(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("span",{className:"k-hex-value k-textbox k-input"},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){
|
|
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 k(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=k(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("span",{className:"k-hex-value k-textbox k-input"},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
|
@@ -12,8 +12,8 @@ import f from "./HexInput.mjs";
|
|
|
12
12
|
import { Button as k } from "@progress/kendo-react-buttons";
|
|
13
13
|
import { caretAltExpandIcon as v } from "@progress/kendo-svg-icons";
|
|
14
14
|
import { provideLocalizationService as C, registerForIntl as E, registerForLocalization as M } from "@progress/kendo-react-intl";
|
|
15
|
-
import { colorGradientHex as o, messages as
|
|
16
|
-
const
|
|
15
|
+
import { colorGradientHex as o, messages as i, colorGradientR as l, colorGradientG as g, colorGradientB as p, colorGradientA as c, colorGradientToggleInputsButton as h } from "../messages/index.mjs";
|
|
16
|
+
const n = ["rgba", "rgb", "hex"];
|
|
17
17
|
class d extends a.Component {
|
|
18
18
|
constructor(e) {
|
|
19
19
|
super(e), this.onRgbaRChange = (t) => {
|
|
@@ -24,10 +24,13 @@ 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 || n[1] };
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
const e = C(this), t = e.toLanguageString(o,
|
|
30
|
+
const e = C(this), t = e.toLanguageString(o, i[o]), s = e.toLanguageString(l, i[l]), m = e.toLanguageString(g, i[g]), b = e.toLanguageString(p, i[p]), u = e.toLanguageString(c, i[c]), x = e.toLanguageString(
|
|
31
|
+
h,
|
|
32
|
+
i[h]
|
|
33
|
+
);
|
|
31
34
|
return /* @__PURE__ */ a.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
|
|
32
35
|
k,
|
|
33
36
|
{
|
|
@@ -101,16 +104,16 @@ class d extends a.Component {
|
|
|
101
104
|
), this.props.opacity && /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, u)));
|
|
102
105
|
}
|
|
103
106
|
dispatchRgbaChange(e, t) {
|
|
104
|
-
|
|
107
|
+
const s = { ...this.props.rgba };
|
|
105
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);
|
|
106
109
|
}
|
|
107
110
|
onToggleModeChange() {
|
|
108
|
-
const e =
|
|
111
|
+
const e = n.length - 1 === n.indexOf(this.state.inputMode) ? 0 : n.indexOf(this.state.inputMode) + 1;
|
|
109
112
|
if (this.props.opacity)
|
|
110
|
-
this.setState({ inputMode:
|
|
113
|
+
this.setState({ inputMode: n[e] });
|
|
111
114
|
else {
|
|
112
|
-
const t =
|
|
113
|
-
this.setState({ inputMode:
|
|
115
|
+
const t = n[e] === "rgba" ? e + 1 : e;
|
|
116
|
+
this.setState({ inputMode: n[t] });
|
|
114
117
|
}
|
|
115
118
|
}
|
|
116
119
|
}
|
package/colors/ColorPalette.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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),s=require("prop-types"),T=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),N=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const l=O(F),v=24,u=10,S="office",c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},r.validatePackage(N.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new T.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),a=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:a,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:L.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),s=require("prop-types"),T=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),N=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const l=O(F),v=24,u=10,S="office",c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},r.validatePackage(N.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new T.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),a=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:a,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:L.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||u}}renderRows(t,e,o){return t.map((i,a)=>l.createElement("tr",{role:"row",key:a},this.renderColumns(i,a,e,o)))}renderColumns(t,e,o,i){const a=o!==void 0&&o.row===e,E=o&&o.col,w=i!==void 0&&i.row===e,y=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},C=f.width+"px",P=f.height+"px";return t.map((h,d)=>{const g=a&&E===d,k=r.classNames("k-colorpalette-tile",{"k-selected":g,"k-focus":w&&y===d});return l.createElement("td",{role:"gridcell",className:k,"aria-label":h,"aria-selected":g?!0:this.props.disabled?void 0:!1,style:{backgroundColor:h,width:C,height:P,minWidth:C},onClick:R=>this.onColorClick(h,R),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string},c.defaultProps={palette:S,tileSize:v};let p=c;const b=r.createPropsContext(),m=r.withIdHOC(r.withPropsContext(b,p));m.displayName="KendoReactColorPalette";exports.ColorPalette=m;exports.ColorPalettePropsContext=b;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=S;exports.DEFAULT_TILE_SIZE=v;
|
package/colors/ColorPalette.mjs
CHANGED
|
@@ -42,10 +42,7 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
|
|
|
42
42
|
}, this.onColorClick = (e, o) => {
|
|
43
43
|
this.isUncontrolled ? this.setState({ selectedColor: e, focusedColor: e }) : this.setState({ focusedColor: e }), this.dispatchChangeEvent(e, o);
|
|
44
44
|
}, this.onFocus = (e) => {
|
|
45
|
-
this.paletteService && (this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] }), this.props.onFocus && this.props.onFocus.call(
|
|
46
|
-
void 0,
|
|
47
|
-
e
|
|
48
|
-
));
|
|
45
|
+
this.paletteService && (this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] }), this.props.onFocus && this.props.onFocus.call(void 0, e));
|
|
49
46
|
}, this.onBlur = () => {
|
|
50
47
|
this.setState({ focusedColor: void 0 });
|
|
51
48
|
}, k(I), this.state = {
|
|
@@ -125,8 +122,8 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
|
|
|
125
122
|
colors: t.colors,
|
|
126
123
|
columns: this.props.columns || t.columns || m
|
|
127
124
|
} : { colors: [], columns: 0 };
|
|
128
|
-
}
|
|
129
|
-
|
|
125
|
+
}
|
|
126
|
+
return { colors: this.props.palette || [], columns: this.props.columns || m };
|
|
130
127
|
}
|
|
131
128
|
renderRows(t, e, o) {
|
|
132
129
|
return t.map((r, l) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: l }, this.renderColumns(r, l, e, o)));
|
|
@@ -134,13 +131,10 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
|
|
|
134
131
|
renderColumns(t, e, o, r) {
|
|
135
132
|
const l = o !== void 0 && o.row === e, g = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, h = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, u = h.width + "px", S = h.height + "px";
|
|
136
133
|
return t.map((d, c) => {
|
|
137
|
-
const f = l && g === c, w = C(
|
|
138
|
-
"k-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
"k-focus": v && b === c
|
|
142
|
-
}
|
|
143
|
-
);
|
|
134
|
+
const f = l && g === c, w = C("k-colorpalette-tile", {
|
|
135
|
+
"k-selected": f,
|
|
136
|
+
"k-focus": v && b === c
|
|
137
|
+
});
|
|
144
138
|
return /* @__PURE__ */ i.createElement(
|
|
145
139
|
"td",
|
|
146
140
|
{
|
|
@@ -179,7 +173,12 @@ n.displayName = "ColorPalette", n.propTypes = {
|
|
|
179
173
|
tileSize: x
|
|
180
174
|
};
|
|
181
175
|
let p = n;
|
|
182
|
-
const B = N(), A = P(
|
|
176
|
+
const B = N(), A = P(
|
|
177
|
+
T(
|
|
178
|
+
B,
|
|
179
|
+
p
|
|
180
|
+
)
|
|
181
|
+
);
|
|
183
182
|
A.displayName = "KendoReactColorPalette";
|
|
184
183
|
export {
|
|
185
184
|
A as ColorPalette,
|
package/colors/ColorPicker.mjs
CHANGED
|
@@ -43,65 +43,57 @@ const Le = {
|
|
|
43
43
|
onBlur: I,
|
|
44
44
|
onActiveColorClick: R,
|
|
45
45
|
className: Q
|
|
46
|
-
} = a, r = e.useRef(null), f = e.useRef(null), v = e.useRef(null), p = e.useRef(), X = e.useRef(null), [Y, x] = e.useState(!1), [ee, te] = e.useState(a.defaultValue), [ne, oe] = e.useState(!1), D = F(a.value), c = F(a.open), l = D ? a.value : ee, k = c ? a.open : ne, B = e.useCallback(
|
|
47
|
-
()
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
} = a, r = e.useRef(null), f = e.useRef(null), v = e.useRef(null), p = e.useRef(), X = e.useRef(null), [Y, x] = e.useState(!1), [ee, te] = e.useState(a.defaultValue), [ne, oe] = e.useState(!1), D = F(a.value), c = F(a.open), l = D ? a.value : ee, k = c ? a.open : ne, B = e.useCallback(() => {
|
|
47
|
+
r.current && r.current.focus();
|
|
48
|
+
}, []);
|
|
49
|
+
e.useImperativeHandle(
|
|
50
|
+
G,
|
|
51
|
+
() => ({
|
|
52
|
+
// we agreed that each element will have focus method exposed
|
|
53
|
+
element: r.current,
|
|
54
|
+
actionElement: X.current,
|
|
55
|
+
value: l,
|
|
56
|
+
focus: B
|
|
57
|
+
}),
|
|
58
|
+
[l, B]
|
|
51
59
|
);
|
|
52
|
-
e.useImperativeHandle(G, () => ({
|
|
53
|
-
// we agreed that each element will have focus method exposed
|
|
54
|
-
element: r.current,
|
|
55
|
-
actionElement: X.current,
|
|
56
|
-
value: l,
|
|
57
|
-
focus: B
|
|
58
|
-
}), [l, B]);
|
|
59
60
|
const u = e.useCallback(
|
|
60
61
|
(t, i) => {
|
|
61
62
|
c || (!t && !i && r && r.current && r.current.focus(), oe(t));
|
|
62
63
|
},
|
|
63
64
|
[c]
|
|
64
|
-
), M = e.useMemo(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
s === "palette" && V ? h(n, V) : s === "gradient" && g ? h(n, g) : s === "combo" && g && h(n, g.parentElement);
|
|
88
|
-
}
|
|
65
|
+
), M = e.useMemo(() => new ke({
|
|
66
|
+
root: r,
|
|
67
|
+
selectors: [".k-colorpicker", ".k-color-picker-popup"],
|
|
68
|
+
tabIndex: 0,
|
|
69
|
+
keyboardEvents: {
|
|
70
|
+
keydown: {
|
|
71
|
+
Escape: (t, i, n) => {
|
|
72
|
+
u(!1);
|
|
73
|
+
},
|
|
74
|
+
Enter: (t, i, n) => {
|
|
75
|
+
!c && t === r.current && (n.preventDefault(), n.stopPropagation(), u(!0));
|
|
76
|
+
},
|
|
77
|
+
ArrowDown: (t, i, n) => {
|
|
78
|
+
n.altKey && (n.preventDefault(), n.stopPropagation(), u(!0));
|
|
79
|
+
},
|
|
80
|
+
ArrowUp: (t, i, n) => {
|
|
81
|
+
n.altKey && (n.preventDefault(), n.stopPropagation(), u(!1));
|
|
82
|
+
},
|
|
83
|
+
Tab: (t, i, n) => {
|
|
84
|
+
var z, H;
|
|
85
|
+
if (ge(document) !== r.current) {
|
|
86
|
+
const V = (z = v.current) == null ? void 0 : z.wrapperRef.current, g = (H = f.current) == null ? void 0 : H.wrapperRef.current;
|
|
87
|
+
s === "palette" && V ? h(n, V) : s === "gradient" && g ? h(n, g) : s === "combo" && g && h(n, g.parentElement);
|
|
89
88
|
}
|
|
90
89
|
}
|
|
91
90
|
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
[c]
|
|
99
|
-
), le = e.useCallback(
|
|
100
|
-
() => {
|
|
101
|
-
u(!k, !0);
|
|
102
|
-
},
|
|
103
|
-
[k]
|
|
104
|
-
), ie = e.useCallback(
|
|
91
|
+
}
|
|
92
|
+
}), [u, c]), ae = e.useCallback(M.triggerKeyboardEvent.bind(M), []), re = e.useCallback(() => {
|
|
93
|
+
c || (f.current && f.current.wrapperRef.current ? be(f.current.wrapperRef.current) : v.current && v.current.focus());
|
|
94
|
+
}, [c]), le = e.useCallback(() => {
|
|
95
|
+
u(!k, !0);
|
|
96
|
+
}, [k]), ie = e.useCallback(
|
|
105
97
|
(t) => {
|
|
106
98
|
R && R.call(void 0, {
|
|
107
99
|
syntheticEvent: t,
|
|
@@ -118,12 +110,9 @@ const Le = {
|
|
|
118
110
|
});
|
|
119
111
|
},
|
|
120
112
|
[P]
|
|
121
|
-
), ce = e.useCallback(
|
|
122
|
-
()
|
|
123
|
-
|
|
124
|
-
},
|
|
125
|
-
[]
|
|
126
|
-
), ue = e.useCallback(
|
|
113
|
+
), ce = e.useCallback(() => {
|
|
114
|
+
u(!1, !0), x(!1), p.current = void 0;
|
|
115
|
+
}, []), ue = e.useCallback(
|
|
127
116
|
(t) => {
|
|
128
117
|
clearTimeout(p.current), p.current = window.setTimeout(ce), I && I.call(void 0, {
|
|
129
118
|
nativeEvent: t.nativeEvent,
|
|
@@ -156,20 +145,15 @@ const Le = {
|
|
|
156
145
|
"aria-haspopup": "dialog",
|
|
157
146
|
"aria-expanded": k,
|
|
158
147
|
"aria-disabled": w ? "true" : void 0,
|
|
159
|
-
className: A(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
"k-disabled": w,
|
|
169
|
-
"k-focus": Y,
|
|
170
|
-
className: Q
|
|
171
|
-
}
|
|
172
|
-
),
|
|
148
|
+
className: A("k-colorpicker", "k-picker", "k-icon-picker", {
|
|
149
|
+
[`k-picker-${_.sizeMap[E] || E}`]: E,
|
|
150
|
+
[`k-picker-${L}`]: L,
|
|
151
|
+
[`k-rounded-${_.roundedMap[C] || C}`]: C,
|
|
152
|
+
"k-invalid": !de,
|
|
153
|
+
"k-disabled": w,
|
|
154
|
+
"k-focus": Y,
|
|
155
|
+
className: Q
|
|
156
|
+
}),
|
|
173
157
|
ref: r,
|
|
174
158
|
tabIndex: Ce(J, w),
|
|
175
159
|
title: a.title,
|
|
@@ -189,14 +173,10 @@ const Le = {
|
|
|
189
173
|
input: /* @__PURE__ */ e.createElement("span", { onClick: ie, className: "k-input-inner" }, /* @__PURE__ */ e.createElement(
|
|
190
174
|
"span",
|
|
191
175
|
{
|
|
192
|
-
className: A(
|
|
193
|
-
"k-
|
|
194
|
-
"k-color-preview"
|
|
195
|
-
|
|
196
|
-
"k-no-color": !l,
|
|
197
|
-
"k-icon-color-preview": y || T || m
|
|
198
|
-
}
|
|
199
|
-
)
|
|
176
|
+
className: A("k-value-icon", "k-color-preview", {
|
|
177
|
+
"k-no-color": !l,
|
|
178
|
+
"k-icon-color-preview": y || T || m
|
|
179
|
+
})
|
|
200
180
|
},
|
|
201
181
|
m && /* @__PURE__ */ e.createElement("span", { className: A("k-color-preview-icon", m) }),
|
|
202
182
|
!m && (y || T) && /* @__PURE__ */ e.createElement(we, { name: y, icon: T }),
|
|
@@ -212,7 +192,10 @@ const Le = {
|
|
|
212
192
|
rounded: null,
|
|
213
193
|
icon: "caret-alt-down",
|
|
214
194
|
svgIcon: he,
|
|
215
|
-
"aria-label": $.toLanguageString(
|
|
195
|
+
"aria-label": $.toLanguageString(
|
|
196
|
+
K,
|
|
197
|
+
Ae[K]
|
|
198
|
+
)
|
|
216
199
|
}
|
|
217
200
|
),
|
|
218
201
|
content: /* @__PURE__ */ e.createElement(e.Fragment, null, (s === "combo" || s === "gradient") && /* @__PURE__ */ e.createElement(
|