igniteui-webcomponents 7.3.2 → 7.4.0

package/components/breadcrumb/themes/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAEzE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,aAAa;GAC5B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ,IAAI,YAAY;GAC3B;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;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// Dark Overrides\nimport { styles as bootstrapDark } from './dark/breadcrumb.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/breadcrumb.fluent.css.js';\nimport { styles as indigoDark } from './dark/breadcrumb.indigo.css.js';\nimport { styles as materialDark } from './dark/breadcrumb.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/breadcrumb.bootstrap.css.js';\nimport { styles as fluentLight } from './light/breadcrumb.fluent.css.js';\nimport { styles as indigoLight } from './light/breadcrumb.indigo.css.js';\nimport { styles as materialLight } from './light/breadcrumb.material.css.js';\nimport { styles as shared } from './light/breadcrumb.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/breadcrumb.bootstrap.css.js';\nimport { styles as fluent } from './shared/breadcrumb.fluent.css.js';\nimport { styles as indigo } from './shared/breadcrumb.indigo.css.js';\nimport { styles as material } from './shared/breadcrumb.material.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${material} ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${material} ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/button/button.d.ts

@@ -15,8 +15,6 @@ import { IgcButtonBaseComponent } from './button-base.js';
  * @slot suffix - Renders content after the label of the button.
  *
  * @csspart base - The native button element of the button component.
