@progress/kendo-angular-inputs 21.4.1 → 22.0.0

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 (189) hide show
  1. package/colorpicker/localization/messages.d.ts +1 -1
  2. package/common/radio-checkbox.base.d.ts +1 -1
  3. package/fesm2022/progress-kendo-angular-inputs.mjs +321 -321
  4. package/numerictextbox/localization/messages.d.ts +1 -1
  5. package/otpinput/localization/messages.d.ts +1 -1
  6. package/package.json +17 -25
  7. package/rangeslider/localization/messages.d.ts +1 -1
  8. package/signature/localization/messages.d.ts +1 -1
  9. package/slider/localization/messages.d.ts +1 -1
  10. package/sliders-common/slider-base.d.ts +1 -1
  11. package/switch/localization/messages.d.ts +1 -1
  12. package/text-fields-common/text-fields-base.d.ts +1 -1
  13. package/textbox/localization/messages.d.ts +1 -1
  14. package/esm2022/checkbox/checkbox.component.mjs +0 -227
  15. package/esm2022/checkbox/checkbox.directive.mjs +0 -96
  16. package/esm2022/checkbox/checked-state.mjs +0 -5
  17. package/esm2022/checkbox.module.mjs +0 -42
  18. package/esm2022/colorpicker/adaptiveness/adaptive-close-button.component.mjs +0 -62
  19. package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +0 -219
  20. package/esm2022/colorpicker/color-contrast-svg.component.mjs +0 -108
  21. package/esm2022/colorpicker/color-gradient-numeric-label.directive.mjs +0 -37
  22. package/esm2022/colorpicker/color-gradient-text-label.directive.mjs +0 -34
  23. package/esm2022/colorpicker/color-gradient.component.mjs +0 -1110
  24. package/esm2022/colorpicker/color-input.component.mjs +0 -498
  25. package/esm2022/colorpicker/color-palette.component.mjs +0 -629
  26. package/esm2022/colorpicker/colorpicker.component.mjs +0 -1315
  27. package/esm2022/colorpicker/constants.mjs +0 -40
  28. package/esm2022/colorpicker/contrast-validation.component.mjs +0 -83
  29. package/esm2022/colorpicker/contrast.component.mjs +0 -114
  30. package/esm2022/colorpicker/events/active-color-click-event.mjs +0 -55
  31. package/esm2022/colorpicker/events/cancel-event.mjs +0 -18
  32. package/esm2022/colorpicker/events/close-event.mjs +0 -10
  33. package/esm2022/colorpicker/events/kendo-drag-event.mjs +0 -5
  34. package/esm2022/colorpicker/events/open-event.mjs +0 -10
  35. package/esm2022/colorpicker/events.mjs +0 -8
  36. package/esm2022/colorpicker/flatcolorpicker-actions.component.mjs +0 -112
  37. package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +0 -244
  38. package/esm2022/colorpicker/flatcolorpicker.component.mjs +0 -942
  39. package/esm2022/colorpicker/localization/colorgradient-localization.service.mjs +0 -46
  40. package/esm2022/colorpicker/localization/colorpalette-localization.service.mjs +0 -46
  41. package/esm2022/colorpicker/localization/colorpicker-localization.service.mjs +0 -31
  42. package/esm2022/colorpicker/localization/custom-messages.component.mjs +0 -51
  43. package/esm2022/colorpicker/localization/flatcolorpicker-localization.service.mjs +0 -46
  44. package/esm2022/colorpicker/localization/localized-colorpicker-messages.directive.mjs +0 -39
  45. package/esm2022/colorpicker/localization/messages.mjs +0 -201
  46. package/esm2022/colorpicker/models/actions-layout.mjs +0 -5
  47. package/esm2022/colorpicker/models/adaptive-mode.mjs +0 -8
  48. package/esm2022/colorpicker/models/colorpicker-view.mjs +0 -5
  49. package/esm2022/colorpicker/models/gradient-settings.mjs +0 -5
  50. package/esm2022/colorpicker/models/hsva.mjs +0 -5
  51. package/esm2022/colorpicker/models/output-format.mjs +0 -5
  52. package/esm2022/colorpicker/models/palette-presets.mjs +0 -62
  53. package/esm2022/colorpicker/models/palette-settings.mjs +0 -5
  54. package/esm2022/colorpicker/models/popup-settings.mjs +0 -5
  55. package/esm2022/colorpicker/models/rgb.mjs +0 -5
  56. package/esm2022/colorpicker/models/rgba.mjs +0 -5
  57. package/esm2022/colorpicker/models/table-cell.mjs +0 -5
  58. package/esm2022/colorpicker/models/tile-size.mjs +0 -5
  59. package/esm2022/colorpicker/models.mjs +0 -16
  60. package/esm2022/colorpicker/services/color-palette.service.mjs +0 -65
  61. package/esm2022/colorpicker/services/flatcolorpicker.service.mjs +0 -39
  62. package/esm2022/colorpicker/utils/color-parser.mjs +0 -164
  63. package/esm2022/colorpicker/utils/contrast-curve.mjs +0 -85
  64. package/esm2022/colorpicker/utils.mjs +0 -6
  65. package/esm2022/colorpicker.module.mjs +0 -50
  66. package/esm2022/common/dom-utils.mjs +0 -36
  67. package/esm2022/common/formservice.service.mjs +0 -21
  68. package/esm2022/common/math.mjs +0 -65
  69. package/esm2022/common/models/fillmode.mjs +0 -5
  70. package/esm2022/common/models/gutters.mjs +0 -5
  71. package/esm2022/common/models/responsive-breakpoints.mjs +0 -5
  72. package/esm2022/common/models/rounded.mjs +0 -5
  73. package/esm2022/common/models/size.mjs +0 -5
  74. package/esm2022/common/models/styling-classes.mjs +0 -5
  75. package/esm2022/common/models/type.mjs +0 -5
  76. package/esm2022/common/models.mjs +0 -9
  77. package/esm2022/common/radio-checkbox.base.mjs +0 -295
  78. package/esm2022/common/utils.mjs +0 -88
  79. package/esm2022/directives.mjs +0 -430
  80. package/esm2022/form/form.component.mjs +0 -163
  81. package/esm2022/form/formseparator.component.mjs +0 -80
  82. package/esm2022/form/utils.mjs +0 -147
  83. package/esm2022/form.module.mjs +0 -46
  84. package/esm2022/formfield/error.component.mjs +0 -70
  85. package/esm2022/formfield/formfield.component.mjs +0 -353
  86. package/esm2022/formfield/hint.component.mjs +0 -65
  87. package/esm2022/formfield/models/message-align.mjs +0 -5
  88. package/esm2022/formfield/models/orientation.mjs +0 -5
  89. package/esm2022/formfield/models/show-options.mjs +0 -5
  90. package/esm2022/formfield.module.mjs +0 -43
  91. package/esm2022/formfieldset/formfieldset.component.mjs +0 -174
  92. package/esm2022/index.mjs +0 -91
  93. package/esm2022/inputs.module.mjs +0 -91
  94. package/esm2022/maskedtextbox/maskedtextbox.component.mjs +0 -876
  95. package/esm2022/maskedtextbox/masking.service.mjs +0 -189
  96. package/esm2022/maskedtextbox/parsing/combinators.mjs +0 -28
  97. package/esm2022/maskedtextbox/parsing/parsers.mjs +0 -148
  98. package/esm2022/maskedtextbox/parsing/result.mjs +0 -44
  99. package/esm2022/maskedtextbox/parsing/stream.mjs +0 -43
  100. package/esm2022/maskedtextbox.module.mjs +0 -43
  101. package/esm2022/numerictextbox/arrow-direction.mjs +0 -13
  102. package/esm2022/numerictextbox/constants.mjs +0 -28
  103. package/esm2022/numerictextbox/localization/custom-messages.component.mjs +0 -55
  104. package/esm2022/numerictextbox/localization/localized-numerictextbox-messages.directive.mjs +0 -39
  105. package/esm2022/numerictextbox/localization/messages.mjs +0 -33
  106. package/esm2022/numerictextbox/numerictextbox.component.mjs +0 -1314
  107. package/esm2022/numerictextbox/utils.mjs +0 -92
  108. package/esm2022/numerictextbox.module.mjs +0 -46
  109. package/esm2022/otp.module.mjs +0 -44
  110. package/esm2022/otpinput/localization/custom-messages.component.mjs +0 -45
  111. package/esm2022/otpinput/localization/localized-textbox-messages.directive.mjs +0 -39
  112. package/esm2022/otpinput/localization/messages.mjs +0 -34
  113. package/esm2022/otpinput/models/otpinput-type.mjs +0 -5
  114. package/esm2022/otpinput/models/separator-icon.mjs +0 -5
  115. package/esm2022/otpinput/otpinput-separator.component.mjs +0 -93
  116. package/esm2022/otpinput/otpinput.component.mjs +0 -936
  117. package/esm2022/package-metadata.mjs +0 -16
  118. package/esm2022/progress-kendo-angular-inputs.mjs +0 -8
  119. package/esm2022/radiobutton/radiobutton.component.mjs +0 -212
  120. package/esm2022/radiobutton/radiobutton.directive.mjs +0 -81
  121. package/esm2022/radiobutton.module.mjs +0 -43
  122. package/esm2022/rangeslider/localization/custom-messages.component.mjs +0 -53
  123. package/esm2022/rangeslider/localization/localized-rangeslider-messages.directive.mjs +0 -39
  124. package/esm2022/rangeslider/localization/messages.mjs +0 -33
  125. package/esm2022/rangeslider/rangeslider-model.mjs +0 -53
  126. package/esm2022/rangeslider/rangeslider-value.type.mjs +0 -5
  127. package/esm2022/rangeslider/rangeslider.component.mjs +0 -625
  128. package/esm2022/rangeslider.module.mjs +0 -46
  129. package/esm2022/rating/directives/rating-hovered-item.directive.mjs +0 -35
  130. package/esm2022/rating/directives/rating-item.directive.mjs +0 -34
  131. package/esm2022/rating/directives/rating-selected-item.directive.mjs +0 -36
  132. package/esm2022/rating/models/precision.mjs +0 -5
  133. package/esm2022/rating/models/rating-item.interface.mjs +0 -5
  134. package/esm2022/rating/models/selection.mjs +0 -5
  135. package/esm2022/rating/rating.component.mjs +0 -754
  136. package/esm2022/rating.module.mjs +0 -46
  137. package/esm2022/shared/input-separator.component.mjs +0 -55
  138. package/esm2022/shared/input-spacer.component.mjs +0 -56
  139. package/esm2022/shared/shared-events.directive.mjs +0 -102
  140. package/esm2022/shared/utils.mjs +0 -13
  141. package/esm2022/signature/events/close-event.mjs +0 -10
  142. package/esm2022/signature/events/index.mjs +0 -6
  143. package/esm2022/signature/events/open-event.mjs +0 -10
  144. package/esm2022/signature/localization/custom-messages.component.mjs +0 -43
  145. package/esm2022/signature/localization/index.mjs +0 -7
  146. package/esm2022/signature/localization/localized-signature-messages.directive.mjs +0 -39
  147. package/esm2022/signature/localization/messages.mjs +0 -45
  148. package/esm2022/signature/signature.component.mjs +0 -981
  149. package/esm2022/signature.module.mjs +0 -47
  150. package/esm2022/slider/localization/custom-messages.component.mjs +0 -43
  151. package/esm2022/slider/localization/localized-slider-messages.directive.mjs +0 -39
  152. package/esm2022/slider/localization/messages.mjs +0 -39
  153. package/esm2022/slider/slider-model.mjs +0 -32
  154. package/esm2022/slider/slider.component.mjs +0 -671
  155. package/esm2022/slider.module.mjs +0 -48
  156. package/esm2022/sliders-common/label-template.directive.mjs +0 -37
  157. package/esm2022/sliders-common/slider-base.mjs +0 -300
  158. package/esm2022/sliders-common/slider-model.base.mjs +0 -118
  159. package/esm2022/sliders-common/slider-ticks.component.mjs +0 -147
  160. package/esm2022/sliders-common/sliders-util.mjs +0 -206
  161. package/esm2022/sliders-common/title-callback.mjs +0 -5
  162. package/esm2022/switch/events/blur-event.mjs +0 -13
  163. package/esm2022/switch/events/focus-event.mjs +0 -13
  164. package/esm2022/switch/localization/custom-messages.component.mjs +0 -43
  165. package/esm2022/switch/localization/localized-switch-messages.directive.mjs +0 -39
  166. package/esm2022/switch/localization/messages.mjs +0 -33
  167. package/esm2022/switch/switch.component.mjs +0 -585
  168. package/esm2022/switch.module.mjs +0 -44
  169. package/esm2022/text-fields-common/text-fields-base.mjs +0 -150
  170. package/esm2022/textarea/models/adornments-orientation.mjs +0 -5
  171. package/esm2022/textarea/models/flow.mjs +0 -5
  172. package/esm2022/textarea/models/resize.mjs +0 -5
  173. package/esm2022/textarea/models/textarea-settings.mjs +0 -5
  174. package/esm2022/textarea/textarea-prefix.component.mjs +0 -67
  175. package/esm2022/textarea/textarea-suffix.component.mjs +0 -67
  176. package/esm2022/textarea/textarea.component.mjs +0 -740
  177. package/esm2022/textarea/textarea.directive.mjs +0 -288
  178. package/esm2022/textarea.module.mjs +0 -46
  179. package/esm2022/textbox/localization/custom-messages.component.mjs +0 -43
  180. package/esm2022/textbox/localization/localized-textbox-messages.directive.mjs +0 -39
  181. package/esm2022/textbox/localization/messages.mjs +0 -27
  182. package/esm2022/textbox/models/icon-show-options.mjs +0 -5
  183. package/esm2022/textbox/textbox-prefix.directive.mjs +0 -50
  184. package/esm2022/textbox/textbox-suffix.directive.mjs +0 -49
  185. package/esm2022/textbox/textbox.component.mjs +0 -933
  186. package/esm2022/textbox/textbox.directive.mjs +0 -125
  187. package/esm2022/textbox.module.mjs +0 -51
  188. package/esm2022/validators/max.validator.mjs +0 -21
  189. package/esm2022/validators/min.validator.mjs +0 -21
