@progress/kendo-angular-inputs 19.1.1-develop.2 → 19.1.1
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/checkbox/checkbox.component.d.ts +15 -13
- package/checkbox/checkbox.directive.d.ts +8 -15
- package/checkbox/checked-state.d.ts +5 -1
- package/checkbox.module.d.ts +9 -20
- package/colorpicker/color-gradient.component.d.ts +26 -26
- package/colorpicker/color-input.component.d.ts +18 -18
- package/colorpicker/color-palette.component.d.ts +28 -29
- package/colorpicker/colorpicker.component.d.ts +53 -69
- package/colorpicker/events/active-color-click-event.d.ts +10 -14
- package/colorpicker/events/cancel-event.d.ts +1 -1
- package/colorpicker/events/close-event.d.ts +1 -1
- package/colorpicker/events/open-event.d.ts +1 -1
- package/colorpicker/flatcolorpicker.component.d.ts +26 -29
- package/colorpicker/localization/custom-messages.component.d.ts +9 -1
- package/colorpicker/localization/messages.d.ts +29 -29
- package/colorpicker/models/palette-settings.d.ts +0 -3
- package/colorpicker/models/tile-size.d.ts +6 -0
- package/colorpicker.module.d.ts +18 -2
- package/common/models/fillmode.d.ts +4 -1
- package/common/models/rounded.d.ts +8 -2
- package/common/models/size.d.ts +4 -1
- package/common/models/type.d.ts +3 -1
- package/common/radio-checkbox.base.d.ts +0 -7
- package/directives.d.ts +216 -18
- package/esm2022/checkbox/checkbox.component.mjs +15 -13
- package/esm2022/checkbox/checkbox.directive.mjs +8 -15
- package/esm2022/checkbox.module.mjs +9 -20
- package/esm2022/colorpicker/color-gradient.component.mjs +26 -26
- package/esm2022/colorpicker/color-input.component.mjs +21 -21
- package/esm2022/colorpicker/color-palette.component.mjs +28 -29
- package/esm2022/colorpicker/colorpicker.component.mjs +53 -69
- package/esm2022/colorpicker/events/active-color-click-event.mjs +10 -14
- package/esm2022/colorpicker/events/cancel-event.mjs +1 -1
- package/esm2022/colorpicker/events/close-event.mjs +1 -1
- package/esm2022/colorpicker/events/open-event.mjs +1 -1
- package/esm2022/colorpicker/flatcolorpicker.component.mjs +26 -29
- package/esm2022/colorpicker/localization/custom-messages.component.mjs +9 -1
- package/esm2022/colorpicker/localization/messages.mjs +29 -29
- package/esm2022/colorpicker.module.mjs +18 -2
- package/esm2022/common/radio-checkbox.base.mjs +0 -7
- package/esm2022/directives.mjs +216 -18
- package/esm2022/formfield/error.component.mjs +9 -6
- package/esm2022/formfield/formfield.component.mjs +24 -20
- package/esm2022/formfield/hint.component.mjs +8 -5
- package/esm2022/formfield.module.mjs +9 -20
- package/esm2022/index.mjs +1 -0
- package/esm2022/inputs.module.mjs +9 -21
- package/esm2022/maskedtextbox/maskedtextbox.component.mjs +46 -88
- package/esm2022/maskedtextbox.module.mjs +9 -20
- package/esm2022/numerictextbox/localization/custom-messages.component.mjs +13 -1
- package/esm2022/numerictextbox/localization/messages.mjs +2 -2
- package/esm2022/numerictextbox/numerictextbox.component.mjs +57 -70
- package/esm2022/numerictextbox.module.mjs +9 -20
- package/esm2022/otp.module.mjs +44 -0
- package/esm2022/otpinput/localization/custom-messages.component.mjs +3 -1
- package/esm2022/otpinput/otpinput.component.mjs +39 -42
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/radiobutton/radiobutton.component.mjs +15 -6
- package/esm2022/radiobutton/radiobutton.directive.mjs +6 -10
- package/esm2022/radiobutton.module.mjs +8 -18
- package/esm2022/rangeslider/localization/custom-messages.component.mjs +11 -1
- package/esm2022/rangeslider/rangeslider.component.mjs +12 -16
- package/esm2022/rangeslider.module.mjs +7 -18
- package/esm2022/rating/directives/rating-hovered-item.directive.mjs +11 -3
- package/esm2022/rating/directives/rating-item.directive.mjs +10 -3
- package/esm2022/rating/directives/rating-selected-item.directive.mjs +12 -3
- package/esm2022/rating/rating.component.mjs +23 -20
- package/esm2022/rating.module.mjs +7 -18
- package/esm2022/shared/input-separator.component.mjs +10 -15
- package/esm2022/shared/textarea.directive.mjs +5 -6
- package/esm2022/signature/events/close-event.mjs +1 -1
- package/esm2022/signature/localization/custom-messages.component.mjs +1 -1
- package/esm2022/signature/signature.component.mjs +52 -51
- package/esm2022/signature.module.mjs +7 -18
- package/esm2022/slider/localization/custom-messages.component.mjs +1 -1
- package/esm2022/slider/slider.component.mjs +18 -19
- package/esm2022/slider.module.mjs +7 -18
- package/esm2022/sliders-common/label-template.directive.mjs +9 -19
- package/esm2022/sliders-common/slider-base.mjs +47 -29
- package/esm2022/switch/events/blur-event.mjs +1 -1
- package/esm2022/switch/events/focus-event.mjs +1 -1
- package/esm2022/switch/localization/custom-messages.component.mjs +1 -1
- package/esm2022/switch/switch.component.mjs +32 -43
- package/esm2022/switch.module.mjs +7 -18
- package/esm2022/textarea/textarea-prefix.component.mjs +11 -13
- package/esm2022/textarea/textarea-suffix.component.mjs +11 -13
- package/esm2022/textarea/textarea.component.mjs +40 -103
- package/esm2022/textarea.module.mjs +7 -18
- package/esm2022/textbox/localization/custom-messages.component.mjs +1 -1
- package/esm2022/textbox/textbox-prefix.directive.mjs +9 -13
- package/esm2022/textbox/textbox-suffix.directive.mjs +10 -14
- package/esm2022/textbox/textbox.component.mjs +41 -112
- package/esm2022/textbox/textbox.directive.mjs +2 -2
- package/esm2022/textbox.module.mjs +7 -18
- package/fesm2022/progress-kendo-angular-inputs.mjs +1207 -1280
- package/formfield/error.component.d.ts +9 -6
- package/formfield/formfield.component.d.ts +24 -20
- package/formfield/hint.component.d.ts +8 -5
- package/formfield/models/message-align.d.ts +3 -1
- package/formfield/models/orientation.d.ts +3 -0
- package/formfield/models/show-options.d.ts +5 -7
- package/formfield.module.d.ts +9 -20
- package/index.d.ts +1 -0
- package/inputs.module.d.ts +9 -21
- package/maskedtextbox/maskedtextbox.component.d.ts +46 -88
- package/maskedtextbox.module.d.ts +9 -20
- package/numerictextbox/localization/custom-messages.component.d.ts +13 -1
- package/numerictextbox/localization/messages.d.ts +2 -2
- package/numerictextbox/numerictextbox.component.d.ts +57 -70
- package/numerictextbox.module.d.ts +9 -20
- package/otp.module.d.ts +32 -0
- package/otpinput/localization/custom-messages.component.d.ts +3 -1
- package/otpinput/models/otpinput-type.d.ts +2 -2
- package/otpinput/models/separator-icon.d.ts +8 -3
- package/otpinput/otpinput.component.d.ts +39 -42
- package/package.json +12 -12
- package/radiobutton/radiobutton.component.d.ts +15 -6
- package/radiobutton/radiobutton.directive.d.ts +6 -10
- package/radiobutton.module.d.ts +8 -18
- package/rangeslider/localization/custom-messages.component.d.ts +11 -1
- package/rangeslider/rangeslider-value.type.d.ts +2 -2
- package/rangeslider/rangeslider.component.d.ts +12 -16
- package/rangeslider.module.d.ts +7 -18
- package/rating/directives/rating-hovered-item.directive.d.ts +11 -3
- package/rating/directives/rating-item.directive.d.ts +10 -3
- package/rating/directives/rating-selected-item.directive.d.ts +12 -3
- package/rating/models/precision.d.ts +1 -2
- package/rating/models/selection.d.ts +1 -2
- package/rating/rating.component.d.ts +21 -18
- package/rating.module.d.ts +7 -18
- package/shared/input-separator.component.d.ts +10 -15
- package/shared/textarea.directive.d.ts +5 -6
- package/signature/events/close-event.d.ts +1 -1
- package/signature/localization/custom-messages.component.d.ts +1 -1
- package/signature/signature.component.d.ts +52 -51
- package/signature.module.d.ts +7 -18
- package/slider/localization/custom-messages.component.d.ts +1 -1
- package/slider/slider.component.d.ts +18 -19
- package/slider.module.d.ts +7 -18
- package/sliders-common/label-template.directive.d.ts +9 -19
- package/sliders-common/slider-base.d.ts +47 -29
- package/sliders-common/title-callback.d.ts +19 -3
- package/switch/events/blur-event.d.ts +1 -1
- package/switch/events/focus-event.d.ts +1 -1
- package/switch/localization/custom-messages.component.d.ts +1 -1
- package/switch/switch.component.d.ts +32 -43
- package/switch.module.d.ts +7 -18
- package/textarea/models/adornments-orientation.d.ts +3 -3
- package/textarea/models/flow.d.ts +3 -3
- package/textarea/models/resize.d.ts +6 -7
- package/textarea/textarea-prefix.component.d.ts +11 -13
- package/textarea/textarea-suffix.component.d.ts +11 -13
- package/textarea/textarea.component.d.ts +40 -103
- package/textarea.module.d.ts +7 -18
- package/textbox/localization/custom-messages.component.d.ts +1 -1
- package/textbox/textbox-prefix.directive.d.ts +9 -13
- package/textbox/textbox-suffix.directive.d.ts +10 -14
- package/textbox/textbox.component.d.ts +41 -112
- package/textbox/textbox.directive.d.ts +2 -2
- package/textbox.module.d.ts +7 -18
|
@@ -25,21 +25,21 @@ const DEFAULT_FILL_MODE = 'solid';
|
|
|
25
25
|
* Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
|
|
26
26
|
*
|
|
27
27
|
* @example
|
|
28
|
-
* ```
|
|
28
|
+
* ```typescript
|
|
29
|
+
* import { Component } from '@angular/core';
|
|
29
30
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
31
|
+
* @Component({
|
|
32
|
+
* selector: 'my-app',
|
|
33
|
+
* template: `
|
|
34
|
+
* <kendo-maskedtextbox
|
|
35
|
+
* [mask]="mask"
|
|
36
|
+
* [value]="value">
|
|
37
|
+
* </kendo-maskedtextbox>
|
|
38
|
+
* `
|
|
38
39
|
* })
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
* public mask: string = "0000-0000-0000-0000";
|
|
40
|
+
* export class AppComponent {
|
|
41
|
+
* public value: string = "9580128055807792";
|
|
42
|
+
* public mask: string = "0000-0000-0000-0000";
|
|
43
43
|
* }
|
|
44
44
|
* ```
|
|
45
45
|
*/
|
|
@@ -55,27 +55,23 @@ export class MaskedTextBoxComponent {
|
|
|
55
55
|
*/
|
|
56
56
|
focusableId = `k-${guid()}`;
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* Disables the MaskedTextBox when you set it to `true` ([see example]({% slug disabled_maskedtextbox %})).
|
|
59
|
+
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
|
|
60
|
+
* @default false
|
|
59
61
|
*/
|
|
60
62
|
disabled = false;
|
|
61
63
|
/**
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
+
* When `true`, sets the MaskedTextBox to read-only mode ([see example]({% slug readonly_maskedtextbox %})).
|
|
64
65
|
* @default false
|
|
65
66
|
*/
|
|
66
67
|
readonly = false;
|
|
67
68
|
/**
|
|
68
|
-
* Sets the title of the
|
|
69
|
+
* Sets the `title` attribute of the input element.
|
|
69
70
|
*/
|
|
70
71
|
title;
|
|
71
72
|
/**
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
* The possible values are:
|
|
75
|
-
* * `small`
|
|
76
|
-
* * `medium` (default)
|
|
77
|
-
* * `large`
|
|
78
|
-
* * `none`
|
|
73
|
+
* Sets the padding size of the MaskedTextBox input element ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
|
|
74
|
+
* @default 'medium'
|
|
79
75
|
*/
|
|
80
76
|
set size(size) {
|
|
81
77
|
const newSize = size ? size : DEFAULT_SIZE;
|
|
@@ -86,13 +82,8 @@ export class MaskedTextBoxComponent {
|
|
|
86
82
|
return this._size;
|
|
87
83
|
}
|
|
88
84
|
/**
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
* The possible values are:
|
|
92
|
-
* * `small`
|
|
93
|
-
* * `medium` (default)
|
|
94
|
-
* * `large`
|
|
95
|
-
* * `none`
|
|
85
|
+
* Sets the border radius of the MaskedTextBox ([see example](slug:appearance_maskedtextbox#toc-roundness)).
|
|
86
|
+
* @default 'medium'
|
|
96
87
|
*/
|
|
97
88
|
set rounded(rounded) {
|
|
98
89
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
|
@@ -103,13 +94,8 @@ export class MaskedTextBoxComponent {
|
|
|
103
94
|
return this._rounded;
|
|
104
95
|
}
|
|
105
96
|
/**
|
|
106
|
-
*
|
|
107
|
-
*
|
|
108
|
-
* The possible values are:
|
|
109
|
-
* * `flat`
|
|
110
|
-
* * `solid` (default)
|
|
111
|
-
* * `outline`
|
|
112
|
-
* * `none`
|
|
97
|
+
* Sets the background and border style of the MaskedTextBox ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
|
|
98
|
+
* @default 'solid'
|
|
113
99
|
*/
|
|
114
100
|
set fillMode(fillMode) {
|
|
115
101
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
@@ -120,19 +106,19 @@ export class MaskedTextBoxComponent {
|
|
|
120
106
|
return this._fillMode;
|
|
121
107
|
}
|
|
122
108
|
/**
|
|
123
|
-
*
|
|
124
|
-
* If
|
|
109
|
+
* Sets the mask pattern for the MaskedTextBox ([see example]({% slug value_maskedtextbox %})).
|
|
110
|
+
* If you do not set a mask, the component acts as a standard `type="text"` input.
|
|
125
111
|
*
|
|
126
|
-
*
|
|
127
|
-
* to a character that
|
|
112
|
+
* If the mask allows spaces, set the [`promptPlaceholder`]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
|
|
113
|
+
* to a character that the mask does not accept.
|
|
128
114
|
*/
|
|
129
115
|
mask;
|
|
130
116
|
/**
|
|
131
|
-
*
|
|
117
|
+
* Sets the value of the MaskedTextBox.
|
|
132
118
|
*/
|
|
133
119
|
value;
|
|
134
120
|
/**
|
|
135
|
-
*
|
|
121
|
+
* Sets the RegExp-based mask validation rules ([see example]({% slug masks_maskedtextbox %})).
|
|
136
122
|
*/
|
|
137
123
|
set rules(value) {
|
|
138
124
|
this._rules = Object.assign({}, this.defaultRules, value);
|
|
@@ -141,32 +127,31 @@ export class MaskedTextBoxComponent {
|
|
|
141
127
|
return this._rules || this.defaultRules;
|
|
142
128
|
}
|
|
143
129
|
/**
|
|
144
|
-
*
|
|
130
|
+
* Sets the prompt character for the masked value.
|
|
145
131
|
* @default `_`
|
|
146
132
|
*/
|
|
147
133
|
prompt = '_';
|
|
148
134
|
/**
|
|
149
|
-
*
|
|
135
|
+
* Sets the character that represents an empty position in the raw value.
|
|
150
136
|
* @default ' '
|
|
151
137
|
*/
|
|
152
138
|
promptPlaceholder = ' ';
|
|
153
139
|
/**
|
|
154
|
-
*
|
|
140
|
+
* When `true` includes literals in the raw value ([see example]({% slug value_maskedtextbox %})).
|
|
155
141
|
* @default false
|
|
156
142
|
*/
|
|
157
143
|
includeLiterals = false;
|
|
158
144
|
/**
|
|
159
|
-
*
|
|
145
|
+
* Shows the mask on focus when the value is empty.
|
|
160
146
|
*/
|
|
161
147
|
maskOnFocus = false;
|
|
162
148
|
/**
|
|
163
|
-
*
|
|
164
|
-
* ([see example]({% slug validation_maskedtextbox %})).
|
|
149
|
+
* Enables the built-in mask validator when you set it to `true` ([see example]({% slug validation_maskedtextbox %})).
|
|
165
150
|
* @default true
|
|
166
151
|
*/
|
|
167
152
|
maskValidation = true;
|
|
168
153
|
/**
|
|
169
|
-
*
|
|
154
|
+
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
|
|
170
155
|
*/
|
|
171
156
|
tabindex = 0;
|
|
172
157
|
/**
|
|
@@ -179,7 +164,8 @@ export class MaskedTextBoxComponent {
|
|
|
179
164
|
return this.tabindex;
|
|
180
165
|
}
|
|
181
166
|
/**
|
|
182
|
-
* Sets
|
|
167
|
+
* Sets HTML attributes for the inner input element.
|
|
168
|
+
* You cannot change attributes that are essential for component functionality.
|
|
183
169
|
*/
|
|
184
170
|
set inputAttributes(attributes) {
|
|
185
171
|
if (isObjectPresent(this.parsedAttributes)) {
|
|
@@ -215,57 +201,29 @@ export class MaskedTextBoxComponent {
|
|
|
215
201
|
};
|
|
216
202
|
}
|
|
217
203
|
/**
|
|
218
|
-
* Fires
|
|
204
|
+
* Fires when the MaskedTextBox gets focused.
|
|
219
205
|
*
|
|
220
|
-
*
|
|
206
|
+
* To subscribe programmatically, use the `onFocus` property.
|
|
221
207
|
*
|
|
222
|
-
* @example
|
|
223
|
-
* ```ts-no-run
|
|
224
|
-
* _@Component({
|
|
225
|
-
* selector: 'my-app',
|
|
226
|
-
* template: `
|
|
227
|
-
* <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
|
|
228
|
-
* `
|
|
229
|
-
* })
|
|
230
|
-
* class AppComponent {
|
|
231
|
-
* public handleFocus(): void {
|
|
232
|
-
* console.log("Component is focused");
|
|
233
|
-
* }
|
|
234
|
-
* }
|
|
235
|
-
* ```
|
|
236
208
|
*/
|
|
237
209
|
onFocus = new EventEmitter();
|
|
238
210
|
/**
|
|
239
|
-
* Fires
|
|
211
|
+
* Fires when the MaskedTextBox gets blurred.
|
|
240
212
|
*
|
|
241
|
-
*
|
|
213
|
+
* To subscribe programmatically, use the `onBlur` property.
|
|
242
214
|
*
|
|
243
|
-
* @example
|
|
244
|
-
* ```ts-no-run
|
|
245
|
-
* _@Component({
|
|
246
|
-
* selector: 'my-app',
|
|
247
|
-
* template: `
|
|
248
|
-
* <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
|
|
249
|
-
* `
|
|
250
|
-
* })
|
|
251
|
-
* class AppComponent {
|
|
252
|
-
* public handleBlur(): void {
|
|
253
|
-
* console.log("Component is blurred");
|
|
254
|
-
* }
|
|
255
|
-
* }
|
|
256
|
-
* ```
|
|
257
215
|
*/
|
|
258
216
|
onBlur = new EventEmitter();
|
|
259
217
|
/**
|
|
260
|
-
* Fires
|
|
218
|
+
* Fires when the input element gets focused.
|
|
261
219
|
*/
|
|
262
220
|
inputFocus = new EventEmitter();
|
|
263
221
|
/**
|
|
264
|
-
* Fires
|
|
222
|
+
* Fires when the input element gets blurred.
|
|
265
223
|
*/
|
|
266
224
|
inputBlur = new EventEmitter();
|
|
267
225
|
/**
|
|
268
|
-
* Fires
|
|
226
|
+
* Fires when the value changes.
|
|
269
227
|
*/
|
|
270
228
|
valueChange = new EventEmitter();
|
|
271
229
|
direction;
|
|
@@ -274,7 +232,7 @@ export class MaskedTextBoxComponent {
|
|
|
274
232
|
return this.disabled;
|
|
275
233
|
}
|
|
276
234
|
/**
|
|
277
|
-
*
|
|
235
|
+
* Returns the `ElementRef` of the visible `input` element.
|
|
278
236
|
*/
|
|
279
237
|
input;
|
|
280
238
|
/**
|
|
@@ -10,34 +10,23 @@ import * as i1 from "./maskedtextbox/maskedtextbox.component";
|
|
|
10
10
|
import * as i2 from "@progress/kendo-angular-common";
|
|
11
11
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
14
|
-
* definition for the MaskedTextBox component.
|
|
13
|
+
* Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the MaskedTextBox component.
|
|
15
14
|
*
|
|
16
|
-
*
|
|
15
|
+
* Use this module to add the MaskedTextBox component to your NgModule-based Angular application.
|
|
17
16
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```typescript
|
|
20
19
|
* import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
|
|
21
|
-
*
|
|
22
|
-
* // The browser platform with a compiler
|
|
23
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
24
|
-
*
|
|
25
20
|
* import { NgModule } from '@angular/core';
|
|
26
|
-
*
|
|
27
|
-
* // Import the app component
|
|
21
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
28
22
|
* import { AppComponent } from './app.component';
|
|
29
23
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* bootstrap: [AppComponent]
|
|
24
|
+
* @NgModule({
|
|
25
|
+
* declarations: [AppComponent],
|
|
26
|
+
* imports: [BrowserModule, MaskedTextBoxModule],
|
|
27
|
+
* bootstrap: [AppComponent]
|
|
35
28
|
* })
|
|
36
29
|
* export class AppModule {}
|
|
37
|
-
*
|
|
38
|
-
* // Compile and launch the module
|
|
39
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
40
|
-
*
|
|
41
30
|
* ```
|
|
42
31
|
*/
|
|
43
32
|
export class MaskedTextBoxModule {
|
|
@@ -8,7 +8,19 @@ import { NumericTextBoxMessages } from './messages';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Overrides the default messages of the NumericTextBox component.
|
|
12
|
+
*
|
|
13
|
+
* Use this component to provide custom messages for the NumericTextBox.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-numerictextbox>
|
|
18
|
+
* <kendo-numerictextbox-messages
|
|
19
|
+
* [increment]="'Custom Increment Message'"
|
|
20
|
+
* [decrement]="'Custom Decrement Message'">
|
|
21
|
+
* </kendo-numerictextbox-messages>
|
|
22
|
+
* <kendo-numerictextbox>
|
|
23
|
+
* ```
|
|
12
24
|
*/
|
|
13
25
|
export class NumericTextBoxCustomMessagesComponent extends NumericTextBoxMessages {
|
|
14
26
|
service;
|
|
@@ -10,11 +10,11 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
*/
|
|
11
11
|
export class NumericTextBoxMessages extends ComponentMessages {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Sets the title of the **Decrement** button in the NumericTextBox.
|
|
14
14
|
*/
|
|
15
15
|
decrement;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Sets the title of the **Increment** button in the NumericTextBox.
|
|
18
18
|
*/
|
|
19
19
|
increment;
|
|
20
20
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -41,6 +41,16 @@ const DEFAULT_ROUNDED = 'medium';
|
|
|
41
41
|
const DEFAULT_FILL_MODE = 'solid';
|
|
42
42
|
/**
|
|
43
43
|
* Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
|
|
44
|
+
*
|
|
45
|
+
* Use this component to allow users to input numeric values.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```html
|
|
49
|
+
* <kendo-numerictextbox [(ngModel)]="value"></kendo-numerictextbox>
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* @remarks
|
|
53
|
+
* Supported children components are: {@link NumericTextBoxCustomMessagesComponent}.
|
|
44
54
|
*/
|
|
45
55
|
export class NumericTextBoxComponent {
|
|
46
56
|
intl;
|
|
@@ -55,28 +65,29 @@ export class NumericTextBoxComponent {
|
|
|
55
65
|
*/
|
|
56
66
|
focusableId = `k-${guid()}`;
|
|
57
67
|
/**
|
|
58
|
-
*
|
|
68
|
+
* When `true`, disables the `NumericTextBox`.
|
|
69
|
+
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
|
|
70
|
+
*
|
|
71
|
+
* @default false
|
|
59
72
|
*/
|
|
60
73
|
disabled = false;
|
|
61
74
|
/**
|
|
62
|
-
*
|
|
75
|
+
* When `true`, makes the NumericTextBox read-only.
|
|
63
76
|
*
|
|
64
77
|
* @default false
|
|
65
78
|
*/
|
|
66
79
|
readonly = false;
|
|
67
80
|
/**
|
|
68
|
-
* Sets the title of the
|
|
81
|
+
* Sets the `title` attribute of the input element.
|
|
69
82
|
*/
|
|
70
83
|
title = '';
|
|
71
84
|
/**
|
|
72
|
-
*
|
|
73
|
-
* ([see example]({% slug precision_numerictextbox %})).
|
|
85
|
+
* When `true`, the value is automatically corrected based on the minimum and maximum values ([see example]({% slug precision_numerictextbox %})).
|
|
74
86
|
*/
|
|
75
87
|
autoCorrect = false;
|
|
76
88
|
/**
|
|
77
|
-
* Specifies the number format
|
|
78
|
-
*
|
|
79
|
-
* If `format` is set to `null` or `undefined`, the default format will be used.
|
|
89
|
+
* Specifies the number format used when the NumericTextBox is not focused ([see example]({% slug formats_numerictextbox %})).
|
|
90
|
+
* If `format` is `null` or `undefined`, the default format is used.
|
|
80
91
|
*/
|
|
81
92
|
get format() {
|
|
82
93
|
const format = this._format;
|
|
@@ -86,43 +97,41 @@ export class NumericTextBoxComponent {
|
|
|
86
97
|
this._format = value;
|
|
87
98
|
}
|
|
88
99
|
/**
|
|
89
|
-
*
|
|
90
|
-
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
100
|
+
* Sets the maximum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
91
101
|
*/
|
|
92
102
|
max;
|
|
93
103
|
/**
|
|
94
|
-
*
|
|
95
|
-
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
104
|
+
* Sets the minimum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
96
105
|
*/
|
|
97
106
|
min;
|
|
98
107
|
/**
|
|
99
|
-
* Specifies the number of decimals
|
|
100
|
-
* ([see example]({% slug precision_numerictextbox %})).
|
|
108
|
+
* Specifies the number of decimals the user can enter when the input is focused ([see example]({% slug precision_numerictextbox %})).
|
|
101
109
|
*/
|
|
102
110
|
decimals = null;
|
|
103
111
|
/**
|
|
104
|
-
*
|
|
112
|
+
* Sets the input placeholder.
|
|
105
113
|
*/
|
|
106
114
|
placeholder;
|
|
107
115
|
/**
|
|
108
|
-
* Specifies the value
|
|
109
|
-
*
|
|
116
|
+
* Specifies the value used to increment or decrement the component value ([see example]({% slug predefinedsteps_numerictextbox %})).
|
|
117
|
+
*
|
|
118
|
+
* @default 1
|
|
110
119
|
*/
|
|
111
120
|
step = 1;
|
|
112
121
|
/**
|
|
113
|
-
*
|
|
114
|
-
*
|
|
122
|
+
* When `true`, renders the **Up** and **Down** spin buttons ([see example]({% slug spinbuttons_numerictextbox %})).
|
|
123
|
+
*
|
|
124
|
+
* @default true
|
|
115
125
|
*/
|
|
116
126
|
spinners = true;
|
|
117
127
|
/**
|
|
118
|
-
*
|
|
128
|
+
* Enforces the built-in minimum and maximum validators during form validation.
|
|
119
129
|
*
|
|
120
|
-
*
|
|
121
|
-
* > to `false`, the built-in Angular validators will be executed.
|
|
130
|
+
* @default true
|
|
122
131
|
*/
|
|
123
132
|
rangeValidation = true;
|
|
124
133
|
/**
|
|
125
|
-
*
|
|
134
|
+
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
126
135
|
*/
|
|
127
136
|
tabindex = 0;
|
|
128
137
|
/**
|
|
@@ -135,34 +144,31 @@ export class NumericTextBoxComponent {
|
|
|
135
144
|
return this.tabindex;
|
|
136
145
|
}
|
|
137
146
|
/**
|
|
138
|
-
*
|
|
147
|
+
* When `true`, enables changing the value with the mouse wheel.
|
|
139
148
|
*
|
|
140
149
|
* @default true
|
|
141
150
|
*/
|
|
142
151
|
changeValueOnScroll = true;
|
|
143
152
|
/**
|
|
144
|
-
*
|
|
153
|
+
* When `true`, enables selecting the entire value on click.
|
|
154
|
+
*
|
|
155
|
+
* @default true
|
|
145
156
|
*/
|
|
146
157
|
selectOnFocus = true;
|
|
147
158
|
/**
|
|
148
|
-
*
|
|
149
|
-
* ([see example]({% slug formats_numerictextbox %})).
|
|
159
|
+
* Sets the value of the NumericTextBox ([see example]({% slug formats_numerictextbox %})).
|
|
150
160
|
*/
|
|
151
161
|
value = null;
|
|
152
162
|
/**
|
|
153
|
-
*
|
|
154
|
-
* The locale-specific decimal separator and negative sign (`-`)
|
|
155
|
-
* The `maxlength`
|
|
163
|
+
* Sets the maximum number of characters the user can type or paste in the input.
|
|
164
|
+
* The locale-specific decimal separator and negative sign (`-`) count toward the length.
|
|
165
|
+
* The `maxlength` does not apply to the formatted value when the component is not focused.
|
|
156
166
|
*/
|
|
157
167
|
maxlength;
|
|
158
168
|
/**
|
|
159
|
-
*
|
|
160
|
-
*
|
|
161
|
-
*
|
|
162
|
-
* * `small`
|
|
163
|
-
* * `medium` (default)
|
|
164
|
-
* * `large`
|
|
165
|
-
* * `none`
|
|
169
|
+
* Sets the padding of the internal input element ([see example]({% slug appearance_numerictextbox %}#toc-size)).
|
|
170
|
+
*
|
|
171
|
+
* @default 'medium'
|
|
166
172
|
*/
|
|
167
173
|
set size(size) {
|
|
168
174
|
const newSize = size ? size : DEFAULT_SIZE;
|
|
@@ -173,13 +179,9 @@ export class NumericTextBoxComponent {
|
|
|
173
179
|
return this._size;
|
|
174
180
|
}
|
|
175
181
|
/**
|
|
176
|
-
*
|
|
177
|
-
*
|
|
178
|
-
*
|
|
179
|
-
* * `small`
|
|
180
|
-
* * `medium` (default)
|
|
181
|
-
* * `large`
|
|
182
|
-
* * `none`
|
|
182
|
+
* Sets the border radius of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-roundness)).
|
|
183
|
+
*
|
|
184
|
+
* @default 'medium'
|
|
183
185
|
*/
|
|
184
186
|
set rounded(rounded) {
|
|
185
187
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
|
@@ -190,13 +192,9 @@ export class NumericTextBoxComponent {
|
|
|
190
192
|
return this._rounded;
|
|
191
193
|
}
|
|
192
194
|
/**
|
|
193
|
-
*
|
|
194
|
-
*
|
|
195
|
-
*
|
|
196
|
-
* * `flat`
|
|
197
|
-
* * `solid` (default)
|
|
198
|
-
* * `outline`
|
|
199
|
-
* * `none`
|
|
195
|
+
* Sets the background and border styles of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
|
|
196
|
+
*
|
|
197
|
+
* @default 'solid'
|
|
200
198
|
*/
|
|
201
199
|
set fillMode(fillMode) {
|
|
202
200
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
@@ -207,7 +205,8 @@ export class NumericTextBoxComponent {
|
|
|
207
205
|
return this._fillMode;
|
|
208
206
|
}
|
|
209
207
|
/**
|
|
210
|
-
* Sets
|
|
208
|
+
* Sets HTML attributes on the inner input element.
|
|
209
|
+
* The component ignores attributes that are essential for its functionality.
|
|
211
210
|
*/
|
|
212
211
|
set inputAttributes(attributes) {
|
|
213
212
|
if (isObjectPresent(this.parsedAttributes)) {
|
|
@@ -223,23 +222,23 @@ export class NumericTextBoxComponent {
|
|
|
223
222
|
return this._inputAttributes;
|
|
224
223
|
}
|
|
225
224
|
/**
|
|
226
|
-
* Fires
|
|
225
|
+
* Fires when the user selects a new value ([see example](slug:events_numerictextbox)).
|
|
227
226
|
*/
|
|
228
227
|
valueChange = new EventEmitter();
|
|
229
228
|
/**
|
|
230
|
-
* Fires
|
|
229
|
+
* Fires when the NumericTextBox element is focused ([see example](slug:events_numerictextbox)).
|
|
231
230
|
*/
|
|
232
231
|
onFocus = new EventEmitter();
|
|
233
232
|
/**
|
|
234
|
-
* Fires
|
|
233
|
+
* Fires when the `NumericTextBox` component gets blurred ([see example](slug:events_numerictextbox)).
|
|
235
234
|
*/
|
|
236
235
|
onBlur = new EventEmitter();
|
|
237
236
|
/**
|
|
238
|
-
* Fires
|
|
237
|
+
* Fires when the input element is focused.
|
|
239
238
|
*/
|
|
240
239
|
inputFocus = new EventEmitter();
|
|
241
240
|
/**
|
|
242
|
-
* Fires
|
|
241
|
+
* Fires when the input element gets blurred.
|
|
243
242
|
*/
|
|
244
243
|
inputBlur = new EventEmitter();
|
|
245
244
|
/**
|
|
@@ -455,18 +454,6 @@ export class NumericTextBoxComponent {
|
|
|
455
454
|
}
|
|
456
455
|
/**
|
|
457
456
|
* Focuses the NumericTextBox.
|
|
458
|
-
*
|
|
459
|
-
* @example
|
|
460
|
-
* ```ts-no-run
|
|
461
|
-
* _@Component({
|
|
462
|
-
* selector: 'my-app',
|
|
463
|
-
* template: `
|
|
464
|
-
* <button (click)="numerictextbox.focus()">Focus NumericTextBox</button>
|
|
465
|
-
* <kendo-numerictextbox #numerictextbox></kendo-numerictextbox>
|
|
466
|
-
* `
|
|
467
|
-
* })
|
|
468
|
-
* class AppComponent { }
|
|
469
|
-
* ```
|
|
470
457
|
*/
|
|
471
458
|
focus() {
|
|
472
459
|
invokeElementMethod(this.numericInput, 'focus');
|
|
@@ -478,7 +465,7 @@ export class NumericTextBoxComponent {
|
|
|
478
465
|
invokeElementMethod(this.numericInput, 'blur');
|
|
479
466
|
}
|
|
480
467
|
/**
|
|
481
|
-
* Notifies the
|
|
468
|
+
* Notifies the NumericTextBoxComponent that the input value should be changed.
|
|
482
469
|
* Can be used to update the input after setting the component properties directly.
|
|
483
470
|
*/
|
|
484
471
|
notifyValueChange() {
|
|
@@ -12,34 +12,23 @@ import * as i2 from "./numerictextbox/localization/custom-messages.component";
|
|
|
12
12
|
import * as i3 from "@progress/kendo-angular-common";
|
|
13
13
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
* definition for the NumericTextBox component.
|
|
15
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the NumericTextBox component.
|
|
17
16
|
*
|
|
18
|
-
*
|
|
17
|
+
* Use this module to add the NumericTextBox component to your NgModule-based Angular application.
|
|
19
18
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```typescript
|
|
22
21
|
* import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
|
|
23
|
-
*
|
|
24
|
-
* // The browser platform with a compiler
|
|
25
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
26
|
-
*
|
|
27
22
|
* import { NgModule } from '@angular/core';
|
|
28
|
-
*
|
|
29
|
-
* // Import the app component
|
|
23
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
30
24
|
* import { AppComponent } from './app.component';
|
|
31
25
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
* bootstrap: [AppComponent]
|
|
26
|
+
* @NgModule({
|
|
27
|
+
* declarations: [AppComponent],
|
|
28
|
+
* imports: [BrowserModule, NumericTextBoxModule],
|
|
29
|
+
* bootstrap: [AppComponent]
|
|
37
30
|
* })
|
|
38
31
|
* export class AppModule {}
|
|
39
|
-
*
|
|
40
|
-
* // Compile and launch the module
|
|
41
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
42
|
-
*
|
|
43
32
|
* ```
|
|
44
33
|
*/
|
|
45
34
|
export class NumericTextBoxModule {
|