@progress/kendo-angular-inputs 7.5.2 → 7.5.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/dist/cdn/js/kendo-angular-inputs.js +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rangeslider/rangeslider-model.js +4 -7
- package/dist/es/rangeslider/rangeslider.component.js +1 -1
- package/dist/es/slider/slider-model.js +3 -5
- package/dist/es/slider/slider.component.js +2 -2
- package/dist/es/sliders-common/slider-model.base.js +7 -10
- package/dist/es/sliders-common/slider-ticks.component.js +3 -10
- package/dist/es/sliders-common/sliders-util.js +2 -3
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/rangeslider/rangeslider-model.js +4 -7
- package/dist/es2015/rangeslider/rangeslider.component.js +55 -54
- package/dist/es2015/slider/slider-model.d.ts +1 -1
- package/dist/es2015/slider/slider-model.js +3 -5
- package/dist/es2015/slider/slider.component.js +56 -59
- package/dist/es2015/sliders-common/slider-model.base.js +7 -10
- package/dist/es2015/sliders-common/slider-ticks.component.d.ts +0 -2
- package/dist/es2015/sliders-common/slider-ticks.component.js +6 -10
- package/dist/es2015/sliders-common/sliders-util.d.ts +2 -2
- package/dist/es2015/sliders-common/sliders-util.js +2 -3
- package/dist/fesm2015/index.js +132 -155
- package/dist/fesm5/index.js +21 -46
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rangeslider/rangeslider-model.js +4 -7
- package/dist/npm/rangeslider/rangeslider.component.js +1 -1
- package/dist/npm/slider/slider-model.js +3 -5
- package/dist/npm/slider/slider.component.js +2 -2
- package/dist/npm/sliders-common/slider-model.base.js +6 -9
- package/dist/npm/sliders-common/slider-ticks.component.js +2 -9
- package/dist/npm/sliders-common/sliders-util.js +2 -3
- package/dist/systemjs/kendo-angular-inputs.js +1 -1
- package/package.json +11 -10
|
@@ -9,7 +9,7 @@ export var packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-inputs',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1642518309,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
15
15
|
};
|
|
@@ -29,8 +29,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
|
|
|
29
29
|
max: max,
|
|
30
30
|
reverse: reverse,
|
|
31
31
|
value: value,
|
|
32
|
-
trackWidth: trackWidth
|
|
33
|
-
handleWidth: dragHandle.offsetWidth
|
|
32
|
+
trackWidth: trackWidth
|
|
34
33
|
});
|
|
35
34
|
this.renderer.setStyle(dragHandle, position, this.startHandlePosition + "px");
|
|
36
35
|
}
|
|
@@ -40,8 +39,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
|
|
|
40
39
|
max: max,
|
|
41
40
|
reverse: reverse,
|
|
42
41
|
value: value,
|
|
43
|
-
trackWidth: trackWidth
|
|
44
|
-
handleWidth: dragHandle.offsetWidth
|
|
42
|
+
trackWidth: trackWidth
|
|
45
43
|
});
|
|
46
44
|
this.renderer.setStyle(dragHandle, position, this.endHandlePosition + "px");
|
|
47
45
|
}
|
|
@@ -50,12 +48,11 @@ var RangeSliderModel = /** @class */ (function (_super) {
|
|
|
50
48
|
var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
|
|
51
49
|
var dimension = vertical ? 'height' : 'width';
|
|
52
50
|
var position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
53
|
-
var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
|
|
54
51
|
var size = Math.abs(this.endHandlePosition - this.startHandlePosition);
|
|
55
52
|
var currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
|
|
56
53
|
this.renderer.setStyle(selection, dimension, size + "px");
|
|
57
|
-
this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition)
|
|
58
|
-
: parseFloat(currentSelectionPosition) +
|
|
54
|
+
this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
|
|
55
|
+
: parseFloat(currentSelectionPosition) + 'px');
|
|
59
56
|
};
|
|
60
57
|
return RangeSliderModel;
|
|
61
58
|
}(SliderModelBase));
|
|
@@ -453,7 +453,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
|
|
|
453
453
|
{ provide: KendoInput, useExisting: forwardRef(function () { return RangeSliderComponent_1; }) }
|
|
454
454
|
],
|
|
455
455
|
selector: 'kendo-rangeslider',
|
|
456
|
-
template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n dragHandleStart=\"Drag\"\n i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n dragHandleEnd=\"Drag\"\n >\n\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <ul kendoSliderTicks\n
|
|
456
|
+
template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n dragHandleStart=\"Drag\"\n i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n dragHandleEnd=\"Drag\"\n >\n\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <div class=\"k-slider-track-wrap\">\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandleStart\n role=\"slider\"\n [id]=\"startHandleId\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"value ? value[0] : null\"\n [attr.aria-valuetext]=\"valueText\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"textFor('dragHandleStart')\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n <a #draghandleEnd\n role=\"slider\"\n [id]=\"endHandleId\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"value ? value[1] : null\"\n [attr.aria-valuetext]=\"valueText\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"textFor('dragHandleEnd')\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n </div>\n <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n </div>\n "
|
|
457
457
|
}),
|
|
458
458
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
459
459
|
Injector,
|
|
@@ -23,16 +23,14 @@ var SliderModel = /** @class */ (function (_super) {
|
|
|
23
23
|
max: max,
|
|
24
24
|
reverse: reverse,
|
|
25
25
|
value: value,
|
|
26
|
-
trackWidth: trackWidth
|
|
27
|
-
handleWidth: dragHandle.offsetWidth
|
|
26
|
+
trackWidth: trackWidth
|
|
28
27
|
});
|
|
29
28
|
this.renderer.setStyle(dragHandle, position, this.handlePosition + "px");
|
|
30
29
|
};
|
|
31
|
-
SliderModel.prototype.positionSelection = function (
|
|
30
|
+
SliderModel.prototype.positionSelection = function (selection) {
|
|
32
31
|
var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
|
|
33
32
|
var dimension = vertical ? 'height' : 'width';
|
|
34
|
-
var
|
|
35
|
-
var size = this.handlePosition + handleWidth;
|
|
33
|
+
var size = this.handlePosition;
|
|
36
34
|
if (reverse) {
|
|
37
35
|
size = this.trackWidth() - size;
|
|
38
36
|
}
|
|
@@ -293,7 +293,7 @@ var SliderComponent = /** @class */ (function (_super) {
|
|
|
293
293
|
model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(function (element) { return element.nativeElement; }));
|
|
294
294
|
}
|
|
295
295
|
model.positionHandle(dragHandleEl);
|
|
296
|
-
model.positionSelection(
|
|
296
|
+
model.positionSelection(selectionEl);
|
|
297
297
|
if (!animate) {
|
|
298
298
|
this.hostElement.nativeElement.getBoundingClientRect();
|
|
299
299
|
this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
|
|
@@ -468,7 +468,7 @@ var SliderComponent = /** @class */ (function (_super) {
|
|
|
468
468
|
{ provide: KendoInput, useExisting: forwardRef(function () { return SliderComponent_1; }) }
|
|
469
469
|
],
|
|
470
470
|
selector: 'kendo-slider',
|
|
471
|
-
template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <
|
|
471
|
+
template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n class=\"k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"decrementMessage\"\n [attr.tabindex]=\"-1\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\">\n </span>\n </button>\n <div class=\"k-slider-track-wrap\">\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandle\n role=\"slider\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"currentValue\"\n [attr.aria-valuetext]=\"currentValue\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"dragHandleMessage\"\n [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n [id]=\"focusableId\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n </div>\n <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n class=\"k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"currentValue\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\">\n </span>\n </button>\n <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
|
|
472
472
|
}),
|
|
473
473
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
474
474
|
Injector,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2021 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 {
|
|
5
|
+
import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
|
|
6
6
|
import { subtract } from '../common/math';
|
|
7
7
|
/**
|
|
8
8
|
* @hidden
|
|
@@ -20,8 +20,10 @@ var SliderModelBase = /** @class */ (function () {
|
|
|
20
20
|
}
|
|
21
21
|
SliderModelBase.prototype.resizeTrack = function () {
|
|
22
22
|
var orientation = this.props.vertical ? 'height' : 'width';
|
|
23
|
+
var altOrientation = this.props.vertical ? 'width' : 'height';
|
|
23
24
|
var trackWidth = this.trackWidth();
|
|
24
|
-
this.track.style[orientation] = trackWidth + "px";
|
|
25
|
+
this.track.parentElement.style[orientation] = trackWidth + "px";
|
|
26
|
+
this.track.parentElement.style[altOrientation] = '';
|
|
25
27
|
};
|
|
26
28
|
SliderModelBase.prototype.resizeTicks = function (ticksContainer, ticks) {
|
|
27
29
|
var _this = this;
|
|
@@ -33,22 +35,17 @@ var SliderModelBase = /** @class */ (function () {
|
|
|
33
35
|
};
|
|
34
36
|
SliderModelBase.prototype.resizeWrapper = function () {
|
|
35
37
|
var dimension = this.props.vertical ? "height" : "width";
|
|
36
|
-
var wrapperSize = this.elementSize(this.wrapper);
|
|
37
|
-
var trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
|
|
38
38
|
var fixedTrackWidth = calculateFixedTrackSize(this.props);
|
|
39
39
|
var wrapperParentEl = this.wrapper.parentElement;
|
|
40
|
-
if (
|
|
41
|
-
wrapperParentEl.style[dimension] =
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
wrapperParentEl.style[dimension] = wrapperSize + (fixedTrackWidth - trackWidth) + "px";
|
|
40
|
+
if (fixedTrackWidth) {
|
|
41
|
+
wrapperParentEl.style[dimension] = "auto";
|
|
45
42
|
}
|
|
46
43
|
};
|
|
47
44
|
SliderModelBase.prototype.trackWidth = function () {
|
|
48
45
|
if (this.props.fixedTickWidth) {
|
|
49
46
|
return calculateFixedTrackSize(this.props);
|
|
50
47
|
}
|
|
51
|
-
return
|
|
48
|
+
return this.elementSize(this.track.parentElement);
|
|
52
49
|
};
|
|
53
50
|
SliderModelBase.prototype.getTickSizes = function () {
|
|
54
51
|
var _a = this.props, min = _a.min, max = _a.max, smallStep = _a.smallStep;
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
6
|
/* tslint:disable:component-selector */
|
|
7
|
-
import { Component,
|
|
8
|
-
import { RTL } from '@progress/kendo-angular-l10n';
|
|
7
|
+
import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
|
|
9
8
|
import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
|
|
10
9
|
/**
|
|
11
10
|
* @hidden
|
|
@@ -23,8 +22,7 @@ var SliderTick = /** @class */ (function () {
|
|
|
23
22
|
* @hidden
|
|
24
23
|
*/
|
|
25
24
|
var SliderTicksComponent = /** @class */ (function () {
|
|
26
|
-
function SliderTicksComponent(
|
|
27
|
-
this.rtl = rtl;
|
|
25
|
+
function SliderTicksComponent() {
|
|
28
26
|
this.wrapperClasses = 'k-reset k-slider-items';
|
|
29
27
|
this.ticks = [];
|
|
30
28
|
}
|
|
@@ -47,9 +45,6 @@ var SliderTicksComponent = /** @class */ (function () {
|
|
|
47
45
|
result[i].classes['k-tick-large'] = true;
|
|
48
46
|
}
|
|
49
47
|
}
|
|
50
|
-
if (this.rtl || this.vertical) {
|
|
51
|
-
result = result.reverse();
|
|
52
|
-
}
|
|
53
48
|
if (result.length > 0) {
|
|
54
49
|
Object.assign(result[0].classes, this.endTickClasses(true));
|
|
55
50
|
Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
|
|
@@ -102,9 +97,7 @@ var SliderTicksComponent = /** @class */ (function () {
|
|
|
102
97
|
Component({
|
|
103
98
|
selector: '[kendoSliderTicks]',
|
|
104
99
|
template: "\n <li #tickElement *ngFor=\"let tick of ticks;\"\n [ngClass]=\"tick.classes\"\n title=\"{{ tickTitle(tick.value) }}\"\n role=\"presentation\"\n >\n <ng-container [ngSwitch]=\"tick.large\">\n <span class=\"k-label\" *ngSwitchCase=\"true\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate || defaultLabel\" [ngTemplateOutletContext]=\"tick\">\n </ng-container>\n </span>\n <ng-container *ngSwitchCase=\"false\"> </ng-container>\n </ng-container>\n </li>\n\n <ng-template #defaultLabel let-value=\"value\">\n {{ tickTitle(value) }}\n </ng-template>\n "
|
|
105
|
-
})
|
|
106
|
-
tslib_1.__param(0, Optional()), tslib_1.__param(0, Inject(RTL)),
|
|
107
|
-
tslib_1.__metadata("design:paramtypes", [Boolean])
|
|
100
|
+
})
|
|
108
101
|
], SliderTicksComponent);
|
|
109
102
|
return SliderTicksComponent;
|
|
110
103
|
}());
|
|
@@ -49,14 +49,13 @@ export var calculateValueFromTick = function (index, _a) {
|
|
|
49
49
|
* @hidden
|
|
50
50
|
*/
|
|
51
51
|
export var calculateHandlePosition = function (_a) {
|
|
52
|
-
var
|
|
53
|
-
var halfHandleWidth = Math.floor(handleWidth / 2);
|
|
52
|
+
var trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
|
|
54
53
|
var step = trackWidth / Math.abs(max - min);
|
|
55
54
|
var pos = isPresent(value) ? step * (value - min) : min;
|
|
56
55
|
if (reverse) {
|
|
57
56
|
pos = trackWidth - pos;
|
|
58
57
|
}
|
|
59
|
-
return Math.floor(pos
|
|
58
|
+
return Math.floor(pos);
|
|
60
59
|
};
|
|
61
60
|
/**
|
|
62
61
|
* @hidden
|