@syncfusion/ej2-buttons - npm Package Compare versions

Comparing version 20.4.53 to 21.1.35

CHANGELOG.md

@@ -9,6 +9,11 @@ # Changelog
 
+- `#I443358` - The issue with "Intermediate state not working properly while Property change of Checkbox" has been resolved.
 - `#I436942` - The issue with "Checkbox checked property is not updated properly at initial rendering" has been resolved.
 
-## 20.4.50 (2023-02-14)
+### Chip
 
+#### New Features
+
+- `#I422263` - The Chip component now supports htmlAttributes, which enables users to add required attributes such as 'aria-label', 'title', 'class', and more to the Chip item.
+
 ### RadioButton
@@ -20,4 +25,2 @@
 
-## 20.4.49 (2023-02-07)
-
 ### Switch
@@ -27,14 +30,4 @@
 
-- `#I427994` - Provided aria-label and id `htmlAttributes` support to the switch component.
-
-## 20.4.44 (2023-01-18)
-
-### Switch
-
-#### Bug Fixes
-
 - `#I427994` - Provided the `htmlAttributes` support to the switch component.
 
-## 20.4.42 (2023-01-04)
-
 ### Checkbox
@@ -46,12 +39,4 @@
 
-### Chips
+## 20.3.47 (2022-10-11)
 
-#### Bug Fixes
-
-- `#I422262` - Added the aria-disabled attribute to the disabled Chip items.
-
-## 20.4.40 (2022-12-28)
-
-## 20.3.47 (2022-09-29)
-
 ### Floating Action Button `Preview`
@@ -58,0 +43,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 20.4.53
+*  version : 21.1.35
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-buttons@*",
-  "_id": "@syncfusion/ej2-buttons@20.4.50",
+  "_id": "@syncfusion/ej2-buttons@18.58.0",
   "_inBundle": false,
-  "_integrity": "sha512-A5CJs4oGpuAivmel61dsT2pN8gvwNyPdgL9OpQdip+VqJXHYA7RloKpzaEUD+/Wa2pBjO6QpZqZaQSnSUaxfPg==",
+  "_integrity": "sha512-He9mhdnwJKboYvCObngV+2VSrHBsQmnsRmFWFAjuGYab3rrDuDFszbBqH3dEryY517LG69d//94aoxouIytXOg==",
   "_location": "/@syncfusion/ej2-buttons",
@@ -42,2 +42,3 @@ "_phantomChildren": {},
     "/@syncfusion/ej2-react-buttons",
+    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-richtexteditor",
@@ -47,6 +48,6 @@ "/@syncfusion/ej2-schedule",
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-buttons/-/ej2-buttons-20.4.50.tgz",
-  "_shasum": "557032066714c3d9715b35c52b86b5f7b806a436",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-buttons/-/ej2-buttons-18.58.0.tgz",
+  "_shasum": "1a922d031ed02bb2216f3a30e2e467c183de4dbb",
   "_spec": "@syncfusion/ej2-buttons@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -60,3 +61,3 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51"
+    "@syncfusion/ej2-base": "~21.1.35"
   },
@@ -107,4 +108,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "20.4.53",
+  "version": "21.1.35",
   "sideEffects": false
 }

README.md

@@ -1,108 +0,136 @@
-# ej2-buttons Component
+# JavaScript Button Controls
 
-A package of Syncfusion JavaScript UI Components (Essential JS 2) Button, CheckBox, RadioButton and Switch.
+## What's Included in the JavaScript Buttons Package
 
