igniteui-webcomponents 4.11.1 → 5.0.0-rc.0

package/CHANGELOG.md

@@ -4,6 +4,73 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+
+## [Unreleased]
+
+### Changed
+- **BREAKING**: Removed `igcFocus` and `igcBlur` events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.
+
+  Use the native `focus` & `blur` events instead.
+
+  Before:
+  ```ts
+  const input = document.createElement('igc-input');
+  input.addEventListener('igcFocus', focusHandler);
+  ```
+
+  Now:
+  ```ts
+  input.addEventListener('focus', focusHandler);
+  ```
+
+- **BREAKING**: Checkbox, Switch `igcChange` event.
+
+  Before:
+  ```ts
+  CustomEvent<boolean>
+  ```
+
+  Now:
+  ```ts
+  CustomEvent<{ checked: boolean; value: string | undefined }>
+  ```
+
+
+- **BREAKING**: Radio `igcChange` event.
+
+  Before:
+  ```ts
+  CustomEvent<boolean>
+  ```
+
+  Now:
+  ```ts
+  CustomEvent<{ checked: boolean; value: string | undefined }>
+  ```
+
+### Added
+- Icon Registry [#1304](https://github.com/IgniteUI/igniteui-webcomponents/issues/1304)
+    - You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
+    - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
+
+### Removed
+- **BREAKING**: igc-form - use the native form element instead.
+- **BREAKING**: Range slider - `ariaThumbLower/ariaThumbUpper`. Use `thumbLabelLower/thumbLabelUpper` instead.
+- **BREAKING**: Rating - `readonly` property. Use `readOnly` instead.
+- **BREAKING**: Dialog - `closeOnEscape` property. Use `keepOpenOnEscape`.
+- **BREAKING**: Combo, Select - `positionStrategy`, `flip`, `sameWidth` removed.
+- **BREAKING**: Dropdown - `positionStrategy` removed.
+- **BREAKING**: Input - `readonly`, `inputmode`, `maxlength` and `minlength`.
+  Use the native `readOnly`, `inputMode`, `maxLength` and `minLength` properties instead.
+- **BREAKING**: Date-time-input - `minValue`/`mavValue` are removed. Use `min`/`max` instead.
+- **BREAKING**: Removed `size` property from components.
+
+### Fixed
+- Date-time input - update masked value according to the input format on focus when value is set [#1320](https://github.com/IgniteUI/igniteui-webcomponents/issues/1320)
+- Radio - do not emit change event on already checked radio
+- Calendar - add correct dates DOM parts based on active view [[#1278](https://github.com/IgniteUI/igniteui-webcomponents/issues/1278)]
+- Date-picker, Dropdown & Select - showing the component programmatically in response to an outside click event closes the dropdown popover [#1339](https://github.com/IgniteUI/igniteui-webcomponents/issues/1339)
+
 ## [4.11.1] - 2024-07-03
 ### Changed
  - Stepper Design in vertical mode [#1246](https://github.com/IgniteUI/igniteui-webcomponents/issues/1246)

package/README.md

@@ -1,76 +1,77 @@
 ![Logo Ignite UI Web Components)](https://user-images.githubusercontent.com/52001020/173785249-7ec6ad64-ebfe-402b-9a32-d40e50182b13.png)
 
-
 <h1 align="center">
-  Ignite UI for Web Components - from Infragistics 
+  Ignite UI for Web Components - from Infragistics
 </h1>
 
-
-
 [![Node.js CI](https://github.com/IgniteUI/igniteui-webcomponents/workflows/Node.js%20CI/badge.svg)](https://github.com/IgniteUI/igniteui-webcomponents/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-webcomponents/badge.svg)](https://coveralls.io/github/IgniteUI/igniteui-webcomponents)
 [![npm version](https://badge.fury.io/js/igniteui-webcomponents.svg)](https://badge.fury.io/js/igniteui-webcomponents)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)!  
-All components are based on the [Indigo.Design Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
+[Ignite UI for Web Components] is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. All components are based on the [Indigo.Design Design System] and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
+
+See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 ## Browser Support
 
-![chrome_48x48](https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png) | ![firefox_48x48](https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png) | ![edge_48x48](https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png) | ![opera_48x48](https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png) | ![safari_48x48](https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png)
---- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+| ![chrome_48x48] | ![firefox_48x48] | ![edge_48x48] | ![opera_48x48] | ![safari_48x48] |
+| --------------- | ---------------- | ------------- | -------------- | --------------- |
+| Latest ✔️       | Latest ✔️        | Latest ✔️     | Latest ✔️      | Latest ✔️       |
 
 ## Overview
 
-|Components|Status|Documentation|Released Version|
-|:--|:--:|:--:|:--:|
-|Combo|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/combo/overview)|[4.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.1.0)|
-|Stepper|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper)|[4.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.1.0)|
-|Select|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select)|[3.4.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.4.0)|
-|Dialog|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog)|[3.4.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.4.0)|
-|Date Time Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
-|Tabs|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
-|Accordion|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
-|Mask Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Expansion Panel|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Tree|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Drop Down|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.2.0)|
-|Linear Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Circular Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Chip|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|    
-|Snackbar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Toast|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Rating|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Slider|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider)|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)|
-|Range Slider|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider)|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)| 
-|Avatar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Badge|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Button|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Calendar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Card|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Checkbox|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Form|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/form)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Icon|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Icon Button|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|List|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Navigation Bar (Navbar)|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Navigation Drawer|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Radio|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Radio Group|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Ripple|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Switch|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-
-## Components available in [Ignite UI for WebComponents Grids](https://www.npmjs.com/package/igniteui-webcomponents-grids)
-
-|Components|Status|Documentation|Released Version|
-|:--|:--:|:--:|:--:|
-|Pivot Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview)|
-|Data Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview)||
-|Tree Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview)||
-
-## Usage
+| Components              | Status |         Documentation          | Released Version |
+| :---------------------- | :----: | :----------------------------: | :--------------: |
+| Date picker             |   ✅   |    [Docs][Date Picker Docs]    |     [4.10.0]     |
+| Divider                 |   ✅   |      [Docs][Divider Docs]      |     [4.10.0]     |
+| Banner                  |   ✅   |      [Docs][Banner Docs]       |     [4.10.0]     |
+| Button group            |   ✅   |   [Docs][Button Group Docs]    |     [4.5.0]      |
+| Textarea                |   ✅   |     [Docs][Textarea Docs]      |     [4.5.0]      |
+| Combo                   |   ✅   |       [Docs][Combo Docs]       |     [4.1.0]      |
+| Stepper                 |   ✅   |      [Docs][Stepper Docs]      |     [4.1.0]      |
+| Select                  |   ✅   |      [Docs][Select Docs]       |     [3.4.0]      |
+| Dialog                  |   ✅   |      [Docs][Dialog Docs]       |     [3.4.0]      |
+| Date Time Input         |   ✅   |  [Docs][Date Time Input Docs]  |     [3.3.0]      |
+| Tabs                    |   ✅   |       [Docs][Tabs Docs]        |     [3.3.0]      |
+| Accordion               |   ✅   |     [Docs][Accordion Docs]     |     [3.3.0]      |
+| Mask Input              |   ✅   |   [Docs][Masked Input Docs]    |     [3.2.0]      |
+| Expansion Panel         |   ✅   |  [Docs][Expansion Panel Docs]  |     [3.2.0]      |
+| Tree                    |   ✅   |       [Docs][Tree Docs]        |     [3.2.0]      |
+| Drop Down               |   ✅   |     [Docs][Dropdown Docs]      |     [2.2.0]      |
+| Linear Progress         |   ✅   |  [Docs][Linear Progress Docs]  |     [2.1.0]      |
+| Circular Progress       |   ✅   | [Docs][Circular Progress Docs] |     [2.1.0]      |
+| Chip                    |   ✅   |       [Docs][Chip Docs]        |     [2.1.0]      |
+| Snackbar                |   ✅   |     [Docs][Snackbar Docs]      |     [2.1.0]      |
+| Toast                   |   ✅   |       [Docs][Toast Docs]       |     [2.1.0]      |
+| Rating                  |   ✅   |      [Docs][Rating Docs]       |     [2.1.0]      |
+| Slider                  |   ✅   |      [Docs][Slider Docs]       |     [2.0.0]      |
+| Range Slider            |   ✅   |      [Docs][Slider Docs]       |     [2.0.0]      |
+| Avatar                  |   ✅   |      [Docs][Avatar Docs]       |     [1.0.0]      |
+| Badge                   |   ✅   |       [Docs][Badge Docs]       |     [1.0.0]      |
+| Button                  |   ✅   |      [Docs][Button Docs]       |     [1.0.0]      |
+| Calendar                |   ✅   |     [Docs][Calendar Docs]      |     [1.0.0]      |
+| Card                    |   ✅   |       [Docs][Card Docs]        |     [1.0.0]      |
+| Checkbox                |   ✅   |     [Docs][Checkbox Docs]      |     [1.0.0]      |
+| Form                    |   ✅   |       [Docs][Form Docs]        |     [1.0.0]      |
+| Icon                    |   ✅   |       [Docs][Icon Docs]        |     [1.0.0]      |
+| Icon Button             |   ✅   |    [Docs][Icon Button Docs]    |     [1.0.0]      |
+| Input                   |   ✅   |       [Docs][Input Docs]       |     [1.0.0]      |
+| List                    |   ✅   |       [Docs][List Docs]        |     [1.0.0]      |
+| Navigation Bar (Navbar) |   ✅   |  [Docs][Navigation Bar Docs]   |     [1.0.0]      |
+| Navigation Drawer       |   ✅   | [Docs][Navigation Drawer Docs] |     [1.0.0]      |
+| Radio                   |   ✅   |       [Docs][Radio Docs]       |     [1.0.0]      |
+| Radio Group             |   ✅   |       [Docs][Radio Docs]       |     [1.0.0]      |
+| Ripple                  |   ✅   |      [Docs][Ripple Docs]       |     [1.0.0]      |
+| Switch                  |   ✅   |      [Docs][Switch Docs]       |     [1.0.0]      |
+
+## Components available in [Ignite UI for WebComponents Grids]
+
+| Components | Status |      Documentation      |
+| :--------- | :----: | :---------------------: |
+| Pivot Grid |   ✅   | [Docs][Pivot Grid Docs] |
+| Data Grid  |   ✅   | [Docs][Data Grid Docs]  |
+| Tree Grid  |   ✅   | [Docs][Tree Grid Docs]  |
 
 ### The Lightweight Web Components Data Grid and Data Table
 
