@progress/kendo-angular-buttons 17.0.0-develop.2 → 17.0.0-develop.20

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 (21) hide show
  1. package/README.md +27 -106
  2. package/button/button.component.d.ts +3 -9
  3. package/buttongroup/buttongroup.component.d.ts +2 -2
  4. package/chip/chip-list.component.d.ts +3 -3
  5. package/chip/chip.component.d.ts +4 -7
  6. package/chip/models/avatar-settings.interface.d.ts +33 -0
  7. package/dropdownbutton/dropdownbutton.component.d.ts +0 -1
  8. package/esm2020/button/button.component.mjs +18 -60
  9. package/esm2020/buttongroup/buttongroup.component.mjs +5 -7
  10. package/esm2020/chip/chip-list.component.mjs +4 -4
  11. package/esm2020/chip/chip.component.mjs +33 -24
  12. package/esm2020/chip/models/avatar-settings.interface.mjs +5 -0
  13. package/esm2020/dropdownbutton/dropdownbutton.component.mjs +8 -8
  14. package/esm2020/package-metadata.mjs +2 -2
  15. package/esm2020/splitbutton/splitbutton.component.mjs +1 -1
  16. package/esm2020/util.mjs +6 -0
  17. package/fesm2015/progress-kendo-angular-buttons.mjs +76 -105
  18. package/fesm2020/progress-kendo-angular-buttons.mjs +76 -105
  19. package/index.d.ts +1 -0
  20. package/package.json +6 -6
  21. package/util.d.ts +6 -0
package/README.md CHANGED
@@ -1,131 +1,52 @@
1
- <a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
1
+ <a href="https://www.telerik.com/kendo-angular-ui/components/buttons" target="_blank">
2
2
  <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
3
3
  </a>
4
4
 
5
- ## Kendo UI for Angular Buttons Package (Button, ButtonGroup, Chip and ChipList, DropDownButton, FloatingActionButton, and SplitButton)
5
+ ## Kendo UI for Angular Buttons Package
6
6
 
7
- > **Important**
8
- > * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
9
- > * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons).
10
- > * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons).
11
- > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
12
- >
13
- > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) and speed up your development process!
7
+ > * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
8
+ > * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
9
+ > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
14
10
 
