@progress/kendo-angular-inputs 8.0.0-dev.202112251033 → 8.0.0-dev.202201190602

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 (78) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +119 -79
  3. package/README.md +1 -1
  4. package/dist/cdn/js/kendo-angular-inputs.js +1 -1
  5. package/dist/cdn/main.js +1 -1
  6. package/dist/es/colorpicker/color-gradient.component.js +3 -0
  7. package/dist/es/colorpicker/color-input.component.js +1 -1
  8. package/dist/es/colorpicker/color-palette.component.js +6 -3
  9. package/dist/es/colorpicker/colorpicker.component.js +189 -49
  10. package/dist/es/colorpicker/flatcolorpicker.component.js +7 -4
  11. package/dist/es/maskedtextbox/maskedtextbox.component.js +1 -1
  12. package/dist/es/numerictextbox/numerictextbox.component.js +1 -1
  13. package/dist/es/package-metadata.js +1 -1
  14. package/dist/es/radiobutton/radiobutton.directive.js +3 -0
  15. package/dist/es/rangeslider/rangeslider-model.js +4 -7
  16. package/dist/es/rangeslider/rangeslider.component.js +1 -1
  17. package/dist/es/slider/slider-model.js +3 -5
  18. package/dist/es/slider/slider.component.js +2 -2
  19. package/dist/es/sliders-common/slider-model.base.js +7 -10
  20. package/dist/es/sliders-common/slider-ticks.component.js +3 -10
  21. package/dist/es/sliders-common/sliders-util.js +2 -3
  22. package/dist/es/switch/switch.component.js +1 -1
  23. package/dist/es/textarea/textarea.component.js +3 -2
  24. package/dist/es/textbox/textbox.component.js +2 -2
  25. package/dist/es2015/colorpicker/color-gradient.component.js +3 -0
  26. package/dist/es2015/colorpicker/color-input.component.js +1 -1
  27. package/dist/es2015/colorpicker/color-palette.component.d.ts +1 -1
  28. package/dist/es2015/colorpicker/color-palette.component.js +6 -3
  29. package/dist/es2015/colorpicker/colorpicker.component.d.ts +19 -7
  30. package/dist/es2015/colorpicker/colorpicker.component.js +168 -70
  31. package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts +2 -2
  32. package/dist/es2015/colorpicker/flatcolorpicker.component.js +7 -4
  33. package/dist/es2015/index.metadata.json +1 -1
  34. package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts +1 -1
  35. package/dist/es2015/maskedtextbox/maskedtextbox.component.js +1 -1
  36. package/dist/es2015/numerictextbox/numerictextbox.component.d.ts +1 -1
  37. package/dist/es2015/numerictextbox/numerictextbox.component.js +1 -1
  38. package/dist/es2015/package-metadata.js +1 -1
  39. package/dist/es2015/radiobutton/radiobutton.directive.js +3 -0
  40. package/dist/es2015/rangeslider/rangeslider-model.js +4 -7
  41. package/dist/es2015/rangeslider/rangeslider.component.js +55 -54
  42. package/dist/es2015/slider/slider-model.d.ts +1 -1
  43. package/dist/es2015/slider/slider-model.js +3 -5
  44. package/dist/es2015/slider/slider.component.js +56 -59
  45. package/dist/es2015/sliders-common/slider-model.base.js +7 -10
  46. package/dist/es2015/sliders-common/slider-ticks.component.d.ts +0 -2
  47. package/dist/es2015/sliders-common/slider-ticks.component.js +6 -10
  48. package/dist/es2015/sliders-common/sliders-util.d.ts +2 -2
  49. package/dist/es2015/sliders-common/sliders-util.js +2 -3
  50. package/dist/es2015/switch/switch.component.d.ts +1 -1
  51. package/dist/es2015/switch/switch.component.js +1 -1
  52. package/dist/es2015/textarea/textarea.component.d.ts +1 -1
  53. package/dist/es2015/textarea/textarea.component.js +10 -2
  54. package/dist/es2015/textbox/textbox.component.d.ts +1 -1
  55. package/dist/es2015/textbox/textbox.component.js +19 -20
  56. package/dist/fesm2015/index.js +369 -285
  57. package/dist/fesm5/index.js +258 -140
  58. package/dist/npm/colorpicker/color-gradient.component.js +3 -0
  59. package/dist/npm/colorpicker/color-input.component.js +1 -1
  60. package/dist/npm/colorpicker/color-palette.component.js +6 -3
  61. package/dist/npm/colorpicker/colorpicker.component.js +188 -48
  62. package/dist/npm/colorpicker/flatcolorpicker.component.js +7 -4
  63. package/dist/npm/maskedtextbox/maskedtextbox.component.js +1 -1
  64. package/dist/npm/numerictextbox/numerictextbox.component.js +1 -1
  65. package/dist/npm/package-metadata.js +1 -1
  66. package/dist/npm/radiobutton/radiobutton.directive.js +3 -0
  67. package/dist/npm/rangeslider/rangeslider-model.js +4 -7
  68. package/dist/npm/rangeslider/rangeslider.component.js +1 -1
  69. package/dist/npm/slider/slider-model.js +3 -5
  70. package/dist/npm/slider/slider.component.js +2 -2
  71. package/dist/npm/sliders-common/slider-model.base.js +6 -9
  72. package/dist/npm/sliders-common/slider-ticks.component.js +2 -9
  73. package/dist/npm/sliders-common/sliders-util.js +2 -3
  74. package/dist/npm/switch/switch.component.js +1 -1
  75. package/dist/npm/textarea/textarea.component.js +3 -2
  76. package/dist/npm/textbox/textbox.component.js +2 -2
  77. package/dist/systemjs/kendo-angular-inputs.js +1 -1
  78. package/package.json +6 -6
