Skip to content

Commit 268b6a6

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent d5063e4 commit 268b6a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+3597
-845
lines changed

Diff for: ‎docs-aspnet/_config.yml

+6-3
Original file line numberDiff line numberDiff line change
@@ -627,6 +627,9 @@ navigation:
627627
"*/orgchart":
628628
isNew: true
629629
title: "OrgChart"
630+
"*/otpinput":
631+
title: "OTPInput"
632+
isNew: true
630633
"html-helpers/interactivity/progressbar":
631634
title: "ProgressBar"
632635
"html-helpers/interactivity/circularprogressbar":
@@ -726,13 +729,13 @@ navigation:
726729
baseurl: /aspnet-core
727730

728731
## The Kendo UI version used
729-
cdnVersion: "2024.4.1112"
732+
cdnVersion: "2025.1.211"
730733

731734
## The themes CDN used
732-
themesCdnVersion: "10.0.1"
735+
themesCdnVersion: "10.2.0"
733736

734737
## The MVC Core version used
735-
mvcCoreVersion: "2024.4.1112"
738+
mvcCoreVersion: "2025.1.211"
736739

737740
productCode: UIASPCORE
738741

Diff for: ‎docs-aspnet/getting-started-core/first-steps-cli.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,9 @@ Install the appropriate [.Net Core SDK 2.0 or later](https://www.microsoft.com/n
151151
152152
## Adding Your License File
153153
154-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
154+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
155155
156-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
156+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
157157
158158
## Next Steps
159159

Diff for: ‎docs-aspnet/getting-started-core/first-steps-vs-extensions.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -315,9 +315,9 @@ Since both the Bootstrap and Default themes are Sass-based themes, no additional
315315

316316
## Adding Your License File
317317

318-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
318+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
319319

320-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
320+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}).
321321

322322
## Next Steps
323323

Diff for: ‎docs-aspnet/getting-started-core/first-steps.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,9 @@ Congratulations! You created a page that uses the [Telerik UI DatePicker]({% slu
236236

237237
## Adding Your License File
238238

239-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
239+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
240240

241-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
241+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
242242

243243
## Next Steps
244244

Diff for: ‎docs-aspnet/getting-started-mvc/first-steps.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,9 @@ Press `CTRL+F5` to build and run the application. You have a Grid and a DatePick
109109

110110
## Adding Your License File
111111

112-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
112+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
113113

114-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
114+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}).
115115

116116
## Next Steps
117117

Diff for: ‎docs-aspnet/getting-started-mvc/manual-setup.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@ Press `CTRL+F5` to build and run the application. As a result, the following sam
132132
133133
## Adding Your License File
134134
135-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
135+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
136136
137-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
137+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
138138
139139
## Next Steps
140140

Diff for: ‎docs-aspnet/getting-started-mvc/setup-with-nuget.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,9 @@ Press `CTRL+F5` to build and run the application. As a result, the following sam
169169
170170
## Adding Your License File
171171
172-
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
172+
Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
173173
174-
To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
174+
To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
175175
176176
## Next Steps
177177