15
- What's in this package (ToC):
16
- * [Angular Button Component](#angular-button-component)
17
- * [Angular ButtonGroup Component](#angular-buttongroup-component)
18
- * [Angular Chip Component](#angular-chip-component)
19
- * [Angular Chip Component](#angular-chip-component)
20
- * [Angular Chiplist Component](#angular-chiplist-component)
21
- * [Angular DropDownButton Component](#angular-dropdownbutton-component)
22
- * [Angular FloatingActionButton Component](#angular-floatingactionbutton-component)
23
- * [Angular SplitButton Component](#angular-splitbutton-component)
11
+ The Kendo UI for Angular Buttons provide a clickable UI functionality which can be set to display arbitrary content.
24
12
 
25
- ## Angular Button Component
13
+ ## What's Included in the Angular Buttons Package
26
14
 
27
- The [Angular Button](https://www.telerik.com/kendo-angular-ui/components/buttons/button/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) performs any action attached to it and will trigger and event when clicked. You can communicate the button's purprose with text only, and image (or icon only), or both. Additionally, built-in propertys help you easily configure the appearance.
15
+ The [Angular Buttons](https://www.telerik.com/kendo-angular-ui/components/buttons) package includes seven built-in components:
28
16
 
29
- ### Key Features
17
+ * [Angular Button Component](https://www.telerik.com/kendo-angular-ui/components/buttons/button)
18
+ * [Angular ButtonGroup Component](https://www.telerik.com/kendo-angular-ui/components/buttons/buttongroup)
19
+ * [Angular Chip Component](https://www.telerik.com/kendo-angular-ui/components/buttons/chip)
20
+ * [Angular ChipList Component](https://www.telerik.com/kendo-angular-ui/components/buttons/chiplist)
21
+ * [Angular DropDownButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton)
22
+ * [Angular FloatingActionButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton)
23
+ * [Angular SplitButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton)
30
24
 
31
- * **Icon Button:** Chose an icon from the Kendo UI Icon library or provide your own image to give the button a viusal element.
32
- * **Toggleable Button:** Allow users to toggle true/false values and show which is active.
33
- * **Appearance:** Set the button's size, border radius, fill mode, and theme color.
25
+ ## Key Features
34
26
 
35
- ## Angular ButtonGroup Component
27
+ Among the many features which the Kendo UI for Angular Buttons deliver are:
36
28
 
37
- The [Angular ButtonGroup](https://www.telerik.com/kendo-angular-ui/components/buttons/buttongroup/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) serves as a container for two or more buttons. The buttons contained within can be configured together or separately dending on your requirements.
38
-
39
- ### Key Features
40
- * **Single or Multiple Selection Modes:** Choose to allow users to select only one button in each group or allow them to select multiple.
41
- * **Buttons Collection:** Conveniently and programatically render buttons and handle changes as a group.
42
-
43
- ## Angular Chip Component
44
-
45
- The [Angular Chip Component](https://www.telerik.com/kendo-angular-ui/components/buttons/buttongroup/collections/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) represents a piece of information or an entity in a compact form. Chips, also called Pills, can typically be selected and removed. These useful tools are most often used to represent people in email clients.
46
-
47
- ### Key Features
48
-
49
- * **Appearance:** Built-in options for size, border radius, fill, and theme colors make styling easy.
50
- * **Content Setup:** Either manually define content or programatically pass in a string.
51
- * **Customization:** Customize the default remove icon or display avatars.
52
-
53
- ## Angular ChipList Component
54
-
55
- The [Angular Chiplist Component](https://www.telerik.com/kendo-angular-ui/components/buttons/chiplist/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) is a container for two or more Chip components. It's a great way to manage selected entities such as recipients of an email.
56
-
57
- ### Key Features
58
-
59
- * **Selection Mode:** By default, Chips cannot be selected and the mode is set to none. But you can enable single or multiple selection modes.
60
- * **Size:** Setting the size of the ChipList determines the gap beteen individual Chips.
61
-
62
- ## Angular DropDownButton Component
63
-
64
- The [Angular DropDownButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) displays a list with action items when clicked. Many configuration options allow you to confure the button and its dropdown menu, bind data, set icons, and more.
65
-
66
- ### Key Features
67
-
68
- * **Data Binding:** Populate the button and menu content by binding to local or remote data.
69
- * **Templates:** Use templates to customize the popup menu and the items contained within.
70
- * **Icon DropDown:** Choose to render an icon with the menu items by choosing from the Kendo UI Icon collection or provide your own.
71
- * **Appearance:** Built-in options for size, border radius, fill, and theme colors make styling easy.
72
-
73
- ## Angular FloatingActionButton Component
74
-
75
- The [Angular FloatingActionButton](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) makes the most primary function of the application most availble by rendeing a button overlayed in an obvious location. When clicked, you can optionally, show additional options. A common example without secondary actions is the new email button in your Gmail app. A common example of a FloatingActionButton with secondard actions is a share button. When clicked, it shows your sharing options.
76
-
77
- ### Key Features
78
-
79
- * **Icon FloatingActionButton:** The FloatingActionButton enables you to display various types of icons including the built-in Kendo UI icons or your own images.
80
- * **Positioning:** Align and position the FloatingActionButton in relation to a web page, an HTML element, or another Angular Component.
81
- * **Dial Items:** Display a stack of related sub-actions when the FloatingActionButton is clicked.
82
- * **Templates:** Define templates to display custom content or customize the appearance of the FloatingActionButton Dial items list.
83
- * **Appearance:** The FloatingActionButton delivers ready-to-use, predefined sets of styling options.
84
-
85
- ## Angular SplitButton Component
86
-
87
- The [Angular SplitButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) gives the user a choise to click the main action or drop down a menu for additional choices.
88
-
89
- ### Key Features
90
-
91
- * **Icon SplitButton"** The SplitButton enables you to display various types of icons including the built-in Kendo UI icons or your own images.
92
- * **Popup Items and Templates:** Configure the SplitButton popup and popup items by visually enhancing their rendering and by using templates for controlling their content.
93
- * **Content:** Configure the content of the SplitButton by adding it between the opening and the closing tags and by setting its text property.
94
- * **Data Binding:** Bind the SplitButton to data of the primitive (strings and numbers) or of the complex (data inside objects) type.
95
-
96
- ## Angular Buttons Package Features
97
-
98
- The following features are available across all the components in this package:
99
-
100
- * **Disabled state:** To make the component read-only, just change a single property.
101
- * **Custom rendering:** You can replace the content of the buttons with custom icons, text and elements.
102
- * **Keyboard navigation:** You can interact with the buttons using only the keyboard.
103
- * **Accessibility support:** The Buttons are compliant with WAI-ARIA and Section 508.
104
- * [**Theme support:**](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) The Angular Buttons, as well as all+ components in the Kendo UI for Angular suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
29
+ * Disabled Buttons&mdash;You can render the Buttons in their disabled state so that users cannot interact with them. [Read more about the Disabled Button...](https://www.telerik.com/kendo-angular-ui/components/buttons/button/disabled-state)
30
+ * Icon Buttons&mdash;All Buttons components provide configuration options that enable the easy rendering of icon, icon-and-text, or text-only buttons. What's more, you can not only use any icon from the rich collection of built-in Kendo UI icons, but also FontAwesome or image icons. [Read more about the Icon Button...](https://www.telerik.com/kendo-angular-ui/components/buttons/button/icons)
31
+ * Customizable Appearance&mdash;The color and style of the Buttons are normally picked up by the current Kendo UI theme, but each aspect of the Buttons can be customized by theme variables or configuration options. Kendo UI for Angular delivers a set of popular themes including Bootstrap and Material, all of which can be easily customized with the Progress ThemeBuilder online utility. [Read more about the appearance of the Button...](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance)
32
+ * Globalization&mdash;The Kendo UI for Angular Buttons support globalization to ensure that each Buttons component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Buttons support rendering in a right-to-left (RTL) direction. [Read more about Buttons globalization...](https://www.telerik.com/kendo-angular-ui/components/buttons/globalization)
105
33
 
106
34
  ## Support Options
107
35
 
108
- For any issues you might encounter while working with the Angular Buttons, use any of the available support channels:
109
-
110
- * **Industry-leading technical support:** Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated support system](https://www.telerik.com/account/support-tickets?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons).
111
- * **Product forums:** The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-ui-angular?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) are part of the free support you can get from the community and from the Kendo UI for Angular team.
112
- * **Feedback portal:** The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-buttons) is where you can request and vote for new features to be added.
36
+ For any issues you might encounter while working with the Kendo UI for Angular Buttons, you have the following support channels available:
113
37
 
38
+ * Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
39
+ * Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
40
+ * Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
114
41
 
115
42
  ## Resources
116
43
 
117
- * [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
44
+ * [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
45
+ * [Getting Started with the Kendo UI for Angular Buttons](https://www.telerik.com/kendo-angular-ui/components/buttons/installation/getting-started)
118
46
  * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
119
47
  * [Blogs](http://www.telerik.com/blogs/kendo-ui)
120
48
  * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
121
49
 
122
- ## Questions and Feedback
123
-
124
- * [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
125
- * [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
126
- * [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
127
- * [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
128
-
129
50
  *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
130
51
 
131
52
  *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
package/button/button.component.d.ts CHANGED
@@ -12,9 +12,8 @@ import * as i0 from "@angular/core";
12
12
  /**
13
13
  * Represents the Kendo UI Button component for Angular.
14
14
  *
15
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
16
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
17
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
15
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
16
+ * Please use the `button[kendoButton]` selector only.
18
17
  */
19
18
  export declare class ButtonComponent implements OnDestroy, AfterViewInit {
20
19
  renderer: Renderer2;
@@ -115,10 +114,6 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
115
114
  */
116
115
  set svgIcon(icon: SVGIcon);
117
116
  get svgIcon(): SVGIcon;
118
- /**
119
- * @hidden
120
- */
121
- role: string;
122
117
  /**
123
118
  * Fires each time the selected state of a toggleable button is changed.
124
119
  *
@@ -148,7 +143,6 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
148
143
  get classButton(): boolean;
149
144
  get isToggleable(): boolean;
150
145
  get iconButtonClass(): boolean;
151
- get roleSetter(): string;
152
146
  get classDisabled(): boolean;
153
147
  get classActive(): boolean;
154
148
  get getDirection(): string;
@@ -212,5 +206,5 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
212
206
  private handleClasses;
213
207
  private handleThemeColor;
214
208
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
215
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton], span[kendoButton], kendo-button", ["kendoButton"], { "arrowIcon": "arrowIcon"; "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "imageUrl": "imageUrl"; "iconClass": "iconClass"; "icon": "icon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "svgIcon": "svgIcon"; "role": "role"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
209
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": "arrowIcon"; "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "imageUrl": "imageUrl"; "iconClass": "iconClass"; "icon": "icon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "svgIcon": "svgIcon"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
216
210
  }
package/buttongroup/buttongroup.component.d.ts CHANGED
@@ -65,7 +65,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
65
65
  private lastFocusedIndex;
66
66
  private direction;
67
67
  private subs;
68
- get wrapperClass(): boolean;
68
+ wrapperClasses: boolean;
69
69
  get disabledClass(): boolean;
70
70
  get stretchedClass(): boolean;
71
71
  role: string;
@@ -90,5 +90,5 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
90
90
  private handleSubs;
91
91
  private focusHandler;
92
92
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
93
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; "navigable": "navigable"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton], kendo-button"], true, never>;
93
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; "navigable": "navigable"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton]"], true, never>;
94
94
  }
package/chip/chip-list.component.d.ts CHANGED
@@ -65,10 +65,10 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
65
65
  */
66
66
  onClick($event: any): void;
67
67
  /**
68
- * When set to `true`, keyboard navigation is available through arrow keys and roving tabindex. Otherwise, all chips
69
- * are part of the default tabbing sequence of the page.
68
+ * By default, keyboard navigation is available through arrow keys and roving tabindex.
69
+ * When set to `false`, all chips are part of the default tabbing sequence of the page.
70
70
  *
71
- * @default false
71
+ * @default true
72
72
  */
73
73
  set navigable(value: boolean);
74
74
  get navigable(): boolean;
package/chip/chip.component.d.ts CHANGED
@@ -8,6 +8,7 @@ import { ChipRemoveEvent } from './chip-remove-event-args.interface';
8
8
  import { ChipContentClickEvent } from './chip-content-click-event-args.interface';
9
9
  import { ChipFillMode, ChipRounded, ChipSize, ChipThemeColor } from '../common/models';
10
10
  import { SVGIcon } from '@progress/kendo-svg-icons';
11
+ import { ChipAvatarSettings } from './models/avatar-settings.interface';
11
12
  import * as i0 from "@angular/core";
12
13
  /**
13
14
  * Displays a Chip that represents an input, attribute or an action.
@@ -38,9 +39,9 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
38
39
  */
39
40
  iconClass: string;
40
41
  /**
41
- * The avatarClass allows the usage of avatar icons rendered in the Chip.
42
+ * Use these settings to render an avatar within the Chip.
42
43
  */
43
- avatarClass: string;
44
+ avatarSettings: ChipAvatarSettings;
44
45
  /**
45
46
  * Specifies the selected state of the Chip.
46
47
  * @default false
@@ -186,10 +187,6 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
186
187
  * @hidden
187
188
  */
188
189
  get customIconClass(): string;
189
- /**
190
- * @hidden
191
- */
192
- get chipAvatarClass(): string;
193
190
  /**
194
191
  * @hidden
195
192
  */
@@ -219,5 +216,5 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
219
216
  private handleThemeColor;
220
217
  private keyDownHandler;
221
218
  static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
222
- static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "label": "label"; "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "avatarClass": "avatarClass"; "selected": "selected"; "removable": "removable"; "removeIcon": "removeIcon"; "removeSvgIcon": "removeSvgIcon"; "hasMenu": "hasMenu"; "menuIcon": "menuIcon"; "menuSvgIcon": "menuSvgIcon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "remove": "remove"; "menuToggle": "menuToggle"; "contentClick": "contentClick"; }, never, ["*"], true, never>;
219
+ static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "label": "label"; "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "avatarSettings": "avatarSettings"; "selected": "selected"; "removable": "removable"; "removeIcon": "removeIcon"; "removeSvgIcon": "removeSvgIcon"; "hasMenu": "hasMenu"; "menuIcon": "menuIcon"; "menuSvgIcon": "menuSvgIcon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "remove": "remove"; "menuToggle": "menuToggle"; "contentClick": "contentClick"; }, never, ["*"], true, never>;
223
220
  }
package/chip/models/avatar-settings.interface.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ export interface ChipAvatarSettings {
6
+ /**
7
+ * The CSS styles that will be rendered on the wrapper element of the avatar.
8
+ * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
9
+ */
10
+ cssStyle?: any;
11
+ /**
12
+ * Sets `initials` to the Chip avatar.
13
+ */
14
+ initials?: string;
15
+ /**
16
+ * The CSS styles that will be rendered on the wrapper element of the avatar initials.
17
+ * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
18
+ */
19
+ initialsCssStyle?: any;
20
+ /**
21
+ * Sets the `image` source of the Chip avatar.
22
+ */
23
+ imageSrc?: string;
24
+ /**
25
+ * Allows setting the `alt` attribute of a Chip avatar image.
26
+ */
27
+ imageAltText?: string;
28
+ /**
29
+ * The CSS styles that will be rendered on the avatar image element.
30
+ * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
31
+ */
32
+ imageCssStyle?: any;
33
+ }
package/dropdownbutton/dropdownbutton.component.d.ts CHANGED
@@ -157,7 +157,6 @@ export declare class DropDownButtonComponent extends ListButton implements After
157
157
  */
158
158
  onBlur: EventEmitter<any>;
159
159
  get focused(): boolean;
160
- get widgetClasses(): boolean;
161
160
  get dir(): Direction;
162
161
  /**
163
162
  * @hidden
package/esm2020/button/button.component.mjs CHANGED
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2, Output, Optional, NgZone, isDevMode } from '@angular/core';
6
6
  import { KendoButtonService } from './button.service';
7
- import { isDocumentAvailable, isChanged, hasObservers, Keys, isSafari, isFirefox } from '@progress/kendo-angular-common';
7
+ import { isDocumentAvailable, isChanged, hasObservers, isSafari, isFirefox } from '@progress/kendo-angular-common';
8
8
  import { caretAltDownIcon } from '@progress/kendo-svg-icons';
9
9
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
10
10
  import { Subscription } from 'rxjs';
@@ -16,9 +16,6 @@ import { NgIf, NgClass } from '@angular/common';
16
16
  import * as i0 from "@angular/core";
17
17
  import * as i1 from "./button.service";
18
18
  import * as i2 from "@progress/kendo-angular-l10n";
19
- const SPAN_TAG_NAME = 'SPAN';
20
- const BUTTON_TAG_NAME = 'BUTTON';
21
- const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
22
19
  const DEFAULT_ROUNDED = 'medium';
23
20
  const DEFAULT_SIZE = 'medium';
24
21
  const DEFAULT_THEME_COLOR = 'base';
@@ -26,9 +23,8 @@ const DEFAULT_FILL_MODE = 'solid';
26
23
  /**
27
24
  * Represents the Kendo UI Button component for Angular.
28
25
  *
29
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
30
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
31
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
26
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
27
+ * Please use the `button[kendoButton]` selector only.
32
28
  */
33
29
  export class ButtonComponent {
34
30
  constructor(element, renderer, service, localization, ngZone) {
@@ -47,10 +43,6 @@ export class ButtonComponent {
47
43
  * @default false
48
44
  */
49
45
  this.toggleable = false;
50
- /**
51
- * @hidden
52
- */
53
- this.role = 'button';
54
46
  /**
55
47
  * Fires each time the selected state of a toggleable button is changed.
56
48
  *
@@ -235,10 +227,6 @@ export class ButtonComponent {
235
227
  const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
236
228
  return hasIcon && !this.hasText;
237
229
  }
238
- get roleSetter() {
239
- const isButtonElementAndRole = this.element.tagName === BUTTON_TAG_NAME && this.role === 'button';
240
- return isButtonElementAndRole ? undefined : this.role;
241
- }
242
230
  get classDisabled() {
243
231
  return this.isDisabled;
244
232
  }
@@ -289,41 +277,14 @@ export class ButtonComponent {
289
277
  return this.element;
290
278
  }
291
279
  ngOnInit() {
292
- const elementTagName = this.element.tagName;
293
- const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
294
280
  if (!this.element.hasAttribute('role') && this.togglable) {
295
281
  this.toggleAriaPressed(this.toggleable);
296
282
  }
297
- if (this.role) {
298
- const isButtonElementAndRole = elementTagName === BUTTON_TAG_NAME && this.role === 'button';
299
- if (!isButtonElementAndRole) {
300
- this.setAttribute('role', this.role);
301
- }
302
- }
303
- if (isSpanOrKendoButton && !this.isDisabled) {
304
- this.tabIndex = 0;
305
- }
306
- if (isDevMode() && isSpanOrKendoButton) {
307
- console.warn(`As of package v16, the "span[kendoButton]" and "kendo-button" selectors are deprecated and can
308
- be removed in a future major version. We recommend using the "button[kendoButton]" selector
309
- to avoid discrepancies between the behavior of the "ButtonComponent" and the native HTML Button element.`);
310
- }
311
283
  this.ngZone.runOutsideAngular(() => {
312
284
  this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
313
- this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
314
- const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
315
- if (isSpanOrKendoButton && isSpaceOrEnter) {
316
- this.ngZone.run(() => {
317
- this.click.emit(event);
318
- });
319
- this._onButtonClick();
320
- }
321
- }));
322
285
  this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
323
- const elementTagName = this.element.tagName;
324
- const isButton = elementTagName === BUTTON_TAG_NAME;
325
286
  const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
326
- if (!this.isDisabled && isButton && isBrowserSafari) {
287
+ if (!this.isDisabled && isBrowserSafari) {
327
288
  event.preventDefault();
328
289
  this.element.focus();
329
290
  }
@@ -452,7 +413,7 @@ export class ButtonComponent {
452
413
  }
453
414
  }
454
415
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
455
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
416
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
456
417
  LocalizationService,
457
418
  {
458
419
  provide: L10N_PREFIX,
@@ -470,11 +431,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
470
431
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
471
432
  <span class="k-button-text"><ng-content></ng-content></span>
472
433
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
473
- <kendo-icon-wrapper
474
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
475
- innerCssClass="k-button-icon"
476
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
477
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
434
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
435
+ <kendo-icon-wrapper
436
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
437
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
438
+ </span>
439
+
478
440
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
479
441
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
480
442
  type: Component,
@@ -487,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
487
449
  useValue: 'kendo.button'
488
450
  }
489
451
  ],
490
- selector: 'button[kendoButton], span[kendoButton], kendo-button',
452
+ selector: 'button[kendoButton]',
491
453
  template: `
492
454
  <kendo-icon-wrapper
493
455
  *ngIf="icon || svgIcon"
@@ -500,11 +462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
500
462
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
501
463
  <span class="k-button-text"><ng-content></ng-content></span>
502
464
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
503
- <kendo-icon-wrapper
504
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
505
- innerCssClass="k-button-icon"
506
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
507
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
465
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
466
+ <kendo-icon-wrapper
467
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
468
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
469
+ </span>
470
+
508
471
  `,
509
472
  standalone: true,
510
473
  imports: [NgIf, IconWrapperComponent, NgClass]
@@ -539,8 +502,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
539
502
  type: Input
540
503
  }], svgIcon: [{
541
504
  type: Input
542
- }], role: [{
543
- type: Input
544
505
  }], selectedChange: [{
545
506
  type: Output
546
507
  }], click: [{
@@ -554,9 +515,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
554
515
  }], iconButtonClass: [{
555
516
  type: HostBinding,
556
517
  args: ['class.k-icon-button']
557
- }], roleSetter: [{
558
- type: HostBinding,
559
- args: ['attr.role']
560
518
  }], classDisabled: [{
561
519
  type: HostBinding,
562
520
  args: ['attr.aria-disabled']
package/esm2020/buttongroup/buttongroup.component.mjs CHANGED
@@ -50,6 +50,7 @@ export class ButtonGroupComponent {
50
50
  this.currentTabIndex = 0;
51
51
  this.lastFocusedIndex = -1;
52
52
  this.subs = new Subscription();
53
+ this.wrapperClasses = true;
53
54
  this.role = 'group';
54
55
  this.focusHandler = () => {
55
56
  this.currentTabIndex = -1;
@@ -73,9 +74,6 @@ export class ButtonGroupComponent {
73
74
  get tabIndex() {
74
75
  return this._tabIndex;
75
76
  }
76
- get wrapperClass() {
77
- return true;
78
- }
79
77
  get disabledClass() {
80
78
  return this.disabled;
81
79
  }
@@ -236,7 +234,7 @@ export class ButtonGroupComponent {
236
234
  }
237
235
  }
238
236
  ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
239
- ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
237
+ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
240
238
  KendoButtonService,
241
239
  LocalizationService,
242
240
  {
@@ -244,7 +242,7 @@ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
244
242
  useValue: 'kendo.buttongroup'
245
243
  }
246
244
  ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
247
- <ng-content select="[kendoButton], kendo-button"></ng-content>
245
+ <ng-content select="[kendoButton]"></ng-content>
248
246
  `, isInline: true });
249
247
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
250
248
  type: Component,
@@ -260,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
260
258
  ],
261
259
  selector: 'kendo-buttongroup',
262
260
  template: `
263
- <ng-content select="[kendoButton], kendo-button"></ng-content>
261
+ <ng-content select="[kendoButton]"></ng-content>
264
262
  `,
265
263
  standalone: true
266
264
  }]
@@ -282,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
282
280
  }], buttons: [{
283
281
  type: ContentChildren,
284
282
  args: [ButtonComponent]
285
- }], wrapperClass: [{
283
+ }], wrapperClasses: [{
286
284
  type: HostBinding,
287
285
  args: ['class.k-button-group']
288
286
  }], disabledClass: [{
package/esm2020/chip/chip-list.component.mjs CHANGED
@@ -43,7 +43,7 @@ export class ChipListComponent {
43
43
  this.role = 'listbox';
44
44
  this._size = 'medium';
45
45
  this.subs = new Subscription();
46
- this._navigable = false;
46
+ this._navigable = true;
47
47
  this.currentActiveIndex = 0;
48
48
  validatePackage(packageMetadata);
49
49
  this.direction = localizationService.rtl ? 'rtl' : 'ltr';
@@ -97,10 +97,10 @@ export class ChipListComponent {
97
97
  }
98
98
  }
99
99
  /**
100
- * When set to `true`, keyboard navigation is available through arrow keys and roving tabindex. Otherwise, all chips
101
- * are part of the default tabbing sequence of the page.
100
+ * By default, keyboard navigation is available through arrow keys and roving tabindex.
101
+ * When set to `false`, all chips are part of the default tabbing sequence of the page.
102
102
  *
103
- * @default false
103
+ * @default true
104
104
  */
105
105
  set navigable(value) {
106
106
  this._navigable = value;