@progress/kendo-react-inputs 4.14.0-dev.202201111645 → 4.14.0-dev.202201131238

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.
Files changed (14) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +54 -21
  3. package/README.md +1 -1
  4. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  5. package/dist/es/package-metadata.js +1 -1
  6. package/dist/es/range-slider/RangeSlider.js +29 -32
  7. package/dist/es/slider/Slider.js +29 -41
  8. package/dist/es/slider/SliderLabel.js +1 -1
  9. package/dist/npm/package-metadata.js +1 -1
  10. package/dist/npm/range-slider/RangeSlider.js +29 -32
  11. package/dist/npm/slider/Slider.js +29 -41
  12. package/dist/npm/slider/SliderLabel.js +1 -1
  13. package/dist/systemjs/kendo-react-inputs.js +1 -1
  14. package/package.json +14 -14
package/dist/es/package-metadata.js CHANGED
@@ -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: 1641918389,
8
+ publishDate: 1642076311,
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/range-slider/RangeSlider.js CHANGED
@@ -45,7 +45,7 @@ export var RangeSliderPropsContext = createPropsContext();
45
45
  * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
46
46
  */
47
47
  export var RangeSlider = React.forwardRef(function (directProps, ref) {
48
- var _a, _b, _c, _d;
48
+ var _a, _b;
49
49
  validatePackage(packageMetadata);
50
50
  var props = usePropsContext(RangeSliderPropsContext, directProps);
51
51
  var target = React.useRef(null);
@@ -77,13 +77,13 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
77
77
  });
78
78
  }
79
79
  };
80
- var _e = React.useState(''), currentDrag = _e[0], setCurrentDrag = _e[1];
81
- var _f = useRange(props.defaultValue || defaultProps.defaultValue, {
80
+ var _c = React.useState(''), currentDrag = _c[0], setCurrentDrag = _c[1];
81
+ var _d = useRange(props.defaultValue || defaultProps.defaultValue, {
82
82
  min: min,
83
83
  max: max,
84
84
  step: step,
85
85
  state: props.value
86
- }, handleChange), stateValue = _f[0], dispatchStateValue = _f[1];
86
+ }, handleChange), stateValue = _d[0], dispatchStateValue = _d[1];
87
87
  var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
88
88
  var sliderTrackRef = React.useRef(null);
89
89
  var sliderTrackWrapRef = React.useRef(null);
@@ -219,34 +219,31 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
219
219
  'k-slider-vertical': props.vertical,
220
220
  'k-slider-horizontal': !props.vertical
221
221
  }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
222
- React.createElement("div", { className: 'k-slider-wrap', style: {
223
- display: 'flex',
224
- position: 'relative',
225
- flexDirection: props.vertical ? 'column-reverse' : 'row'
226
- } },
227
- React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
228
- props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
229
- return child && React.cloneElement(child, {
230
- position: 100 * (child.props.position - props.min) /
231
- (props.max - props.min),
232
- vertical: props.vertical
233
- }, child.props.children);
234
- }))),
235
- React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
236
- ? { bottom: 0, height: '100%' }
237
- : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
238
- (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
239
- ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
240
- : (_b = {},
241
- _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
242
- _b.width = (percentEnd - percentStart) + '%',
243
- _b) }),
244
- React.createElement("a", { ref: startHandle, role: "slider", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
245
- ? { bottom: 'calc(' + percentStart + '% - 8px)', zIndex: 1 }
246
- : (_c = {}, _c[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentStart + '% - 8px)', _c.zIndex = 1, _c), onKeyDown: handleStartKeyDown }),
247
- React.createElement("a", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
248
- ? { bottom: 'calc(' + percentEnd + '% - 8px)', zIndex: 1 }
249
- : (_d = {}, _d[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentEnd + '% - 8px)', _d.zIndex = 1, _d), onKeyDown: handleEndKeyDown }))))));
222
+ React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
223
+ props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
224
+ return child && React.cloneElement(child, {
225
+ position: 100 * (child.props.position - props.min) /
226
+ (props.max - props.min),
227
+ vertical: props.vertical
228
+ }, child.props.children);
229
+ }))),
230
+ React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
231
+ ? { bottom: 0, height: '100%' }
232
+ : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
233
+ (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
234
+ ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
235
+ : (_b = {},
236
+ _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
237
+ _b.width = (percentEnd - percentStart) + '%',
238
+ _b) }),
239
+ React.createElement("a", { ref: startHandle, role: "slider", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
240
+ ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
241
+ : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
242
+ : { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
243
+ React.createElement("a", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
244
+ ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
245
+ : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
246
+ : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));
250
247
  });