@@ -6,7 +6,9 @@
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  var tslib_1 = require("tslib");
8
8
  var core_1 = require("@angular/core");
9
+ var kendo_licensing_1 = require("@progress/kendo-licensing");
9
10
  var utils_1 = require("../common/utils");
11
+ var package_metadata_1 = require("../package-metadata");
10
12
  /**
11
13
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
12
14
  * The directive is placed on input type="radio" elements.
@@ -22,6 +24,7 @@ var RadioButtonDirective = /** @class */ (function () {
22
24
  this.hostElement = hostElement;
23
25
  this.kendoClass = true;
24
26
  this._size = 'medium';
27
+ kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
25
28
  }
26
29
  Object.defineProperty(RadioButtonDirective.prototype, "size", {
27
30
  get: function () {
@@ -31,8 +31,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
31
31
  max: max,
32
32
  reverse: reverse,
33
33
  value: value,
34
- trackWidth: trackWidth,
35
- handleWidth: dragHandle.offsetWidth
34
+ trackWidth: trackWidth
36
35
  });
37
36
  this.renderer.setStyle(dragHandle, position, this.startHandlePosition + "px");
38
37
  }
@@ -42,8 +41,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
42
41
  max: max,
43
42
  reverse: reverse,
44
43
  value: value,
45
- trackWidth: trackWidth,
46
- handleWidth: dragHandle.offsetWidth
44
+ trackWidth: trackWidth
47
45
  });
48
46
  this.renderer.setStyle(dragHandle, position, this.endHandlePosition + "px");
49
47
  }
@@ -52,12 +50,11 @@ var RangeSliderModel = /** @class */ (function (_super) {
52
50
  var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
53
51
  var dimension = vertical ? 'height' : 'width';
54
52
  var position = vertical ? 'bottom' : reverse ? 'right' : 'left';
55
- var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
56
53
  var size = Math.abs(this.endHandlePosition - this.startHandlePosition);
57
54
  var currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
58
55
  this.renderer.setStyle(selection, dimension, size + "px");
59
- this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) - handleWidth + 'px'
60
- : parseFloat(currentSelectionPosition) + handleWidth + 'px');
56
+ this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
57
+ : parseFloat(currentSelectionPosition) + 'px');
61
58
  };
62
59
  return RangeSliderModel;
63
60
  }(slider_model_base_1.SliderModelBase));
@@ -455,7 +455,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
455
455
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return RangeSliderComponent_1; }) }
456
456
  ],
457
457
  selector: 'kendo-rangeslider',
458
- 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 #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\n <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n </div>\n "
458
+ 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 "
459
459
  }),
460
460
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
461
461
  core_1.Injector,
@@ -25,16 +25,14 @@ var SliderModel = /** @class */ (function (_super) {
25
25
  max: max,
26
26
  reverse: reverse,
27
27
  value: value,
28
- trackWidth: trackWidth,
29
- handleWidth: dragHandle.offsetWidth
28
+ trackWidth: trackWidth
30
29
  });
31
30
  this.renderer.setStyle(dragHandle, position, this.handlePosition + "px");
32
31
  };