- * @csspart prefix - The prefix container of the button component.
- * @csspart suffix - The suffix container of the button component.
  */
 export default class IgcButtonComponent extends IgcButtonBaseComponent {
     static readonly tagName = "igc-button";

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAoBhD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;aAC7C,YAAO,GAAG,YAAY,AAAf,CAAgB;aAC7B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGpC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAAkB,WAAW,CAAC;QAI1C,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,cAAc;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAbM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACgB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ButtonVariant } from '../types.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/button.base.css.js';\nimport { styles as shared } from './themes/button/shared/button.common.css.js';\nimport { all } from './themes/button/themes.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * The button supports multiple visual variants, can render as an anchor\n * (`<a>`) element when the `href` attribute is set, and is fully\n * form-associated, acting as a native `submit` or `reset` control.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @csspart base - The native button element of the button component.\n * @csspart prefix - The prefix container of the button component.\n * @csspart suffix - The suffix container of the button component.\n */\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcButtonComponent);\n  }\n\n  /**\n   * The variant of the button which determines its visual appearance.\n   * - `contained` – filled background; highest visual emphasis (default).\n   * - `outlined` – transparent background with a visible border.\n   * - `flat` – no background or border; lowest visual emphasis.\n   * - `fab` – floating action button shape; typically used for primary actions.\n   * @attr variant\n   * @default 'contained'\n   */\n  @property({ reflect: true })\n  public variant: ButtonVariant = 'contained';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderContent() {\n    return html`\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAkBhD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,sBAAsB;aAC7C,YAAO,GAAG,YAAY,AAAf,CAAgB;aAC7B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGpC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAAkB,WAAW,CAAC;QAI1C,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAES,cAAc;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAbM;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACgB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ButtonVariant } from '../types.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/button.base.css.js';\nimport { styles as shared } from './themes/button/shared/button.common.css.js';\nimport { all } from './themes/button/themes.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * The button supports multiple visual variants, can render as an anchor\n * (`<a>`) element when the `href` attribute is set, and is fully\n * form-associated, acting as a native `submit` or `reset` control.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @csspart base - The native button element of the button component.\n */\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcButtonComponent);\n  }\n\n  /**\n   * The variant of the button which determines its visual appearance.\n   * - `contained` – filled background; highest visual emphasis (default).\n   * - `outlined` – transparent background with a visible border.\n   * - `flat` – no background or border; lowest visual emphasis.\n   * - `fab` – floating action button shape; typically used for primary actions.\n   * @attr variant\n   * @default 'contained'\n   */\n  @property({ reflect: true })\n  public variant: ButtonVariant = 'contained';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected _renderContent() {\n    return html`\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}

package/components/button-group/button-group.d.ts

@@ -22,16 +22,22 @@ export default class IgcButtonGroupComponent extends IgcButtonGroupComponent_bas
     static readonly tagName = "igc-button-group";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    /** The values set through the `selectedItems` API, applied once the buttons are rendered. */
-    private _selectedItems;
-    private readonly _slots;
     /**
-     * The toggle buttons of the group, in DOM order. There are none to report
-     * before the first render, when the slot they are assigned to does not exist yet.
+     * The values set through `selectedItems` before there were buttons to apply
+     * them to. Read one time when the buttons render, after which the buttons own
+     * the state.
      */
+    private _selectedItems;
+    private readonly _provider;
+    /** The button reachable by Tab while the group runs a roving tab index. */
+    private _tabStop?;
+    private readonly _slots;
+    /** The toggle buttons of the group, in DOM order. */
     private get _buttons();
     private get _isMultiple();
     private get _selectedButtons();
+    /** The buttons that can take focus. A disabled button is skipped over. */
+    private get _enabledButtons();
     /**
      * Disables all buttons inside the group.
      *
@@ -64,20 +70,44 @@ export default class IgcButtonGroupComponent extends IgcButtonGroupComponent_bas
     protected firstUpdated(): void;
     /** Applies `next` as the selection, clearing the state of every other button. */
     private _applySelection;
+    /**
+     * Finds the tab stop of the group: the selected button, or the first enabled
+     * one if there is no selection, which keeps the group reachable.
+     *
+     * @remarks
+     * The buttons apply the tab stop themselves and read it through the context,
+     * so a tab stop that moves while no button updates must publish again. That
+     * renders every button, so publish only on a real move.
+     */
+    private _updateTabStop;
+    /**
+     * Each button is its own tab stop outside the single selection modes, as is a
+     * button that left the group. A removed button keeps its context, and a
+     * former group must not hold it out of the tab order.
+     */
+    private _isTabStop;
+    /** The button holding focus, when it is one of the group. */
+    private _getFocusedButton;
+    /**
+     * Moves focus to `button` and takes the selection with it, as a radio group
+     * does. The selection moves and never turns off.
+     */
+    private _navigate;
     /** Selects the buttons matching `values`, honoring the selection mode. */
     private _selectFromValues;
     /**
-     * Reduces a selection made outside of the group - through the children or by
-     * adding buttons that bring their own state - to a single button. The last one wins.
+     * Reduces a selection made outside the group, through the children or through
+     * added buttons with their own state, to one button. The last button wins.
      */
     private _enforceSingleSelection;
-    /** Reconciles the group with a button of its own that has turned selected. */
-    private _syncSelection;
+    /** Reconciles the group with the buttons added to or removed from its slot. */
+    private _handleSlotChange;
+    /** Reconciles the group with a button of its own that changed state. */
+    private _syncState;
     private _handleClick;
     private _handleSingleSelection;
-    private _handleMultipleSelection;
-    private _emitSelectEvent;
-    private _emitDeselectEvent;
+    /** Applies a selection made through user interaction, announcing it. */
+    private _setSelected;
     protected render(): TemplateResult;
 }
 declare global {

package/components/button-group/button-group.js

@@ -7,11 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { buttonGroupContext, } from '#internals/context.js';
-import { addContextProvider } from '#internals/controllers/context-provider.js';
+import { addContextProvider, } from '#internals/controllers/context-provider.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addRovingFocusController } from '#internals/controllers/roving-focus.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
-import { asArray, isEmpty, lastOf } from '#internals/utils/arrays.js';
+import { asArray, firstOf, isEmpty, lastOf } from '#internals/utils/arrays.js';
+import { getRoot } from '#internals/utils/dom.js';
 import { getElementFromPath } from '#internals/utils/events.js';
 import { isDefined } from '#internals/utils/types.js';
 import { addThemingController } from '#theming/theming-controller.js';
@@ -26,9 +29,6 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
         registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);
     }
     get _buttons() {
-        if (!this.hasUpdated) {
-            return [];
-        }
         return this._slots.getAssignedElements('[default]', {
             selector: IgcToggleButtonComponent.tagName,
         });
@@ -39,6 +39,9 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
     get _selectedButtons() {
         return this._buttons.filter((button) => button.selected);
     }
+    get _enabledButtons() {
+        return this._buttons.filter((button) => !button.disabled);
+    }
     get selectedItems() {
         return this._selectedButtons
             .map((button) => button.value)
@@ -53,25 +56,46 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
         this._selectedItems = new Set();
         this._slots = addSlotController(this, {
             slots: setSlots(),
-            onChange: this._enforceSingleSelection,
+            onChange: this._handleSlotChange,
         });
         this.disabled = false;
         this.alignment = 'horizontal';
         this.selection = 'single';
         addThemingController(this, all);
+        addInternalsController(this, {
+            initialARIA: { role: 'radiogroup' },
+            reflectRole: true,
+            aria: () => ({
+                role: this._isMultiple ? 'group' : 'radiogroup',
+                ariaDisabled: `${this.disabled}`,
+                ariaOrientation: this._isMultiple ? null : this.alignment,
+            }),
+        });
         const context = {
             instance: this,
-            syncSelection: (button) => this._syncSelection(button),
+            syncState: (button) => this._syncState(button),
+            isTabStop: (button) => this._isTabStop(button),
         };
-        addContextProvider(this, {
+        this._provider = addContextProvider(this, {
             context: buttonGroupContext,
             watch: ['selection', 'disabled'],
             value: () => context,
         });
+        addRovingFocusController(this, {
+            keybindings: {
+                skip: () => this.disabled || this._isMultiple,
+                bindingDefaults: { preventDefault: true, repeat: true },
+            },
+            horizontal: () => this.alignment === 'horizontal',
+            vertical: () => this.alignment === 'vertical',
+            homeEnd: false,
+            items: () => this._enabledButtons,
+            current: () => this._getFocusedButton(),
+            focusItem: (button) => this._navigate(button),
+        });
     }
     willUpdate(changedProperties) {
         if (this.hasUpdated && changedProperties.has('selection')) {
-            this._selectedItems.clear();
             this._applySelection([]);
         }
     }
@@ -82,12 +106,38 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
         else {
             this._enforceSingleSelection();
         }
+        this._updateTabStop();
     }
     _applySelection(next) {
         const selection = new Set(next);
         for (const button of this._buttons) {
             button.selected = selection.has(button);
         }
+        this._updateTabStop();
+    }
+    _updateTabStop() {
+        const enabled = this._enabledButtons;
+        const next = enabled.find((button) => button.selected) ?? firstOf(enabled);
+        if (next !== this._tabStop) {
+            this._tabStop = next;
+            this._provider.publish();
+        }
+    }
+    _isTabStop(button) {
+        return (this._isMultiple ||
+            button === this._tabStop ||
+            !this._buttons.includes(button));
+    }
+    _getFocusedButton() {
+        const button = getRoot(this).activeElement?.closest(IgcToggleButtonComponent.tagName);
+        return button && this._buttons.includes(button) ? button : null;
+    }
+    _navigate(button) {
+        button.focus();
+        if (!button.selected) {
+            this._handleSingleSelection(button);
+            this._updateTabStop();
+        }
     }
     _selectFromValues(values) {
         const matches = this._buttons.filter((button) => values.has(button.value));
@@ -99,10 +149,19 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
             this._applySelection([lastOf(selected)]);
         }
     }
-    _syncSelection(button) {
-        if (!this._isMultiple && this._buttons.includes(button)) {
+    _handleSlotChange() {
+        this._enforceSingleSelection();
+        this._updateTabStop();
+    }
+    _syncState(button) {
+        if (button.selected &&
+            !this._isMultiple &&
+            this._buttons.includes(button)) {
             this._applySelection([button]);
         }
+        else {
+            this._updateTabStop();
+        }
     }
     _handleClick(event) {
         if (this.disabled) {
@@ -113,43 +172,32 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
             return;
         }
         this._isMultiple
-            ? this._handleMultipleSelection(button)
+            ? this._setSelected(button, !button.selected)
             : this._handleSingleSelection(button);
+        this._updateTabStop();
     }
     _handleSingleSelection(button) {
-        const selected = this._selectedButtons.at(0);
+        const selected = firstOf(this._selectedButtons);
         if (selected === button) {
             if (this.selection !== 'single-required') {
-                this._emitDeselectEvent(button);
+                this._setSelected(button, false);
             }
             return;
         }
         if (selected) {
-            this._emitDeselectEvent(selected);
+            this._setSelected(selected, false);
         }
-        this._emitSelectEvent(button);
+        this._setSelected(button, true);
     }
-    _handleMultipleSelection(button) {
-        button.selected
-            ? this._emitDeselectEvent(button)
-            : this._emitSelectEvent(button);
-    }
-    _emitSelectEvent(button) {
-        button.selected = true;
-        this.emitEvent('igcSelect', { detail: button.value });
-    }
-    _emitDeselectEvent(button) {
-        button.selected = false;
-        this.emitEvent('igcDeselect', { detail: button.value });
+    _setSelected(button, selected) {
+        button.selected = selected;
+        this.emitEvent(selected ? 'igcSelect' : 'igcDeselect', {
+            detail: button.value,
+        });
     }
     render() {
         return html `
-      <div
-        part="group"
-        role=${this._isMultiple ? 'group' : 'radiogroup'}
-        aria-disabled=${this.disabled}
-        @click=${this._handleClick}
-      >
+      <div part="group" @click=${this._handleClick}>
         <slot></slot>
       </div>
     `;

package/components/button-group/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  type ButtonGroupContext,\n  buttonGroupContext,\n} from '#internals/context.js';\nimport { addContextProvider } from '#internals/controllers/context-provider.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { asArray, isEmpty, lastOf } from '#internals/utils/arrays.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { isDefined } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ButtonGroupSelection, ContentOrientation } from '../types.js';\nimport { styles } from './themes/group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/group.common.css.js';\nimport IgcToggleButtonComponent from './toggle-button.js';\n\nexport interface IgcButtonGroupComponentEventMap {\n  igcSelect: CustomEvent<string | undefined>;\n  igcDeselect: CustomEvent<string | undefined>;\n}\n\n/* blazorAdditionalDependency: IgcToggleButtonComponent */\n/**\n * Groups a series of toggle buttons together, exposing features such as layout and selection.\n *\n * @element igc-button-group\n *\n * @slot - Renders the toggle buttons of the group.\n *\n * @fires igcSelect - Emitted when a button is selected through user interaction.\n * @fires igcDeselect - Emitted when a button is deselected through user interaction.\n *\n * @csspart group - The button group container.\n */\nexport default class IgcButtonGroupComponent extends EventEmitterMixin<\n  IgcButtonGroupComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-button-group';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);\n  }\n\n  //#region Internal state & properties\n\n  /** The values set through the `selectedItems` API, applied once the buttons are rendered. */\n  private _selectedItems = new Set<string>();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._enforceSingleSelection,\n  });\n\n  /**\n   * The toggle buttons of the group, in DOM order. There are none to report\n   * before the first render, when the slot they are assigned to does not exist yet.\n   */\n  private get _buttons(): IgcToggleButtonComponent[] {\n    if (!this.hasUpdated) {\n      return [];\n    }\n\n    return this._slots.getAssignedElements('[default]', {\n      selector: IgcToggleButtonComponent.tagName,\n    });\n  }\n\n  private get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  private get _selectedButtons(): IgcToggleButtonComponent[] {\n    return this._buttons.filter((button) => button.selected);\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Disables all buttons inside the group.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * The orientation of the buttons in the group.\n   *\n   * @attr alignment\n   * @default 'horizontal'\n   */\n  @property({ reflect: true })\n  public alignment: ContentOrientation = 'horizontal';\n\n  /**\n   * Controls the mode of selection for the button group.\n   *\n   * @attr selection\n   * @default 'single'\n   */\n  @property({ reflect: false })\n  public selection: ButtonGroupSelection = 'single';\n\n  /**\n   * Gets/Sets the currently selected buttons (their values).\n   * @attr\n   */\n  @property({ attribute: 'selected-items', type: Array, reflect: false })\n  public get selectedItems(): string[] {\n    // Buttons are not required to have a value, in which case they report none.\n    return this._selectedButtons\n      .map((button) => button.value)\n      .filter(isDefined);\n  }\n\n  public set selectedItems(values: string[]) {\n    this._selectedItems = new Set(asArray(values));\n    this._selectFromValues(this._selectedItems);\n  }\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n\n    const context: ButtonGroupContext = {\n      instance: this,\n      syncSelection: (button) => this._syncSelection(button),\n    };\n\n    addContextProvider(this, {\n      context: buttonGroupContext,\n      watch: ['selection', 'disabled'],\n      value: () => context,\n    });\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (this.hasUpdated && changedProperties.has('selection')) {\n      // The selection modes are not interchangeable - the group starts over.\n      this._selectedItems.clear();\n      this._applySelection([]);\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (isEmpty(this._selectedButtons)) {\n      // Nothing is selected through the children, fall back to the values passed in.\n      this._selectFromValues(this._selectedItems);\n    } else {\n      // A selection through the children takes priority over the passed in values.\n      this._enforceSingleSelection();\n    }\n  }\n\n  //#endregion\n\n  //#region Private API\n\n  /** Applies `next` as the selection, clearing the state of every other button. */\n  private _applySelection(next: IgcToggleButtonComponent[]): void {\n    const selection = new Set(next);\n\n    for (const button of this._buttons) {\n      button.selected = selection.has(button);\n    }\n  }\n\n  /** Selects the buttons matching `values`, honoring the selection mode. */\n  private _selectFromValues(values: Set<string>): void {\n    const matches = this._buttons.filter((button) => values.has(button.value));\n    this._applySelection(this._isMultiple ? matches : matches.slice(0, 1));\n  }\n\n  /**\n   * Reduces a selection made outside of the group - through the children or by\n   * adding buttons that bring their own state - to a single button. The last one wins.\n   */\n  private _enforceSingleSelection(): void {\n    const selected = this._selectedButtons;\n\n    if (!this._isMultiple && selected.length > 1) {\n      this._applySelection([lastOf(selected)]);\n    }\n  }\n\n  /** Reconciles the group with a button of its own that has turned selected. */\n  private _syncSelection(button: IgcToggleButtonComponent): void {\n    if (!this._isMultiple && this._buttons.includes(button)) {\n      this._applySelection([button]);\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClick(event: PointerEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);\n\n    if (!button || !this._buttons.includes(button)) {\n      return;\n    }\n\n    this._isMultiple\n      ? this._handleMultipleSelection(button)\n      : this._handleSingleSelection(button);\n  }\n\n  private _handleSingleSelection(button: IgcToggleButtonComponent): void {\n    const selected = this._selectedButtons.at(0);\n\n    if (selected === button) {\n      // A required selection cannot be toggled off.\n      if (this.selection !== 'single-required') {\n        this._emitDeselectEvent(button);\n      }\n      return;\n    }\n\n    if (selected) {\n      this._emitDeselectEvent(selected);\n    }\n\n    this._emitSelectEvent(button);\n  }\n\n  private _handleMultipleSelection(button: IgcToggleButtonComponent): void {\n    button.selected\n      ? this._emitDeselectEvent(button)\n      : this._emitSelectEvent(button);\n  }\n\n  private _emitSelectEvent(button: IgcToggleButtonComponent): void {\n    button.selected = true;\n    this.emitEvent('igcSelect', { detail: button.value });\n  }\n\n  private _emitDeselectEvent(button: IgcToggleButtonComponent): void {\n    button.selected = false;\n    this.emitEvent('igcDeselect', { detail: button.value });\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected override render(): TemplateResult {\n    return html`\n      <div\n        part=\"group\"\n        role=${this._isMultiple ? 'group' : 'radiogroup'}\n        aria-disabled=${this.disabled}\n        @click=${this._handleClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button-group': IgcButtonGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  type ButtonGroupContext,\n  buttonGroupContext,\n} from '#internals/context.js';\nimport {\n  addContextProvider,\n  type ContextProviderController,\n} from '#internals/controllers/context-provider.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addRovingFocusController } from '#internals/controllers/roving-focus.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { asArray, firstOf, isEmpty, lastOf } from '#internals/utils/arrays.js';\nimport { getRoot } from '#internals/utils/dom.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { isDefined } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ButtonGroupSelection, ContentOrientation } from '../types.js';\nimport { styles } from './themes/group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/group.common.css.js';\nimport IgcToggleButtonComponent from './toggle-button.js';\n\nexport interface IgcButtonGroupComponentEventMap {\n  igcSelect: CustomEvent<string | undefined>;\n  igcDeselect: CustomEvent<string | undefined>;\n}\n\n/* blazorAdditionalDependency: IgcToggleButtonComponent */\n/**\n * Groups a series of toggle buttons together, exposing features such as layout and selection.\n *\n * @element igc-button-group\n *\n * @slot - Renders the toggle buttons of the group.\n *\n * @fires igcSelect - Emitted when a button is selected through user interaction.\n * @fires igcDeselect - Emitted when a button is deselected through user interaction.\n *\n * @csspart group - The button group container.\n */\nexport default class IgcButtonGroupComponent extends EventEmitterMixin<\n  IgcButtonGroupComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-button-group';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);\n  }\n\n  //#region Internal state & properties\n\n  /**\n   * The values set through `selectedItems` before there were buttons to apply\n   * them to. Read one time when the buttons render, after which the buttons own\n   * the state.\n   */\n  private _selectedItems = new Set<string>();\n\n  private readonly _provider: ContextProviderController<\n    typeof buttonGroupContext,\n    this\n  >;\n\n  /** The button reachable by Tab while the group runs a roving tab index. */\n  private _tabStop?: IgcToggleButtonComponent;\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n  });\n\n  /** The toggle buttons of the group, in DOM order. */\n  private get _buttons(): IgcToggleButtonComponent[] {\n    return this._slots.getAssignedElements('[default]', {\n      selector: IgcToggleButtonComponent.tagName,\n    });\n  }\n\n  private get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  private get _selectedButtons(): IgcToggleButtonComponent[] {\n    return this._buttons.filter((button) => button.selected);\n  }\n\n  /** The buttons that can take focus. A disabled button is skipped over. */\n  private get _enabledButtons(): IgcToggleButtonComponent[] {\n    return this._buttons.filter((button) => !button.disabled);\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Disables all buttons inside the group.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * The orientation of the buttons in the group.\n   *\n   * @attr alignment\n   * @default 'horizontal'\n   */\n  @property({ reflect: true })\n  public alignment: ContentOrientation = 'horizontal';\n\n  /**\n   * Controls the mode of selection for the button group.\n   *\n   * @attr selection\n   * @default 'single'\n   */\n  @property({ reflect: false })\n  public selection: ButtonGroupSelection = 'single';\n\n  /**\n   * Gets/Sets the currently selected buttons (their values).\n   * @attr\n   */\n  @property({ attribute: 'selected-items', type: Array, reflect: false })\n  public get selectedItems(): string[] {\n    // Buttons are not required to have a value, in which case they report none.\n    return this._selectedButtons\n      .map((button) => button.value)\n      .filter(isDefined);\n  }\n\n  public set selectedItems(values: string[]) {\n    this._selectedItems = new Set(asArray(values));\n    this._selectFromValues(this._selectedItems);\n  }\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'radiogroup' },\n      reflectRole: true,\n      aria: () => ({\n        role: this._isMultiple ? 'group' : 'radiogroup',\n        ariaDisabled: `${this.disabled}`,\n        ariaOrientation: this._isMultiple ? null : this.alignment,\n      }),\n    });\n\n    const context: ButtonGroupContext = {\n      instance: this,\n      syncState: (button) => this._syncState(button),\n      isTabStop: (button) => this._isTabStop(button),\n    };\n\n    this._provider = addContextProvider(this, {\n      context: buttonGroupContext,\n      watch: ['selection', 'disabled'],\n      value: () => context,\n    });\n\n    // The single selection modes give radio semantics: one tab stop, and arrow\n    // navigation that takes the selection with it. The multiple mode is a group\n    // of toggle buttons, and each button is its own tab stop.\n    addRovingFocusController<IgcToggleButtonComponent>(this, {\n      keybindings: {\n        skip: () => this.disabled || this._isMultiple,\n        bindingDefaults: { preventDefault: true, repeat: true },\n      },\n      horizontal: () => this.alignment === 'horizontal',\n      vertical: () => this.alignment === 'vertical',\n      homeEnd: false,\n      items: () => this._enabledButtons,\n      current: () => this._getFocusedButton(),\n      focusItem: (button) => this._navigate(button),\n    });\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (this.hasUpdated && changedProperties.has('selection')) {\n      // The selection modes are not interchangeable - the group starts over.\n      this._applySelection([]);\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (isEmpty(this._selectedButtons)) {\n      // Nothing is selected through the children, fall back to the values passed in.\n      this._selectFromValues(this._selectedItems);\n    } else {\n      // A selection through the children takes priority over the passed in values.\n      this._enforceSingleSelection();\n    }\n\n    this._updateTabStop();\n  }\n\n  //#endregion\n\n  //#region Private API\n\n  /** Applies `next` as the selection, clearing the state of every other button. */\n  private _applySelection(next: IgcToggleButtonComponent[]): void {\n    const selection = new Set(next);\n\n    for (const button of this._buttons) {\n      button.selected = selection.has(button);\n    }\n\n    this._updateTabStop();\n  }\n\n  /**\n   * Finds the tab stop of the group: the selected button, or the first enabled\n   * one if there is no selection, which keeps the group reachable.\n   *\n   * @remarks\n   * The buttons apply the tab stop themselves and read it through the context,\n   * so a tab stop that moves while no button updates must publish again. That\n   * renders every button, so publish only on a real move.\n   */\n  private _updateTabStop(): void {\n    const enabled = this._enabledButtons;\n    const next = enabled.find((button) => button.selected) ?? firstOf(enabled);\n\n    if (next !== this._tabStop) {\n      this._tabStop = next;\n      this._provider.publish();\n    }\n  }\n\n  /**\n   * Each button is its own tab stop outside the single selection modes, as is a\n   * button that left the group. A removed button keeps its context, and a\n   * former group must not hold it out of the tab order.\n   */\n  private _isTabStop(button: IgcToggleButtonComponent): boolean {\n    return (\n      this._isMultiple ||\n      button === this._tabStop ||\n      !this._buttons.includes(button)\n    );\n  }\n\n  /** The button holding focus, when it is one of the group. */\n  private _getFocusedButton(): IgcToggleButtonComponent | null {\n    const button = getRoot(this).activeElement?.closest(\n      IgcToggleButtonComponent.tagName\n    );\n\n    return button && this._buttons.includes(button) ? button : null;\n  }\n\n  /**\n   * Moves focus to `button` and takes the selection with it, as a radio group\n   * does. The selection moves and never turns off.\n   */\n  private _navigate(button: IgcToggleButtonComponent): void {\n    button.focus();\n\n    if (!button.selected) {\n      this._handleSingleSelection(button);\n      this._updateTabStop();\n    }\n  }\n\n  /** Selects the buttons matching `values`, honoring the selection mode. */\n  private _selectFromValues(values: Set<string>): void {\n    const matches = this._buttons.filter((button) => values.has(button.value));\n    this._applySelection(this._isMultiple ? matches : matches.slice(0, 1));\n  }\n\n  /**\n   * Reduces a selection made outside the group, through the children or through\n   * added buttons with their own state, to one button. The last button wins.\n   */\n  private _enforceSingleSelection(): void {\n    const selected = this._selectedButtons;\n\n    if (!this._isMultiple && selected.length > 1) {\n      this._applySelection([lastOf(selected)]);\n    }\n  }\n\n  /** Reconciles the group with the buttons added to or removed from its slot. */\n  private _handleSlotChange(): void {\n    this._enforceSingleSelection();\n    this._updateTabStop();\n  }\n\n  /** Reconciles the group with a button of its own that changed state. */\n  private _syncState(button: IgcToggleButtonComponent): void {\n    if (\n      button.selected &&\n      !this._isMultiple &&\n      this._buttons.includes(button)\n    ) {\n      // `_applySelection` resolves the tab stop on its own.\n      this._applySelection([button]);\n    } else {\n      this._updateTabStop();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClick(event: PointerEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);\n\n    if (!button || !this._buttons.includes(button)) {\n      return;\n    }\n\n    this._isMultiple\n      ? this._setSelected(button, !button.selected)\n      : this._handleSingleSelection(button);\n\n    // Resolved once the interaction is over - a single selection moves through an\n    // intermediate state whose tab stop is never the one it settles on.\n    this._updateTabStop();\n  }\n\n  private _handleSingleSelection(button: IgcToggleButtonComponent): void {\n    const selected = firstOf(this._selectedButtons);\n\n    if (selected === button) {\n      // A required selection cannot be toggled off.\n      if (this.selection !== 'single-required') {\n        this._setSelected(button, false);\n      }\n      return;\n    }\n\n    if (selected) {\n      this._setSelected(selected, false);\n    }\n\n    this._setSelected(button, true);\n  }\n\n  /** Applies a selection made through user interaction, announcing it. */\n  private _setSelected(\n    button: IgcToggleButtonComponent,\n    selected: boolean\n  ): void {\n    button.selected = selected;\n    this.emitEvent(selected ? 'igcSelect' : 'igcDeselect', {\n      detail: button.value,\n    });\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected override render(): TemplateResult {\n    return html`\n      <div part=\"group\" @click=${this._handleClick}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button-group': IgcButtonGroupComponent;\n  }\n}\n"]}

package/components/button-group/toggle-button.d.ts

@@ -5,7 +5,7 @@ import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @element igc-toggle-button
  *
- * @slot Renders the label/content of the button.
+ * @slot - Renders the label/content of the button.
  *
  * @csspart toggle - The native button element.
  * @csspart focused - The native button element when focused through a keyboard interaction.
@@ -16,6 +16,7 @@ export default class IgcToggleButtonComponent extends LitElement {
     static register(): void;
     private readonly _focusRingManager;
     private readonly _context;
+    private _ownTabIndex?;
     private readonly _nativeButton?;
     /**
      * The value of the control.
@@ -37,6 +38,10 @@ export default class IgcToggleButtonComponent extends LitElement {
      */
     disabled: boolean;
     constructor();
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    /** Gives the tab order a group took over back to the button. */
+    private _releaseTabIndex;
     protected updated(changedProperties: PropertyValues<this>): void;
     /** Sets focus on the button. */
     focus(options?: FocusOptions): void;

package/components/button-group/toggle-button.js

@@ -33,9 +33,35 @@ let IgcToggleButtonComponent = class IgcToggleButtonComponent extends LitElement
         this.disabled = false;
         addThemingController(this, all);
     }
+    disconnectedCallback() {
+        this._releaseTabIndex();
+        super.disconnectedCallback();
+    }
+    willUpdate() {
+        const group = this._context.value;
+        if (!group || group.instance !== this.parentElement) {
+            return;
+        }
+        if (this._ownTabIndex === undefined) {
+            this._ownTabIndex = this.getAttribute('tabindex');
+        }
+        group.isTabStop(this)
+            ? this.removeAttribute('tabindex')
+            : this.setAttribute('tabindex', '-1');
+    }
+    _releaseTabIndex() {
+        if (this._ownTabIndex === undefined) {
+            return;
+        }
+        this._ownTabIndex === null
+            ? this.removeAttribute('tabindex')
+            : this.setAttribute('tabindex', this._ownTabIndex);
+        this._ownTabIndex = undefined;
+    }
     updated(changedProperties) {
-        if (changedProperties.has('selected') && this.selected) {
-            this._context.value?.syncSelection(this);
+        if (changedProperties.has('selected') ||
+            changedProperties.has('disabled')) {
+            this._context.value?.syncState(this);
         }
     }
     focus(options) {

package/components/button-group/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/button-group/toggle-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { buttonGroupContext } from '#internals/context.js';\nimport { createAsyncContext } from '#internals/controllers/async-consumer.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { styles } from './themes/button.base.css.js';\nimport { all } from './themes/button.js';\nimport { styles as shared } from './themes/shared/button/button.common.css.js';\n\n/**\n * The toggle button wraps a native button element and exposes additional `value` and `selected` properties.\n * It is used in the context of a button group to facilitate the creation of group/toolbar like UX behaviors.\n *\n * @element igc-toggle-button\n *\n * @slot Renders the label/content of the button.\n *\n * @csspart toggle - The native button element.\n * @csspart focused - The native button element when focused through a keyboard interaction.\n */\n@shadowOptions({ delegatesFocus: true })\nexport default class IgcToggleButtonComponent extends LitElement {\n  public static override styles = [styles, shared];\n  public static readonly tagName = 'igc-toggle-button';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcToggleButtonComponent);\n  }\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _context = createAsyncContext(this, buttonGroupContext);\n\n  @query('[part~=\"toggle\"]', true)\n  private readonly _nativeButton?: HTMLButtonElement;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Whether the button is selected.\n   *\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Whether the button is disabled.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('selected') && this.selected) {\n      this._context.value?.syncSelection(this);\n    }\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the button. */\n  public override focus(options?: FocusOptions): void {\n    this._nativeButton?.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur(): void {\n    this._nativeButton?.blur();\n  }\n\n  /** Simulates a mouse click on the element. */\n  public override click(): void {\n    this._nativeButton?.click();\n  }\n\n  protected override render(): TemplateResult {\n    const group = this._context.value?.instance;\n\n    // A button of a group with a single selection mode is a radio button, and it\n    // is disabled either on its own or through the group it is part of.\n    const isRadio = group != null && group.selection !== 'multiple';\n    const disabled = this.disabled || Boolean(group?.disabled);\n    const selectedState = this.selected ? 'true' : 'false';\n\n    return html`\n      <button\n        part=${partMap({\n          toggle: true,\n          focused: this._focusRingManager.focused,\n        })}\n        type=\"button\"\n        role=${ifDefined(isRadio ? 'radio' : undefined)}\n        ?disabled=${disabled}\n        .ariaLabel=${this.ariaLabel}\n        aria-checked=${ifDefined(isRadio ? selectedState : undefined)}\n        aria-pressed=${ifDefined(isRadio ? undefined : selectedState)}\n        aria-disabled=${disabled}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toggle-button': IgcToggleButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/button-group/toggle-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { buttonGroupContext } from '#internals/context.js';\nimport { createAsyncContext } from '#internals/controllers/async-consumer.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { styles } from './themes/button.base.css.js';\nimport { all } from './themes/button.js';\nimport { styles as shared } from './themes/shared/button/button.common.css.js';\n\n/**\n * The toggle button wraps a native button element and exposes additional `value` and `selected` properties.\n * It is used in the context of a button group to facilitate the creation of group/toolbar like UX behaviors.\n *\n * @element igc-toggle-button\n *\n * @slot - Renders the label/content of the button.\n *\n * @csspart toggle - The native button element.\n * @csspart focused - The native button element when focused through a keyboard interaction.\n */\n@shadowOptions({ delegatesFocus: true })\nexport default class IgcToggleButtonComponent extends LitElement {\n  public static override styles = [styles, shared];\n  public static readonly tagName = 'igc-toggle-button';\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcToggleButtonComponent);\n  }\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _context = createAsyncContext(this, buttonGroupContext);\n\n  private _ownTabIndex?: string | null;\n\n  @query('[part~=\"toggle\"]', true)\n  private readonly _nativeButton?: HTMLButtonElement;\n\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Whether the button is selected.\n   *\n   * @attr selected\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Whether the button is disabled.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  public override disconnectedCallback(): void {\n    this._releaseTabIndex();\n    super.disconnectedCallback();\n  }\n\n  protected override willUpdate(): void {\n    const group = this._context.value;\n\n    if (!group || group.instance !== this.parentElement) {\n      return;\n    }\n\n    if (this._ownTabIndex === undefined) {\n      this._ownTabIndex = this.getAttribute('tabindex');\n    }\n\n    group.isTabStop(this)\n      ? this.removeAttribute('tabindex')\n      : this.setAttribute('tabindex', '-1');\n  }\n\n  /** Gives the tab order a group took over back to the button. */\n  private _releaseTabIndex(): void {\n    if (this._ownTabIndex === undefined) {\n      return;\n    }\n\n    this._ownTabIndex === null\n      ? this.removeAttribute('tabindex')\n      : this.setAttribute('tabindex', this._ownTabIndex);\n\n    this._ownTabIndex = undefined;\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (\n      changedProperties.has('selected') ||\n      changedProperties.has('disabled')\n    ) {\n      this._context.value?.syncState(this);\n    }\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the button. */\n  public override focus(options?: FocusOptions): void {\n    this._nativeButton?.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the button. */\n  public override blur(): void {\n    this._nativeButton?.blur();\n  }\n\n  /** Simulates a mouse click on the element. */\n  public override click(): void {\n    this._nativeButton?.click();\n  }\n\n  protected override render(): TemplateResult {\n    const group = this._context.value?.instance;\n\n    // A button of a group with a single selection mode is a radio button, and it\n    // is disabled either on its own or through the group it is part of.\n    const isRadio = group != null && group.selection !== 'multiple';\n    const disabled = this.disabled || Boolean(group?.disabled);\n    const selectedState = this.selected ? 'true' : 'false';\n\n    return html`\n      <button\n        part=${partMap({\n          toggle: true,\n          focused: this._focusRingManager.focused,\n        })}\n        type=\"button\"\n        role=${ifDefined(isRadio ? 'radio' : undefined)}\n        ?disabled=${disabled}\n        .ariaLabel=${this.ariaLabel}\n        aria-checked=${ifDefined(isRadio ? selectedState : undefined)}\n        aria-pressed=${ifDefined(isRadio ? undefined : selectedState)}\n        aria-disabled=${disabled}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toggle-button': IgcToggleButtonComponent;\n  }\n}\n"]}

package/components/calendar/base.js

@@ -11,12 +11,13 @@ import { convertToDate, convertToDates } from '#internals/date/converters.js';
 import { CalendarDay, toCalendarDayOrNull } from '#internals/date/model.js';
 import { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';
 import { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';
+import { calendarResourcesMap } from '#internals/i18n/utils.js';
 import { I18nMixin } from '#internals/mixins/i18n.js';
 import { firstOf } from '#internals/utils/arrays.js';
 import { getLocaleWeekStart, getWeekDayNumber } from './helpers.js';
 const i18n = {
     defaultEN: CalendarResourceStringsEN,
-    resourceMapName: 'calendar',
+    resourceMap: calendarResourcesMap,
 };
 let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends I18nMixin(LitElement, i18n) {
     constructor() {

package/components/calendar/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,yBAAyB,GAE1B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAGrF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOpE,MAAM,IAAI,GAEN;IACF,SAAS,EAAE,yBAAyB;IACpC,eAAe,EAAE,UAAU;CAC5B,CAAC;AAIK,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,SAAS,CAIrD,UAAU,EAAE,IAAI,CAAC;IAJZ;;QAKG,0BAAqB,GAAG,KAAK,CAAC;QAkC5B,gBAAW,GAAG,WAAW,CAAC,KAAK,CAAC;QAGhC,WAAM,GAAuB,IAAI,CAAC;QAGlC,YAAO,GAAkB,EAAE,CAAC;QAG5B,kBAAa,GAA0B,EAAE,CAAC;QAG1C,mBAAc,GAA0B,EAAE,CAAC;QAsD9C,cAAS,GAAsB,QAAQ,CAAC;QAQxC,oBAAe,GAAG,KAAK,CAAC;IA0EjC,CAAC;IAnLC,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACjC,CAAC;IASD,IAAc,eAAe;QAC3B,OAAO,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC;IACrC,CAAC;IAED,IAAc,WAAW;QACvB,OAAO,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC;IACvC,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACpC,CAAC;IA4BD,IAAW,KAAK,CAAC,KAAuC;QACtD,IAAI,CAAC,MAAM,GAAG,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,CAAC;IAUD,IAAW,MAAM,CAAC,MAAqD;QACrE,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/D,CAAC;IAKD,IAAW,UAAU,CAAC,KAAuC;QAC3D,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,WAAW;YACd,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC;IACnE,CAAC;IAED,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;IACjC,CAAC;IA2BD,IAAW,SAAS,CAAC,KAA2B;QAC9C,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,SAAS,CAAC;IACvC,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,IAAI,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5D,CAAC;IAUD,IAAW,YAAY,CAAC,KAAwC;QAC9D,IAAI,CAAC,aAAa,GAAG,KAAK,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,CAAC;IAUD,IAAW,aAAa,CAAC,KAAwC;QAC/D,IAAI,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC;IACpC,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,CAAC;IAGkB,MAAM,CAAC,KAAqB;QAC7C,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC9C,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QACpB,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAGkB,YAAY;QAC7B,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QAC5D,CAAC;IACH,CAAC;CACF,CAAA;AAvJW;IADT,KAAK,EAAE;mEACkC;AAGhC;IADT,KAAK,EAAE;6DACkC;AAGhC;IADT,KAAK,EAAE;wDACoC;AAGlC;IADT,KAAK,EAAE;yDAC8B;AAG5B;IADT,KAAK,EAAE;+DAC4C;AAG1C;IADT,KAAK,EAAE;gEAC6C;AAUrD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAGtC;AAcD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;sDAIvC;AASD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0DAKhE;AAYM;IADN,QAAQ,EAAE;2DACoC;AAQxC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;iEAC5C;AAW/B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yDAGrC;AAcD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DAG9B;AAcD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DAG9B;AA9JU,wBAAwB;IAFpC,oBAAoB;IACpB,gBAAgB;GACJ,wBAAwB,CA2LpC","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { convertToDate, convertToDates } from '#internals/date/converters.js';\nimport { CalendarDay, toCalendarDayOrNull } from '#internals/date/model.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getLocaleWeekStart, getWeekDayNumber } from './helpers.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\nconst i18n: I18nControllerConfig<\n  IgcCalendarResourceStrings | ICalendarResourceStrings\n> = {\n  defaultEN: CalendarResourceStringsEN,\n  resourceMapName: 'calendar',\n};\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends I18nMixin<\n  IgcCalendarResourceStrings | ICalendarResourceStrings,\n  typeof LitElement,\n  IgcCalendarResourceStrings & ICalendarResourceStrings\n>(LitElement, i18n) {\n  private _initialActiveDateSet = false;\n  private _weekStart?: WeekDays;\n\n  protected get _hasValues(): boolean {\n    return this._values.length > 0;\n  }\n\n  /**\n   * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.\n   *\n   * @remarks\n   * Derived on access instead of in `update()`, so that its consumers are not sensitive\n   * to the order in which the base class and its descendants update.\n   */\n  protected get _firstDayOfWeek(): number {\n    return getWeekDayNumber(this.weekStart);\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    this._value = toCalendarDayOrNull(convertToDate(value));\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple or range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    this._activeDate =\n      toCalendarDayOrNull(convertToDate(value)) ?? CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   *\n   * @remarks\n   * When not set, the week starts on the first day of the week of the current {@link locale}.\n   * Setting `undefined` returns to the locale value.\n   * @attr week-start\n   */\n  @property({ attribute: 'week-start' })\n  public set weekStart(value: WeekDays | undefined) {\n    this._weekStart = value ?? undefined;\n  }\n\n  public get weekStart(): WeekDays {\n    return this._weekStart ?? getLocaleWeekStart(this.locale);\n  }\n\n  /**\n   * Gets/Sets the special dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[] | undefined) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /**\n   * Gets/Sets the disabled dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[] | undefined) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues): void {\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = firstOf(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { convertToDate, convertToDates } from '#internals/date/converters.js';\nimport { CalendarDay, toCalendarDayOrNull } from '#internals/date/model.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport { calendarResourcesMap } from '#internals/i18n/utils.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getLocaleWeekStart, getWeekDayNumber } from './helpers.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\nconst i18n: I18nControllerConfig<\n  IgcCalendarResourceStrings | ICalendarResourceStrings\n> = {\n  defaultEN: CalendarResourceStringsEN,\n  resourceMap: calendarResourcesMap,\n};\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends I18nMixin<\n  IgcCalendarResourceStrings | ICalendarResourceStrings,\n  typeof LitElement,\n  IgcCalendarResourceStrings & ICalendarResourceStrings\n>(LitElement, i18n) {\n  private _initialActiveDateSet = false;\n  private _weekStart?: WeekDays;\n\n  protected get _hasValues(): boolean {\n    return this._values.length > 0;\n  }\n\n  /**\n   * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.\n   *\n   * @remarks\n   * Derived on access instead of in `update()`, so that its consumers are not sensitive\n   * to the order in which the base class and its descendants update.\n   */\n  protected get _firstDayOfWeek(): number {\n    return getWeekDayNumber(this.weekStart);\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    this._value = toCalendarDayOrNull(convertToDate(value));\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple or range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    this._activeDate =\n      toCalendarDayOrNull(convertToDate(value)) ?? CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   *\n   * @remarks\n   * When not set, the week starts on the first day of the week of the current {@link locale}.\n   * Setting `undefined` returns to the locale value.\n   * @attr week-start\n   */\n  @property({ attribute: 'week-start' })\n  public set weekStart(value: WeekDays | undefined) {\n    this._weekStart = value ?? undefined;\n  }\n\n  public get weekStart(): WeekDays {\n    return this._weekStart ?? getLocaleWeekStart(this.locale);\n  }\n\n  /**\n   * Gets/Sets the special dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[] | undefined) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /**\n   * Gets/Sets the disabled dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[] | undefined) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues): void {\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = firstOf(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -12,7 +12,6 @@ declare const IgcCalendarComponent_base: Constructor<import("#internals/mixins/e
  *
  * @element igc-calendar
  *
- * @slot - The default slot for the calendar.
  * @slot title - Renders the title of the calendar header.
  * @slot header-date - Renders content instead of the current date/range in the calendar header.
  *
@@ -169,12 +168,12 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
      * same navigation several times over. The years view has its visible years range as a
      * live region of its own.
      */
-    protected _renderActivePeriod(): typeof nothing | TemplateResult<1>;
+    protected _renderActivePeriod(): TemplateResult<1> | typeof nothing;
     protected _renderYearRangeNavigation(active: CalendarDay): TemplateResult;
     /** Renders the month and year buttons of the days view in the field order of the locale. */
     protected _renderDayViewNavigation(active: CalendarDay, viewIndex: number): TemplateResult[];
     protected _renderNavigation(date?: CalendarDay, showButtons?: boolean, viewIndex?: number): TemplateResult;
-    protected _renderHeader(): typeof nothing | TemplateResult<1>;
+    protected _renderHeader(): TemplateResult<1> | typeof nothing;
     protected _renderHeaderDateSingle(): TemplateResult;
     protected _renderHeaderDateRange(): TemplateResult;
     protected _renderHeaderDate(): TemplateResult;