@progress/kendo-angular-inputs 14.0.2-develop.1 → 14.0.2-develop.11
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/esm2020/package-metadata.mjs +2 -2
- package/esm2020/rangeslider/rangeslider-model.mjs +3 -4
- package/esm2020/slider/slider-model.mjs +3 -6
- package/esm2020/slider/slider.component.mjs +1 -1
- package/esm2020/sliders-common/slider-model.base.mjs +17 -2
- package/esm2020/sliders-common/sliders-util.mjs +2 -15
- package/fesm2015/progress-kendo-angular-inputs.mjs +27 -30
- package/fesm2020/progress-kendo-angular-inputs.mjs +27 -30
- package/package.json +10 -10
- package/sliders-common/slider-model.base.d.ts +4 -2
- package/sliders-common/sliders-util.d.ts +2 -7
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-inputs',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '14.0.2-develop.
|
|
12
|
+
publishDate: 1698151363,
|
|
13
|
+
version: '14.0.2-develop.11',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -14,7 +14,7 @@ export class RangeSliderModel extends SliderModelBase {
|
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
16
|
const { max, min, reverse, vertical } = this.props;
|
|
17
|
-
const position = vertical ? 'bottom' : 'left';
|
|
17
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
18
18
|
const trackWidth = this.trackWidth();
|
|
19
19
|
const value = isStartHandle(dragHandle) ? trimValueRange(max, min, this.props.value)[0]
|
|
20
20
|
: trimValueRange(max, min, this.props.value)[1];
|
|
@@ -44,9 +44,8 @@ export class RangeSliderModel extends SliderModelBase {
|
|
|
44
44
|
const dimension = vertical ? 'height' : 'width';
|
|
45
45
|
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
46
46
|
const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
|
|
47
|
-
const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
|
|
47
|
+
const currentSelectionPosition = vertical ? dragHandle.style.bottom : reverse ? dragHandle.style.right : dragHandle.style.left;
|
|
48
48
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
49
|
-
this.renderer.setStyle(selection, position,
|
|
50
|
-
: parseFloat(currentSelectionPosition) + 'px');
|
|
49
|
+
this.renderer.setStyle(selection, position, parseFloat(currentSelectionPosition) + 'px');
|
|
51
50
|
}
|
|
52
51
|
}
|
|
@@ -10,7 +10,7 @@ import { SliderModelBase } from '../sliders-common/slider-model.base';
|
|
|
10
10
|
export class SliderModel extends SliderModelBase {
|
|
11
11
|
positionHandle(dragHandle) {
|
|
12
12
|
const { max, min, reverse, vertical } = this.props;
|
|
13
|
-
const position = vertical ? 'bottom' : 'left';
|
|
13
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
14
14
|
const trackWidth = this.trackWidth();
|
|
15
15
|
const value = trimValue(max, min, this.props.value);
|
|
16
16
|
this.handlePosition = calculateHandlePosition({
|
|
@@ -23,12 +23,9 @@ export class SliderModel extends SliderModelBase {
|
|
|
23
23
|
this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
|
|
24
24
|
}
|
|
25
25
|
positionSelection(selection) {
|
|
26
|
-
const {
|
|
26
|
+
const { vertical } = this.props;
|
|
27
27
|
const dimension = vertical ? 'height' : 'width';
|
|
28
|
-
|
|
29
|
-
if (reverse) {
|
|
30
|
-
size = this.trackWidth() - size;
|
|
31
|
-
}
|
|
28
|
+
const size = this.handlePosition;
|
|
32
29
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
33
30
|
}
|
|
34
31
|
}
|
|
@@ -287,7 +287,7 @@ export class SliderComponent extends SliderBase {
|
|
|
287
287
|
}
|
|
288
288
|
this.resetStyles([track, selectionEl, dragHandleEl, ticks, this.hostElement.nativeElement]);
|
|
289
289
|
const props = this.getProps();
|
|
290
|
-
const model = new SliderModel(props, wrapper, track, this.renderer);
|
|
290
|
+
const model = new SliderModel(props, wrapper, track, this.renderer, this.increaseButton);
|
|
291
291
|
model.resizeTrack();
|
|
292
292
|
if (this.ticks) { //for case when tickPlacement: none
|
|
293
293
|
model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
|
|
6
6
|
import { subtract } from '../common/math';
|
|
7
|
+
import { isPresent } from '../common/utils';
|
|
7
8
|
/**
|
|
8
9
|
* @hidden
|
|
9
10
|
*/
|
|
10
11
|
export class SliderModelBase {
|
|
11
|
-
constructor(props, wrapper, track, renderer) {
|
|
12
|
+
constructor(props, wrapper, track, renderer, button) {
|
|
12
13
|
this.props = props;
|
|
13
14
|
this.wrapper = wrapper;
|
|
14
15
|
this.track = track;
|
|
15
16
|
this.renderer = renderer;
|
|
17
|
+
this.button = button;
|
|
16
18
|
this.props = props;
|
|
17
19
|
this.wrapper = wrapper;
|
|
18
20
|
this.track = track;
|
|
@@ -44,7 +46,9 @@ export class SliderModelBase {
|
|
|
44
46
|
if (this.props.fixedTickWidth) {
|
|
45
47
|
return calculateFixedTrackSize(this.props);
|
|
46
48
|
}
|
|
47
|
-
|
|
49
|
+
const wrapperWidth = this.elementSize(this.wrapper.parentElement);
|
|
50
|
+
const trackOffset = this.getTrackOffset();
|
|
51
|
+
return wrapperWidth - trackOffset;
|
|
48
52
|
}
|
|
49
53
|
getTickSizes() {
|
|
50
54
|
const { min, max, smallStep } = this.props;
|
|
@@ -90,4 +94,15 @@ export class SliderModelBase {
|
|
|
90
94
|
const { vertical } = this.props;
|
|
91
95
|
return vertical ? element.clientHeight : element.clientWidth;
|
|
92
96
|
}
|
|
97
|
+
getTrackOffset() {
|
|
98
|
+
const showButtons = this.props.buttons && isPresent(this.button);
|
|
99
|
+
if (!showButtons) {
|
|
100
|
+
return 0;
|
|
101
|
+
}
|
|
102
|
+
const BUTTONS_COUNT = 2;
|
|
103
|
+
const buttonStyles = this.button.nativeElement.getBoundingClientRect();
|
|
104
|
+
const wrapperGap = parseInt(window.getComputedStyle(this.wrapper.parentElement).gap);
|
|
105
|
+
const buttonSize = this.props.vertical ? buttonStyles?.height : buttonStyles?.width;
|
|
106
|
+
return (buttonSize + wrapperGap) * BUTTONS_COUNT;
|
|
107
|
+
}
|
|
93
108
|
}
|
|
@@ -9,15 +9,6 @@ import { isDevMode } from '@angular/core';
|
|
|
9
9
|
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
export const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
|
|
12
|
-
/**
|
|
13
|
-
* @hidden
|
|
14
|
-
*/
|
|
15
|
-
export const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
|
|
16
|
-
const BUTTONS_COUNT = 2;
|
|
17
|
-
const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
|
|
18
|
-
const trackWidth = wrapperWidth - trackOffset;
|
|
19
|
-
return Math.floor(trackWidth);
|
|
20
|
-
};
|
|
21
12
|
/**
|
|
22
13
|
* @hidden
|
|
23
14
|
*/
|
|
@@ -40,12 +31,9 @@ export const calculateValueFromTick = (index, { max, min, smallStep, reverse, ve
|
|
|
40
31
|
/**
|
|
41
32
|
* @hidden
|
|
42
33
|
*/
|
|
43
|
-
export const calculateHandlePosition = ({ trackWidth, min, max,
|
|
34
|
+
export const calculateHandlePosition = ({ trackWidth, min, max, value }) => {
|
|
44
35
|
const step = trackWidth / Math.abs(max - min);
|
|
45
|
-
|
|
46
|
-
if (reverse) {
|
|
47
|
-
pos = trackWidth - pos;
|
|
48
|
-
}
|
|
36
|
+
const pos = isPresent(value) ? step * (value - min) : min;
|
|
49
37
|
return Math.floor(pos);
|
|
50
38
|
};
|
|
51
39
|
/**
|
|
@@ -198,7 +186,6 @@ export const validateValue = (value) => {
|
|
|
198
186
|
export default {
|
|
199
187
|
calculateFixedTrackSize,
|
|
200
188
|
calculateValueFromTick,
|
|
201
|
-
calculateTrackSize,
|
|
202
189
|
calculateTicksCount,
|
|
203
190
|
calculateHandlePosition,
|
|
204
191
|
decreaseValueToStep,
|
|
@@ -173,15 +173,6 @@ const remainder = (dividend, divisor) => {
|
|
|
173
173
|
* @hidden
|
|
174
174
|
*/
|
|
175
175
|
const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
|
|
176
|
-
/**
|
|
177
|
-
* @hidden
|
|
178
|
-
*/
|
|
179
|
-
const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
|
|
180
|
-
const BUTTONS_COUNT = 2;
|
|
181
|
-
const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
|
|
182
|
-
const trackWidth = wrapperWidth - trackOffset;
|
|
183
|
-
return Math.floor(trackWidth);
|
|
184
|
-
};
|
|
185
176
|
/**
|
|
186
177
|
* @hidden
|
|
187
178
|
*/
|
|
@@ -204,12 +195,9 @@ const calculateValueFromTick = (index, { max, min, smallStep, reverse, vertical
|
|
|
204
195
|
/**
|
|
205
196
|
* @hidden
|
|
206
197
|
*/
|
|
207
|
-
const calculateHandlePosition = ({ trackWidth, min, max,
|
|
198
|
+
const calculateHandlePosition = ({ trackWidth, min, max, value }) => {
|
|
208
199
|
const step = trackWidth / Math.abs(max - min);
|
|
209
|
-
|
|
210
|
-
if (reverse) {
|
|
211
|
-
pos = trackWidth - pos;
|
|
212
|
-
}
|
|
200
|
+
const pos = isPresent(value) ? step * (value - min) : min;
|
|
213
201
|
return Math.floor(pos);
|
|
214
202
|
};
|
|
215
203
|
/**
|
|
@@ -362,7 +350,6 @@ const validateValue = (value) => {
|
|
|
362
350
|
var slidersUtil = {
|
|
363
351
|
calculateFixedTrackSize,
|
|
364
352
|
calculateValueFromTick,
|
|
365
|
-
calculateTrackSize,
|
|
366
353
|
calculateTicksCount,
|
|
367
354
|
calculateHandlePosition,
|
|
368
355
|
decreaseValueToStep,
|
|
@@ -386,11 +373,12 @@ var slidersUtil = {
|
|
|
386
373
|
* @hidden
|
|
387
374
|
*/
|
|
388
375
|
class SliderModelBase {
|
|
389
|
-
constructor(props, wrapper, track, renderer) {
|
|
376
|
+
constructor(props, wrapper, track, renderer, button) {
|
|
390
377
|
this.props = props;
|
|
391
378
|
this.wrapper = wrapper;
|
|
392
379
|
this.track = track;
|
|
393
380
|
this.renderer = renderer;
|
|
381
|
+
this.button = button;
|
|
394
382
|
this.props = props;
|
|
395
383
|
this.wrapper = wrapper;
|
|
396
384
|
this.track = track;
|
|
@@ -422,7 +410,9 @@ class SliderModelBase {
|
|
|
422
410
|
if (this.props.fixedTickWidth) {
|
|
423
411
|
return calculateFixedTrackSize(this.props);
|
|
424
412
|
}
|
|
425
|
-
|
|
413
|
+
const wrapperWidth = this.elementSize(this.wrapper.parentElement);
|
|
414
|
+
const trackOffset = this.getTrackOffset();
|
|
415
|
+
return wrapperWidth - trackOffset;
|
|
426
416
|
}
|
|
427
417
|
getTickSizes() {
|
|
428
418
|
const { min, max, smallStep } = this.props;
|
|
@@ -468,6 +458,17 @@ class SliderModelBase {
|
|
|
468
458
|
const { vertical } = this.props;
|
|
469
459
|
return vertical ? element.clientHeight : element.clientWidth;
|
|
470
460
|
}
|
|
461
|
+
getTrackOffset() {
|
|
462
|
+
const showButtons = this.props.buttons && isPresent(this.button);
|
|
463
|
+
if (!showButtons) {
|
|
464
|
+
return 0;
|
|
465
|
+
}
|
|
466
|
+
const BUTTONS_COUNT = 2;
|
|
467
|
+
const buttonStyles = this.button.nativeElement.getBoundingClientRect();
|
|
468
|
+
const wrapperGap = parseInt(window.getComputedStyle(this.wrapper.parentElement).gap);
|
|
469
|
+
const buttonSize = this.props.vertical ? buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.height : buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.width;
|
|
470
|
+
return (buttonSize + wrapperGap) * BUTTONS_COUNT;
|
|
471
|
+
}
|
|
471
472
|
}
|
|
472
473
|
|
|
473
474
|
/**
|
|
@@ -476,7 +477,7 @@ class SliderModelBase {
|
|
|
476
477
|
class SliderModel extends SliderModelBase {
|
|
477
478
|
positionHandle(dragHandle) {
|
|
478
479
|
const { max, min, reverse, vertical } = this.props;
|
|
479
|
-
const position = vertical ? 'bottom' : 'left';
|
|
480
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
480
481
|
const trackWidth = this.trackWidth();
|
|
481
482
|
const value = trimValue(max, min, this.props.value);
|
|
482
483
|
this.handlePosition = calculateHandlePosition({
|
|
@@ -489,12 +490,9 @@ class SliderModel extends SliderModelBase {
|
|
|
489
490
|
this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
|
|
490
491
|
}
|
|
491
492
|
positionSelection(selection) {
|
|
492
|
-
const {
|
|
493
|
+
const { vertical } = this.props;
|
|
493
494
|
const dimension = vertical ? 'height' : 'width';
|
|
494
|
-
|
|
495
|
-
if (reverse) {
|
|
496
|
-
size = this.trackWidth() - size;
|
|
497
|
-
}
|
|
495
|
+
const size = this.handlePosition;
|
|
498
496
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
499
497
|
}
|
|
500
498
|
}
|
|
@@ -539,8 +537,8 @@ const packageMetadata = {
|
|
|
539
537
|
name: '@progress/kendo-angular-inputs',
|
|
540
538
|
productName: 'Kendo UI for Angular',
|
|
541
539
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
542
|
-
publishDate:
|
|
543
|
-
version: '14.0.2-develop.
|
|
540
|
+
publishDate: 1698151363,
|
|
541
|
+
version: '14.0.2-develop.11',
|
|
544
542
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
545
543
|
};
|
|
546
544
|
|
|
@@ -1260,7 +1258,7 @@ class SliderComponent extends SliderBase {
|
|
|
1260
1258
|
}
|
|
1261
1259
|
this.resetStyles([track, selectionEl, dragHandleEl, ticks, this.hostElement.nativeElement]);
|
|
1262
1260
|
const props = this.getProps();
|
|
1263
|
-
const model = new SliderModel(props, wrapper, track, this.renderer);
|
|
1261
|
+
const model = new SliderModel(props, wrapper, track, this.renderer, this.increaseButton);
|
|
1264
1262
|
model.resizeTrack();
|
|
1265
1263
|
if (this.ticks) { //for case when tickPlacement: none
|
|
1266
1264
|
model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
|
|
@@ -1627,7 +1625,7 @@ class RangeSliderModel extends SliderModelBase {
|
|
|
1627
1625
|
return;
|
|
1628
1626
|
}
|
|
1629
1627
|
const { max, min, reverse, vertical } = this.props;
|
|
1630
|
-
const position = vertical ? 'bottom' : 'left';
|
|
1628
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
1631
1629
|
const trackWidth = this.trackWidth();
|
|
1632
1630
|
const value = isStartHandle(dragHandle) ? trimValueRange(max, min, this.props.value)[0]
|
|
1633
1631
|
: trimValueRange(max, min, this.props.value)[1];
|
|
@@ -1657,10 +1655,9 @@ class RangeSliderModel extends SliderModelBase {
|
|
|
1657
1655
|
const dimension = vertical ? 'height' : 'width';
|
|
1658
1656
|
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
1659
1657
|
const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
|
|
1660
|
-
const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
|
|
1658
|
+
const currentSelectionPosition = vertical ? dragHandle.style.bottom : reverse ? dragHandle.style.right : dragHandle.style.left;
|
|
1661
1659
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
1662
|
-
this.renderer.setStyle(selection, position,
|
|
1663
|
-
: parseFloat(currentSelectionPosition) + 'px');
|
|
1660
|
+
this.renderer.setStyle(selection, position, parseFloat(currentSelectionPosition) + 'px');
|
|
1664
1661
|
}
|
|
1665
1662
|
}
|
|
1666
1663
|
|
|
@@ -172,15 +172,6 @@ const remainder = (dividend, divisor) => {
|
|
|
172
172
|
* @hidden
|
|
173
173
|
*/
|
|
174
174
|
const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
|
|
175
|
-
/**
|
|
176
|
-
* @hidden
|
|
177
|
-
*/
|
|
178
|
-
const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
|
|
179
|
-
const BUTTONS_COUNT = 2;
|
|
180
|
-
const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
|
|
181
|
-
const trackWidth = wrapperWidth - trackOffset;
|
|
182
|
-
return Math.floor(trackWidth);
|
|
183
|
-
};
|
|
184
175
|
/**
|
|
185
176
|
* @hidden
|
|
186
177
|
*/
|
|
@@ -203,12 +194,9 @@ const calculateValueFromTick = (index, { max, min, smallStep, reverse, vertical
|
|
|
203
194
|
/**
|
|
204
195
|
* @hidden
|
|
205
196
|
*/
|
|
206
|
-
const calculateHandlePosition = ({ trackWidth, min, max,
|
|
197
|
+
const calculateHandlePosition = ({ trackWidth, min, max, value }) => {
|
|
207
198
|
const step = trackWidth / Math.abs(max - min);
|
|
208
|
-
|
|
209
|
-
if (reverse) {
|
|
210
|
-
pos = trackWidth - pos;
|
|
211
|
-
}
|
|
199
|
+
const pos = isPresent(value) ? step * (value - min) : min;
|
|
212
200
|
return Math.floor(pos);
|
|
213
201
|
};
|
|
214
202
|
/**
|
|
@@ -361,7 +349,6 @@ const validateValue = (value) => {
|
|
|
361
349
|
var slidersUtil = {
|
|
362
350
|
calculateFixedTrackSize,
|
|
363
351
|
calculateValueFromTick,
|
|
364
|
-
calculateTrackSize,
|
|
365
352
|
calculateTicksCount,
|
|
366
353
|
calculateHandlePosition,
|
|
367
354
|
decreaseValueToStep,
|
|
@@ -385,11 +372,12 @@ var slidersUtil = {
|
|
|
385
372
|
* @hidden
|
|
386
373
|
*/
|
|
387
374
|
class SliderModelBase {
|
|
388
|
-
constructor(props, wrapper, track, renderer) {
|
|
375
|
+
constructor(props, wrapper, track, renderer, button) {
|
|
389
376
|
this.props = props;
|
|
390
377
|
this.wrapper = wrapper;
|
|
391
378
|
this.track = track;
|
|
392
379
|
this.renderer = renderer;
|
|
380
|
+
this.button = button;
|
|
393
381
|
this.props = props;
|
|
394
382
|
this.wrapper = wrapper;
|
|
395
383
|
this.track = track;
|
|
@@ -421,7 +409,9 @@ class SliderModelBase {
|
|
|
421
409
|
if (this.props.fixedTickWidth) {
|
|
422
410
|
return calculateFixedTrackSize(this.props);
|
|
423
411
|
}
|
|
424
|
-
|
|
412
|
+
const wrapperWidth = this.elementSize(this.wrapper.parentElement);
|
|
413
|
+
const trackOffset = this.getTrackOffset();
|
|
414
|
+
return wrapperWidth - trackOffset;
|
|
425
415
|
}
|
|
426
416
|
getTickSizes() {
|
|
427
417
|
const { min, max, smallStep } = this.props;
|
|
@@ -467,6 +457,17 @@ class SliderModelBase {
|
|
|
467
457
|
const { vertical } = this.props;
|
|
468
458
|
return vertical ? element.clientHeight : element.clientWidth;
|
|
469
459
|
}
|
|
460
|
+
getTrackOffset() {
|
|
461
|
+
const showButtons = this.props.buttons && isPresent(this.button);
|
|
462
|
+
if (!showButtons) {
|
|
463
|
+
return 0;
|
|
464
|
+
}
|
|
465
|
+
const BUTTONS_COUNT = 2;
|
|
466
|
+
const buttonStyles = this.button.nativeElement.getBoundingClientRect();
|
|
467
|
+
const wrapperGap = parseInt(window.getComputedStyle(this.wrapper.parentElement).gap);
|
|
468
|
+
const buttonSize = this.props.vertical ? buttonStyles?.height : buttonStyles?.width;
|
|
469
|
+
return (buttonSize + wrapperGap) * BUTTONS_COUNT;
|
|
470
|
+
}
|
|
470
471
|
}
|
|
471
472
|
|
|
472
473
|
/**
|
|
@@ -475,7 +476,7 @@ class SliderModelBase {
|
|
|
475
476
|
class SliderModel extends SliderModelBase {
|
|
476
477
|
positionHandle(dragHandle) {
|
|
477
478
|
const { max, min, reverse, vertical } = this.props;
|
|
478
|
-
const position = vertical ? 'bottom' : 'left';
|
|
479
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
479
480
|
const trackWidth = this.trackWidth();
|
|
480
481
|
const value = trimValue(max, min, this.props.value);
|
|
481
482
|
this.handlePosition = calculateHandlePosition({
|
|
@@ -488,12 +489,9 @@ class SliderModel extends SliderModelBase {
|
|
|
488
489
|
this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
|
|
489
490
|
}
|
|
490
491
|
positionSelection(selection) {
|
|
491
|
-
const {
|
|
492
|
+
const { vertical } = this.props;
|
|
492
493
|
const dimension = vertical ? 'height' : 'width';
|
|
493
|
-
|
|
494
|
-
if (reverse) {
|
|
495
|
-
size = this.trackWidth() - size;
|
|
496
|
-
}
|
|
494
|
+
const size = this.handlePosition;
|
|
497
495
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
498
496
|
}
|
|
499
497
|
}
|
|
@@ -538,8 +536,8 @@ const packageMetadata = {
|
|
|
538
536
|
name: '@progress/kendo-angular-inputs',
|
|
539
537
|
productName: 'Kendo UI for Angular',
|
|
540
538
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
541
|
-
publishDate:
|
|
542
|
-
version: '14.0.2-develop.
|
|
539
|
+
publishDate: 1698151363,
|
|
540
|
+
version: '14.0.2-develop.11',
|
|
543
541
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
544
542
|
};
|
|
545
543
|
|
|
@@ -1257,7 +1255,7 @@ class SliderComponent extends SliderBase {
|
|
|
1257
1255
|
}
|
|
1258
1256
|
this.resetStyles([track, selectionEl, dragHandleEl, ticks, this.hostElement.nativeElement]);
|
|
1259
1257
|
const props = this.getProps();
|
|
1260
|
-
const model = new SliderModel(props, wrapper, track, this.renderer);
|
|
1258
|
+
const model = new SliderModel(props, wrapper, track, this.renderer, this.increaseButton);
|
|
1261
1259
|
model.resizeTrack();
|
|
1262
1260
|
if (this.ticks) { //for case when tickPlacement: none
|
|
1263
1261
|
model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
|
|
@@ -1624,7 +1622,7 @@ class RangeSliderModel extends SliderModelBase {
|
|
|
1624
1622
|
return;
|
|
1625
1623
|
}
|
|
1626
1624
|
const { max, min, reverse, vertical } = this.props;
|
|
1627
|
-
const position = vertical ? 'bottom' : 'left';
|
|
1625
|
+
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
1628
1626
|
const trackWidth = this.trackWidth();
|
|
1629
1627
|
const value = isStartHandle(dragHandle) ? trimValueRange(max, min, this.props.value)[0]
|
|
1630
1628
|
: trimValueRange(max, min, this.props.value)[1];
|
|
@@ -1654,10 +1652,9 @@ class RangeSliderModel extends SliderModelBase {
|
|
|
1654
1652
|
const dimension = vertical ? 'height' : 'width';
|
|
1655
1653
|
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
1656
1654
|
const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
|
|
1657
|
-
const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
|
|
1655
|
+
const currentSelectionPosition = vertical ? dragHandle.style.bottom : reverse ? dragHandle.style.right : dragHandle.style.left;
|
|
1658
1656
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
1659
|
-
this.renderer.setStyle(selection, position,
|
|
1660
|
-
: parseFloat(currentSelectionPosition) + 'px');
|
|
1657
|
+
this.renderer.setStyle(selection, position, parseFloat(currentSelectionPosition) + 'px');
|
|
1661
1658
|
}
|
|
1662
1659
|
}
|
|
1663
1660
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "14.0.2-develop.
|
|
3
|
+
"version": "14.0.2-develop.11",
|
|
4
4
|
"description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
"@angular/platform-browser": "13 - 16",
|
|
35
35
|
"@progress/kendo-drawing": "^1.17.2",
|
|
36
36
|
"@progress/kendo-licensing": "^1.0.2",
|
|
37
|
-
"@progress/kendo-angular-buttons": "14.0.2-develop.
|
|
38
|
-
"@progress/kendo-angular-common": "14.0.2-develop.
|
|
39
|
-
"@progress/kendo-angular-dialog": "14.0.2-develop.
|
|
40
|
-
"@progress/kendo-angular-intl": "14.0.2-develop.
|
|
41
|
-
"@progress/kendo-angular-l10n": "14.0.2-develop.
|
|
42
|
-
"@progress/kendo-angular-popup": "14.0.2-develop.
|
|
43
|
-
"@progress/kendo-angular-icons": "14.0.2-develop.
|
|
37
|
+
"@progress/kendo-angular-buttons": "14.0.2-develop.11",
|
|
38
|
+
"@progress/kendo-angular-common": "14.0.2-develop.11",
|
|
39
|
+
"@progress/kendo-angular-dialog": "14.0.2-develop.11",
|
|
40
|
+
"@progress/kendo-angular-intl": "14.0.2-develop.11",
|
|
41
|
+
"@progress/kendo-angular-l10n": "14.0.2-develop.11",
|
|
42
|
+
"@progress/kendo-angular-popup": "14.0.2-develop.11",
|
|
43
|
+
"@progress/kendo-angular-icons": "14.0.2-develop.11",
|
|
44
44
|
"rxjs": "^6.5.3 || ^7.0.0",
|
|
45
|
-
"@progress/kendo-angular-upload": "14.0.2-develop.
|
|
45
|
+
"@progress/kendo-angular-upload": "14.0.2-develop.11"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"tslib": "^2.3.1",
|
|
49
|
-
"@progress/kendo-angular-schematics": "14.0.2-develop.
|
|
49
|
+
"@progress/kendo-angular-schematics": "14.0.2-develop.11",
|
|
50
50
|
"@progress/kendo-common": "^0.2.2",
|
|
51
51
|
"@progress/kendo-draggable": "^3.0.0",
|
|
52
52
|
"@progress/kendo-inputs-common": "^3.1.0"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Renderer2 } from '@angular/core';
|
|
5
|
+
import { ElementRef, Renderer2 } from '@angular/core';
|
|
6
6
|
/**
|
|
7
7
|
* @hidden
|
|
8
8
|
*/
|
|
@@ -11,8 +11,9 @@ export declare abstract class SliderModelBase {
|
|
|
11
11
|
protected wrapper: HTMLElement;
|
|
12
12
|
protected track: HTMLElement;
|
|
13
13
|
protected renderer: Renderer2;
|
|
14
|
+
private button?;
|
|
14
15
|
protected tickSizes: number[];
|
|
15
|
-
constructor(props: any, wrapper: HTMLElement, track: HTMLElement, renderer: Renderer2);
|
|
16
|
+
constructor(props: any, wrapper: HTMLElement, track: HTMLElement, renderer: Renderer2, button?: ElementRef);
|
|
16
17
|
protected abstract positionHandle(dragHandle: HTMLElement): void;
|
|
17
18
|
protected abstract positionSelection(dragHandle: HTMLElement, selection: HTMLElement): void;
|
|
18
19
|
resizeTrack(): void;
|
|
@@ -23,4 +24,5 @@ export declare abstract class SliderModelBase {
|
|
|
23
24
|
private adjustPadding;
|
|
24
25
|
private elementOffset;
|
|
25
26
|
private elementSize;
|
|
27
|
+
private getTrackOffset;
|
|
26
28
|
}
|
|
@@ -7,10 +7,6 @@ import { RangeSliderValue } from '../rangeslider/rangeslider-value.type';
|
|
|
7
7
|
* @hidden
|
|
8
8
|
*/
|
|
9
9
|
export declare const calculateFixedTrackSize: ({ max, min, smallStep, fixedTickWidth }: any) => number;
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export declare const calculateTrackSize: (wrapperWidth: number, offset: any, showButtons?: boolean) => number;
|
|
14
10
|
/**
|
|
15
11
|
* @hidden
|
|
16
12
|
*/
|
|
@@ -22,7 +18,7 @@ export declare const calculateValueFromTick: (index: number, { max, min, smallSt
|
|
|
22
18
|
/**
|
|
23
19
|
* @hidden
|
|
24
20
|
*/
|
|
25
|
-
export declare const calculateHandlePosition: ({ trackWidth, min, max,
|
|
21
|
+
export declare const calculateHandlePosition: ({ trackWidth, min, max, value }: any) => number;
|
|
26
22
|
/**
|
|
27
23
|
* @hidden
|
|
28
24
|
*/
|
|
@@ -94,9 +90,8 @@ export declare const validateValue: (value: RangeSliderValue) => void;
|
|
|
94
90
|
declare const _default: {
|
|
95
91
|
calculateFixedTrackSize: ({ max, min, smallStep, fixedTickWidth }: any) => number;
|
|
96
92
|
calculateValueFromTick: (index: number, { max, min, smallStep, reverse, vertical }: any) => number;
|
|
97
|
-
calculateTrackSize: (wrapperWidth: number, offset: any, showButtons?: boolean) => number;
|
|
98
93
|
calculateTicksCount: (min?: number, max?: number, smallStep?: number) => number;
|
|
99
|
-
calculateHandlePosition: ({ trackWidth, min, max,
|
|
94
|
+
calculateHandlePosition: ({ trackWidth, min, max, value }: any) => number;
|
|
100
95
|
decreaseValueToStep: (value: number, { max, min, smallStep, largeStep }: any, large?: boolean) => number;
|
|
101
96
|
decrement: (options: any) => number;
|
|
102
97
|
decrementLarge: (options: any) => number;
|