33
- SliderModel.prototype.positionSelection = function (dragHandle, selection) {
32
+ SliderModel.prototype.positionSelection = function (selection) {
34
33
  var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
35
34
  var dimension = vertical ? 'height' : 'width';
36
- var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
37
- var size = this.handlePosition + handleWidth;
35
+ var size = this.handlePosition;
38
36
  if (reverse) {
39
37
  size = this.trackWidth() - size;
40
38
  }
@@ -295,7 +295,7 @@ var SliderComponent = /** @class */ (function (_super) {
295
295
  model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(function (element) { return element.nativeElement; }));
296
296
  }
297
297
  model.positionHandle(dragHandleEl);
298
- model.positionSelection(dragHandleEl, selectionEl);
298
+ model.positionSelection(selectionEl);
299
299
  if (!animate) {
300
300
  this.hostElement.nativeElement.getBoundingClientRect();
301
301
  this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
@@ -470,7 +470,7 @@ var SliderComponent = /** @class */ (function (_super) {
470
470
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return SliderComponent_1; }) }
471
471
  ],
472
472
  selector: 'kendo-slider',
473
- 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 <span\n #decreaseButton\n *ngIf=\"showButtons\"\n class=\"k-button k-button-decrease\"\n [title]=\"decrementMessage\"\n role=\"presentation\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\"\n >\n </span>\n </span>\n <span\n *ngIf=\"showButtons\"\n #increaseButton\n class=\"k-button k-button-increase\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-label]=\"currentValue\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\"\n >\n </span>\n </span>\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 <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
473
+ 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 "
474
474
  }),
475
475
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
476
476
  core_1.Injector,