Diff for: ‎docs-aspnet/html-helpers/editors/colorpicker/adaptive-mode.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Adaptive Mode
3+
page_title: Adaptive Mode
4+
description: "Learn how to configure the adaptive behavior of the the Telerik UI ColorPickеr component for {{ site.framework }}."
5+
slug: htmlhelpers_colorpicker_adaptive_mode_aspnetcore
6+
position: 9
7+
---
8+
9+
# Adaptive Mode
10+
11+
The Telerik UI for {{ site.framework }} ColorPicker supports an adaptive mode that renders a mobile-friendly popup. To enable the adaptive rendering mode, set the `AdaptiveMode()` property to `AdaptiveMode.Auto`.
12+
13+
The ColorPicker component automatically adapts to the current screen size and changes its rendering accordingly. On medium-sized screens, the suggestion list is displayed as docked to the bottom of the screen, while on smaller screens, it is rendered as a full-screen modal dialog. In all other scenarios, including when the `AdaptiveMode()` option is not specified or is set to its default value of `AdaptiveMode.None`, the standard popup is rendered docked to the input of the component.
14+
The adaptive mode changes the rendering of the ColorPicker popup element based on the screen resolution of the device (the horizontal value in `px`) with the following breakpoints:
15+
16+
* Small screens—up to 500 px.
17+
* Medium screens—between 501 px and 768 px.
18+
* Large screens—over 768 px.
19+
20+
21+
The following example demonstrates how to enable the adaptive mode of the ColorPicker by using the `AdaptiveMode()` option.
22+
23+
```HtmlHelper
24+
@(Html.Kendo().ColorPicker()
25+
.Name("colorpicker")
26+
.Input(false)
27+
.Preview(false)
28+
.Value("#8174F2")
29+
.AdaptiveMode(AdaptiveMode.Auto)
30+
)
31+
```
32+
{% if site.core %}
33+
```TagHelper
34+
@addTagHelper *, Kendo.Mvc
35+
36+
<kendo-colorpicker name="colorpicker"
37+
input="false"
38+
preview="false"
39+
value="#8174F2"
40+
adaptive-mode="AdaptiveMode.Auto">
41+
</kendo-colorpicker>
42+
```
43+
{% endif %}
44+
45+
## See Also
46+
47+
* [Using the ColorPicker in Adaptive Mode (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/adaptive-mode)
48+
* [Adaptive Rendering of the Components]({% slug adaptive_rendering%})
49+
* [Server-Side API of the ColorPicker HtmlHelper](/api/colorpicker)
50+
{% if site.core %}
51+
* [Server-Side API of the ColorPicker TagHelper](/api/taghelpers/colorpicker)
52+
{% endif %}

Diff for: ‎docs-aspnet/html-helpers/editors/colorpicker/overview.md

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ The following example demonstrates how to configure the tile size, columns, `Cha
9393
| [Formats]({% slug htmlhelpers_formats_colorpickerhelper_aspnetcore %})| Configure the ColorPicker input formats. |
9494
| [Palettes]({% slug palettes_colorpicker %})| Define a color palette that the user can pick from. |
9595
| [Events]({% slug events_colorpicker %})| The ColorPicker allows you to handle its events and implement any custom logic. |
96+
| [Adaptive Mode](% slug htmlhelpers_colorpicker_adaptive_mode_aspnetcore %)| The ColorPicker supports an adaptive mode that renders a mobile-friendly popup. |
9697

9798
## Next Steps
9899

Diff for: ‎docs-aspnet/html-helpers/editors/otpinput/accessibility/keyboard-navigation.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Learn how to use the keyboard navigation functionality of the Telerik OTPInput component for {{ site.framework }}."
5+
slug: keynav_otpinputhelper
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the OTPInput is always available.
12+
13+
The {{ site.product }} OTPInput supports the following keyboard shortcuts:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:---
17+
| `Tab` | Focuses the next input in the component.|
18+
| `Shift`+`Tab` | Focuses the previous input in the component.|
19+
| `Up/Down Arrows` | Navigates to the next/previous item when a panel is focused.|
20+
| `Right/Left Arrows` | Highlights the next/previous focusable input in the component.|
21+
| `Backspace` | Deletes the value of the focused input and moves the focus on the previous input.|
22+
| `Delete` | Deletes the value of the focused input.|
23+
24+
For a complete example, refer to the [demo on keyboard navigation of the OTPInput](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
25+
26+
## See Also
27+
28+
* [Keyboard Navigation by the OTPInput HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
29+
* [Server-Side API of the OTPInput HtmlHelper](/api/otpinput)
30+
{% if site.core %}
31+
* [Server-Side API of the OTPInput TagHelper](/api/taghelpers/otpinput)
32+
{% endif %}
33+
* [Client-Side API of the OTPInput](https://docs.telerik.com/kendo-ui/api/javascript/ui/otpinput)

Diff for: ‎docs-aspnet/html-helpers/editors/otpinput/accessibility/overview.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Overview
3+
page_title: OTPInput Documentation | OTPInput Accessibility
4+
description: "Get started with the {{ site.product }} OTPInput and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_otpinputhelper
6+
position: 1
7+
---
8+
9+
# OTPInput Accessibility
10+
11+
12+
13+
14+
15+
Out of the box, the Kendo UI for jQuery OTP provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
16+
17+
18+
The OTP is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
19+
20+
## WAI-ARIA
21+
22+
23+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
24+
25+
26+
No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
27+
28+
| Selector | Attribute | Usage |
29+
| -------- | --------- | ----- |
30+
| `.k-otp` | `role=group` | Sets the proper role for the OTP. |
31+
| `.k-otp>input` | `type=hidden` | The hidden input holding the OTP inputs value. |
32+
| | `aria-hidden=true` | Hides the hidden input from assistive technologies. |
33+
| `.k-otp-input .k-input-inner` | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
34+
| | `aria-required=true` | The attribute is rendered only when the OTP is in a `form` HTML element and announces the required state of the component. |
35+
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
36+
| | `autocomplete=off` | Sets the default autocomplete for the input. |
37+
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the OTP is in a form and announces the valid state of the component. |
38+
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the OTP is disabled. |
39+
40+
## Resources
41+
42+
[WAI-ARIA Specification for the TextBox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
43+
44+
## Section 508
45+
46+
47+
The OTP is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
48+
49+
## Testing
50+
51+
52+
The OTP has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
53+
54+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
55+
56+
### Screen Readers
57+
58+
59+
The OTP has been tested with the following screen readers and browsers combinations:
60+
61+
| Environment | Tool |
62+
| ----------- | ---- |
63+
| Firefox | NVDA |
64+
| Chrome | JAWS |
65+
| Microsoft Edge | JAWS |
66+
67+
68+
69+
### Test Example
70+
To test the OTPInput component, refer to the [OTPInput Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/otpinput).
71+
## Keyboard Navigation
72+
For details on how the OTPInput keyboard navigation works, refer to the [OTPInput Keyboard Navigation]({%slug keynav_otpinputhelper %}) article.
73+
## See Also
74+
* [Keyboard Navigation by the OTPInput for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
75+
* [Keyboard Navigation by the OTPInput for {{ site.framework }}]({% slug keynav_otpinputhelper %})
76+
* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})

Diff for: ‎docs-aspnet/html-helpers/editors/otpinput/adaptiveness.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: Adaptiveness
3+
page_title: Adaptiveness
4+
description: "Learn how to configure the adaptive behavior of the the Telerik UI OTPInput component for {{ site.framework }}."
5+
slug: adaptiveness_otpinputhelper
6+
position: 8
7+
---
8+
9+
# Adaptiveness
10+
11+
The Telerik UI for {{ site.framework }} OTPInput does not require specific adaptive rendering but enables you to configure a suitable input-specific keyboard that appears on touchscreen devices upon interaction.
12+
13+
## On-Screen Keyboard
14+
15+
To enhance the user experience of your application on mobile devices, you can configure the type of the on-screen keyboard for the OTPInput component.
16+
17+
To display an on-screen keyboard when the user focuses the OTPInput, set the `InputMode()` property to any of the supported <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode#values" target="_blank">`inputmode`</a> HTML attribute values. Based on the defined value, the browser displays the respective virtual keyboard on the screen.
18+
19+
The following example demonstrates how to configure the most appropriate on-screen keyboard for the OTPInput.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().OTPInput()
23+
.Name("otp")
24+
.Items(5)
25+
.InputMode("text")
26+
)
27+
```
28+
{% if site.core %}
29+
```TagHelper
30+
@addTagHelper *, Kendo.Mvc
31+
32+
<kendo-otpinput name="otp"
33+
items="5"
34+
input-mode="text">
35+
</kendo-otpinput>
36+
```
37+
{% endif %}
38+
39+
## See Also
40+
41+
* [Adaptive Rendering of the Components]({% slug adaptive_rendering%})
42+
* [Server-Side API of the OTPInput HtmlHelper](/api/otpinput)
43+
{% if site.core %}
44+
* [Server-Side API of the OTPInput TagHelper](/api/taghelpers/otpinput)
45+
{% endif %}

0 commit comments

Comments
 (0)