251
248
  var propTypes = {
252
249
  value: function (props, propName, componentName) {
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("a", { className: "k-button k-button-decrease", style: { position: 'relative' }, title: props.decrementTitle, onClick: props.decrement },
55
- React.createElement("span", { className: classNames('k-icon', {
56
- 'k-i-arrow-s': _this.props.vertical,
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("a", { className: "k-button k-button-increase", style: { position: 'relative' }, title: props.incrementTitle, onClick: props.increment },
61
- React.createElement("span", { className: classNames('k-icon', {
62
- 'k-i-arrow-n': _this.props.vertical,
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
@@ -166,7 +163,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
166
163
  */
167
164
  SliderWithoutContext.prototype.render = function () {
168
165
  var _this = this;
169
- var _a, _b;
166
+ var _a;
170
167
  var lS = provideLocalizationService(this);
171
168
  var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
172
169
  var trackStyles = this.props.vertical
@@ -175,41 +172,32 @@ 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("div", { className: classNames('k-slider-wrap', {
185
- 'k-slider-buttons': this.props.buttons
186
- }), style: {
187
- display: 'flex',
188
- position: 'relative',
189
- flexDirection: this.props.vertical ? 'column-reverse' : 'row'
190
- } },
191
- 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]) },
192
- React.createElement(Draggable, { onDrag: this.dragOver, onPress: this.dragStart },
193
- React.createElement("div", { className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
194
- 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) {
195
- return child && React.cloneElement(child, {
196
- position: 100 * (child.props.position - _this.props.min) /
197
- (_this.props.max - _this.props.min),
198
- vertical: _this.props.vertical
199
- }, child.props.children);
200
- }))),
201
- React.createElement("div", { className: "k-slider-track", style: this.props.vertical
202
- ? { bottom: 0, height: '100%' }
203
- : (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },
204
- React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
205
- ? { height: percentValue + '%' }
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
+ : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
200
+ : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
213
201
  };
214
202
  Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
215
203
  /**
package/dist/es/slider/SliderLabel.js CHANGED
@@ -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
  };
package/dist/npm/package-metadata.js CHANGED
@@ -7,7 +7,7 @@ exports.packageMetadata = {
7
7
  name: '@progress/kendo-react-inputs',
8
8
  productName: 'KendoReact',
9
9
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
10
- publishDate: 1641918389,
10
+ publishDate: 1642076311,
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
  };
package/dist/npm/range-slider/RangeSlider.js CHANGED
@@ -47,7 +47,7 @@ exports.RangeSliderPropsContext = kendo_react_common_1.createPropsContext();
47
47
  * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
48
48
  */
49
49
  exports.RangeSlider = React.forwardRef(function (directProps, ref) {
50
- var _a, _b, _c, _d;
50
+ var _a, _b;
51
51
  kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
52
52
  var props = kendo_react_common_1.usePropsContext(exports.RangeSliderPropsContext, directProps);
53
53
  var target = React.useRef(null);
@@ -79,13 +79,13 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
79
79
  });
80
80
  }
81
81
  };
82
- var _e = React.useState(''), currentDrag = _e[0], setCurrentDrag = _e[1];
83
- var _f = useRange(props.defaultValue || defaultProps.defaultValue, {
82
+ var _c = React.useState(''), currentDrag = _c[0], setCurrentDrag = _c[1];
83
+ var _d = useRange(props.defaultValue || defaultProps.defaultValue, {
84
84
  min: min,
85
85
  max: max,
86
86
  step: step,
87
87
  state: props.value
88
- }, handleChange), stateValue = _f[0], dispatchStateValue = _f[1];
88
+ }, handleChange), stateValue = _d[0], dispatchStateValue = _d[1];
89
89
  var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
90
90
  var sliderTrackRef = React.useRef(null);
91
91
  var sliderTrackWrapRef = React.useRef(null);
@@ -221,34 +221,31 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
221
221
  'k-slider-vertical': props.vertical,
222
222
  'k-slider-horizontal': !props.vertical
223
223
  }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
224
- React.createElement("div", { className: 'k-slider-wrap', style: {
225
- display: 'flex',
226
- position: 'relative',
227
- flexDirection: props.vertical ? 'column-reverse' : 'row'
228
- } },
229
- React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
230
- props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
231
- return child && React.cloneElement(child, {
232
- position: 100 * (child.props.position - props.min) /
233
- (props.max - props.min),
234
- vertical: props.vertical
235
- }, child.props.children);
236
- }))),
237
- React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
238
- ? { bottom: 0, height: '100%' }
239
- : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
240
- (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
241
- ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
242
- : (_b = {},
243
- _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
244
- _b.width = (percentEnd - percentStart) + '%',
245
- _b) }),
246
- React.createElement("a", { ref: startHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
247
- ? { bottom: 'calc(' + percentStart + '% - 8px)', zIndex: 1 }
248
- : (_c = {}, _c[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentStart + '% - 8px)', _c.zIndex = 1, _c), onKeyDown: handleStartKeyDown }),
249
- React.createElement("a", { ref: endHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
250
- ? { bottom: 'calc(' + percentEnd + '% - 8px)', zIndex: 1 }
251
- : (_d = {}, _d[dir === 'rtl' ? 'right' : 'left'] = 'calc(' + percentEnd + '% - 8px)', _d.zIndex = 1, _d), onKeyDown: handleEndKeyDown }))))));
224
+ React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
225
+ props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
226
+ return child && React.cloneElement(child, {
227
+ position: 100 * (child.props.position - props.min) /
228
+ (props.max - props.min),
229
+ vertical: props.vertical
230
+ }, child.props.children);
231
+ }))),
232
+ React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
233
+ ? { bottom: 0, height: '100%' }
234
+ : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
235
+ (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
236
+ ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
237
+ : (_b = {},
238
+ _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
239
+ _b.width = (percentEnd - percentStart) + '%',
240
+ _b) }),
241
+ React.createElement("a", { ref: startHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
242
+ ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
243
+ : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
244
+ : { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
245
+ React.createElement("a", { ref: endHandle, role: "slider", tabIndex: kendo_react_common_1.getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
246
+ ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
247
+ : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
248
+ : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));
252
249
  });
253
250
  var propTypes = {
254
251
  value: function (props, propName, componentName) {
package/dist/npm/slider/Slider.js CHANGED
@@ -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("a", { className: "k-button k-button-decrease", style: { position: 'relative' }, title: props.decrementTitle, onClick: props.decrement },
57
- React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', {
58
- 'k-i-arrow-s': _this.props.vertical,
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("a", { className: "k-button k-button-increase", style: { position: 'relative' }, title: props.incrementTitle, onClick: props.increment },
63
- React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', {
64
- 'k-i-arrow-n': _this.props.vertical,
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
@@ -168,7 +165,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
168
165
  */
169
166
  SliderWithoutContext.prototype.render = function () {
170
167
  var _this = this;
171
- var _a, _b;
168
+ var _a;
172
169
  var lS = kendo_react_intl_1.provideLocalizationService(this);
173
170
  var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
174
171
  var trackStyles = this.props.vertical
@@ -177,41 +174,32 @@ 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("div", { className: kendo_react_common_1.classNames('k-slider-wrap', {
187
- 'k-slider-buttons': this.props.buttons
188
- }), style: {
189
- display: 'flex',
190
- position: 'relative',
191
- flexDirection: this.props.vertical ? 'column-reverse' : 'row'
192
- } },
193
- 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]) },
194
- React.createElement(kendo_react_common_1.Draggable, { onDrag: this.dragOver, onPress: this.dragStart },
195
- React.createElement("div", { className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
196
- 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) {
197
- return child && React.cloneElement(child, {
198
- position: 100 * (child.props.position - _this.props.min) /
199
- (_this.props.max - _this.props.min),
200
- vertical: _this.props.vertical
201
- }, child.props.children);
202
- }))),
203
- React.createElement("div", { className: "k-slider-track", style: this.props.vertical
204
- ? { bottom: 0, height: '100%' }
205
- : (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },
206
- React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
207
- ? { height: percentValue + '%' }
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
+ : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
202
+ : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
215
203
  };
216
204
  Object.defineProperty(SliderWithoutContext.prototype, "sliderTrack", {
217
205
  /**
package/dist/npm/slider/SliderLabel.js CHANGED
@@ -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
  };