@progress/kendo-angular-inputs 19.1.1-develop.2 → 19.1.2-develop.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
|
@@ -14,6 +14,16 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
|
14
14
|
import * as i0 from "@angular/core";
|
|
15
15
|
/**
|
|
16
16
|
* Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
|
|
17
|
+
*
|
|
18
|
+
* Use this component to allow users to input numeric values.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```html
|
|
22
|
+
* <kendo-numerictextbox [(ngModel)]="value"></kendo-numerictextbox>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @remarks
|
|
26
|
+
* Supported children components are: {@link NumericTextBoxCustomMessagesComponent}.
|
|
17
27
|
*/
|
|
18
28
|
export declare class NumericTextBoxComponent implements ControlValueAccessor, OnChanges, OnDestroy, Validator {
|
|
19
29
|
private intl;
|
|
@@ -28,69 +38,68 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
28
38
|
*/
|
|
29
39
|
focusableId: string;
|
|
30
40
|
/**
|
|
31
|
-
*
|
|
41
|
+
* When `true`, disables the `NumericTextBox`.
|
|
42
|
+
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
|
|
43
|
+
*
|
|
44
|
+
* @default false
|
|
32
45
|
*/
|
|
33
46
|
disabled: boolean;
|
|
34
47
|
/**
|
|
35
|
-
*
|
|
48
|
+
* When `true`, makes the NumericTextBox read-only.
|
|
36
49
|
*
|
|
37
50
|
* @default false
|
|
38
51
|
*/
|
|
39
52
|
readonly: boolean;
|
|
40
53
|
/**
|
|
41
|
-
* Sets the title of the
|
|
54
|
+
* Sets the `title` attribute of the input element.
|
|
42
55
|
*/
|
|
43
56
|
title: string;
|
|
44
57
|
/**
|
|
45
|
-
*
|
|
46
|
-
* ([see example]({% slug precision_numerictextbox %})).
|
|
58
|
+
* When `true`, the value is automatically corrected based on the minimum and maximum values ([see example]({% slug precision_numerictextbox %})).
|
|
47
59
|
*/
|
|
48
60
|
autoCorrect: boolean;
|
|
49
61
|
/**
|
|
50
|
-
* Specifies the number format
|
|
51
|
-
*
|
|
52
|
-
* If `format` is set to `null` or `undefined`, the default format will be used.
|
|
62
|
+
* Specifies the number format used when the NumericTextBox is not focused ([see example]({% slug formats_numerictextbox %})).
|
|
63
|
+
* If `format` is `null` or `undefined`, the default format is used.
|
|
53
64
|
*/
|
|
54
65
|
get format(): string | NumberFormatOptions | null | undefined;
|
|
55
66
|
set format(value: string | NumberFormatOptions | null | undefined);
|
|
56
67
|
/**
|
|
57
|
-
*
|
|
58
|
-
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
68
|
+
* Sets the maximum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
59
69
|
*/
|
|
60
70
|
max: number;
|
|
61
71
|
/**
|
|
62
|
-
*
|
|
63
|
-
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
72
|
+
* Sets the minimum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
|
|
64
73
|
*/
|
|
65
74
|
min: number;
|
|
66
75
|
/**
|
|
67
|
-
* Specifies the number of decimals
|
|
68
|
-
* ([see example]({% slug precision_numerictextbox %})).
|
|
76
|
+
* Specifies the number of decimals the user can enter when the input is focused ([see example]({% slug precision_numerictextbox %})).
|
|
69
77
|
*/
|
|
70
78
|
decimals: number;
|
|
71
79
|
/**
|
|
72
|
-
*
|
|
80
|
+
* Sets the input placeholder.
|
|
73
81
|
*/
|
|
74
82
|
placeholder: string;
|
|
75
83
|
/**
|
|
76
|
-
* Specifies the value
|
|
77
|
-
*
|
|
84
|
+
* Specifies the value used to increment or decrement the component value ([see example]({% slug predefinedsteps_numerictextbox %})).
|
|
85
|
+
*
|
|
86
|
+
* @default 1
|
|
78
87
|
*/
|
|
79
88
|
step: number;
|
|
80
89
|
/**
|
|
81
|
-
*
|
|
82
|
-
*
|
|
90
|
+
* When `true`, renders the **Up** and **Down** spin buttons ([see example]({% slug spinbuttons_numerictextbox %})).
|
|
91
|
+
*
|
|
92
|
+
* @default true
|
|
83
93
|
*/
|
|
84
94
|
spinners: boolean;
|
|
85
95
|
/**
|
|
86
|
-
*
|
|
96
|
+
* Enforces the built-in minimum and maximum validators during form validation.
|
|
87
97
|
*
|
|
88
|
-
*
|
|
89
|
-
* > to `false`, the built-in Angular validators will be executed.
|
|
98
|
+
* @default true
|
|
90
99
|
*/
|
|
91
100
|
rangeValidation: boolean;
|
|
92
101
|
/**
|
|
93
|
-
*
|
|
102
|
+
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
94
103
|
*/
|
|
95
104
|
tabindex: number;
|
|
96
105
|
/**
|
|
@@ -99,61 +108,51 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
99
108
|
set tabIndex(tabIndex: number);
|
|
100
109
|
get tabIndex(): number;
|
|
101
110
|
/**
|
|
102
|
-
*
|
|
111
|
+
* When `true`, enables changing the value with the mouse wheel.
|
|
103
112
|
*
|
|
104
113
|
* @default true
|
|
105
114
|
*/
|
|
106
115
|
changeValueOnScroll: boolean;
|
|
107
116
|
/**
|
|
108
|
-
*
|
|
117
|
+
* When `true`, enables selecting the entire value on click.
|
|
118
|
+
*
|
|
119
|
+
* @default true
|
|
109
120
|
*/
|
|
110
121
|
selectOnFocus: boolean;
|
|
111
122
|
/**
|
|
112
|
-
*
|
|
113
|
-
* ([see example]({% slug formats_numerictextbox %})).
|
|
123
|
+
* Sets the value of the NumericTextBox ([see example]({% slug formats_numerictextbox %})).
|
|
114
124
|
*/
|
|
115
125
|
value: number;
|
|
116
126
|
/**
|
|
117
|
-
*
|
|
118
|
-
* The locale-specific decimal separator and negative sign (`-`)
|
|
119
|
-
* The `maxlength`
|
|
127
|
+
* Sets the maximum number of characters the user can type or paste in the input.
|
|
128
|
+
* The locale-specific decimal separator and negative sign (`-`) count toward the length.
|
|
129
|
+
* The `maxlength` does not apply to the formatted value when the component is not focused.
|
|
120
130
|
*/
|
|
121
131
|
maxlength: number;
|
|
122
132
|
/**
|
|
123
|
-
*
|
|
124
|
-
*
|
|
125
|
-
*
|
|
126
|
-
* * `small`
|
|
127
|
-
* * `medium` (default)
|
|
128
|
-
* * `large`
|
|
129
|
-
* * `none`
|
|
133
|
+
* Sets the padding of the internal input element ([see example]({% slug appearance_numerictextbox %}#toc-size)).
|
|
134
|
+
*
|
|
135
|
+
* @default 'medium'
|
|
130
136
|
*/
|
|
131
137
|
set size(size: InputSize);
|
|
132
138
|
get size(): InputSize;
|
|
133
139
|
/**
|
|
134
|
-
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
* * `small`
|
|
138
|
-
* * `medium` (default)
|
|
139
|
-
* * `large`
|
|
140
|
-
* * `none`
|
|
140
|
+
* Sets the border radius of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-roundness)).
|
|
141
|
+
*
|
|
142
|
+
* @default 'medium'
|
|
141
143
|
*/
|
|
142
144
|
set rounded(rounded: InputRounded);
|
|
143
145
|
get rounded(): InputRounded;
|
|
144
146
|
/**
|
|
145
|
-
*
|
|
146
|
-
*
|
|
147
|
-
*
|
|
148
|
-
* * `flat`
|
|
149
|
-
* * `solid` (default)
|
|
150
|
-
* * `outline`
|
|
151
|
-
* * `none`
|
|
147
|
+
* Sets the background and border styles of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
|
|
148
|
+
*
|
|
149
|
+
* @default 'solid'
|
|
152
150
|
*/
|
|
153
151
|
set fillMode(fillMode: InputFillMode);
|
|
154
152
|
get fillMode(): InputFillMode;
|
|
155
153
|
/**
|
|
156
|
-
* Sets
|
|
154
|
+
* Sets HTML attributes on the inner input element.
|
|
155
|
+
* The component ignores attributes that are essential for its functionality.
|
|
157
156
|
*/
|
|
158
157
|
set inputAttributes(attributes: {
|
|
159
158
|
[key: string]: string;
|
|
@@ -162,23 +161,23 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
162
161
|
[key: string]: string;
|
|
163
162
|
};
|
|
164
163
|
/**
|
|
165
|
-
* Fires
|
|
164
|
+
* Fires when the user selects a new value ([see example](slug:events_numerictextbox)).
|
|
166
165
|
*/
|
|
167
166
|
valueChange: EventEmitter<any>;
|
|
168
167
|
/**
|
|
169
|
-
* Fires
|
|
168
|
+
* Fires when the NumericTextBox element is focused ([see example](slug:events_numerictextbox)).
|
|
170
169
|
*/
|
|
171
170
|
onFocus: EventEmitter<any>;
|
|
172
171
|
/**
|
|
173
|
-
* Fires
|
|
172
|
+
* Fires when the `NumericTextBox` component gets blurred ([see example](slug:events_numerictextbox)).
|
|
174
173
|
*/
|
|
175
174
|
onBlur: EventEmitter<any>;
|
|
176
175
|
/**
|
|
177
|
-
* Fires
|
|
176
|
+
* Fires when the input element is focused.
|
|
178
177
|
*/
|
|
179
178
|
inputFocus: EventEmitter<any>;
|
|
180
179
|
/**
|
|
181
|
-
* Fires
|
|
180
|
+
* Fires when the input element gets blurred.
|
|
182
181
|
*/
|
|
183
182
|
inputBlur: EventEmitter<any>;
|
|
184
183
|
/**
|
|
@@ -291,18 +290,6 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
291
290
|
setDisabledState(isDisabled: boolean): void;
|
|
292
291
|
/**
|
|
293
292
|
* Focuses the NumericTextBox.
|
|
294
|
-
*
|
|
295
|
-
* @example
|
|
296
|
-
* ```ts-no-run
|
|
297
|
-
* _@Component({
|
|
298
|
-
* selector: 'my-app',
|
|
299
|
-
* template: `
|
|
300
|
-
* <button (click)="numerictextbox.focus()">Focus NumericTextBox</button>
|
|
301
|
-
* <kendo-numerictextbox #numerictextbox></kendo-numerictextbox>
|
|
302
|
-
* `
|
|
303
|
-
* })
|
|
304
|
-
* class AppComponent { }
|
|
305
|
-
* ```
|
|
306
293
|
*/
|
|
307
294
|
focus(): void;
|
|
308
295
|
/**
|
|
@@ -310,7 +297,7 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
310
297
|
*/
|
|
311
298
|
blur(): void;
|
|
312
299
|
/**
|
|
313
|
-
* Notifies the
|
|
300
|
+
* Notifies the NumericTextBoxComponent that the input value should be changed.
|
|
314
301
|
* Can be used to update the input after setting the component properties directly.
|
|
315
302
|
*/
|
|
316
303
|
notifyValueChange(): void;
|
|
@@ -7,34 +7,23 @@ import * as i1 from "./numerictextbox/numerictextbox.component";
|
|
|
7
7
|
import * as i2 from "./numerictextbox/localization/custom-messages.component";
|
|
8
8
|
import * as i3 from "@progress/kendo-angular-common";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
* definition for the NumericTextBox component.
|
|
10
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the NumericTextBox component.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
12
|
+
* Use this module to add the NumericTextBox component to your NgModule-based Angular application.
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```typescript
|
|
17
16
|
* import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
|
|
18
|
-
*
|
|
19
|
-
* // The browser platform with a compiler
|
|
20
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
21
|
-
*
|
|
22
17
|
* import { NgModule } from '@angular/core';
|
|
23
|
-
*
|
|
24
|
-
* // Import the app component
|
|
18
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
25
19
|
* import { AppComponent } from './app.component';
|
|
26
20
|
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* bootstrap: [AppComponent]
|
|
21
|
+
* @NgModule({
|
|
22
|
+
* declarations: [AppComponent],
|
|
23
|
+
* imports: [BrowserModule, NumericTextBoxModule],
|
|
24
|
+
* bootstrap: [AppComponent]
|
|
32
25
|
* })
|
|
33
26
|
* export class AppModule {}
|
|
34
|
-
*
|
|
35
|
-
* // Compile and launch the module
|
|
36
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
37
|
-
*
|
|
38
27
|
* ```
|
|
39
28
|
*/
|
|
40
29
|
export declare class NumericTextBoxModule {
|
package/otp.module.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "./otpinput/otpinput.component";
|
|
7
|
+
import * as i2 from "./otpinput/localization/custom-messages.component";
|
|
8
|
+
/**
|
|
9
|
+
* Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the OTP Input component.
|
|
10
|
+
*
|
|
11
|
+
* Use this module to add the OTP Input component to your NgModule-based Angular application.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```typescript
|
|
15
|
+
* import { OTPInputModule } from '@progress/kendo-angular-inputs';
|
|
16
|
+
* import { NgModule } from '@angular/core';
|
|
17
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
18
|
+
* import { AppComponent } from './app.component';
|
|
19
|
+
*
|
|
20
|
+
* @NgModule({
|
|
21
|
+
* declarations: [AppComponent],
|
|
22
|
+
* imports: [BrowserModule, OTPInputModule],
|
|
23
|
+
* bootstrap: [AppComponent]
|
|
24
|
+
* })
|
|
25
|
+
* export class AppModule {}
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare class OTPInputModule {
|
|
29
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<OTPInputModule, never>;
|
|
30
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<OTPInputModule, never, [typeof i1.OTPInputComponent, typeof i2.OTPInputCustomMessagesComponent], [typeof i1.OTPInputComponent, typeof i2.OTPInputCustomMessagesComponent]>;
|
|
31
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<OTPInputModule>;
|
|
32
|
+
}
|
|
@@ -6,7 +6,9 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
6
6
|
import { OTPInputMessages } from './messages';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Provides custom messages for the OTP Input component.
|
|
10
|
+
*
|
|
11
|
+
* Use this component to override the default messages.
|
|
10
12
|
*/
|
|
11
13
|
export declare class OTPInputCustomMessagesComponent extends OTPInputMessages {
|
|
12
14
|
protected service: LocalizationService;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Represents the
|
|
6
|
+
* Represents the input `type` options for the OTP Input.
|
|
7
7
|
*
|
|
8
|
-
* @default
|
|
8
|
+
* @default 'text'
|
|
9
9
|
*/
|
|
10
10
|
export type OTPInputType = 'text' | 'password' | 'number';
|
|
@@ -4,15 +4,20 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { SVGIcon } from '@progress/kendo-angular-icons';
|
|
6
6
|
/**
|
|
7
|
-
* Represents the
|
|
7
|
+
* Represents the icon separator for the OTP Input.
|
|
8
|
+
*
|
|
9
|
+
* Use this interface to define a separator as an icon.
|
|
8
10
|
*/
|
|
9
11
|
export interface OTPSeparatorIcon {
|
|
10
12
|
/**
|
|
11
|
-
*
|
|
13
|
+
* Sets the type of the separator icon.
|
|
14
|
+
*
|
|
12
15
|
*/
|
|
13
16
|
type: 'svgIcon' | 'fontIcon' | 'iconClass';
|
|
14
17
|
/**
|
|
15
|
-
*
|
|
18
|
+
* Sets the icon to display as a separator.
|
|
19
|
+
*
|
|
20
|
+
* Use a string or an `SVGIcon`.
|
|
16
21
|
*/
|
|
17
22
|
value: string | SVGIcon;
|
|
18
23
|
}
|
|
@@ -10,6 +10,19 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
|
|
|
10
10
|
import { OTPInputType } from "./models/otpinput-type";
|
|
11
11
|
import { OTPSeparatorIcon } from "./models/separator-icon";
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
+
/**
|
|
14
|
+
* Represents the Kendo UI OTP Input component for Angular.
|
|
15
|
+
*
|
|
16
|
+
* Use the OTP Input to enter one-time passwords or verification codes.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <kendo-otpinput type="number" [(ngModel)]="otpValue"></kendo-otpinput>
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @remarks
|
|
24
|
+
* Supported children components are: {@link OTPInputCustomMessagesComponent}.
|
|
25
|
+
*/
|
|
13
26
|
export declare class OTPInputComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
|
|
14
27
|
hostElement: ElementRef;
|
|
15
28
|
private cdr;
|
|
@@ -18,97 +31,78 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
18
31
|
private localizationService;
|
|
19
32
|
private zone;
|
|
20
33
|
/**
|
|
21
|
-
*
|
|
34
|
+
* Sets the total number of input fields.
|
|
22
35
|
*
|
|
23
36
|
* @default 4
|
|
24
37
|
*/
|
|
25
38
|
set length(value: number);
|
|
26
39
|
get length(): number;
|
|
27
40
|
/**
|
|
28
|
-
*
|
|
41
|
+
* Sets the input type.
|
|
29
42
|
*
|
|
30
|
-
* * The possible values are:
|
|
31
|
-
* * `text` (default)
|
|
32
|
-
* * `number`
|
|
33
|
-
* * `password`
|
|
34
43
|
*
|
|
35
44
|
* @default 'text'
|
|
36
45
|
*/
|
|
37
46
|
type: OTPInputType;
|
|
38
47
|
/**
|
|
39
|
-
*
|
|
48
|
+
* Sets whether the input fields are separate or adjacent.
|
|
40
49
|
*
|
|
41
50
|
* @default true
|
|
42
51
|
*/
|
|
43
52
|
spacing: boolean;
|
|
44
53
|
/**
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
* > The configuration can only be applied when `groupLength` is set.
|
|
54
|
+
* Sets the separator between groups of input fields. You can use this only when `groupLength` is set.
|
|
48
55
|
*/
|
|
49
56
|
separator: string | OTPSeparatorIcon;
|
|
50
57
|
/**
|
|
51
|
-
*
|
|
58
|
+
* When `true`, disables the OTPInput.
|
|
52
59
|
*
|
|
53
60
|
* @default false
|
|
54
61
|
*/
|
|
55
62
|
disabled: boolean;
|
|
56
63
|
/**
|
|
57
|
-
*
|
|
64
|
+
* When `true`, sets the OTPInput to read-only mode.
|
|
58
65
|
*
|
|
59
66
|
* @default false
|
|
60
67
|
*/
|
|
61
68
|
readonly: boolean;
|
|
62
69
|
/**
|
|
63
|
-
*
|
|
70
|
+
* Sets the placeholder for the input fields.
|
|
64
71
|
*/
|
|
65
72
|
placeholder: string;
|
|
66
73
|
/**
|
|
67
|
-
*
|
|
74
|
+
* Sets the length of the groups. If you set a number, all groups have the same length. If you set an array, each group can have a different length.
|
|
68
75
|
*/
|
|
69
76
|
get groupLength(): number | Array<number>;
|
|
70
77
|
set groupLength(length: number | Array<number>);
|
|
71
78
|
/**
|
|
72
|
-
*
|
|
79
|
+
* Sets the value of the component. Unfilled input fields are represented with а space.
|
|
73
80
|
*/
|
|
74
81
|
get value(): string;
|
|
75
82
|
set value(input: string);
|
|
76
83
|
/**
|
|
77
|
-
*
|
|
84
|
+
* Sets the padding of the input fields.
|
|
78
85
|
*
|
|
79
|
-
*
|
|
80
|
-
* * `small`
|
|
81
|
-
* * `medium` (default)
|
|
82
|
-
* * `large`
|
|
83
|
-
* * `none`
|
|
86
|
+
* @default 'medium'
|
|
84
87
|
*/
|
|
85
88
|
set size(size: InputSize);
|
|
86
89
|
get size(): InputSize;
|
|
87
90
|
/**
|
|
88
|
-
*
|
|
91
|
+
* Sets the border radius of the OTP Input.
|
|
89
92
|
*
|
|
90
|
-
*
|
|
91
|
-
* * `small`
|
|
92
|
-
* * `medium` (default)
|
|
93
|
-
* * `large`
|
|
94
|
-
* * `full`
|
|
95
|
-
* * `none`
|
|
93
|
+
* @default 'medium'
|
|
96
94
|
*/
|
|
97
95
|
set rounded(rounded: InputRounded);
|
|
98
96
|
get rounded(): InputRounded;
|
|
99
97
|
/**
|
|
100
|
-
*
|
|
98
|
+
* Sets the background and border styles of the OTP Input.
|
|
101
99
|
*
|
|
102
|
-
*
|
|
103
|
-
* * `flat`
|
|
104
|
-
* * `solid` (default)
|
|
105
|
-
* * `outline`
|
|
106
|
-
* * `none`
|
|
100
|
+
* @default 'solid'
|
|
107
101
|
*/
|
|
108
102
|
set fillMode(fillMode: InputFillMode);
|
|
109
103
|
get fillMode(): InputFillMode;
|
|
110
104
|
/**
|
|
111
|
-
* Sets the HTML attributes of the inner
|
|
105
|
+
* Sets the HTML attributes of the inner input element. You cannot change attributes that are required for the component to work.
|
|
112
106
|
*/
|
|
113
107
|
set inputAttributes(attributes: {
|
|
114
108
|
[key: string]: string;
|
|
@@ -117,18 +111,17 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
117
111
|
[key: string]: string;
|
|
118
112
|
};
|
|
119
113
|
/**
|
|
120
|
-
* Fires
|
|
121
|
-
*
|
|
122
|
-
*
|
|
123
|
-
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
114
|
+
* Fires when the user changes the value.
|
|
115
|
+
*
|
|
116
|
+
* This event does not fire when you change the value programmatically or through form bindings.
|
|
124
117
|
*/
|
|
125
118
|
valueChange: EventEmitter<any>;
|
|
126
119
|
/**
|
|
127
|
-
* Fires
|
|
120
|
+
* Fires when the user focuses the OTP Input.
|
|
128
121
|
*/
|
|
129
122
|
onFocus: EventEmitter<any>;
|
|
130
123
|
/**
|
|
131
|
-
* Fires
|
|
124
|
+
* Fires when the user blurs the OTP Input.
|
|
132
125
|
*/
|
|
133
126
|
onBlur: EventEmitter<any>;
|
|
134
127
|
wrapperClass: boolean;
|
|
@@ -218,6 +211,8 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
218
211
|
*/
|
|
219
212
|
set isFocused(value: boolean);
|
|
220
213
|
/**
|
|
214
|
+
* Returns `true` if the component has groups.
|
|
215
|
+
*
|
|
221
216
|
* @hidden
|
|
222
217
|
*/
|
|
223
218
|
get hasGroups(): boolean;
|
|
@@ -246,7 +241,9 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
246
241
|
*/
|
|
247
242
|
fillInputs(text: string, start?: number, replaceLast?: boolean): void;
|
|
248
243
|
/**
|
|
249
|
-
* Focuses the OTP Input.
|
|
244
|
+
* Focuses the OTP Input at the specified index provided as an argument.
|
|
245
|
+
*
|
|
246
|
+
* @param index The index of the input to focus.
|
|
250
247
|
*/
|
|
251
248
|
focus(index?: number): void;
|
|
252
249
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "19.1.
|
|
3
|
+
"version": "19.1.2-develop.1",
|
|
4
4
|
"description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"package": {
|
|
29
29
|
"productName": "Kendo UI for Angular",
|
|
30
30
|
"productCode": "KENDOUIANGULAR",
|
|
31
|
-
"publishDate":
|
|
31
|
+
"publishDate": 1749804176,
|
|
32
32
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
@@ -40,20 +40,20 @@
|
|
|
40
40
|
"@angular/platform-browser": "16 - 20",
|
|
41
41
|
"@progress/kendo-drawing": "^1.21.0",
|
|
42
42
|
"@progress/kendo-licensing": "^1.5.0",
|
|
43
|
-
"@progress/kendo-angular-buttons": "19.1.
|
|
44
|
-
"@progress/kendo-angular-common": "19.1.
|
|
45
|
-
"@progress/kendo-angular-utils": "19.1.
|
|
46
|
-
"@progress/kendo-angular-navigation": "19.1.
|
|
47
|
-
"@progress/kendo-angular-dialog": "19.1.
|
|
48
|
-
"@progress/kendo-angular-intl": "19.1.
|
|
49
|
-
"@progress/kendo-angular-l10n": "19.1.
|
|
50
|
-
"@progress/kendo-angular-popup": "19.1.
|
|
51
|
-
"@progress/kendo-angular-icons": "19.1.
|
|
43
|
+
"@progress/kendo-angular-buttons": "19.1.2-develop.1",
|
|
44
|
+
"@progress/kendo-angular-common": "19.1.2-develop.1",
|
|
45
|
+
"@progress/kendo-angular-utils": "19.1.2-develop.1",
|
|
46
|
+
"@progress/kendo-angular-navigation": "19.1.2-develop.1",
|
|
47
|
+
"@progress/kendo-angular-dialog": "19.1.2-develop.1",
|
|
48
|
+
"@progress/kendo-angular-intl": "19.1.2-develop.1",
|
|
49
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.1",
|
|
50
|
+
"@progress/kendo-angular-popup": "19.1.2-develop.1",
|
|
51
|
+
"@progress/kendo-angular-icons": "19.1.2-develop.1",
|
|
52
52
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"tslib": "^2.3.1",
|
|
56
|
-
"@progress/kendo-angular-schematics": "19.1.
|
|
56
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.1",
|
|
57
57
|
"@progress/kendo-common": "^1.0.1",
|
|
58
58
|
"@progress/kendo-draggable": "^3.0.0",
|
|
59
59
|
"@progress/kendo-inputs-common": "^3.1.0"
|
|
@@ -7,6 +7,18 @@ import { ControlValueAccessor } from '@angular/forms';
|
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
|
+
/**
|
|
11
|
+
* Represents the Kendo UI RadioButton component.
|
|
12
|
+
* Use this component to create a styled radio button in your Angular application.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-radiobutton
|
|
17
|
+
* [checked]="true"
|
|
18
|
+
* (checkedChange)="onCheckedChange($event)">
|
|
19
|
+
* </kendo-radiobutton>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
10
22
|
export declare class RadioButtonComponent extends RadioCheckBoxBase implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
|
|
11
23
|
protected renderer: Renderer2;
|
|
12
24
|
hostElement: ElementRef;
|
|
@@ -23,12 +35,9 @@ export declare class RadioButtonComponent extends RadioCheckBoxBase implements C
|
|
|
23
35
|
*/
|
|
24
36
|
checked: boolean;
|
|
25
37
|
/**
|
|
26
|
-
* Fires
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
|
|
30
|
-
*
|
|
31
|
-
* Used to provide a two-way binding for the `checked` property.
|
|
38
|
+
* Fires when the checked state changes.
|
|
39
|
+
* The event does not fire when you change the state through `ngModel` or `formControl` bindings.
|
|
40
|
+
* Use this event for two-way binding of the `checked` property.
|
|
32
41
|
*/
|
|
33
42
|
checkedChange: EventEmitter<boolean>;
|
|
34
43
|
private subs;
|