@@ -78,20 +79,26 @@ The Ignite UI for Web Components Data Grid and Table are both lightweight and de
 
 ### Dock Manager - EXCLUSIVE FEATURE
 
-![Dock Manager](https://github.com/IgniteUI/igniteui-webcomponents/assets/52001020/a9643f17-f1c2-4554-87aa-96c9daea13b0)
+![Dock Manager Picture]
 
-Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes. 
+Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes.
+
+## Usage
 
 In order to use the Ignite UI Web Components in your application you should install the `igniteui-webcomponents` package:
 
-```
+```sh
 npm install igniteui-webcomponents
 ```
 
 Next you will need to import the components that you want to use. You could import one or more components using the `defineComponents` function like this:
 
 ```ts
-import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcAvatarComponent,
+  IgcBadgeComponent,
+} from 'igniteui-webcomponents';
 
 defineComponents(IgcAvatarComponent, IgcBadgeComponent);
 ```
@@ -109,81 +116,132 @@ Please note that importing all of the components will increase the bundle size o
 After the components are imported you could use them in your html:
 
 ```html
-<igc-avatar initials="AZ"></igc-avatar>
-<igc-badge></igc-badge>
+<igc-avatar initials="AZ"></igc-avatar><igc-badge></igc-badge>
 ```
 
-### Tooling Support
-The package contains its own [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/blog/intro/) as well
-as [Custom Data Format](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format) for VSCode.
-Refer to your IDE/toolchain documentation to see if you can take advantage of this metadata for linting, type hints and documentation.
+### Additional tooling
 
-Here is a how to enable VSCode auto-completion and hover information for HTML entities from the package.
+The package comes with its own [Custom Elements Manifest], [VSCode Custom Data Format] for VSCode and [Web Types] for JetBrains IDEs.
+Refer to the documentation of your editor of choice to see if you can take advantage of this metadata for linting, intellisense and documentation.
 
-Add the following line to your user or workspace settings:
-```json
-{
-    "html.customData": [
-        "./node_modules/igniteui-webcomponents/vscode-html-custom-data.json"
-    ]
-}
-```
+| Package path                                                 | Description                        |
+| ------------------------------------------------------------ | ---------------------------------- |
+| igniteui-webcomponents/custom-elements.json                  | Custom Elements Manifest           |
+| igniteui-webcomponents/web-types.json                        | Web Types for JetBrains based IDEs |
+| igniteui-webcomponents/igniteui-webcomponents.css-data.json  | VSCode CSS custom data             |
+| igniteui-webcomponents/igniteui-webcomponents.html-data.json | VSCode HTML custom data            |
 
+## Contributing
 
-## Setup
+Follow the [Contribution Guidelines] to setup a development
+environment.
 
-In order to run the repository locally from the root folder run:
+### Linting and Formatting
 
-```
-npm install
-```
+To scan the project for linting errors, run:
 
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
-```bash
+```sh
 npm run lint
 ```
 
-You can lint with ESLint and Prettier individually as well
-```bash
-npm run lint:eslint
-```
-```bash
-npm run lint:prettier
-```
+To automatically fix most linting and formatting errors, run:
 
-To automatically fix many linting errors, run
-```bash
+```sh
 npm run format
 ```
 
-You can format using ESLint and Prettier individually as well
-```bash
-npm run format:eslint
-```
-```bash
-npm run format:prettier
-```
+Linting and formatting are also set to run in a pre-commit hook in the project.
+
+### Testing with Web Test Runner
 
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
+To run the suite of Web Test Runner tests, run:
+
+```sh
 npm run test
 ```
 
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+To run the tests in watch mode, run:
 
-```bash
+```sh
 npm run test:watch
 ```
 
-## Demoing with Storybook
-To run a local instance of Storybook for your component, run
-```bash
+### Demoing with Storybook
+
+To start a local instance of Storybook for your component, run:
+
+```sh
 npm run storybook
 ```
 
-To build a production version of Storybook, run
-```bash
+To build a production version of Storybook, run:
+
+```sh
 npm run storybook:build
 ```
+
+[Ignite UI for Web Components]: https://www.infragistics.com/products/ignite-ui-web-components
+[Indigo.Design Design System]: https://www.infragistics.com/products/appbuilder/ui-toolkit
+[Ignite UI for WebComponents Grids]: https://www.npmjs.com/package/igniteui-webcomponents-grids
+[Dock Manager Picture]: https://github.com/IgniteUI/igniteui-webcomponents/assets/52001020/a9643f17-f1c2-4554-87aa-96c9daea13b0
+[Custom Elements Manifest]: https://github.com/webcomponents/custom-elements-manifest
+[VSCode Custom Data Format]: https://github.com/microsoft/vscode-custom-data
+[Web Types]: https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html
+[chrome_48x48]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png
+[firefox_48x48]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png
+[edge_48x48]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png
+[opera_48x48]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png
+[safari_48x48]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png
+[Contribution Guidelines]: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/.github/CONTRIBUTING.md
+[Pivot Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview
+[Data Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview
+[Tree Grid Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview
+[Switch Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch
+[Ripple Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple
+[Radio Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio
+[Navigation Drawer Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navigation-drawer
+[Navigation Bar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar
+[List Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/list
+[Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
+[Icon Button Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/icon-button
+[Icon Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon
+[Form Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/form
+[Checkbox Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/checkbox
+[Card Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/card
+[Calendar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/calendar
+[Button Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button
+[Badge Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge
+[Avatar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar
+[Slider Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/slider
+[Rating Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating
+[Toast Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast
+[Snackbar Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar
+[Chip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip
+[Circular Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress
+[Linear Progress Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress
+[Dropdown Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast
+[Tree Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree
+[Expansion Panel Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel
+[Masked Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input
+[Accordion Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion
+[Tabs Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs
+[Date Time Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input
+[Dialog Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/dialog
+[Select Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select
+[Stepper Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper
+[Combo Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/combo/overview
+[Textarea Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area
+[Button Group Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button-group
+[Banner Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/banner
+[Divider Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/divider
+[Date Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/date-picker
+[1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
+[2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
+[2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0
+[2.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.2.0
+[3.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0
+[3.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0
+[3.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.4.0
+[4.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.1.0
+[4.5.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.5.0
+[4.10.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.10.0

package/components/accordion/accordion.d.ts

@@ -34,9 +34,9 @@ export default class IgcAccordionComponent extends LitElement {
     private closePanel;
     private openPanel;
     /** Hides all of the child expansion panels' contents. */
-    hideAll(): void;
+    hideAll(): Promise<void>;
     /** Shows all of the child expansion panels' contents. */
-    showAll(): void;
+    showAll(): Promise<void>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/accordion/accordion.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, endKey, homeKey, shiftKey, } from '../common/controllers/key-bindings.js';
-import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import { styles } from './themes/accordion.base.css.js';
@@ -57,70 +56,60 @@ class IgcAccordionComponent extends LitElement {
         this.getPanelHeader(next).focus();
     }
     collapseAll() {
-        const panels = this.enabledPanels;
-        for (const panel of panels) {
+        for (const panel of this.enabledPanels) {
             this.closePanel(panel);
         }
     }
     expandAll(event) {
         const current = event.target;
-        const panels = this.enabledPanels;
-        if (this.singleExpand) {
-            for (const panel of panels) {
+        for (const panel of this.enabledPanels) {
+            if (this.singleExpand) {
                 current === panel ? this.openPanel(panel) : this.closePanel(panel);
             }
-        }
-        else {
-            for (const panel of panels) {
+            else {
                 this.openPanel(panel);
             }
         }
     }
     handlePanelOpening(event) {
-        const panel = event.target;
-        if (!this.singleExpand || !this.panels.includes(panel)) {
+        const current = event.target;
+        if (!(this.singleExpand && this.panels.includes(current))) {
             return;
         }
-        this.enabledPanels.forEach((p) => {
-            if (p.open && p !== panel) {
-                this.closePanel(p);
+        for (const panel of this.enabledPanels) {
+            if (panel.open && panel !== current) {
+                this.closePanel(panel);
             }
-        });
+        }
     }
     getNextPanel(panel, dir = 1) {
         const idx = this.enabledPanels.indexOf(panel);
         return this.enabledPanels[idx + dir] || panel;
     }
     getPanelHeader(panel) {
-        return panel.shadowRoot?.querySelector('div[part="header"]');
+        return panel.renderRoot.querySelector('div[part="header"]');
     }
     async closePanel(panel) {
-        if (!panel.open) {
+        if (!(panel.open &&
+            panel.emitEvent('igcClosing', { cancelable: true, detail: panel }))) {
             return;
         }
-        if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {
-            return;
-        }
-        panel.hide();
-        await panel.updateComplete;
+        await panel.hide();
         panel.emitEvent('igcClosed', { detail: panel });
     }
     async openPanel(panel) {
-        if (panel.open) {
-            return;
-        }
-        if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {
+        if (panel.open ||
+            !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {
             return;
         }
-        panel.show();
-        await panel.updateComplete;
+        await panel.show();
         panel.emitEvent('igcOpened', { detail: panel });
     }
-    hideAll() {
-        this.panels.forEach((p) => p.hide());
+    async hideAll() {
+        await Promise.all(this.panels.map((panel) => panel.hide()));
     }
-    showAll() {
-        this.panels.forEach((p) => p.show());
+    async showAll() {
+        await Promise.all(this.panels.map((panel) => panel.show()));
     }
     render() {
         return html `<slot></slot>`;
@@ -130,13 +119,14 @@ IgcAccordionComponent.tagName = 'igc-accordion';
 IgcAccordionComponent.styles = styles;
 export default IgcAccordionComponent;
 __decorate([
-    queryAssignedElements({ selector: 'igc-expansion-panel:not([disabled])' })
+    queryAssignedElements({
+        selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,
+    })
 ], IgcAccordionComponent.prototype, "enabledPanels", void 0);
 __decorate([
     property({ attribute: 'single-expand', reflect: true, type: Boolean })
 ], IgcAccordionComponent.prototype, "singleExpand", void 0);
 __decorate([
-    queryAssignedElements({ selector: 'igc-expansion-panel' }),
-    blazorSuppress()
+    queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })
 ], IgcAccordionComponent.prototype, "panels", void 0);
 //# sourceMappingURL=accordion.js.map

package/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({ selector: 'igc-expansion-panel:not([disabled])' })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  private get firstEnabled() {\n    return this.enabledPanels[0];\n  }\n\n  private get lastEnabled() {\n    return this.enabledPanels[this.enabledPanels.length - 1];\n  }\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: 'igc-expansion-panel' })\n  @blazorSuppress()\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n\n    this.addEventListener('igcOpening', this.handlePanelOpening);\n\n    addKeybindings(this, {\n      skip: this.skipKeybinding,\n      bindingDefaults: { preventDefault: true },\n    })\n      .set(homeKey, () => this.getPanelHeader(this.firstEnabled).focus())\n      .set(endKey, () => this.getPanelHeader(this.lastEnabled).focus())\n      .set(arrowUp, this.navigatePrev)\n      .set(arrowDown, this.navigateNext)\n      .set([shiftKey, altKey, arrowDown], this.expandAll)\n      .set([shiftKey, altKey, arrowUp], this.collapseAll);\n  }\n\n  private skipKeybinding(target: Element) {\n    return !(\n      target.matches(IgcExpansionPanelComponent.tagName) &&\n      this.enabledPanels.includes(target as IgcExpansionPanelComponent)\n    );\n  }\n\n  private navigatePrev(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, -1);\n\n    if (event.altKey || next === current) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (event.altKey || next === current) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private collapseAll() {\n    const panels = this.enabledPanels;\n    for (const panel of panels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const panels = this.enabledPanels;\n\n    if (this.singleExpand) {\n      for (const panel of panels) {\n        current === panel ? this.openPanel(panel) : this.closePanel(panel);\n      }\n    } else {\n      for (const panel of panels) {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const panel = event.target as IgcExpansionPanelComponent;\n    if (!this.singleExpand || !this.panels.includes(panel)) {\n      return;\n    }\n    this.enabledPanels.forEach((p) => {\n      if (p.open && p !== panel) {\n        this.closePanel(p);\n      }\n    });\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const idx = this.enabledPanels.indexOf(panel);\n    return this.enabledPanels[idx + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.shadowRoot?.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (!panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {\n      return;\n    }\n    panel.hide();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {\n      return;\n    }\n\n    panel.show();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public hideAll() {\n    this.panels.forEach((p) => p.hide());\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public showAll() {\n    this.panels.forEach((p) => p.show());\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  endKey,\n  homeKey,\n  shiftKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { styles } from './themes/accordion.base.css.js';\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);\n  }\n\n  @queryAssignedElements({\n    selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,\n  })\n  private enabledPanels!: Array<IgcExpansionPanelComponent>;\n\n  private get firstEnabled() {\n    return this.enabledPanels[0];\n  }\n\n  private get lastEnabled() {\n    return this.enabledPanels[this.enabledPanels.length - 1];\n  }\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /* blazorSuppress */\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n\n    this.addEventListener('igcOpening', this.handlePanelOpening);\n\n    addKeybindings(this, {\n      skip: this.skipKeybinding,\n      bindingDefaults: { preventDefault: true },\n    })\n      .set(homeKey, () => this.getPanelHeader(this.firstEnabled).focus())\n      .set(endKey, () => this.getPanelHeader(this.lastEnabled).focus())\n      .set(arrowUp, this.navigatePrev)\n      .set(arrowDown, this.navigateNext)\n      .set([shiftKey, altKey, arrowDown], this.expandAll)\n      .set([shiftKey, altKey, arrowUp], this.collapseAll);\n  }\n\n  private skipKeybinding(target: Element) {\n    return !(\n      target.matches(IgcExpansionPanelComponent.tagName) &&\n      this.enabledPanels.includes(target as IgcExpansionPanelComponent)\n    );\n  }\n\n  private navigatePrev(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, -1);\n\n    if (event.altKey || next === current) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private navigateNext(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n    const next = this.getNextPanel(current, 1);\n\n    if (event.altKey || next === current) {\n      return;\n    }\n\n    this.getPanelHeader(next).focus();\n  }\n\n  private collapseAll() {\n    for (const panel of this.enabledPanels) {\n      this.closePanel(panel);\n    }\n  }\n\n  private expandAll(event: KeyboardEvent) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    for (const panel of this.enabledPanels) {\n      if (this.singleExpand) {\n        current === panel ? this.openPanel(panel) : this.closePanel(panel);\n      } else {\n        this.openPanel(panel);\n      }\n    }\n  }\n\n  private handlePanelOpening(event: Event) {\n    const current = event.target as IgcExpansionPanelComponent;\n\n    if (!(this.singleExpand && this.panels.includes(current))) {\n      return;\n    }\n\n    for (const panel of this.enabledPanels) {\n      if (panel.open && panel !== current) {\n        this.closePanel(panel);\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const idx = this.enabledPanels.indexOf(panel);\n    return this.enabledPanels[idx + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.renderRoot.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (\n      !(\n        panel.open &&\n        panel.emitEvent('igcClosing', { cancelable: true, detail: panel })\n      )\n    ) {\n      return;\n    }\n\n    await panel.hide();\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (\n      panel.open ||\n      !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })\n    ) {\n      return;\n    }\n\n    await panel.show();\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public async hideAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.hide()));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public async showAll(): Promise<void> {\n    await Promise.all(this.panels.map((panel) => panel.show()));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}