igniteui-webcomponents 6.1.2 → 6.2.0

package/CHANGELOG.md

@@ -4,6 +4,37 @@ 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/).
 
+## [6.2.0] - 2025-08-04
+### Added
+- Form associated custom elements now expose the **ig-invalid** custom state for styling with the `:state()` CSS selector.
+  [See here for additional information](https://developer.mozilla.org/en-US/docs/Web/CSS/:state)
+
+### Changed
+- Form associated custom elements validity behavior. Now elements will try to mimic `:user-invalid`, and won't apply invalid
+  styles unless interacted through the UI or through a form `requestSubmit()/reset()` invocation.
+
+### Fixed
+- #### All igc-input based components
+  - Invalid state in **readonly** mode [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+  - Cannot style **helper-text** parts [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Card
+  - Slotted igc-avatar in Indigo theme [#1795](https://github.com/IgniteUI/igniteui-webcomponents/pull/1795)
+- #### Combo
+  - Border overlaps label text in invalid state [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Date picker
+  - Indigo elevation styles [#1799](https://github.com/IgniteUI/igniteui-webcomponents/pull/1799)
+- #### Date range picker
+  - Return focus to main input on keyboard interactions [#1783](https://github.com/IgniteUI/igniteui-webcomponents/pull/1783)
+- #### Input
+  - Placeholder and label alignment in Material theme [#1792](https://github.com/IgniteUI/igniteui-webcomponents/pull/1792)
+- #### Navigation drawer
+  - Update *relative* positions styles and animation [#1806](https://github.com/IgniteUI/igniteui-webcomponents/pull/1806)
+- #### Select
+  - Invalid state theming issues [#1786](https://github.com/IgniteUI/igniteui-webcomponents/pull/1786)
+- #### Textarea
+  - Material theme interaction issues [#1797](https://github.com/IgniteUI/igniteui-webcomponents/pull/1797)
+  - Resizing behavior with suffix part [#1797](https://github.com/IgniteUI/igniteui-webcomponents/pull/1797)
+
 ## [6.1.2] - 2025-07-14
 ### Added
 - #### File input
@@ -953,6 +984,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.2...6.2.0
 [6.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.1...6.1.2
 [6.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.1.0...6.1.1
 [6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.0.1...6.1.0

package/LICENSE

@@ -8,6 +8,6 @@ https://www.infragistics.com/products/ignite-ui-web-components and open a suppor
 To acquire a license for commercial usage, please register for trial at https://www.infragistics.com/products/ignite-ui-web-components
 and refer to the purchasing options in the pricing section on the product page.
 
-© Copyright 2021 INFRAGISTICS. All Rights Reserved.
+© Copyright 2025 INFRAGISTICS. All Rights Reserved.
 The Infragistics Ultimate license & copyright applies to this distribution.
 For information on that license, please go to our website https://www.infragistics.com/legal/license.

package/README.md

@@ -9,7 +9,7 @@
 [![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] 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 kit for Figma.
+[Ignite UI for Web Components] is a comprehensive library that includes the fastest [Data Grid] on the market, a high-performing [Hierarchical Grid], Pivot Grid, 60+ data [Charts], [Dock Manager], and more. Plus maps, gauges and other reusable feature-rich components to help you create better web apps and modern-day UX experiences.
 
 See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
@@ -21,8 +21,12 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 
 ## Overview
 
+<details open>
+<summary>Components</summary>
+
 | Components              | Status |         Documentation          | Released Version |
 | :---------------------- | :----: | :----------------------------: | :--------------: |
+| Date Range Picker       |   ✅   | [Docs][Date Range Picker Docs] |     [6.1.0]      |
 | Tooltip                 |   ✅   |      [Docs][Tooltip Docs]      |     [5.4.0]      |
 | File Input              |   ✅   |    [Docs][File Input Docs]     |     [5.4.0]      |
 | Tile Manager            |   ✅   |   [Docs][Tile Manager Docs]    |     [5.3.0]      |
@@ -69,6 +73,8 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
 | Ripple                  |   ✅   |      [Docs][Ripple Docs]       |     [1.0.0]      |
 | Switch                  |   ✅   |      [Docs][Switch Docs]       |     [1.0.0]      |
 
+</details>
+
 ## Components available in [Ignite UI for WebComponents Grids]
 
 | Components        | Status |         Documentation          |
@@ -198,6 +204,10 @@ npm run storybook:build
 [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
+[Data Grid]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid
+[Hierarchical Grid]: https://www.infragistics.com/webcomponentssite/components/grids/hierarchical-grid/overview
+[Charts]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/chart-overview
+[Dock Manager]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager
 [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
@@ -245,6 +255,7 @@ npm run storybook:build
 [Tile Manager Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager
 [File Input Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/file-input
 [Tooltip Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip
+[Date Range Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-range-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
@@ -258,3 +269,4 @@ npm run storybook:build
 [5.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.1.0
 [5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.3.0
 [5.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.4.0
+[6.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/6.1.0

package/components/card/themes/content.js

@@ -1,14 +1,21 @@
 import { css } from 'lit';
 import { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js';
+import { styles as indigo } from './shared/content/card.content.indigo.css.js';
 const light = {
     bootstrap: css `
     ${bootstrap}
   `,
+    indigo: css `
+    ${indigo}
+  `,
 };
 const dark = {
     bootstrap: css `
     ${bootstrap}
   `,
+    indigo: css `
+    ${indigo}
+  `,
 };
 export const all = { light, dark };
 //# sourceMappingURL=content.js.map

package/components/card/themes/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sourceRoot":"","sources":["../../../../src/components/card/themes/content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAErF,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../../../src/components/card/themes/content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAE/E,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js';\nimport { styles as indigo } from './shared/content/card.content.indigo.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/card/themes/shared/content/card.content.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/card/themes/shared/content/card.content.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host ::slotted(igc-avatar){--ig-size: 3}`;
+//# sourceMappingURL=card.content.indigo.css.js.map

package/components/card/themes/shared/content/card.content.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.content.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/card/themes/shared/content/card.content.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2CAA2C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host ::slotted(igc-avatar){--ig-size: 3}`;\n"]}

package/components/carousel/carousel-indicator.d.ts

@@ -16,7 +16,7 @@ export default class IgcCarouselIndicatorComponent extends LitElement {
     static styles: import("lit").CSSResult;
     static register(): void;
     private readonly _internals;
-    private _carousel?;
+    private readonly _carousel?;
     protected get _labelFormat(): string;
     active: boolean;
     index: number;

package/components/carousel/carousel-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-indicator.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-indicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAcjE,MAAqB,6BAA8B,SAAQ,UAAU;IAArE;;QASmB,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;SAC7B,CAAC,CAAC;QAWI,WAAM,GAAG,KAAK,CAAC;QAIf,UAAK,GAAG,CAAC,CAAC;IAoCnB,CAAC;IAzDQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IACnD,CAAC;IASD,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,CAAC;IAWe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC;IACvC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACpE,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAC3D,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;;;;2CAIP,QAAQ,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;;;KAGvE,CAAC;IACJ,CAAC;;AA5DsB,qCAAO,GAAG,wBAAwB,AAA3B,CAA4B;AACnC,oCAAM,GAAG,MAAM,AAAT,CAAU;eAFpB,6BAA6B;AAcxC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gEACd;AAQlC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DACT;AAIf;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DACd","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { carouselContext } from '../common/context.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-indicator.base.css.js';\n\n/**\n * Used when a custom indicator needs to be passed to the `igc-carousel` component.\n *\n * @element igc-carousel-indicator\n *\n * @slot - Default slot for projected inactive indicator.\n * @slot active - Default slot for projected active indicator.\n *\n * @csspart indicator - The wrapping container of the carousel dot indicator.\n * @csspart inactive - The wrapping container of the inactive dot indicator.\n * @csspart active - The wrapping container of the active dot indicator.\n */\nexport default class IgcCarouselIndicatorComponent extends LitElement {\n  public static readonly tagName = 'igc-carousel-indicator';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselIndicatorComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'tab' },\n  });\n\n  @consume({ context: carouselContext, subscribe: true })\n  private _carousel?: IgcCarouselComponent;\n\n  protected get _labelFormat(): string {\n    return this._carousel ? this._carousel.indicatorsLabelFormat : '';\n  }\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public index = 0;\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.role = 'tab';\n    this.slot = this.slot || 'indicator';\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.tabIndex = this.active ? 0 : -1;\n      this._internals.setARIA({ ariaSelected: this.active.toString() });\n    }\n\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this.index + 1),\n    });\n  }\n\n  protected override render() {\n    const forward = this.active ? 'visible' : 'hidden';\n    const backward = this.active ? 'hidden' : 'visible';\n\n    return html`\n      <div\n        part=\"indicator inactive\"\n        style=${styleMap({ visibility: backward })}\n      >\n        <slot></slot>\n      </div>\n      <div part=\"indicator active\" style=${styleMap({ visibility: forward })}>\n        <slot name=\"active\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-indicator': IgcCarouselIndicatorComponent;\n  }\n}\n"]}
+{"version":3,"file":"carousel-indicator.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-indicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAcjE,MAAqB,6BAA8B,SAAQ,UAAU;IAArE;;QASmB,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;SAC7B,CAAC,CAAC;QAWI,WAAM,GAAG,KAAK,CAAC;QAIf,UAAK,GAAG,CAAC,CAAC;IAoCnB,CAAC;IAzDQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IACnD,CAAC;IASD,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,CAAC;IAWe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC;IACvC,CAAC;IAEkB,UAAU,CAAC,iBAAuC;QACnE,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACpE,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAC3D,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;;;;2CAIP,QAAQ,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;;;KAGvE,CAAC;IACJ,CAAC;;AA5DsB,qCAAO,GAAG,wBAAwB,AAA3B,CAA4B;AACnC,oCAAM,GAAG,MAAM,AAAT,CAAU;eAFpB,6BAA6B;AAc/B;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gEACL;AAQ3C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DACT;AAIf;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DACd","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { carouselContext } from '../common/context.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-indicator.base.css.js';\n\n/**\n * Used when a custom indicator needs to be passed to the `igc-carousel` component.\n *\n * @element igc-carousel-indicator\n *\n * @slot - Default slot for projected inactive indicator.\n * @slot active - Default slot for projected active indicator.\n *\n * @csspart indicator - The wrapping container of the carousel dot indicator.\n * @csspart inactive - The wrapping container of the inactive dot indicator.\n * @csspart active - The wrapping container of the active dot indicator.\n */\nexport default class IgcCarouselIndicatorComponent extends LitElement {\n  public static readonly tagName = 'igc-carousel-indicator';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselIndicatorComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'tab' },\n  });\n\n  @consume({ context: carouselContext, subscribe: true })\n  private readonly _carousel?: IgcCarouselComponent;\n\n  protected get _labelFormat(): string {\n    return this._carousel ? this._carousel.indicatorsLabelFormat : '';\n  }\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public index = 0;\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.role = 'tab';\n    this.slot = this.slot || 'indicator';\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.tabIndex = this.active ? 0 : -1;\n      this._internals.setARIA({ ariaSelected: this.active.toString() });\n    }\n\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this.index + 1),\n    });\n  }\n\n  protected override render() {\n    const forward = this.active ? 'visible' : 'hidden';\n    const backward = this.active ? 'hidden' : 'visible';\n\n    return html`\n      <div\n        part=\"indicator inactive\"\n        style=${styleMap({ visibility: backward })}\n      >\n        <slot></slot>\n      </div>\n      <div part=\"indicator active\" style=${styleMap({ visibility: forward })}>\n        <slot name=\"active\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-indicator': IgcCarouselIndicatorComponent;\n  }\n}\n"]}

package/components/carousel/carousel-slide.d.ts

@@ -10,10 +10,9 @@ export default class IgcCarouselSlideComponent extends LitElement {
     static styles: import("lit").CSSResult;
     static readonly tagName = "igc-carousel-slide";
     static register(): void;
-    private static readonly increment;
     private readonly _internals;
-    private readonly _animationPlayer;
-    private _carousel?;
+    private readonly _player;
+    private readonly _carousel?;
     protected get _index(): number;
     protected get _total(): number;
     protected get _animation(): "fade" | "none" | "slideVer" | "slideHor";
@@ -30,6 +29,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
      */
     toggleAnimation(type: 'in' | 'out', direction?: 'normal' | 'reverse'): Promise<boolean>;
     protected willUpdate(): void;
+    /** @internal */
     connectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/components/carousel/carousel-slide.js

@@ -12,9 +12,10 @@ import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, formatString } from '../common/util.js';
+import { formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import { styles } from './themes/carousel-slide.base.css.js';
+let nextId = 1;
 class IgcCarouselSlideComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -24,7 +25,7 @@ class IgcCarouselSlideComponent extends LitElement {
                 ariaRoleDescription: 'slide',
             },
         });
-        this._animationPlayer = addAnimationController(this);
+        this._player = addAnimationController(this);
         this.active = false;
         this.previous = false;
     }
@@ -49,16 +50,11 @@ class IgcCarouselSlideComponent extends LitElement {
     }
     async toggleAnimation(type, direction = 'normal') {
         const animation = animations.get(this._animation).get(type);
-        const options = {
+        return await this._player.playExclusive(animation({
             duration: 320,
             easing: EaseInOut.Quad,
             direction,
-        };
-        const [_, event] = await Promise.all([
-            this._animationPlayer.stopAll(),
-            this._animationPlayer.play(animation(options)),
-        ]);
-        return event.type === 'finish';
+        }));
     }
     willUpdate() {
         this._internals.setARIA({
@@ -67,16 +63,14 @@ class IgcCarouselSlideComponent extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id =
-            this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;
+        this.id = this.id || `igc-carousel-slide-${nextId++}`;
     }
     render() {
-        return html ` <slot></slot> `;
+        return html `<slot></slot>`;
     }
 }
 IgcCarouselSlideComponent.styles = styles;
 IgcCarouselSlideComponent.tagName = 'igc-carousel-slide';
-IgcCarouselSlideComponent.increment = createCounter();
 export default IgcCarouselSlideComponent;
 __decorate([
     consume({ context: carouselContext, subscribe: true })

package/components/carousel/carousel-slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-slide.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { carouselContext } from '../common/context.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter, formatString } from '../common/util.js';\nimport { animations } from './animations.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-slide.base.css.js';\n\n/**\n * A single content container within a set of containers used in the context of an `igc-carousel`.\n *\n * @element igc-carousel-slide\n *\n * @slot Default slot for the carousel slide.\n */\nexport default class IgcCarouselSlideComponent extends LitElement {\n  public static override styles = styles;\n  public static readonly tagName = 'igc-carousel-slide';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselSlideComponent);\n  }\n\n  private static readonly increment = createCounter();\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'tabpanel',\n      ariaRoleDescription: 'slide',\n    },\n  });\n\n  private readonly _animationPlayer = addAnimationController(this);\n\n  @consume({ context: carouselContext, subscribe: true })\n  private _carousel?: IgcCarouselComponent;\n\n  protected get _index() {\n    return this._carousel ? this._carousel.slides.indexOf(this) : 0;\n  }\n\n  protected get _total() {\n    return this._carousel ? this._carousel.slides.length : 0;\n  }\n\n  protected get _animation() {\n    const animation = this._carousel?.animationType ?? 'slide';\n\n    if (animation === 'slide') {\n      return this._carousel?.vertical ? 'slideVer' : 'slideHor';\n    }\n\n    return animation;\n  }\n\n  protected get _labelFormat() {\n    return this._carousel ? this._carousel.slidesLabelFormat : '';\n  }\n\n  /**\n   * The current active slide for the carousel component.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ type: Boolean, reflect: true })\n  public previous = false;\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use Carousel's `select` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ) {\n    const animation = animations.get(this._animation)!.get(type)!;\n\n    const options: KeyframeAnimationOptions = {\n      duration: 320,\n      easing: EaseInOut.Quad,\n      direction,\n    };\n\n    const [_, event] = await Promise.all([\n      this._animationPlayer.stopAll(),\n      this._animationPlayer.play(animation(options)),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  protected override willUpdate(): void {\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this._index + 1, this._total),\n    });\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.id =\n      this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;\n  }\n\n  protected override render() {\n    return html` <slot></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-slide': IgcCarouselSlideComponent;\n  }\n}\n"]}
+{"version":3,"file":"carousel-slide.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { carouselContext } from '../common/context.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport { animations } from './animations.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { styles } from './themes/carousel-slide.base.css.js';\n\nlet nextId = 1;\n\n/**\n * A single content container within a set of containers used in the context of an `igc-carousel`.\n *\n * @element igc-carousel-slide\n *\n * @slot Default slot for the carousel slide.\n */\nexport default class IgcCarouselSlideComponent extends LitElement {\n  public static override styles = styles;\n  public static readonly tagName = 'igc-carousel-slide';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselSlideComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'tabpanel',\n      ariaRoleDescription: 'slide',\n    },\n  });\n\n  private readonly _player = addAnimationController(this);\n\n  @consume({ context: carouselContext, subscribe: true })\n  private readonly _carousel?: IgcCarouselComponent;\n\n  protected get _index(): number {\n    return this._carousel ? this._carousel.slides.indexOf(this) : 0;\n  }\n\n  protected get _total(): number {\n    return this._carousel ? this._carousel.slides.length : 0;\n  }\n\n  protected get _animation() {\n    const animation = this._carousel?.animationType ?? 'slide';\n\n    if (animation === 'slide') {\n      return this._carousel?.vertical ? 'slideVer' : 'slideHor';\n    }\n\n    return animation;\n  }\n\n  protected get _labelFormat(): string {\n    return this._carousel ? this._carousel.slidesLabelFormat : '';\n  }\n\n  /**\n   * The current active slide for the carousel component.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ type: Boolean, reflect: true })\n  public previous = false;\n\n  /**\n   * @hidden @internal\n   * @deprecated since 5.4.0. Use Carousel's `select` method instead.\n   */\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ): Promise<boolean> {\n    const animation = animations.get(this._animation)!.get(type)!;\n\n    return await this._player.playExclusive(\n      animation({\n        duration: 320,\n        easing: EaseInOut.Quad,\n        direction,\n      })\n    );\n  }\n\n  protected override willUpdate(): void {\n    this._internals.setARIA({\n      ariaLabel: formatString(this._labelFormat, this._index + 1, this._total),\n    });\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.id = this.id || `igc-carousel-slide-${nextId++}`;\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-slide': IgcCarouselSlideComponent;\n  }\n}\n"]}

package/components/carousel/carousel.d.ts

@@ -33,27 +33,27 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     static styles: import("lit").CSSResult[];
     static readonly tagName = "igc-carousel";
     static register(): void;
-    private static readonly increment;
     private readonly _carouselId;
     private _paused;
     private _lastInterval;
     private _hasKeyboardInteractionOnIndicators;
     private _hasPointerInteraction;
     private _hasInnerFocus;
-    private _context;
+    private _slides;
+    private _projectedIndicators;
+    private _activeSlide;
+    private _playing;
+    private readonly _slots;
+    private readonly _context;
+    private readonly _defaultIndicators;
     private readonly _carouselSlidesContainerRef;
     private readonly _indicatorsContainerRef;
     private readonly _prevButtonRef;
     private readonly _nextButtonRef;
-    private get hasProjectedIndicators();
-    private get showIndicatorsLabel();
-    private get nextIndex();
-    private get prevIndex();
-    private _defaultIndicators;
-    private _projectedIndicators;
-    private _activeSlide;
-    private _playing;
-    private _observerCallback;
+    private get _hasProjectedIndicators();
+    private get _showIndicatorsLabel();
+    private get _nextIndex();
+    private get _previousIndex();
     /**
      * Whether the carousel should skip rotating to the first slide after it reaches the last.
      * @attr disable-loop
@@ -118,7 +118,7 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     /**
      * The slides of the carousel.
      */
-    slides: Array<IgcCarouselSlideComponent>;
+    get slides(): IgcCarouselSlideComponent[];
     /**
      * The total number of slides.
      */
@@ -135,29 +135,30 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
      * Whether the carousel in in paused state.
      */
     get isPaused(): boolean;
-    protected contextChanged(): void;
-    protected intervalChange(): void;
+    protected _contextChanged(): void;
+    protected _intervalChange(): void;
     constructor();
-    private handleSlotChange;
-    private handleIndicatorSlotChange;
-    private handlePointerInteraction;
-    private handleFocusInteraction;
-    private handlePauseOnInteraction;
-    private handleArrowLeft;
-    private handleArrowRight;
-    private handleHomeKey;
-    private handleEndKey;
-    private handleVerticalSwipe;
-    private handleHorizontalSwipe;
-    private handleIndicatorClick;
-    private handleNavigationInteractionNext;
-    private handleNavigationInteractionPrevious;
-    private handleInteraction;
-    private activateSlide;
-    private updateProjectedIndicators;
-    private resetInterval;
-    private restartInterval;
-    private animateSlides;
+    protected firstUpdated(): Promise<void>;
+    private _observerCallback;
+    private _handleSlotChange;
+    private _handlePointerInteraction;
+    private _handleFocusInteraction;
+    private _handleIndicatorClick;
+    private _handleArrowLeft;
+    private _handleArrowRight;
+    private _handleHomeKey;
+    private _handleEndKey;
+    private _handleVerticalSwipe;
+    private _handleHorizontalSwipe;
+    private _handleNavigationInteractionNext;
+    private _handleNavigationInteractionPrevious;
+    private _handleInteraction;
+    private _handlePauseOnInteraction;
+    private _activateSlide;
+    private _updateProjectedIndicators;
+    private _resetInterval;
+    private _restartInterval;
+    private _animateSlides;
     /**
      * Resumes playing of the carousel slides.
      */
@@ -182,10 +183,10 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
      * Switches to slide by index, runs any animations, and returns if the operation was successful.
      */
     select(index: number, animationDirection?: 'next' | 'prev'): Promise<boolean>;
-    private navigationTemplate;
-    protected renderIndicators(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
-    private indicatorTemplate;
-    private labelTemplate;
+    private _renderNavigation;
+    protected _renderIndicators(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
+    private _renderIndicatorContainer;
+    private _renderLabel;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {