@progress/kendo-react-inputs 4.14.0-dev.202112200653 → 4.14.0-dev.202201121250
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/LICENSE.md +1 -1
- package/NOTICE.txt +54 -21
- package/README.md +1 -1
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/slider/Slider.js +30 -40
- package/dist/es/slider/SliderLabel.js +1 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/slider/Slider.js +30 -40
- package/dist/npm/slider/SliderLabel.js +1 -1
- package/dist/systemjs/kendo-react-inputs.js +1 -1
- package/package.json +14 -14
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-inputs',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1641990382,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
11
|
};
|
package/dist/es/slider/Slider.js
CHANGED
|
@@ -30,6 +30,7 @@ import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } f
|
|
|
30
30
|
import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
|
|
31
31
|
import { validatePackage } from '@progress/kendo-react-common';
|
|
32
32
|
import { packageMetadata } from '../package-metadata';
|
|
33
|
+
import { Button } from '@progress/kendo-react-buttons';
|
|
33
34
|
/** @hidden */
|
|
34
35
|
var SliderWithoutContext = /** @class */ (function (_super) {
|
|
35
36
|
__extends(SliderWithoutContext, _super);
|
|
@@ -51,17 +52,13 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
51
52
|
return props.children;
|
|
52
53
|
}
|
|
53
54
|
return (React.createElement(React.Fragment, null,
|
|
54
|
-
React.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
'k-i-arrow-w': !_this.props.vertical
|
|
58
|
-
}) })),
|
|
55
|
+
React.createElement(Button, { className: "k-button-decrease k-rounded-full",
|
|
56
|
+
// rounded={'full'}
|
|
57
|
+
icon: _this.props.vertical ? 'arrow-s' : 'arrow-w', title: props.decrementTitle, onClick: props.decrement }),
|
|
59
58
|
props.children,
|
|
60
|
-
React.createElement(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
'k-i-arrow-e': !_this.props.vertical
|
|
64
|
-
}) }))));
|
|
59
|
+
React.createElement(Button, { className: "k-button-increase k-rounded-full",
|
|
60
|
+
// rounded={'full'}
|
|
61
|
+
icon: _this.props.vertical ? 'arrow-n' : 'arrow-e', title: props.incrementTitle, onClick: props.increment })));
|
|
65
62
|
};
|
|
66
63
|
/**
|
|
67
64
|
* @hidden
|
|
@@ -175,41 +172,34 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
175
172
|
var sliderItemsStyle = this.props.vertical
|
|
176
173
|
? { paddingTop: 0, height: '100%' }
|
|
177
174
|
: {};
|
|
178
|
-
return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: this.props.style, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {
|
|
175
|
+
return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: __assign({ gap: 0 }, this.props.style), tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {
|
|
179
176
|
'k-state-focused': this.state.focused,
|
|
180
177
|
'k-state-disabled': this.props.disabled,
|
|
181
178
|
'k-slider-horizontal': !this.props.vertical,
|
|
182
179
|
'k-slider-vertical': this.props.vertical
|
|
183
180
|
}, this.props.className) },
|
|
184
|
-
React.createElement(
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
: { width: percentValue + '%' } }),
|
|
207
|
-
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
|
|
208
|
-
? { bottom: 'calc(' + percentValue + '% - 8px)', zIndex: 1 }
|
|
209
|
-
: (_b = {},
|
|
210
|
-
_b[this.state.dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '% - 8px)',
|
|
211
|
-
_b.zIndex = 1,
|
|
212
|
-
_b) }))))))));
|
|
181
|
+
React.createElement(this.buttons, { enabled: this.props.buttons, decrement: this.decrement, increment: this.increment, incrementTitle: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue]), decrementTitle: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue]) },
|
|
182
|
+
React.createElement(Draggable, { onDrag: this.dragOver, onPress: this.dragStart },
|
|
183
|
+
React.createElement("div", { className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
|
|
184
|
+
this.props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(this.props.children, function (child) {
|
|
185
|
+
return child && React.cloneElement(child, {
|
|
186
|
+
position: 100 * (child.props.position - _this.props.min) /
|
|
187
|
+
(_this.props.max - _this.props.min),
|
|
188
|
+
vertical: _this.props.vertical
|
|
189
|
+
}, child.props.children);
|
|
190
|
+
}))),
|
|
191
|
+
React.createElement("div", { className: "k-slider-track", style: this.props.vertical
|
|
192
|
+
? { bottom: 0, height: '100%' }
|
|
193
|
+
: (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },
|
|
194
|
+
React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
|
|
195
|
+
? { height: percentValue + '%' }
|
|
196
|
+
: { width: percentValue + '%' } }),
|
|
197
|
+
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
|
|
198
|
+
? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
|
|
199
|
+
: (_b = {},
|
|
200
|
+
_b[this.state.dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '%)',
|
|
201
|
+
_b.zIndex = 1,
|
|
202
|
+
_b) })))))));
|
|
213
203
|
};
|
|
214
204
|
Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
|
|
215
205
|
/**
|
|
@@ -24,7 +24,7 @@ export var SliderLabel = function (props) {
|
|
|
24
24
|
var dir = useDir(sliderLabelRef);
|
|
25
25
|
var style = props.vertical
|
|
26
26
|
? { bottom: props.position + "%", height: '1px', width: '100%' }
|
|
27
|
-
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = props.position + "%", _a.width = '1px', _a);
|
|
27
|
+
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = props.position + "%", _a.width = '1px', _a.height = '-webkit-fill-available', _a);
|
|
28
28
|
return (React.createElement("li", { ref: sliderLabelRef, role: "presentation", className: "k-tick k-tick-large", title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
|
|
29
29
|
React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
|
|
30
30
|
};
|
|
@@ -7,7 +7,7 @@ exports.packageMetadata = {
|
|
|
7
7
|
name: '@progress/kendo-react-inputs',
|
|
8
8
|
productName: 'KendoReact',
|
|
9
9
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
10
|
-
publishDate:
|
|
10
|
+
publishDate: 1641990382,
|
|
11
11
|
version: '',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
13
13
|
};
|
|
@@ -32,6 +32,7 @@ var messages_1 = require("./../messages");
|
|
|
32
32
|
var SliderLabel_1 = require("./SliderLabel");
|
|
33
33
|
var kendo_react_common_2 = require("@progress/kendo-react-common");
|
|
34
34
|
var package_metadata_1 = require("../package-metadata");
|
|
35
|
+
var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
35
36
|
/** @hidden */
|
|
36
37
|
var SliderWithoutContext = /** @class */ (function (_super) {
|
|
37
38
|
__extends(SliderWithoutContext, _super);
|
|
@@ -53,17 +54,13 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
53
54
|
return props.children;
|
|
54
55
|
}
|
|
55
56
|
return (React.createElement(React.Fragment, null,
|
|
56
|
-
React.createElement(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
'k-i-arrow-w': !_this.props.vertical
|
|
60
|
-
}) })),
|
|
57
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-decrease k-rounded-full",
|
|
58
|
+
// rounded={'full'}
|
|
59
|
+
icon: _this.props.vertical ? 'arrow-s' : 'arrow-w', title: props.decrementTitle, onClick: props.decrement }),
|
|
61
60
|
props.children,
|
|
62
|
-
React.createElement(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
'k-i-arrow-e': !_this.props.vertical
|
|
66
|
-
}) }))));
|
|
61
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-increase k-rounded-full",
|
|
62
|
+
// rounded={'full'}
|
|
63
|
+
icon: _this.props.vertical ? 'arrow-n' : 'arrow-e', title: props.incrementTitle, onClick: props.increment })));
|
|
67
64
|
};
|
|
68
65
|
/**
|
|
69
66
|
* @hidden
|
|
@@ -177,41 +174,34 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
177
174
|
var sliderItemsStyle = this.props.vertical
|
|
178
175
|
? { paddingTop: 0, height: '100%' }
|
|
179
176
|
: {};
|
|
180
|
-
return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: this.props.style, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: kendo_react_common_1.classNames('k-slider k-widget', {
|
|
177
|
+
return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: __assign({ gap: 0 }, this.props.style), tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: kendo_react_common_1.classNames('k-slider k-widget', {
|
|
181
178
|
'k-state-focused': this.state.focused,
|
|
182
179
|
'k-state-disabled': this.props.disabled,
|
|
183
180
|
'k-slider-horizontal': !this.props.vertical,
|
|
184
181
|
'k-slider-vertical': this.props.vertical
|
|
185
182
|
}, this.props.className) },
|
|
186
|
-
React.createElement(
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
: { width: percentValue + '%' } }),
|
|
209
|
-
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: this.props.vertical
|
|
210
|
-
? { bottom: 'calc(' + percentValue + '% - 8px)', zIndex: 1 }
|
|
211
|
-
: (_b = {},
|
|
212
|
-
_b[this.state.dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '% - 8px)',
|
|
213
|
-
_b.zIndex = 1,
|
|
214
|
-
_b) }))))))));
|
|
183
|
+
React.createElement(this.buttons, { enabled: this.props.buttons, decrement: this.decrement, increment: this.increment, incrementTitle: lS.toLanguageString(messages_1.sliderIncreaseValue, messages_1.messages[messages_1.sliderIncreaseValue]), decrementTitle: lS.toLanguageString(messages_1.sliderDecreaseValue, messages_1.messages[messages_1.sliderDecreaseValue]) },
|
|
184
|
+
React.createElement(kendo_react_common_1.Draggable, { onDrag: this.dragOver, onPress: this.dragStart },
|
|
185
|
+
React.createElement("div", { className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
|
|
186
|
+
this.props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(this.props.children, function (child) {
|
|
187
|
+
return child && React.cloneElement(child, {
|
|
188
|
+
position: 100 * (child.props.position - _this.props.min) /
|
|
189
|
+
(_this.props.max - _this.props.min),
|
|
190
|
+
vertical: _this.props.vertical
|
|
191
|
+
}, child.props.children);
|
|
192
|
+
}))),
|
|
193
|
+
React.createElement("div", { className: "k-slider-track", style: this.props.vertical
|
|
194
|
+
? { bottom: 0, height: '100%' }
|
|
195
|
+
: (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },
|
|
196
|
+
React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
|
|
197
|
+
? { height: percentValue + '%' }
|
|
198
|
+
: { width: percentValue + '%' } }),
|
|
199
|
+
React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: this.props.vertical
|
|
200
|
+
? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
|
|
201
|
+
: (_b = {},
|
|
202
|
+
_b[this.state.dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentValue + '%)',
|
|
203
|
+
_b.zIndex = 1,
|
|
204
|
+
_b) })))))));
|
|
215
205
|
};
|
|
216
206
|
Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
|
|
217
207
|
/**
|
|
@@ -26,7 +26,7 @@ exports.SliderLabel = function (props) {
|
|
|
26
26
|
var dir = kendo_react_common_1.useDir(sliderLabelRef);
|
|
27
27
|
var style = props.vertical
|
|
28
28
|
? { bottom: props.position + "%", height: '1px', width: '100%' }
|
|
29
|
-
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = props.position + "%", _a.width = '1px', _a);
|
|
29
|
+
: (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = props.position + "%", _a.width = '1px', _a.height = '-webkit-fill-available', _a);
|
|
30
30
|
return (React.createElement("li", { ref: sliderLabelRef, role: "presentation", className: "k-tick k-tick-large", title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
|
|
31
31
|
React.createElement("span", __assign({}, (_b = {}, _b[exports.SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
|
|
32
32
|
};
|