-![Button](https://ej2.syncfusion.com/products/images/button/readme.gif)
+The JavaScript Buttons package includes the following list of controls.
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
+### JavaScript Button
 
-> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+The [JavaScript Button](https://www.syncfusion.com/javascript-ui-controls/js-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm) control is a custom HTML5 button component. It has several built-in features such as support for icons, predefined styles, different button types, different button sizes, and UI customization.
 
-## Setup
+<p align="center">
+    <a href="https://ej2.syncfusion.com/documentation/button/getting-started/#getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Getting Started</a>.
+    <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm#/material/button/default.html">Online demos</a>.
+    <a href="https://www.syncfusion.com/javascript-ui-controls/js-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Learn more</a>.
+</p>
 
-To install `Button` and its dependent packages, use the following command
+<p align="center">
+<img alt="JavaScript Button Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-button.png">
+</p>
 
-```sh
-npm install @syncfusion/ej2-buttons
-```
+#### Key features
 
-## Components included
+* [Types](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-types) - Provided with different types of Button.
+* [Predefined styles](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-styles) - Provided with predefined styles of Button.
+* [Sizes](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-size) - Provided with different sizes of Button.
+* [Icons](https://ej2.syncfusion.com/documentation/button/types-and-styles#icons) - Supports text and icon on the Button.
 
-Following list of components are available in the package.
+### JavaScript CheckBox
 
-* Button - `Button` is a graphical user interface element that triggers an event on its click action.
-    * [Getting Started](https://ej2.syncfusion.com/documentation/button/getting-started?lang=typescript&utm_source=npm&utm_campaign=button)
-    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=button#/material/button/default.html)
-    * [Product Page](https://www.syncfusion.com/javascript-ui-controls/button)
+The [JavaScript CheckBox](https://www.syncfusion.com/javascript-ui-controls/js-checkbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm) control is a custom checkbox-type HTML5 input component for selecting one or more options from a list of predefined choices. It supports an indeterminate state, different sizes, custom labels and positions, and UI customization.
 
-* CheckBox - `CheckBox` is a graphical user interface element that allows to select one or more options from the choices.
-    * [Getting Started](https://ej2.syncfusion.com/documentation/check-box/getting-started?lang=typescript&utm_source=npm&utm_campaign=check-box)
-    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=check-box#/material/button/check-box.html)
-    * [Product Page](https://www.syncfusion.com/javascript-ui-controls/checkbox)
+<p align="center">
+    <a href="https://ej2.syncfusion.com/documentation/check-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm#/material/button/checkbox.html">Online demos</a> .
+    <a href="https://www.syncfusion.com/javascript-ui-controls/js-checkbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Learn more</a>
+</p>
 
-* RadioButton - `RadioButton` is a graphical user interface element that allows to select one option from the choices.
-    * [Getting Started](https://ej2.syncfusion.com/documentation/radio-button/getting-started?lang=typescript&utm_source=npm&utm_campaign=radio-button)
-    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=radio-button#/material/button/radio-button.html)
-    * [Product Page](https://www.syncfusion.com/javascript-ui-controls/radio-button)
+<p align="center">
+<img alt="JavaScript CheckBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-checkbox.png">
+</p>
 
-* Switch - `Switch` is a graphical user interface element that allows you to toggle between checked and unchecked states.
-    * [Getting Started](https://ej2.syncfusion.com/documentation/switch/getting-started?lang=typescript&utm_source=npm&utm_campaign=switch)
-    * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=switch#/material/button/switch.html)
-    * [Product Page](https://www.syncfusion.com/javascript-ui-controls/toggle-switch-button)
+#### Key features
 
-## Supported Frameworks
+* [States](https://ej2.syncfusion.com/documentation/check-box/getting-started#change-the-checkbox-state) - Provided with different states of CheckBox.
+* [Label](https://ej2.syncfusion.com/documentation/check-box/label-and-size#label) - Supports label and its positioning.
+* [Sizes](https://ej2.syncfusion.com/documentation/check-box/label-and-size#size) - Provided with different sizes of CheckBox.
 
-These components are available in following list of frameworks.
+### JavaScript RadioButton
 
-1. [Angular](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/buttons?utm_source=npm&utm_campaign=button)
-2. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/buttons?utm_source=npm&utm_campaign=button)
-3. [VueJS](https://github.com/syncfusion/ej2-vue-ui-components/tree/master/components/buttons?utm_source=npm&utm_campaign=button)
-4. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls)
-5. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls)
-6. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls)
+The [JavaScript RadioButton](https://www.syncfusion.com/javascript-ui-controls/js-radio-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm) control is a custom radio-type HTML5 input component for selecting one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations.
 
-## Showcase samples
+<p align="center">
+    <a href="https://ej2.syncfusion.com/documentation/radio-button/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm#/material/button/radio-button.html">Online demos</a> .
+    <a href="https://www.syncfusion.com/javascript-ui-controls/js-radio-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Learn more</a>
+</p>
 
-* Expense Tracker ([Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=button#/dashboard))
-* Loan Calculator ([Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=button))
+<p align="center">
+<img alt="JavaScript RadioButton Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-radio-button.png">
+</p>
 
-## Key Features
+#### Key features
 
-### Button
+* [States](https://ej2.syncfusion.com/documentation/radio-button/getting-started#change-the-radiobutton-state) - Provided with different states of RadioButton.
+* [Label](https://ej2.syncfusion.com/documentation/radio-button/label-and-size#label) - Supports label and its positioning.
+* [Sizes](https://ej2.syncfusion.com/documentation/radio-button/label-and-size#size) - Provided with different sizes of RadioButton.
 
-* [**Types**](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-types) - Provided with different types of Button.
+### JavaScript Switch
 
-* [**Predefined Styles**](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-styles) - Provided with predefined styles of Button.
+The [JavaScript Switch](https://www.syncfusion.com/javascript-ui-controls/js-toggle-switch-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm) control is a custom HTML5 input-type component control that allows you to perform a toggle (on/off) action between checked and unchecked states. It supports different sizes, labels, label positions, and UI customization.
 
-* [**Sizes**](https://ej2.syncfusion.com/documentation/button/types-and-styles#button-size) - Provided with different sizes of Button.
+<p align="center">
+    <a href="https://ej2.syncfusion.com/documentation/switch/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm#/material/button/switch.html">Online demos</a> .
+    <a href="https://www.syncfusion.com/javascript-ui-controls/js-toggle-switch-button?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm">Learn more</a>
+</p>
 
-* [**Icons**](https://ej2.syncfusion.com/documentation/button/types-and-styles#icons) - Supports text and icon on the Button.
+<p align="center">
+<img alt="JavaScript Switch Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toggle-switch-button.png">
+</p>
 
-### CheckBox
+#### Key features
 
-* [**States**](https://ej2.syncfusion.com/documentation/check-box/getting-started#change-the-checkbox-state) - Provided with different states of CheckBox.
+* [Text](https://ej2.syncfusion.com/documentation/switch/getting-started#set-text-on-switch) - Supports text.
+* [Sizes](https://ej2.syncfusion.com/documentation/switch/how-to#change-size) - Provided with different sizes of Switch.
 
-* [**Label**](https://ej2.syncfusion.com/documentation/check-box/label-and-size#label) - Supports label and its positioning.
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com/">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+  </a>
+</p>
 
-* [**Sizes**](https://ej2.syncfusion.com/documentation/check-box/label-and-size#size) - Provided with different sizes of CheckBox.
+## Setup
 
-### RadioButton
+To install `buttons` and its dependent packages, use the following command,
 
-* [**States**](https://ej2.syncfusion.com/documentation/radio-button/getting-started#change-the-radiobutton-state) - Provided with different states of RadioButton.
+```sh
+npm install @syncfusion/ej2-buttons
+```
 
-* [**Label**](https://ej2.syncfusion.com/documentation/radio-button/label-and-size#label) - Supports label and its positioning.
+## Supported frameworks
 
-* [**Sizes**](https://ej2.syncfusion.com/documentation/radio-button/label-and-size#size) - Provided with different sizes of RadioButton.
+Button controls are also offered to following list of frameworks.
 
-### Switch
+| [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
+| :-----: | :-----: | :-----: | :-----: | :-----: |
 
-* [**Text**](https://ej2.syncfusion.com/documentation/switch/getting-started#set-text-on-switch) - Supports text.
-* [**Sizes**](https://ej2.syncfusion.com/documentation/switch/how-to#change-size) - Provided with different sizes of Switch.
+## Showcase samples
 
+* Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=button#/dashboard)
+* Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=button)
+
 ## Support
 
-Product support is available for through following mediums.
+Product support is available through following mediums.
 
-* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=button) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=button).
-* New [GitHub issue](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new).
-* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=button) with tag `syncfusion`, `ej2`.
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm)
+* Live chat
 
-## License
+## Changelog
 
-Check the license detail [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_campaign=button).
+Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/buttons/CHANGELOG.md?utm_source=npm&utm_campaign=button). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
-## Changelog
+## License and copyright
 
-Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/buttons/CHANGELOG.md?utm_source=npm&utm_campaign=button)
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_campaign=button) for more info.
+
 © Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

src/check-box/check-box.d.ts

@@ -7,2 +7,6 @@ import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
  * Defines the label position of CheckBox.
+ * ```props
+ * After :- When the label is positioned After, it appears to the right of the CheckBox.
+ * Before :- When the label is positioned Before, it appears to the left of the CheckBox.
+ * ```
  */
@@ -9,0 +13,0 @@ export declare type LabelPosition = 'After' | 'Before';

src/check-box/check-box.js

@@ -111,2 +111,3 @@ var __extends = (this && this.__extends) || (function () {
             this.element.indeterminate = true;
+            this.indeterminate = true;
         }
@@ -113,0 +114,0 @@ };

src/chips/chip-list-model.d.ts

@@ -44,2 +44,11 @@ import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, append, isNullOrUndefined } from '@syncfusion/ej2-base';import { removeClass, KeyboardEventArgs, rippleEffect, closest, MouseEventArgs } from '@syncfusion/ej2-base';import { EventHandler, detach, EmitType, Event, addClass, getElement } from '@syncfusion/ej2-base';import { ChipModel } from './chip';
     /**
+     * Allows additional HTML attributes such as aria labels, title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     * {% codeBlock src='chiplist/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
      * Specifies the leading icon CSS class for the chip.
@@ -46,0 +55,0 @@ * {% codeBlock src='chips/leadingIconCss/index.md' %}{% endcodeBlock %}

src/chips/chip-list.d.ts

@@ -7,4 +7,28 @@ import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
 export declare const classNames: ClassNames;
-export declare type selectionType = 'index' | 'value' | 'text';
-export declare type Selection = 'Single' | 'Multiple' | 'None';
+export declare type selectionType = 
+/**
+  * Refers to the position of the selected chip in the list of chips
+  */
+'index' | 
+/**
+  * Refers to the underlying data value associated with the selected chip.
+  */
+'value' | 
+/**
+  * Refers to the displayed text on the selected chip.
+  */
+'text';
+export declare type Selection = 
+/**
+  * Allows the user to select single chip at the same time.
+  */
+'Single' | 
+/**
+  * Allows the user to select multiple chips at the same time.
+  */
+'Multiple' | 
+/**
+  * Chips are displayed as read-only.
+  */
+'None';
 export interface ClassNames {
@@ -194,2 +218,12 @@ chipSet: string;
     /**
+     * Allows additional HTML attributes such as aria labels, title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     * {% codeBlock src='chiplist/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * Specifies the leading icon CSS class for the chip.
@@ -328,7 +362,6 @@ * {% codeBlock src='chips/leadingIconCss/index.md' %}{% endcodeBlock %}
      *
+     * @param  {number | HTMLElement } fields - We can pass index number or element of chip.
      * {% codeBlock src='chips/find/index.md' %}{% endcodeBlock %}
      *
-     * @param  {number | HTMLElement } fields - We can pass index number or element of chip.
-     *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -339,6 +372,5 @@ find(fields: number | HTMLElement): ChipDataArgs;
      *
-     * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}
-     *
      * @param  {string[] | number[] | ChipModel[] | string | number | ChipModel} chipsData - We can pass array of string or
      *  array of number or array of chip model or string data or number data or chip model.
+     * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}
      *
@@ -352,8 +384,7 @@ * @returns {void}
      *
-     * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}
-     *
      * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
      *  or chip element or array of chip element.
+     * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -366,8 +397,7 @@ select(fields: number | number[] | HTMLElement | HTMLElement[] | string[], selectionType?: selectionType): void;
      *
-     * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}
-     *
      * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
      *  or chip element or array of chip element.
+     * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -377,6 +407,5 @@ remove(fields: number | number[] | HTMLElement | HTMLElement[]): void;
      * Returns the selected chip(s) data.
-     *
      * {% codeBlock src='chips/getSelectedChips/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -395,6 +424,5 @@ getSelectedChips(): SelectedItem | SelectedItems;
      * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
-     *
      * {% codeBlock src='chips/destroy/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -401,0 +429,0 @@ destroy(): void;

src/chips/chip-list.js

@@ -128,4 +128,7 @@ var __extends = (this && this.__extends) || (function () {
         var chipListArray = [];
+        var attributeArray = [];
         for (var i = 0; i < data.length; i++) {
             var fieldsData = this.getFieldValues(data[i]);
+            var attributesValue = fieldsData.htmlAttributes;
+            attributeArray.push(attributesValue);
             var chipArray = this.elementCreation(fieldsData);
@@ -160,2 +163,11 @@ var className = (classNames.chip + ' ' + (fieldsData.enabled ? ' ' : classNames.disabled) + ' ' +
                 }
+                if (!isNullOrUndefined(attributeArray[i])) {
+                    if (attributeArray.length > i && Object.keys(attributeArray[i]).length) {
+                        var htmlAttr = [];
+                        htmlAttr = (Object.keys(attributeArray[i]));
+                        for (var j = 0; j < htmlAttr.length; j++) {
+                            wrapper.setAttribute(htmlAttr[j], attributeArray[i][htmlAttr[j]]);
+                        }
+                    }
+                }
                 append(chipArray, wrapper);
@@ -188,3 +200,4 @@ chipListArray.push(wrapper);
             trailingIconUrl: typeof data === 'object' ? (data.trailingIconUrl ? data.trailingIconUrl.toString() : this.trailingIconUrl) :
-                this.trailingIconUrl
+                this.trailingIconUrl,
+            htmlAttributes: typeof data === 'object' ? (data.htmlAttributes ? data.htmlAttributes : this.htmlAttributes) : this.htmlAttributes
         };
@@ -232,7 +245,6 @@ return fields;
      *
+     * @param  {number | HTMLElement } fields - We can pass index number or element of chip.
      * {% codeBlock src='chips/find/index.md' %}{% endcodeBlock %}
      *
-     * @param  {number | HTMLElement } fields - We can pass index number or element of chip.
-     *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -258,6 +270,5 @@ ChipList.prototype.find = function (fields) {
      *
-     * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}
-     *
      * @param  {string[] | number[] | ChipModel[] | string | number | ChipModel} chipsData - We can pass array of string or
      *  array of number or array of chip model or string data or number data or chip model.
+     * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}
      *
@@ -279,8 +290,7 @@ * @returns {void}
      *
-     * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}
-     *
      * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
      *  or chip element or array of chip element.
+     * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -351,8 +361,7 @@ ChipList.prototype.select = function (fields, selectionType) {
      *
-     * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}
-     *
      * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
      *  or chip element or array of chip element.
+     * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -381,6 +390,5 @@ ChipList.prototype.remove = function (fields) {
      * Returns the selected chip(s) data.
-     *
      * {% codeBlock src='chips/getSelectedChips/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -579,6 +587,5 @@ ChipList.prototype.getSelectedChips = function () {
      * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
-     *
      * {% codeBlock src='chips/destroy/index.md' %}{% endcodeBlock %}
      *
-     * @returns {void}
+     *  @returns {void}
      */
@@ -670,2 +677,5 @@ ChipList.prototype.destroy = function () {
         Property('')
+    ], ChipList.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('')
     ], ChipList.prototype, "leadingIconCss", void 0);
@@ -672,0 +682,0 @@ __decorate([

src/chips/chip.d.ts

@@ -53,2 +53,11 @@ /**
     value: string | number;
+    /**
+    * Allows additional HTML attributes such as aria labels, title, name, etc., and
+    * accepts n number of attributes in a key-value pair format.
+    *
+    * @default {}
+    */
+    htmlAttributes: {
+        [key: string]: string;
+    };
 }
@@ -81,2 +90,12 @@ export interface ChipModel {
     /**
+     * Specifies the additional HTML attributes, such as title, styles, class, id, and name, in a key-value pair format
+     * and appended to the chip item element of the Chip component. If both the property and equivalent HTML attributes are configured,
+     * then the component overrides the property value with the HTML attributes.
+     *
+     * @default {}
+     */
+    htmlAttributes?: {
+        [key: string]: string;
+    };
+    /**
      * Specifies the leading icon CSS class for the chip.
@@ -83,0 +102,0 @@ *

src/radio-button/radio-button.d.ts

@@ -6,2 +6,6 @@ import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
  * Defines the label position of Radio Button.
+ * ```props
+ * After :- When the label is positioned After, it appears to the right of the Radio Button.
+ * Before :- When the label is positioned Before, it appears to the left of the Radio Button.
+ * ```
  */
@@ -8,0 +12,0 @@ export declare type RadioLabelPosition = 'After' | 'Before';

No alert changes

Improved metrics

Lines of code

181990

increased by0.31%

Number of lines in readme file

137

increased by25.69%

Worsened metrics

Total package byte prevSize

8803772

decreased by-0.45%

Number of package files

501

decreased by-1.18%

Dependency changes

• + Added@syncfusion/ej2-base@21.1.40(transitive)

• + Added@syncfusion/ej2-icons@21.1.37(transitive)

• - Removed@syncfusion/ej2-base@20.4.51(transitive)

• - Removed@syncfusion/ej2-icons@20.4.48(transitive)

• Updated@syncfusion/ej2-base@~21.1.35