@@ -22,8 +22,10 @@ var SliderModelBase = /** @class */ (function () {
22
22
  }
23
23
  SliderModelBase.prototype.resizeTrack = function () {
24
24
  var orientation = this.props.vertical ? 'height' : 'width';
25
+ var altOrientation = this.props.vertical ? 'width' : 'height';
25
26
  var trackWidth = this.trackWidth();
26
- this.track.style[orientation] = trackWidth + "px";
27
+ this.track.parentElement.style[orientation] = trackWidth + "px";
28
+ this.track.parentElement.style[altOrientation] = '';
27
29
  };
28
30
  SliderModelBase.prototype.resizeTicks = function (ticksContainer, ticks) {
29
31
  var _this = this;
@@ -35,22 +37,17 @@ var SliderModelBase = /** @class */ (function () {
35
37
  };
36
38
  SliderModelBase.prototype.resizeWrapper = function () {
37
39
  var dimension = this.props.vertical ? "height" : "width";
38
- var wrapperSize = this.elementSize(this.wrapper);
39
- var trackWidth = sliders_util_1.calculateTrackSize(wrapperSize, this.elementOffset(this.track));
40
40
  var fixedTrackWidth = sliders_util_1.calculateFixedTrackSize(this.props);
41
41
  var wrapperParentEl = this.wrapper.parentElement;
42
- if (trackWidth > fixedTrackWidth) {
43
- wrapperParentEl.style[dimension] = wrapperSize - (trackWidth - fixedTrackWidth) + "px";
44
- }
45
- else {
46
- wrapperParentEl.style[dimension] = wrapperSize + (fixedTrackWidth - trackWidth) + "px";
42
+ if (fixedTrackWidth) {
43
+ wrapperParentEl.style[dimension] = "auto";
47
44
  }
48
45
  };
49
46
  SliderModelBase.prototype.trackWidth = function () {
50
47
  if (this.props.fixedTickWidth) {
51
48
  return sliders_util_1.calculateFixedTrackSize(this.props);
52
49
  }
53
- return sliders_util_1.calculateTrackSize(this.elementSize(this.wrapper), this.elementOffset(this.track), this.props.buttons);
50
+ return this.elementSize(this.track.parentElement);
54
51
  };
55
52
  SliderModelBase.prototype.getTickSizes = function () {
56
53
  var _a = this.props, min = _a.min, max = _a.max, smallStep = _a.smallStep;
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  var tslib_1 = require("tslib");
8
8
  /* tslint:disable:component-selector */
9
9
  var core_1 = require("@angular/core");
10
- var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
11
10
  var sliders_util_1 = require("./sliders-util");
12
11
  /**
13
12
  * @hidden
@@ -25,8 +24,7 @@ var SliderTick = /** @class */ (function () {
25
24
  * @hidden
26
25
  */
27
26
  var SliderTicksComponent = /** @class */ (function () {
28
- function SliderTicksComponent(rtl) {
29
- this.rtl = rtl;
27
+ function SliderTicksComponent() {
30
28
  this.wrapperClasses = 'k-reset k-slider-items';
31
29
  this.ticks = [];
32
30
  }
@@ -49,9 +47,6 @@ var SliderTicksComponent = /** @class */ (function () {
49
47
  result[i].classes['k-tick-large'] = true;
50
48
  }
51
49
  }
52
- if (this.rtl || this.vertical) {
53
- result = result.reverse();
54
- }
55
50
  if (result.length > 0) {
56
51
  Object.assign(result[0].classes, this.endTickClasses(true));
57
52
  Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
@@ -104,9 +99,7 @@ var SliderTicksComponent = /** @class */ (function () {
104
99
  core_1.Component({
105
100
  selector: '[kendoSliderTicks]',
106
101
  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\">&nbsp;</ng-container>\n </ng-container>\n </li>\n\n <ng-template #defaultLabel let-value=\"value\">\n {{ tickTitle(value) }}\n </ng-template>\n "
107
- }),
108
- tslib_1.__param(0, core_1.Optional()), tslib_1.__param(0, core_1.Inject(kendo_angular_l10n_1.RTL)),
109
- tslib_1.__metadata("design:paramtypes", [Boolean])
102
+ })
110
103
  ], SliderTicksComponent);
111
104
  return SliderTicksComponent;
112
105
  }());
@@ -51,14 +51,13 @@ exports.calculateValueFromTick = function (index, _a) {
51
51
  * @hidden
52
52
  */
53
53
  exports.calculateHandlePosition = function (_a) {
54
- var handleWidth = _a.handleWidth, trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
55
- var halfHandleWidth = Math.floor(handleWidth / 2);
54
+ var trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
56
55
  var step = trackWidth / Math.abs(max - min);
57
56
  var pos = utils_1.isPresent(value) ? step * (value - min) : min;
58
57
  if (reverse) {
59
58
  pos = trackWidth - pos;
60
59
  }
61
- return Math.floor(pos - halfHandleWidth);
60
+ return Math.floor(pos);
62
61
  };
63
62
  /**
64
63
  * @hidden
@@ -124,7 +124,7 @@ var SwitchComponent = /** @class */ (function () {
124
124
  return this._size;
125
125
  },
126
126
  /**
127
- * Specifies the size of the Switch.
127
+ * Specifies the width and height of the Switch.
128
128
  *
129
129
  * The possible values are:
130
130
  * * `'small'`
@@ -193,7 +193,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
193
193
  return this._size;
194
194
  },
195
195
  /**
196
- * The size property specifies the font size and line height of the TextArea
196
+ * The size property specifies the padding of the internal textarea element
197
197
  * ([see example]({% slug appearance_textarea %}#toc-size)).
198
198
  *
199
199
  * The possible values are:
@@ -575,7 +575,8 @@ var TextAreaComponent = /** @class */ (function (_super) {
575
575
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return TextAreaComponent_1; }) }
576
576
  ],
577
577
  selector: 'kendo-textarea',
578
- template: "\n <textarea\n #input\n [attr.aria-multiline]=\"true\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n class=\"k-input-inner\"\n [ngClass]=\"resizableClass\"\n [id]=\"focusableId\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\">\n </textarea>\n <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n "
578
+ template: "\n <textarea\n #input\n [attr.aria-multiline]=\"true\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n class=\"k-input-inner\"\n [ngClass]=\"resizableClass\"\n [id]=\"focusableId\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.rows]=\"rows\"\n [attr.cols]=\"cols\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\">\n </textarea>\n <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n ",
579
+ styles: ["\n :host(.k-flex-col) {\n flex-direction: column !important;\n }\n :host(.k-flex-row) {\n flex-direction: row !important;\n }\n "]
579
580
  }),
580
581
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
581
582
  core_1.NgZone,
@@ -218,7 +218,7 @@ var TextBoxComponent = /** @class */ (function () {
218
218
  return this._size;
219
219
  },
220
220
  /**
221
- * The size property specifies the font size and line height of the TextBox
221
+ * The size property specifies the padding of the TextBox internal input element
222
222
  * ([see example]({% slug appearance_textbox %}#toc-size)).
223
223
  *
224
224
  * The possible values are:
@@ -745,7 +745,7 @@ var TextBoxComponent = /** @class */ (function () {
745
745
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return TextBoxComponent_1; }) }
746
746
  ],
747
747
  selector: 'kendo-textbox',
748
- template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input\n class=\"k-input-inner\"\n #input\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"/>\n <span class=\"k-input-suffix\">\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\"\n >\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
748
+ template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input #input\n class=\"k-input-inner\"\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"\n />\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\">\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span class=\"k-input-suffix\">\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
749
749
  }),
750
750
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
751
751
  core_1.NgZone,