@@ -1,625 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Renderer2, Component, ElementRef, Input, ViewChild, forwardRef, NgZone, Injector, ChangeDetectorRef } from '@angular/core';
6
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
- import { take } from 'rxjs/operators';
8
- import { trimValue, isSameRange, trimValueRange, validateValue } from '../sliders-common/sliders-util';
9
- import { RangeSliderModel } from './rangeslider-model';
10
- import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
11
- import { eventValue, isStartHandle } from '../sliders-common/sliders-util';
12
- import { invokeElementMethod } from '../common/dom-utils';
13
- import { guid, isDocumentAvailable, Keys, KendoInput, anyChanged, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, normalizeKeys } from '@progress/kendo-angular-common';
14
- import { requiresZoneOnBlur } from '../common/utils';
15
- import { SliderBase } from '../sliders-common/slider-base';
16
- import { SliderTicksComponent } from '../sliders-common/slider-ticks.component';
17
- import { LocalizedRangeSliderMessagesDirective } from './localization/localized-rangeslider-messages.directive';
18
- import { validatePackage } from '@progress/kendo-licensing';
19
- import { packageMetadata } from '../package-metadata';
20
- import * as i0 from "@angular/core";
21
- import * as i1 from "@progress/kendo-angular-l10n";
22
- const PRESSED = 'k-pressed';
23
- /**
24
- * Represents the Kendo UI RangeSlider component for Angular.
25
- * Use this component to let users select a range of values.
26
- *
27
- * @example
28
- * ```html
29
- * <kendo-rangeslider [value]="[10, 50]" [min]="0" [max]="100"></kendo-rangeslider>
30
- * ```
31
- *
32
- * @remarks
33
- * Supported children components are: {@link RangeSliderCustomMessagesComponent}.
34
- */
35
- export class RangeSliderComponent extends SliderBase {
36
- localization;
37
- injector;
38
- renderer;
39
- ngZone;
40
- changeDetector;
41
- hostElement;
42
- /**
43
- * Sets the range value of the RangeSlider.
44
- * Use either `ngModel` or the `value` binding, but not both at the same time.
45
- */
46
- value;
47
- draghandleStart;
48
- draghandleEnd;
49
- /**
50
- * @hidden
51
- */
52
- startHandleId = `k-start-handle-${guid()}`;
53
- /**
54
- * @hidden
55
- */
56
- endHandleId = `k-end-handle-${guid()}`;
57
- /**
58
- * @hidden
59
- */
60
- focusableId = this.startHandleId;
61
- draggedHandle;
62
- lastHandlePosition;
63
- activeHandle = 'startHandle';
64
- focusChangedProgrammatically = false;
65
- isInvalid;
66
- constructor(localization, injector, renderer, ngZone, changeDetector, hostElement) {
67
- super(localization, injector, renderer, ngZone, changeDetector, hostElement);
68
- this.localization = localization;
69
- this.injector = injector;
70
- this.renderer = renderer;
71
- this.ngZone = ngZone;
72
- this.changeDetector = changeDetector;
73
- this.hostElement = hostElement;
74
- validatePackage(packageMetadata);
75
- }
76
- /**
77
- * Focuses the RangeSlider.
78
- *
79
- */
80
- focus() {
81
- this.focusChangedProgrammatically = true;
82
- invokeElementMethod(this.draghandleStart, 'focus');
83
- this.focusChangedProgrammatically = false;
84
- }
85
- /**
86
- * Removes focus from the RangeSlider.
87
- */
88
- blur() {
89
- this.focusChangedProgrammatically = true;
90
- const activeHandle = this.activeHandle === 'startHandle' ? this.draghandleStart : this.draghandleEnd;
91
- invokeElementMethod(activeHandle, 'blur');
92
- this.handleBlur();
93
- this.focusChangedProgrammatically = false;
94
- }
95
- ngOnInit() {
96
- if (!this.value) {
97
- this.value = [this.min, this.max];
98
- }
99
- super.ngOnInit();
100
- }
101
- ngOnChanges(changes) {
102
- if (anyChanged(['value', 'fixedTickWidth', 'tickPlacement'], changes, true)) {
103
- if (changes['value'] && changes['value'].currentValue) {
104
- validateValue(changes['value'].currentValue);
105
- }
106
- this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
107
- this.sizeComponent();
108
- });
109
- }
110
- }
111
- ngAfterViewInit() {
112
- if (!isDocumentAvailable()) {
113
- return;
114
- }
115
- this.sizeComponent();
116
- if (this.ticks) {
117
- this.ticks.tickElements
118
- .changes
119
- .subscribe(() => this.sizeComponent());
120
- }
121
- this.isRangeSliderInvalid();
122
- this.attachElementEventHandlers();
123
- }
124
- ngOnDestroy() {
125
- if (this.subscriptions) {
126
- this.subscriptions.unsubscribe();
127
- }
128
- }
129
- /**
130
- * @hidden
131
- */
132
- textFor(key) {
133
- return this.localization.get(key);
134
- }
135
- /**
136
- * @hidden
137
- */
138
- get valueText() {
139
- return this.value ? `${this.value[0]} - ${this.value[1]}` : '';
140
- }
141
- /**
142
- * @hidden
143
- */
144
- onWrapClick = (args) => {
145
- if (!this.isDisabled) {
146
- this.value = this.value || [this.min, this.min];
147
- const trackValue = eventValue(args, this.track.nativeElement, this.getProps());
148
- let newRangeValue;
149
- const [startValue, endValue] = newRangeValue = this.value;
150
- if (trackValue <= startValue) {
151
- newRangeValue = [trackValue, endValue];
152
- this.activeHandle = 'startHandle';
153
- }
154
- else if (startValue < trackValue && trackValue < endValue) {
155
- if (trackValue < (startValue + endValue) / 2) {
156
- newRangeValue = [trackValue, endValue];
157
- this.activeHandle = 'startHandle';
158
- }
159
- else {
160
- newRangeValue = [startValue, trackValue];
161
- this.activeHandle = 'endHandle';
162
- }
163
- }
164
- else if (trackValue >= endValue) {
165
- newRangeValue = [startValue, trackValue];
166
- this.activeHandle = 'endHandle';
167
- }
168
- const activeHandle = this.activeHandle === 'startHandle' ? this.draghandleStart : this.draghandleEnd;
169
- invokeElementMethod(activeHandle, 'focus');
170
- this.changeValue(newRangeValue);
171
- }
172
- };
173
- /**
174
- * @hidden
175
- */
176
- handleDragPress(args) {
177
- if (args.originalEvent) {
178
- args.originalEvent.preventDefault();
179
- }
180
- const target = args.originalEvent.target;
181
- this.draggedHandle = target;
182
- const nonDraggedHandle = this.draghandleStart.nativeElement === this.draggedHandle ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
183
- this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
184
- this.renderer.setStyle(target, 'zIndex', 1);
185
- }
186
- /**
187
- * @hidden
188
- */
189
- onHandleDrag(args) {
190
- this.value = this.value || [this.min, this.min];
191
- const target = args.originalEvent.target;
192
- const lastCoords = this.draggedHandle.getBoundingClientRect();
193
- this.lastHandlePosition = { x: lastCoords.left, y: lastCoords.top };
194
- this.dragging = { value: true, target };
195
- const mousePos = {
196
- x: (args.pageX - 0.5) - (lastCoords.width / 2),
197
- y: (args.pageY - (lastCoords.width / 2))
198
- };
199
- const left = mousePos.x < this.lastHandlePosition.x;
200
- const right = mousePos.x > this.lastHandlePosition.x;
201
- const up = mousePos.y > this.lastHandlePosition.y;
202
- const moveStartHandle = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), this.value[1]]);
203
- const moveEndHandle = () => this.changeValue([this.value[0], eventValue(args, this.track.nativeElement, this.getProps())]);
204
- const moveBothHandles = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), eventValue(args, this.track.nativeElement, this.getProps())]);
205
- const activeStartHandle = isStartHandle(this.draggedHandle);
206
- const vertical = this.vertical;
207
- const horizontal = !vertical;
208
- const forward = (vertical && up) || (this.reverse ? horizontal && right : horizontal && left);
209
- const incorrectValueState = this.value[0] > this.value[1];
210
- if (this.value[0] === this.value[1] || incorrectValueState) {
211
- if (forward) {
212
- // eslint-disable-next-line no-unused-expressions
213
- activeStartHandle ? moveStartHandle() : moveBothHandles();
214
- }
215
- else {
216
- // eslint-disable-next-line no-unused-expressions
217
- activeStartHandle ? moveBothHandles() : moveEndHandle();
218
- }
219
- }
220
- else {
221
- // eslint-disable-next-line no-unused-expressions
222
- activeStartHandle ? moveStartHandle() : moveEndHandle();
223
- }
224
- }
225
- /**
226
- * @hidden
227
- */
228
- onKeyDown = (e) => {
229
- this.value = this.value || [this.min, this.min];
230
- const options = this.getProps();
231
- const { max, min } = options;
232
- // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
233
- const code = normalizeKeys(e);
234
- const handler = this.keyBinding[code];
235
- if (this.isDisabled || !handler) {
236
- return;
237
- }
238
- const startHandleIsActive = isStartHandle(e.target);
239
- const nonDraggedHandle = startHandleIsActive ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
240
- this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
241
- this.renderer.setStyle(e.target, 'zIndex', 1);
242
- const value = handler({ ...options, value: startHandleIsActive ? this.value[0] : this.value[1] });
243
- if (startHandleIsActive) {
244
- if (value > this.value[1]) {
245
- this.value[1] = value;
246
- }
247
- }
248
- else {
249
- if (value < this.value[0]) {
250
- this.value[0] = value;
251
- }
252
- }
253
- const trimmedValue = trimValue(max, min, value);
254
- const newValue = startHandleIsActive ? [trimmedValue, this.value[1]]
255
- : [this.value[0], trimmedValue];
256
- this.changeValue(newValue);
257
- e.preventDefault();
258
- };
259
- /**
260
- * @hidden
261
- */
262
- onHandleRelease(args) {
263
- this.dragging = { value: false, target: args.originalEvent.target }; //needed for animation
264
- this.draggedHandle = undefined;
265
- }
266
- //ngModel binding
267
- /**
268
- * @hidden
269
- */
270
- writeValue(value) {
271
- validateValue(value);
272
- this.value = value;
273
- this.sizeComponent();
274
- this.changeDetector.markForCheck();
275
- }
276
- /**
277
- * @hidden
278
- */
279
- registerOnChange(fn) {
280
- this.ngChange = fn;
281
- }
282
- /**
283
- * @hidden
284
- */
285
- registerOnTouched(fn) {
286
- this.ngTouched = fn;
287
- }
288
- /**
289
- * @hidden
290
- */
291
- changeValue(value) {
292
- if (!this.value || !isSameRange(this.value, value)) {
293
- this.ngZone.run(() => {
294
- this.value = value;
295
- this.ngChange(value);
296
- if (this.value) {
297
- this.valueChange.emit(value);
298
- }
299
- this.sizeComponent();
300
- });
301
- }
302
- this.isRangeSliderInvalid();
303
- }
304
- /**
305
- * @hidden
306
- */
307
- sizeComponent() {
308
- if (!isDocumentAvailable()) {
309
- return;
310
- }
311
- const wrapper = this.wrapper.nativeElement;
312
- const track = this.track.nativeElement;
313
- const selectionEl = this.sliderSelection.nativeElement;
314
- const dragHandleStartEl = this.draghandleStart.nativeElement;
315
- const dragHandleEndEl = this.draghandleEnd.nativeElement;
316
- const ticks = this.ticks ? this.ticksContainer.nativeElement : null;
317
- this.resetStyles([track, selectionEl, dragHandleStartEl, dragHandleEndEl, ticks, this.hostElement.nativeElement]);
318
- const props = this.getProps();
319
- const model = new RangeSliderModel(props, wrapper, track, this.renderer);
320
- model.resizeTrack();
321
- if (this.ticks) { //for case when tickPlacement: none
322
- model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
323
- }
324
- model.positionHandle(dragHandleStartEl);
325
- model.positionHandle(dragHandleEndEl);
326
- model.positionSelection(dragHandleStartEl, selectionEl);
327
- if (this.fixedTickWidth) {
328
- model.resizeWrapper();
329
- }
330
- }
331
- /**
332
- * @hidden
333
- */
334
- get isDisabled() {
335
- return this.disabled || this.readonly;
336
- }
337
- /**
338
- * @hidden
339
- * Used by the FloatingLabel to determine if the component is empty.
340
- */
341
- isEmpty() {
342
- return false;
343
- }
344
- set focused(value) {
345
- if (this.isFocused !== value && this.hostElement) {
346
- this.isFocused = value;
347
- }
348
- }
349
- set dragging(data) {
350
- if (this.isDragged !== data.value && this.sliderSelection && this.draghandleStart && this.draghandleEnd) {
351
- const sliderSelection = this.sliderSelection.nativeElement;
352
- const draghandle = data.target;
353
- if (data.value) {
354
- this.renderer.addClass(sliderSelection, PRESSED);
355
- this.renderer.addClass(draghandle, PRESSED);
356
- }
357
- else {
358
- this.renderer.removeClass(sliderSelection, PRESSED);
359
- this.renderer.removeClass(draghandle, PRESSED);
360
- }
361
- this.isDragged = data.value;
362
- }
363
- }
364
- ngChange = (_) => { };
365
- ngTouched = () => { };
366
- getProps() {
367
- return {
368
- disabled: this.disabled,
369
- fixedTickWidth: this.fixedTickWidth,
370
- largeStep: this.largeStep,
371
- max: this.max,
372
- min: this.min,
373
- readonly: this.readonly,
374
- reverse: this.reverse,
375
- rtl: this.localizationService.rtl,
376
- smallStep: this.smallStep,
377
- value: trimValueRange(this.max, this.min, this.value),
378
- vertical: this.vertical,
379
- buttons: false
380
- };
381
- }
382
- isRangeSliderInvalid() {
383
- const rangeSliderClasses = this.hostElement.nativeElement.classList;
384
- this.isInvalid = rangeSliderClasses.contains('ng-invalid') ? true : false;
385
- this.renderer.setAttribute(this.draghandleStart.nativeElement, 'aria-invalid', `${this.isInvalid}`);
386
- this.renderer.setAttribute(this.draghandleEnd.nativeElement, 'aria-invalid', `${this.isInvalid}`);
387
- }
388
- attachElementEventHandlers() {
389
- const hostElement = this.hostElement.nativeElement;
390
- let tabbing = false;
391
- let cursorInsideWrapper = false;
392
- this.ngZone.runOutsideAngular(() => {
393
- // focusIn and focusOut are relative to the host element
394
- this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
395
- if (!this.isFocused) {
396
- this.ngZone.run(() => {
397
- if (!this.focusChangedProgrammatically) {
398
- this.onFocus.emit();
399
- }
400
- this.focused = true;
401
- });
402
- }
403
- }));
404
- this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
405
- if (!this.isFocused) {
406
- return;
407
- }
408
- if (tabbing) {
409
- if (args.relatedTarget !== this.draghandleStart.nativeElement && args.relatedTarget !== this.draghandleEnd.nativeElement) {
410
- this.handleBlur();
411
- }
412
- tabbing = false;
413
- }
414
- else {
415
- if (!cursorInsideWrapper) {
416
- this.handleBlur();
417
- }
418
- }
419
- }));
420
- this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
421
- cursorInsideWrapper = true;
422
- }));
423
- this.subscriptions.add(this.renderer.listen(hostElement, 'mouseleave', () => {
424
- cursorInsideWrapper = false;
425
- }));
426
- this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
427
- if (args.code === Keys.Tab) {
428
- tabbing = true;
429
- }
430
- else {
431
- tabbing = false;
432
- }
433
- }));
434
- });
435
- }
436
- handleBlur = () => {
437
- this.changeDetector.markForCheck();
438
- this.focused = false;
439
- if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
440
- this.ngZone.run(() => {
441
- this.ngTouched();
442
- if (!this.focusChangedProgrammatically) {
443
- this.onBlur.emit();
444
- }
445
- });
446
- }
447
- };
448
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
449
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RangeSliderComponent, isStandalone: true, selector: "kendo-rangeslider", inputs: { value: "value" }, providers: [
450
- LocalizationService,
451
- { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
452
- { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
453
- { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) }
454
- ], viewQueries: [{ propertyName: "draghandleStart", first: true, predicate: ["draghandleStart"], descendants: true, static: true }, { propertyName: "draghandleEnd", first: true, predicate: ["draghandleEnd"], descendants: true, static: true }], exportAs: ["kendoRangeSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
455
- <ng-container kendoSliderLocalizedMessages
456
- i18n-dragHandleStart="kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider."
457
- dragHandleStart="Drag"
458
- i18n-dragHandleEnd="kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider."
459
- dragHandleEnd="Drag"
460
- >
461
-
462
- <div
463
- #wrap
464
- class="k-slider-track-wrap"
465
- [class.k-slider-topleft]="tickPlacement === 'before'"
466
- [class.k-slider-bottomright]="tickPlacement === 'after'"
467
- [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
468
- >
469
- @if (tickPlacement !== 'none') {
470
- <ul kendoSliderTicks
471
- #ticks
472
- [tickTitle]="title"
473
- [vertical]="vertical"
474
- [step]="smallStep"
475
- [largeStep]="largeStep"
476
- [min]="min"
477
- [max]="max"
478
- [labelTemplate]="labelTemplate?.templateRef"
479
- [attr.aria-hidden]="true"
480
- >
481
- </ul>
482
- }
483
- <div #track class="k-slider-track">
484
- <div #sliderSelection class="k-slider-selection">
485
- </div>
486
- <span #draghandleStart
487
- role="slider"
488
- [id]="startHandleId"
489
- [attr.tabindex]="disabled ? undefined : tabindex"
490
- [attr.aria-valuemin]="min"
491
- [attr.aria-valuemax]="max"
492
- [attr.aria-valuenow]="value ? value[0] : null"
493
- [attr.aria-valuetext]="valueText"
494
- [attr.aria-disabled]="disabled ? true : undefined"
495
- [attr.aria-readonly]="readonly ? true : undefined"
496
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
497
- [style.touch-action]="isDisabled ? '' : 'none'"
498
- class="k-draghandle"
499
- [title]="textFor('dragHandleStart')"
500
- kendoDraggable
501
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
502
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
503
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
504
- ></span>
505
- <span #draghandleEnd
506
- role="slider"
507
- [id]="endHandleId"
508
- [attr.tabindex]="disabled ? undefined : tabindex"
509
- [attr.aria-valuemin]="min"
510
- [attr.aria-valuemax]="max"
511
- [attr.aria-valuenow]="value ? value[1] : null"
512
- [attr.aria-valuetext]="valueText"
513
- [attr.aria-disabled]="disabled ? true : undefined"
514
- [attr.aria-readonly]="readonly ? true : undefined"
515
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
516
- [style.touch-action]="isDisabled ? '' : 'none'"
517
- class="k-draghandle"
518
- [title]="textFor('dragHandleEnd')"
519
- kendoDraggable
520
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
521
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
522
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
523
- ></span>
524
- </div>
525
- </div>
526
- <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
527
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
528
- }
529
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderComponent, decorators: [{
530
- type: Component,
531
- args: [{
532
- exportAs: 'kendoRangeSlider',
533
- providers: [
534
- LocalizationService,
535
- { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
536
- { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
537
- { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) }
538
- ],
539
- selector: 'kendo-rangeslider',
540
- template: `
541
- <ng-container kendoSliderLocalizedMessages
542
- i18n-dragHandleStart="kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider."
543
- dragHandleStart="Drag"
544
- i18n-dragHandleEnd="kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider."
545
- dragHandleEnd="Drag"
546
- >
547
-
548
- <div
549
- #wrap
550
- class="k-slider-track-wrap"
551
- [class.k-slider-topleft]="tickPlacement === 'before'"
552
- [class.k-slider-bottomright]="tickPlacement === 'after'"
553
- [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
554
- >
555
- @if (tickPlacement !== 'none') {
556
- <ul kendoSliderTicks
557
- #ticks
558
- [tickTitle]="title"
559
- [vertical]="vertical"
560
- [step]="smallStep"
561
- [largeStep]="largeStep"
562
- [min]="min"
563
- [max]="max"
564
- [labelTemplate]="labelTemplate?.templateRef"
565
- [attr.aria-hidden]="true"
566
- >
567
- </ul>
568
- }
569
- <div #track class="k-slider-track">
570
- <div #sliderSelection class="k-slider-selection">
571
- </div>
572
- <span #draghandleStart
573
- role="slider"
574
- [id]="startHandleId"
575
- [attr.tabindex]="disabled ? undefined : tabindex"
576
- [attr.aria-valuemin]="min"
577
- [attr.aria-valuemax]="max"
578
- [attr.aria-valuenow]="value ? value[0] : null"
579
- [attr.aria-valuetext]="valueText"
580
- [attr.aria-disabled]="disabled ? true : undefined"
581
- [attr.aria-readonly]="readonly ? true : undefined"
582
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
583
- [style.touch-action]="isDisabled ? '' : 'none'"
584
- class="k-draghandle"
585
- [title]="textFor('dragHandleStart')"
586
- kendoDraggable
587
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
588
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
589
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
590
- ></span>
591
- <span #draghandleEnd
592
- role="slider"
593
- [id]="endHandleId"
594
- [attr.tabindex]="disabled ? undefined : tabindex"
595
- [attr.aria-valuemin]="min"
596
- [attr.aria-valuemax]="max"
597
- [attr.aria-valuenow]="value ? value[1] : null"
598
- [attr.aria-valuetext]="valueText"
599
- [attr.aria-disabled]="disabled ? true : undefined"
600
- [attr.aria-readonly]="readonly ? true : undefined"
601
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
602
- [style.touch-action]="isDisabled ? '' : 'none'"
603
- class="k-draghandle"
604
- [title]="textFor('dragHandleEnd')"
605
- kendoDraggable
606
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
607
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
608
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
609
- ></span>
610
- </div>
611
- </div>
612
- <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
613
- `,
614
- standalone: true,
615
- imports: [LocalizedRangeSliderMessagesDirective, EventsOutsideAngularDirective, SliderTicksComponent, DraggableDirective, ResizeSensorComponent]
616
- }]
617
- }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
618
- type: Input
619
- }], draghandleStart: [{
620
- type: ViewChild,
621
- args: ['draghandleStart', { static: true }]
622
- }], draghandleEnd: [{
623
- type: ViewChild,
624
- args: ['draghandleEnd', { static: true }]
625
- }] } });
@@ -1,46 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { NgModule } from '@angular/core';
6
- import { KENDO_RANGESLIDER } from './directives';
7
- import { ResizeBatchService } from '@progress/kendo-angular-common';
8
- import * as i0 from "@angular/core";
9
- import * as i1 from "./rangeslider/rangeslider.component";
10
- import * as i2 from "./rangeslider/localization/custom-messages.component";
11
- import * as i3 from "./sliders-common/label-template.directive";
12
- //IMPORTANT: NgModule export kept for backwards compatibility
13
- /**
14
- * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the RangeSlider component.
15
- *
16
- * Use this module to add the RangeSlider component to your NgModule-based Angular application.
17
- *
18
- * @example
19
- *
20
- * ```typescript
21
- * import { RangeSliderModule } from '@progress/kendo-angular-inputs';
22
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
23
- * import { NgModule } from '@angular/core';
24
- * import { AppComponent } from './app.component';
25
- *
26
- * @NgModule({
27
- * declarations: [AppComponent],
28
- * imports: [BrowserModule, BrowserAnimationsModule, RangeSliderModule],
29
- * bootstrap: [AppComponent]
30
- * })
31
- * export class AppModule {}
32
- * ```
33
- */
34
- export class RangeSliderModule {
35
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
36
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderModule, imports: [i1.RangeSliderComponent, i2.RangeSliderCustomMessagesComponent, i3.LabelTemplateDirective], exports: [i1.RangeSliderComponent, i2.RangeSliderCustomMessagesComponent, i3.LabelTemplateDirective] });
37
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderModule, providers: [ResizeBatchService], imports: [i1.RangeSliderComponent] });
38
- }
39
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeSliderModule, decorators: [{
40
- type: NgModule,
41
- args: [{
42
- imports: [...KENDO_RANGESLIDER],
43
- exports: [...KENDO_RANGESLIDER],
44
- providers: [ResizeBatchService]
45
- }]
46
- }] });