igniteui-webcomponents 7.3.0-beta.0 → 7.3.0

package/components/dialog/dialog.js

@@ -11,6 +11,7 @@ import { addAnimationController } from '#animations/player.js';
 import { fadeIn, fadeOut } from '#animations/presets/fade/index.js';
 import { addCommandController } from '#internals/controllers/command.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { addToggleController } from '#internals/controllers/toggle.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { partMap } from '#internals/part-map.js';
@@ -40,6 +41,22 @@ export default class IgcDialogComponent extends EventEmitterMixin(LitElement) {
         });
         this._dialogRef = createRef();
         this._player = addAnimationController(this, this._dialogRef);
+        this._toggleController = addToggleController(this, {
+            transition: async (open) => {
+                if (open) {
+                    this.open = true;
+                    this._animating = false;
+                    return this._player.playExclusive(fadeIn());
+                }
+                this._animating = true;
+                const completed = await this._player.playExclusive(fadeOut());
+                this._animating = false;
+                if (completed) {
+                    this.open = false;
+                }
+                return completed;
+            },
+        });
         this._animating = false;
         this.keepOpenOnEscape = false;
         this.closeOnOutsideClick = false;
@@ -85,39 +102,17 @@ export default class IgcDialogComponent extends EventEmitterMixin(LitElement) {
             this._closeWithEvent();
         }
     }
-    async _hide(emitEvent = false) {
-        if (!this.open || (emitEvent && !this._emitClosing())) {
-            return false;
-        }
-        this._animating = true;
-        await this._player.playExclusive(fadeOut());
-        this.open = false;
-        this._animating = false;
-        if (emitEvent) {
-            await this.updateComplete;
-            this.emitEvent('igcClosed');
-        }
-        return true;
-    }
-    _emitClosing() {
-        return this.emitEvent('igcClosing', { cancelable: true });
-    }
     _closeWithEvent() {
-        this._hide(true);
+        this._toggleController.hide(true);
     }
     async show() {
-        if (this.open) {
-            return false;
-        }
-        this.open = true;
-        await this._player.playExclusive(fadeIn());
-        return true;
+        return this._toggleController.show();
     }
     async hide() {
-        return this._hide();
+        return this._toggleController.hide();
     }
     async toggle() {
-        return this.open ? this.hide() : this.show();
+        return this._toggleController.toggle();
     }
     _renderBackdrop() {
         return html `

package/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAOzC,MAAM,MAAM,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAwC1C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,iBAAiB,CAG/D,UAAU,CAAC;aACY,YAAO,GAAG,YAAY,AAAf,CAAgB;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IAmBD,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IA4ED;QACE,KAAK,EAAE,CAAC;QA9FO,aAAQ,GAAG,MAAM,EAAE,CAAC;QAEpB,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC;SAC9C,CAAC,CAAC;QAEc,eAAU,GAAG,SAAS,EAAqB,CAAC;QAC5C,YAAO,GAAG,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAMjE,eAAU,GAAG,KAAK,CAAC;QAoBpB,qBAAgB,GAAG,KAAK,CAAC;QAWzB,wBAAmB,GAAG,KAAK,CAAC;QAW5B,sBAAiB,GAAG,KAAK,CAAC;QAa1B,SAAI,GAAG,KAAK,CAAC;QA4BlB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAChC,oBAAoB,CAAC,IAAI,CAAC;aACvB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAEkB,OAAO,CAAC,UAAgC;QACzD,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAChE,CAAC;IACH,CAAC;IAMS,iBAAiB,CAAC,KAAkB;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC7B,IAAI,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC;YACjD,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,YAAY;QAIlB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB;QAC7D,IACE,IAAI,CAAC,mBAAmB;YACxB,IAAI,CAAC,OAAO,KAAK,MAAM;YACvB,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACrD,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAMO,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK;QACnC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC;YACtD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAYM,KAAK,CAAC,IAAI;QACf,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAQM,KAAK,CAAC,IAAI;QACf,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAQM,KAAK,CAAC,MAAM;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAMS,eAAe;QACvB,OAAO,IAAI,CAAA;;sBAEO,CAAC,IAAI,CAAC,IAAI;eACjB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;KAEjE,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;gCACiB,IAAI,CAAC,QAAQ;;kBAE3B,IAAI,CAAC,KAAK;;;KAGvB,CAAC;IACJ,CAAC;IAES,cAAc;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAA;;uCAEwB,CAAC,UAAU;wBAC1B,IAAI,CAAC,iBAAiB;;KAEzC,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;YAIH,IAAI,CAAC,iBAAiB;YACpB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;sDACkC,IAAI,CAAC,eAAe;;;iBAIhE;;;KAGL,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QACvE,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC;QAEnD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE;;UAEpB,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;eACf,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;;qBAEtD,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;0BACjC,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC;iBACvC,IAAI,CAAC,YAAY;kBAChB,IAAI,CAAC,aAAa;iBACnB,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC;;UAEvD,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;;KAE1E,CAAC;IACJ,CAAC;;AA3RO;IADP,KAAK,EAAE;sDACmB;AAoBpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;4DAC9B;AAWzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DAC9B;AAW5B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;6DAC7B;AAa1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACvB;AASJ;IADf,QAAQ,EAAE;iDACoB;AAUxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACH;AA4N9B,SAAS,YAAY,CACnB,SAAmC;IAEnC,OAAO,SAAS,IAAI,IAAI,CAAC;AAC3B,CAAC","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '#animations/player.js';\nimport { fadeIn, fadeOut } from '#animations/presets/fade/index.js';\nimport { addCommandController } from '#internals/controllers/command.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 { partMap } from '#internals/part-map.js';\nimport { isPointInsideElement } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { styles } from './themes/dialog.base.css.js';\nimport { styles as shared } from './themes/shared/dialog.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcDialogComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\nconst nextId = createIdGenerator('title');\n\n/* blazorAdditionalDependency: IgcButtonComponent */\n/**\n * A modal dialog component built on the native `<dialog>` element.\n *\n * The dialog traps focus while open and blocks interaction with the rest\n * of the page (modal semantics). It supports animated open/close\n * transitions, an optional backdrop overlay, and multiple content areas\n * through named slots.\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` / `\"--toggle\"`\n * and `commandfor` pointing to this element will call the corresponding method\n * declaratively without any JavaScript.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitted just before the dialog closes. Cancelable —\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted after the dialog has fully closed and its\n *   exit animation has completed.\n *\n * @slot - General-purpose content area. Also the target for any\n *   `<form method=\"dialog\">` placed inside the dialog.\n * @slot title - Content rendered in the dialog header. Falls back to the\n *   `title` attribute when empty.\n * @slot message - A dedicated message/body area rendered above the default\n *   slot. Hidden when no content is assigned.\n * @slot footer - Content rendered in the dialog footer. When empty, a\n *   default \"OK\" close button is shown (unless `hide-default-action` is set).\n *\n * @csspart base - The native `<dialog>` element.\n * @csspart title - The `<header>` element wrapping the title slot.\n * @csspart content - The `<section>` element wrapping the message and default slots.\n * @csspart footer - The `<footer>` element wrapping the footer slot.\n * @csspart backdrop - The decorative backdrop overlay element.\n * @csspart animating - Applied to the backdrop while an animation is running.\n */\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDialogComponent, IgcButtonComponent);\n  }\n\n  //#region Private state and properties\n\n  private readonly _titleId = nextId();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'message', 'footer'),\n  });\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _player = addAnimationController(this, this._dialogRef);\n\n  /**\n   * Backdrop animation helper.\n   */\n  @state()\n  private _animating = false;\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * When set, pressing the `Escape` key will not close the dialog.\n   *\n   * By default the browser closes a modal dialog on `Escape`. Enable this\n   * option when the dialog guards unsaved work and should require an explicit\n   * user action to dismiss.\n   * @attr keep-open-on-escape\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * When set, clicking on the backdrop area outside the dialog surface\n   * will close it (emitting close events).\n   *\n   * Has no effect when the dialog is not yet open.\n   * @attr close-on-outside-click\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * When set, the built-in \"OK\" close button in the footer is not rendered.\n   *\n   * Has no effect when content is projected into the `footer` slot, since\n   * the slot content replaces the default button entirely.\n   * @attr hide-default-action\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is open.\n   *\n   * Setting this property programmatically will open or close the dialog\n   * without animation and without emitting close events.\n   * Prefer the `show()`, `hide()`, and `toggle()` methods for animated\n   * transitions.\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * The title displayed in the dialog header.\n   *\n   * Overridden by any content projected into the `title` slot.\n   * @attr title\n   */\n  @property()\n  public override title!: string;\n\n  /**\n   * The return value of the dialog.\n   *\n   * Automatically set to the `value` of the submitter element when a\n   * `<form method=\"dialog\">` inside the dialog is submitted. Can also\n   * be set programmatically before calling `hide()`.\n   */\n  @property({ attribute: false })\n  public returnValue?: string;\n\n  //#endregion\n\n  //#region Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addCommandController(this)\n      .set('--show', this.show)\n      .set('--hide', this.hide)\n      .set('--toggle', this.toggle);\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('open')) {\n      this.open ? this._dialog?.showModal() : this._dialog?.close();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleFormSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement;\n\n    if (form.method === 'dialog') {\n      if (hasSubmitter(event.submitter)) {\n        this.returnValue = event.submitter.value ?? '';\n      }\n\n      if (!event.defaultPrevented) {\n        this._closeWithEvent();\n      }\n    }\n  }\n\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._closeWithEvent();\n    }\n  }\n\n  private _handleClose(): void {\n    // When a non-cancelable close event is fired (e.g., from repeated Escape presses),\n    // reopen the dialog to prevent the broken state with visible backdrop.\n    // Note that this handler is invoked only when `keepOpenOnEscape` is true.\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (\n      this.closeOnOutsideClick &&\n      this._dialog === target &&\n      !isPointInsideElement(this._dialog, clientX, clientY)\n    ) {\n      this._closeWithEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private async _hide(emitEvent = false): Promise<boolean> {\n    if (!this.open || (emitEvent && !this._emitClosing())) {\n      return false;\n    }\n\n    this._animating = true;\n    await this._player.playExclusive(fadeOut());\n    this.open = false;\n    this._animating = false;\n\n    if (emitEvent) {\n      await this.updateComplete;\n      this.emitEvent('igcClosed');\n    }\n\n    return true;\n  }\n\n  private _emitClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  private _closeWithEvent(): void {\n    this._hide(true);\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Opens the dialog with an animated fade-in transition.\n   *\n   * Returns `true` when the dialog was successfully opened, or `false` if\n   * it was already open.\n   */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    await this._player.playExclusive(fadeIn());\n    return true;\n  }\n\n  /**\n   * Closes the dialog with an animated fade-out transition.\n   *\n   * Returns `true` when the dialog was successfully closed, or `false` if\n   * it was already closed.\n   */\n  public async hide(): Promise<boolean> {\n    return this._hide();\n  }\n\n  /**\n   * Toggles the dialog open or closed depending on its current state.\n   *\n   * Equivalent to calling `show()` when closed and `hide()` when open.\n   * Returns `true` when the transition completed successfully.\n   */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  //#endregion\n\n  //#region Render methods\n\n  protected _renderBackdrop() {\n    return html`\n      <div\n        aria-hidden=${!this.open}\n        part=${partMap({ backdrop: true, animating: this._animating })}\n      ></div>\n    `;\n  }\n\n  protected _renderHeader() {\n    return html`\n      <header part=\"title\" id=${this._titleId}>\n        <slot name=\"title\">\n          <span>${this.title}</span>\n        </slot>\n      </header>\n    `;\n  }\n\n  protected _renderContent() {\n    const hasMessage = this._slots.hasAssignedElements('message');\n    return html`\n      <section part=\"content\">\n        <slot name=\"message\" ?hidden=${!hasMessage}></slot>\n        <slot @submit=${this._handleFormSubmit}></slot>\n      </section>\n    `;\n  }\n\n  protected _renderFooter() {\n    return html`\n      <footer part=\"footer\">\n        <slot name=\"footer\">\n          ${\n            this.hideDefaultAction\n              ? nothing\n              : html`\n                  <igc-button variant=\"flat\" @click=${this._closeWithEvent}>\n                    OK\n                  </igc-button>\n                `\n          }\n        </slot>\n      </footer>\n    `;\n  }\n\n  protected override render() {\n    const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;\n    const hasFooter =\n      this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;\n    const labelledBy = this.ariaLabel ?? this._titleId;\n\n    return html`\n      ${this._renderBackdrop()}\n      <dialog\n        ${ref(this._dialogRef)}\n        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}\n        role=\"dialog\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-labelledby=${bindIf(labelledBy, labelledBy)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}\n      </dialog>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n\nfunction hasSubmitter(\n  submitter: SubmitEvent['submitter']\n): submitter is HTMLButtonElement | HTMLInputElement {\n  return submitter != null;\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAOzC,MAAM,MAAM,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAwC1C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,iBAAiB,CAG/D,UAAU,CAAC;aACY,YAAO,GAAG,YAAY,AAAf,CAAgB;aAChC,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IA0CD,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IA4ED;QACE,KAAK,EAAE,CAAC;QArHO,aAAQ,GAAG,MAAM,EAAE,CAAC;QAEpB,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC;SAC9C,CAAC,CAAC;QAEc,eAAU,GAAG,SAAS,EAAqB,CAAC;QAC5C,YAAO,GAAG,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAExD,sBAAiB,GAAG,mBAAmB,CAAC,IAAI,EAAE;YAC7D,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;gBACzB,IAAI,IAAI,EAAE,CAAC;oBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;oBAGjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;oBACxB,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9D,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBAGxB,IAAI,SAAS,EAAE,CAAC;oBACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBACpB,CAAC;gBAED,OAAO,SAAS,CAAC;YACnB,CAAC;SACF,CAAC,CAAC;QAMK,eAAU,GAAG,KAAK,CAAC;QAoBpB,qBAAgB,GAAG,KAAK,CAAC;QAWzB,wBAAmB,GAAG,KAAK,CAAC;QAW5B,sBAAiB,GAAG,KAAK,CAAC;QAa1B,SAAI,GAAG,KAAK,CAAC;QA4BlB,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAChC,oBAAoB,CAAC,IAAI,CAAC;aACvB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;aACxB,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAEkB,OAAO,CAAC,UAAgC;QACzD,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAChE,CAAC;IACH,CAAC;IAMS,iBAAiB,CAAC,KAAkB;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC7B,IAAI,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC;YACjD,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,YAAY;QAIlB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB;QAC7D,IACE,IAAI,CAAC,mBAAmB;YACxB,IAAI,CAAC,OAAO,KAAK,MAAM;YACvB,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACrD,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAMO,eAAe;QACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAYM,KAAK,CAAC,IAAI;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IACvC,CAAC;IAQM,KAAK,CAAC,IAAI;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IACvC,CAAC;IAQM,KAAK,CAAC,MAAM;QACjB,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAMS,eAAe;QACvB,OAAO,IAAI,CAAA;;sBAEO,CAAC,IAAI,CAAC,IAAI;eACjB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;KAEjE,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;gCACiB,IAAI,CAAC,QAAQ;;kBAE3B,IAAI,CAAC,KAAK;;;KAGvB,CAAC;IACJ,CAAC;IAES,cAAc;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAA;;uCAEwB,CAAC,UAAU;wBAC1B,IAAI,CAAC,iBAAiB;;KAEzC,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;YAIH,IAAI,CAAC,iBAAiB;YACpB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;sDACkC,IAAI,CAAC,eAAe;;;iBAIhE;;;KAGL,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QACvE,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC;QAEnD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE;;UAEpB,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;eACf,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;;qBAEtD,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;0BACjC,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC;iBACvC,IAAI,CAAC,YAAY;kBAChB,IAAI,CAAC,aAAa;iBACnB,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC;;UAEvD,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;;KAE1E,CAAC;IACJ,CAAC;;AA/PO;IADP,KAAK,EAAE;sDACmB;AAoBpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;4DAC9B;AAWzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DAC9B;AAW5B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;6DAC7B;AAa1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACvB;AASJ;IADf,QAAQ,EAAE;iDACoB;AAUxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACH;AAgM9B,SAAS,YAAY,CACnB,SAAmC;IAEnC,OAAO,SAAS,IAAI,IAAI,CAAC;AAC3B,CAAC","sourcesContent":["import { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '#animations/player.js';\nimport { fadeIn, fadeOut } from '#animations/presets/fade/index.js';\nimport { addCommandController } from '#internals/controllers/command.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { addToggleController } from '#internals/controllers/toggle.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 { partMap } from '#internals/part-map.js';\nimport { isPointInsideElement } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { styles } from './themes/dialog.base.css.js';\nimport { styles as shared } from './themes/shared/dialog.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcDialogComponentEventMap {\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n\nconst nextId = createIdGenerator('title');\n\n/* blazorAdditionalDependency: IgcButtonComponent */\n/**\n * A modal dialog component built on the native `<dialog>` element.\n *\n * The dialog traps focus while open and blocks interaction with the rest\n * of the page (modal semantics). It supports animated open/close\n * transitions, an optional backdrop overlay, and multiple content areas\n * through named slots.\n *\n * The component integrates with the\n * [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):\n * an Ignite button or a native `<button>` with `command=\"--show\"` / `\"--hide\"` / `\"--toggle\"`\n * and `commandfor` pointing to this element will call the corresponding method\n * declaratively without any JavaScript.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitted just before the dialog closes. Cancelable -\n *   call `event.preventDefault()` to abort the closing sequence.\n * @fires igcClosed - Emitted after the dialog has fully closed and its\n *   exit animation has completed.\n *\n * @slot - General-purpose content area. Also the target for any\n *   `<form method=\"dialog\">` placed inside the dialog.\n * @slot title - Content rendered in the dialog header. Falls back to the\n *   `title` attribute when empty.\n * @slot message - A dedicated message/body area rendered above the default\n *   slot. Hidden when no content is assigned.\n * @slot footer - Content rendered in the dialog footer. When empty, a\n *   default \"OK\" close button is shown (unless `hide-default-action` is set).\n *\n * @csspart base - The native `<dialog>` element.\n * @csspart title - The `<header>` element wrapping the title slot.\n * @csspart content - The `<section>` element wrapping the message and default slots.\n * @csspart footer - The `<footer>` element wrapping the footer slot.\n * @csspart backdrop - The decorative backdrop overlay element.\n * @csspart animating - Applied to the backdrop while an animation is running.\n */\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDialogComponent, IgcButtonComponent);\n  }\n\n  //#region Private state and properties\n\n  private readonly _titleId = nextId();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'message', 'footer'),\n  });\n\n  private readonly _dialogRef = createRef<HTMLDialogElement>();\n  private readonly _player = addAnimationController(this, this._dialogRef);\n\n  private readonly _toggleController = addToggleController(this, {\n    transition: async (open) => {\n      if (open) {\n        this.open = true;\n        // A superseded exit clears this too, but only once its animation\n        // reports the cancellation - too late for this render.\n        this._animating = false;\n        return this._player.playExclusive(fadeIn());\n      }\n\n      this._animating = true;\n      const completed = await this._player.playExclusive(fadeOut());\n      this._animating = false;\n\n      // An interrupted exit animation means a newer `show()` took over.\n      if (completed) {\n        this.open = false;\n      }\n\n      return completed;\n    },\n  });\n\n  /**\n   * Backdrop animation helper.\n   */\n  @state()\n  private _animating = false;\n\n  private get _dialog(): HTMLDialogElement | undefined {\n    return this._dialogRef.value;\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * When set, pressing the `Escape` key will not close the dialog.\n   *\n   * By default the browser closes a modal dialog on `Escape`. Enable this\n   * option when the dialog guards unsaved work and should require an explicit\n   * user action to dismiss.\n   * @attr keep-open-on-escape\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * When set, clicking on the backdrop area outside the dialog surface\n   * will close it (emitting close events).\n   *\n   * Has no effect when the dialog is not yet open.\n   * @attr close-on-outside-click\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * When set, the built-in \"OK\" close button in the footer is not rendered.\n   *\n   * Has no effect when content is projected into the `footer` slot, since\n   * the slot content replaces the default button entirely.\n   * @attr hide-default-action\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is open.\n   *\n   * Setting this property programmatically will open or close the dialog\n   * without animation and without emitting close events.\n   * Prefer the `show()`, `hide()`, and `toggle()` methods for animated\n   * transitions.\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * The title displayed in the dialog header.\n   *\n   * Overridden by any content projected into the `title` slot.\n   * @attr title\n   */\n  @property()\n  public override title!: string;\n\n  /**\n   * The return value of the dialog.\n   *\n   * Automatically set to the `value` of the submitter element when a\n   * `<form method=\"dialog\">` inside the dialog is submitted. Can also\n   * be set programmatically before calling `hide()`.\n   */\n  @property({ attribute: false })\n  public returnValue?: string;\n\n  //#endregion\n\n  //#region Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addCommandController(this)\n      .set('--show', this.show)\n      .set('--hide', this.hide)\n      .set('--toggle', this.toggle);\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('open')) {\n      this.open ? this._dialog?.showModal() : this._dialog?.close();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected _handleFormSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement;\n\n    if (form.method === 'dialog') {\n      if (hasSubmitter(event.submitter)) {\n        this.returnValue = event.submitter.value ?? '';\n      }\n\n      if (!event.defaultPrevented) {\n        this._closeWithEvent();\n      }\n    }\n  }\n\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._closeWithEvent();\n    }\n  }\n\n  private _handleClose(): void {\n    // When a non-cancelable close event is fired (e.g., from repeated Escape presses),\n    // reopen the dialog to prevent the broken state with visible backdrop.\n    // Note that this handler is invoked only when `keepOpenOnEscape` is true.\n    if (this.open) {\n      this._dialog?.showModal();\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (\n      this.closeOnOutsideClick &&\n      this._dialog === target &&\n      !isPointInsideElement(this._dialog, clientX, clientY)\n    ) {\n      this._closeWithEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  private _closeWithEvent(): void {\n    this._toggleController.hide(true);\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Opens the dialog with an animated fade-in transition.\n   *\n   * Returns `true` when the dialog was successfully opened, or `false` if it\n   * was already open or the transition was superseded by a newer one.\n   */\n  public async show(): Promise<boolean> {\n    return this._toggleController.show();\n  }\n\n  /**\n   * Closes the dialog with an animated fade-out transition.\n   *\n   * Returns `true` when the dialog was successfully closed, or `false` if it\n   * was already closed or the transition was superseded by a newer one.\n   */\n  public async hide(): Promise<boolean> {\n    return this._toggleController.hide();\n  }\n\n  /**\n   * Toggles the dialog open or closed depending on its current state.\n   *\n   * Equivalent to calling `show()` when closed and `hide()` when open.\n   * Returns `true` when the transition completed successfully.\n   */\n  public async toggle(): Promise<boolean> {\n    return this._toggleController.toggle();\n  }\n\n  //#endregion\n\n  //#region Render methods\n\n  protected _renderBackdrop() {\n    return html`\n      <div\n        aria-hidden=${!this.open}\n        part=${partMap({ backdrop: true, animating: this._animating })}\n      ></div>\n    `;\n  }\n\n  protected _renderHeader() {\n    return html`\n      <header part=\"title\" id=${this._titleId}>\n        <slot name=\"title\">\n          <span>${this.title}</span>\n        </slot>\n      </header>\n    `;\n  }\n\n  protected _renderContent() {\n    const hasMessage = this._slots.hasAssignedElements('message');\n    return html`\n      <section part=\"content\">\n        <slot name=\"message\" ?hidden=${!hasMessage}></slot>\n        <slot @submit=${this._handleFormSubmit}></slot>\n      </section>\n    `;\n  }\n\n  protected _renderFooter() {\n    return html`\n      <footer part=\"footer\">\n        <slot name=\"footer\">\n          ${\n            this.hideDefaultAction\n              ? nothing\n              : html`\n                  <igc-button variant=\"flat\" @click=${this._closeWithEvent}>\n                    OK\n                  </igc-button>\n                `\n          }\n        </slot>\n      </footer>\n    `;\n  }\n\n  protected override render() {\n    const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;\n    const hasFooter =\n      this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;\n    const labelledBy = this.ariaLabel ?? this._titleId;\n\n    return html`\n      ${this._renderBackdrop()}\n      <dialog\n        ${ref(this._dialogRef)}\n        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}\n        role=\"dialog\"\n        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}\n        aria-labelledby=${bindIf(labelledBy, labelledBy)}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\n        @close=${bindIf(this.keepOpenOnEscape, this._handleClose)}\n      >\n        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}\n      </dialog>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n\nfunction hasSubmitter(\n  submitter: SubmitEvent['submitter']\n): submitter is HTMLButtonElement | HTMLInputElement {\n  return submitter != null;\n}\n"]}

package/components/divider/divider.d.ts

@@ -14,15 +14,12 @@ export default class IgcDividerComponent extends LitElement {
     static readonly tagName = "igc-divider";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private readonly _internals;
-    private _vertical;
     /**
      * Whether to render a vertical divider line.
      * @attr
      * @default false
      */
-    set vertical(value: boolean);
-    get vertical(): boolean;
+    vertical: boolean;
     /**
      * When set and inset is provided, it will shrink the divider line from both sides.
      * @attr

package/components/divider/divider.js

@@ -18,27 +18,18 @@ export default class IgcDividerComponent extends LitElement {
     static register() {
         registerComponent(IgcDividerComponent);
     }
-    set vertical(value) {
-        this._vertical = Boolean(value);
-        this._internals.setARIA({
-            ariaOrientation: this._vertical ? 'vertical' : 'horizontal',
-        });
-    }
-    get vertical() {
-        return this._vertical;
-    }
     constructor() {
         super();
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'separator',
-                ariaOrientation: 'vertical',
-            },
-        });
-        this._vertical = false;
+        this.vertical = false;
         this.middle = false;
         this.type = 'solid';
         addThemingController(this, all);
+        addInternalsController(this, {
+            initialARIA: { role: 'separator' },
+            aria: () => ({
+                ariaOrientation: this.vertical ? 'vertical' : 'horizontal',
+            }),
+        });
     }
     render() {
         return html ``;
@@ -46,7 +37,7 @@ export default class IgcDividerComponent extends LitElement {
 }
 __decorate([
     property({ type: Boolean, reflect: true })
-], IgcDividerComponent.prototype, "vertical", null);
+], IgcDividerComponent.prototype, "vertical", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcDividerComponent.prototype, "middle", void 0);

package/components/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;aAClC,YAAO,GAAG,aAAa,AAAhB,CAAiB;aACxB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACzC,CAAC;IAiBD,IAAW,QAAQ,CAAC,KAAc;QAChC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SAC5D,CAAC,CAAC;IACL,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAmBD;QACE,KAAK,EAAE,CAAC;QA5CO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,WAAW;gBACjB,eAAe,EAAE,UAAU;aAC5B;SACF,CAAC,CAAC;QAEK,cAAS,GAAG,KAAK,CAAC;QAyBnB,WAAM,GAAG,KAAK,CAAC;QASf,SAAI,GAAgB,OAAO,CAAC;QAIjC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAnCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAM1C;AAYM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AASf;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACO","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { DividerType } from '../types.js';\nimport { styles } from './themes/divider.base.css.js';\nimport { styles as shared } from './themes/shared/divider.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The divider allows the content author to easily create a horizontal/vertical\n * rule as a break between content, to better organize information on a page.\n *\n * @element igc-divider\n *\n * @cssproperty --color - Sets the color of the divider.\n * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.\n *\n */\nexport default class IgcDividerComponent extends LitElement {\n  public static readonly tagName = 'igc-divider';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDividerComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'separator',\n      ariaOrientation: 'vertical',\n    },\n  });\n\n  private _vertical = false;\n\n  /**\n   * Whether to render a vertical divider line.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public set vertical(value: boolean) {\n    this._vertical = Boolean(value);\n    this._internals.setARIA({\n      ariaOrientation: this._vertical ? 'vertical' : 'horizontal',\n    });\n  }\n\n  public get vertical(): boolean {\n    return this._vertical;\n  }\n\n  /**\n   * When set and inset is provided, it will shrink the divider line from both sides.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public middle = false;\n\n  /* alternateName: lineType */\n  /**\n   * Whether to render a solid or a dashed divider line.\n   * @attr type\n   * @default 'solid'\n   */\n  @property({ reflect: true })\n  public type: DividerType = 'solid';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-divider': IgcDividerComponent;\n  }\n}\n"]}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAYzC,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;aAClC,YAAO,GAAG,aAAa,AAAhB,CAAiB;aACxB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACzC,CAAC;IA2BD;QACE,KAAK,EAAE,CAAC;QApBH,aAAQ,GAAG,KAAK,CAAC;QAQjB,WAAM,GAAG,KAAK,CAAC;QASf,SAAI,GAAgB,OAAO,CAAC;QAIjC,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEhC,sBAAsB,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;YAClC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;gBACX,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;aAC3D,CAAC;SACH,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACnB;AAQjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACrB;AASf;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACO","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { DividerType } from '../types.js';\nimport { styles } from './themes/divider.base.css.js';\nimport { styles as shared } from './themes/shared/divider.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The divider allows the content author to easily create a horizontal/vertical\n * rule as a break between content, to better organize information on a page.\n *\n * @element igc-divider\n *\n * @cssproperty --color - Sets the color of the divider.\n * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.\n *\n */\nexport default class IgcDividerComponent extends LitElement {\n  public static readonly tagName = 'igc-divider';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDividerComponent);\n  }\n\n  /**\n   * Whether to render a vertical divider line.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public vertical = false;\n\n  /**\n   * When set and inset is provided, it will shrink the divider line from both sides.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public middle = false;\n\n  /* alternateName: lineType */\n  /**\n   * Whether to render a solid or a dashed divider line.\n   * @attr type\n   * @default 'solid'\n   */\n  @property({ reflect: true })\n  public type: DividerType = 'solid';\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'separator' },\n      aria: () => ({\n        ariaOrientation: this.vertical ? 'vertical' : 'horizontal',\n      }),\n    });\n  }\n\n  protected override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-divider': IgcDividerComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown-group.js

@@ -36,12 +36,7 @@ export default class IgcDropdownGroupComponent extends LitElement {
         addThemingController(this, all);
     }
     _labelChange() {
-        const label = this._slots
-            .getAssignedNodes('label', true)
-            .map((node) => node.textContent ?? '')
-            .join('')
-            .trim()
-            .replace(/\s+/gu, ' ');
+        const label = this._slots.getAssignedText('label', true);
         this._internals.setARIA({ ariaLabel: label || null });
     }
     render() {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,wBAAwB,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAEtF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;AAYhC,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,UAAU;aACxC,YAAO,GAAG,oBAAoB,AAAvB,CAAwB;aAC/B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;IAC/C,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QArBO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;aACd;SACF,CAAC,CAAC;QAEc,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAaD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAMO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM;aACtB,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC;aAC/B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,EAAE,CAAC;aACR,IAAI,EAAE;aACN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAEzB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;;AA9BM;IAJN,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,wBAAwB,CAAC,OAAO;KAC3C,CAAC;wDAC6C","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcDropdownItemComponent from './dropdown-item.js';\nimport { styles } from './themes/dropdown-group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';\n\nconst Slots = setSlots('label');\n\n/**\n * A container for a group of dropdown items.\n *\n * @element igc-dropdown-group\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownGroupComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'group',\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: Slots,\n    initial: true,\n    onChange: this._labelChange,\n  });\n\n  /* blazorSuppress */\n  /** All child dropdown items. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcDropdownItemComponent.tagName,\n  })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n  }\n\n  /**\n   * The label is rendered into this shadow root, out of reach of an\n   * `aria-labelledby` on the host, so its text names the `group` directly.\n   */\n  private _labelChange(): void {\n    const label = this._slots\n      .getAssignedNodes('label', true)\n      .map((node) => node.textContent ?? '')\n      .join('')\n      .trim()\n      .replace(/\\s+/gu, ' ');\n\n    this._internals.setARIA({ ariaLabel: label || null });\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\">\n        <slot name=\"label\"></slot>\n      </label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,wBAAwB,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAEtF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;AAYhC,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,UAAU;aACxC,YAAO,GAAG,oBAAoB,AAAvB,CAAwB;aAC/B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;IAC/C,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QArBO,eAAU,GAAG,sBAAsB,CAAC,IAAI,EAAE;YACzD,WAAW,EAAE;gBACX,IAAI,EAAE,OAAO;aACd;SACF,CAAC,CAAC;QAEc,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE;YAChD,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAaD,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAMO,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;;AAxBM;IAJN,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,wBAAwB,CAAC,OAAO;KAC3C,CAAC;wDAC6C","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcDropdownItemComponent from './dropdown-item.js';\nimport { styles } from './themes/dropdown-group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/dropdown-group.common.css.js';\n\nconst Slots = setSlots('label');\n\n/**\n * A container for a group of dropdown items.\n *\n * @element igc-dropdown-group\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcDropdownGroupComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'group',\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: Slots,\n    initial: true,\n    onChange: this._labelChange,\n  });\n\n  /* blazorSuppress */\n  /** All child dropdown items. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcDropdownItemComponent.tagName,\n  })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n  }\n\n  /**\n   * The label is rendered into this shadow root, out of reach of an\n   * `aria-labelledby` on the host, so its text names the `group` directly.\n   */\n  private _labelChange(): void {\n    const label = this._slots.getAssignedText('label', true);\n    this._internals.setARIA({ ariaLabel: label || null });\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\">\n        <slot name=\"label\"></slot>\n      </label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}

package/components/expansion-panel/expansion-panel.d.ts

@@ -41,6 +41,7 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
     private readonly _panelRef;
     private readonly _player;
     private readonly _slots;
+    private readonly _toggleController;
     /**
      * Indicates whether the contents of the control should be visible.
      * @attr
@@ -60,10 +61,17 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
     /** @internal */
     connectedCallback(): void;
     private _handleClick;
-    private _setOpenState;
     private _toggle;
-    private _show;
-    private _hide;
+    /**
+     * Opens the panel, emitting its toggle events.
+     * @hidden @internal
+     */
+    _show(): Promise<boolean>;
+    /**
+     * Closes the panel, emitting its toggle events.
+     * @hidden @internal
+     */
+    _hide(): Promise<boolean>;
     /**
      * Toggles the panel open/close state.
      * @returns `true` when the open state was successfully changed.
@@ -71,12 +79,14 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
     toggle(): Promise<boolean>;
     /**
      * Hides the panel content.
-     * @returns `true` when the panel was successfully closed, or `false` if already closed.
+     * @returns `true` when the panel was successfully closed, or `false` if it was
+     * already closed or the transition was superseded by a newer one.
      */
     hide(): Promise<boolean>;
     /**
      * Shows the panel content.
-     * @returns `true` when the panel was successfully opened, or `false` if already closed.
+     * @returns `true` when the panel was successfully opened, or `false` if it was
+     * already open or the transition was superseded by a newer one.
      */
     show(): Promise<boolean>;
     private _renderIndicator;

package/components/expansion-panel/expansion-panel.js

@@ -11,8 +11,10 @@ import { addAnimationController } from '#animations/player.js';
 import { growVerIn, growVerOut } from '#animations/presets/grow/index.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, } from '#internals/controllers/key-bindings.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { addToggleController } from '#internals/controllers/toggle.js';
 import { registerComponent } from '#internals/definitions/register.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { renderSlottedIcon } from '#internals/templates/slotted-icon.js';
 import { createIdGenerator } from '#internals/utils/strings.js';
 import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -35,6 +37,13 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin(LitEle
         this._slots = addSlotController(this, {
             slots: setSlots('title', 'subtitle', 'indicator', 'indicator-expanded'),
         });
+        this._toggleController = addToggleController(this, {
+            detail: () => this,
+            transition: (open) => {
+                this.open = open;
+                return this._player.playExclusive(open ? growVerIn() : growVerOut());
+            },
+        });
         this.open = false;
         this.disabled = false;
         this.indicatorPosition = 'start';
@@ -55,55 +64,35 @@ export default class IgcExpansionPanelComponent extends EventEmitterMixin(LitEle
         this._headerRef.value?.focus();
         this._toggle();
     }
-    async _setOpenState({ state, withEvent, }) {
-        if (this.open === state)
-            return;
-        const args = { detail: this };
-        const event = state ? 'igcOpening' : 'igcClosing';
-        const eventDone = state ? 'igcOpened' : 'igcClosed';
-        const animation = state ? growVerIn : growVerOut;
-        if (withEvent && !this.emitEvent(event, { cancelable: true, ...args })) {
-            return;
-        }
-        this.open = state;
-        if (await this._player.playExclusive(animation())) {
-            if (withEvent) {
-                this.emitEvent(eventDone, args);
-            }
-        }
-    }
-    async _toggle() {
-        this.open ? await this._hide() : await this._show();
+    _toggle() {
+        return this._toggleController.toggle(true);
     }
-    async _show() {
-        await this._setOpenState({ state: true, withEvent: true });
+    _show() {
+        return this._toggleController.show(true);
     }
-    async _hide() {
-        await this._setOpenState({ state: false, withEvent: true });
+    _hide() {
+        return this._toggleController.hide(true);
     }
     async toggle() {
         return this.open ? this.hide() : this.show();
     }
     async hide() {
-        if (!this.open)
-            return false;
-        await this._setOpenState({ state: false });
-        return true;
+        return this._toggleController.hide();
     }
     async show() {
-        if (this.open)
-            return false;
-        await this._setOpenState({ state: true });
-        return true;
+        return this._toggleController.show();
     }
     _renderIndicator() {
         const iconName = this.open ? 'collapse' : 'expand';
         const indicatorHidden = this.open && this._slots.hasAssignedElements('indicator-expanded');
         return html `
       <div part="indicator" aria-hidden="true">
-        <slot name="indicator" ?hidden=${indicatorHidden}>
-          <igc-icon name=${iconName} collection="default"></igc-icon>
-        </slot>
+        ${renderSlottedIcon({
+            slot: 'indicator',
+            icon: iconName,
+            hidden: indicatorHidden,
+            ariaHidden: false,
+        })}
         <slot name="indicator-expanded" ?hidden=${!indicatorHidden}></slot>
       </div>
     `;

package/components/expansion-panel/expansion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '#animations/player.js';\nimport { growVerIn, growVerOut } from '#animations/presets/grow/index.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n} from '#internals/controllers/key-bindings.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 { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { ExpansionPanelIndicatorPosition } from '../types.js';\nimport { styles } from './themes/expansion-panel.base.css.js';\nimport { styles as shared } from './themes/shared/expansion-panel.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\nconst nextId = createIdGenerator('igc-expansion-panel');\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n * @slot indicator-expanded - renders the expanded state of the indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcExpansionPanelComponent, IgcIconComponent);\n  }\n\n  private _panelId = nextId();\n  private readonly _headerRef = createRef<HTMLElement>();\n  private readonly _panelRef = createRef<HTMLElement>();\n\n  private readonly _player = addAnimationController(this, this._panelRef);\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'subtitle', 'indicator', 'indicator-expanded'),\n  });\n\n  /**\n   * Indicates whether the contents of the control should be visible.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * The indicator position of the expansion panel.\n   * @attr indicator-position\n   */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: ExpansionPanelIndicatorPosition = 'start';\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      ref: this._headerRef,\n      skip: () => this.disabled,\n    })\n      .setActivateHandler(this._toggle)\n      .set([altKey, arrowDown], this._show)\n      .set([altKey, arrowUp], this._hide);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this._panelId = this.id || this._panelId;\n  }\n\n  private _handleClick(): void {\n    this._headerRef.value?.focus();\n    this._toggle();\n  }\n\n  private async _setOpenState({\n    state,\n    withEvent,\n  }: {\n    state: boolean;\n    withEvent?: boolean;\n  }): Promise<void> {\n    if (this.open === state) return;\n\n    const args = { detail: this };\n    const event = state ? 'igcOpening' : 'igcClosing';\n    const eventDone = state ? 'igcOpened' : 'igcClosed';\n    const animation = state ? growVerIn : growVerOut;\n\n    if (withEvent && !this.emitEvent(event, { cancelable: true, ...args })) {\n      return;\n    }\n\n    this.open = state;\n\n    if (await this._player.playExclusive(animation())) {\n      if (withEvent) {\n        this.emitEvent(eventDone, args);\n      }\n    }\n  }\n\n  private async _toggle(): Promise<void> {\n    this.open ? await this._hide() : await this._show();\n  }\n\n  private async _show(): Promise<void> {\n    await this._setOpenState({ state: true, withEvent: true });\n  }\n\n  private async _hide(): Promise<void> {\n    await this._setOpenState({ state: false, withEvent: true });\n  }\n\n  /**\n   * Toggles the panel open/close state.\n   * @returns `true` when the open state was successfully changed.\n   */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  /**\n   * Hides the panel content.\n   * @returns `true` when the panel was successfully closed, or `false` if already closed.\n   */\n  public async hide(): Promise<boolean> {\n    if (!this.open) return false;\n\n    await this._setOpenState({ state: false });\n    return true;\n  }\n\n  /**\n   * Shows the panel content.\n   * @returns `true` when the panel was successfully opened, or `false` if already closed.\n   */\n  public async show(): Promise<boolean> {\n    if (this.open) return false;\n\n    await this._setOpenState({ state: true });\n    return true;\n  }\n\n  private _renderIndicator() {\n    const iconName = this.open ? 'collapse' : 'expand';\n    const indicatorHidden =\n      this.open && this._slots.hasAssignedElements('indicator-expanded');\n\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\" ?hidden=${indicatorHidden}>\n          <igc-icon name=${iconName} collection=\"default\"></igc-icon>\n        </slot>\n        <slot name=\"indicator-expanded\" ?hidden=${!indicatorHidden}></slot>\n      </div>\n    `;\n  }\n\n  private _renderHeader() {\n    return html`\n      <div\n        ${ref(this._headerRef)}\n        part=\"header\"\n        id=\"${this._panelId}-header\"\n        role=\"button\"\n        aria-expanded=${this.open}\n        aria-disabled=${this.disabled}\n        aria-controls=\"${this._panelId}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.disabled ? nothing : this._handleClick}\n      >\n        ${this._renderIndicator()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderPanel() {\n    return html`\n      <div\n        ${ref(this._panelRef)}\n        part=\"content\"\n        role=\"region\"\n        id=\"${this._panelId}-content\"\n        aria-labelledby=\"${this._panelId}-header\"\n        .inert=${!this.open}\n        aria-hidden=${!this.open}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${this._renderHeader()}${this._renderPanel()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}
+{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { addAnimationController } from '#animations/player.js';\nimport { growVerIn, growVerOut } from '#animations/presets/grow/index.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n} from '#internals/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { addToggleController } from '#internals/controllers/toggle.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 { renderSlottedIcon } from '#internals/templates/slotted-icon.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { ExpansionPanelIndicatorPosition } from '../types.js';\nimport { styles } from './themes/expansion-panel.base.css.js';\nimport { styles as shared } from './themes/shared/expansion-panel.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\nconst nextId = createIdGenerator('igc-expansion-panel');\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n * @slot indicator-expanded - renders the expanded state of the indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcExpansionPanelComponent, IgcIconComponent);\n  }\n\n  private _panelId = nextId();\n  private readonly _headerRef = createRef<HTMLElement>();\n  private readonly _panelRef = createRef<HTMLElement>();\n\n  private readonly _player = addAnimationController(this, this._panelRef);\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('title', 'subtitle', 'indicator', 'indicator-expanded'),\n  });\n\n  private readonly _toggleController = addToggleController(this, {\n    detail: () => this,\n    transition: (open) => {\n      this.open = open;\n      return this._player.playExclusive(open ? growVerIn() : growVerOut());\n    },\n  });\n\n  /**\n   * Indicates whether the contents of the control should be visible.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * The indicator position of the expansion panel.\n   * @attr indicator-position\n   */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: ExpansionPanelIndicatorPosition = 'start';\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      ref: this._headerRef,\n      skip: () => this.disabled,\n    })\n      .setActivateHandler(this._toggle)\n      .set([altKey, arrowDown], this._show)\n      .set([altKey, arrowUp], this._hide);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this._panelId = this.id || this._panelId;\n  }\n\n  private _handleClick(): void {\n    this._headerRef.value?.focus();\n    this._toggle();\n  }\n\n  private _toggle(): Promise<boolean> {\n    return this._toggleController.toggle(true);\n  }\n\n  /**\n   * Opens the panel, emitting its toggle events.\n   * @hidden @internal\n   */\n  public _show(): Promise<boolean> {\n    return this._toggleController.show(true);\n  }\n\n  /**\n   * Closes the panel, emitting its toggle events.\n   * @hidden @internal\n   */\n  public _hide(): Promise<boolean> {\n    return this._toggleController.hide(true);\n  }\n\n  /**\n   * Toggles the panel open/close state.\n   * @returns `true` when the open state was successfully changed.\n   */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  /**\n   * Hides the panel content.\n   * @returns `true` when the panel was successfully closed, or `false` if it was\n   * already closed or the transition was superseded by a newer one.\n   */\n  public async hide(): Promise<boolean> {\n    return this._toggleController.hide();\n  }\n\n  /**\n   * Shows the panel content.\n   * @returns `true` when the panel was successfully opened, or `false` if it was\n   * already open or the transition was superseded by a newer one.\n   */\n  public async show(): Promise<boolean> {\n    return this._toggleController.show();\n  }\n\n  private _renderIndicator() {\n    const iconName = this.open ? 'collapse' : 'expand';\n    const indicatorHidden =\n      this.open && this._slots.hasAssignedElements('indicator-expanded');\n\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        ${renderSlottedIcon({\n          slot: 'indicator',\n          icon: iconName,\n          hidden: indicatorHidden,\n          ariaHidden: false,\n        })}\n        <slot name=\"indicator-expanded\" ?hidden=${!indicatorHidden}></slot>\n      </div>\n    `;\n  }\n\n  private _renderHeader() {\n    return html`\n      <div\n        ${ref(this._headerRef)}\n        part=\"header\"\n        id=\"${this._panelId}-header\"\n        role=\"button\"\n        aria-expanded=${this.open}\n        aria-disabled=${this.disabled}\n        aria-controls=\"${this._panelId}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.disabled ? nothing : this._handleClick}\n      >\n        ${this._renderIndicator()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderPanel() {\n    return html`\n      <div\n        ${ref(this._panelRef)}\n        part=\"content\"\n        role=\"region\"\n        id=\"${this._panelId}-content\"\n        aria-labelledby=\"${this._panelId}-header\"\n        .inert=${!this.open}\n        aria-hidden=${!this.open}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${this._renderHeader()}${this._renderPanel()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}

package/components/file-input/file-input.d.ts

@@ -5,7 +5,7 @@ export interface IgcFileInputComponentEventMap extends Omit<IgcInputComponentEve
     igcCancel: CustomEvent<FileList>;
     igcChange: CustomEvent<FileList>;
 }
-declare const IgcFileInputComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcFileInputComponentEventMap>> & AbstractConstructor<IgcInputBaseComponent>;
+declare const IgcFileInputComponent_base: AbstractConstructor<import("#internals/mixins/i18n.js").I18nInterface<IFileInputResourceStrings, Required<IFileInputResourceStrings>>> & import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcFileInputComponentEventMap>> & AbstractConstructor<IgcInputBaseComponent>;
 /**
  * @element igc-file-input
  *
@@ -35,9 +35,8 @@ export default class IgcFileInputComponent extends IgcFileInputComponent_base {
     static styles: import("lit").CSSResult[];
     static register(): void;
     protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
-    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "file-selector-text" | "file-missing-text">;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "helper-text" | "[default]" | "suffix" | "value-missing" | "custom-error" | "file-selector-text" | "file-missing-text">;
     protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<FileList | null>;
-    protected readonly _i18nController: import("#internals/i18n/i18n-controller.js").I18nController<IFileInputResourceStrings>;
     protected get __validators(): import("../../internals/validators.js").Validator<IgcFileInputComponent>[];
     private get _fileNames();
     /**
@@ -52,17 +51,6 @@ export default class IgcFileInputComponent extends IgcFileInputComponent_base {
      */
     set value(value: string);
     get value(): string;
-    /**
-     * The resource strings for localization.
-     */
-    set resourceStrings(value: IFileInputResourceStrings);
-    get resourceStrings(): IFileInputResourceStrings;
-    /**
-     * Gets/Sets the locale used for getting language, affecting resource strings.
-     * @attr locale
-     */
-    set locale(value: string);
-    get locale(): string;
     /**
      * Whether the control allows the user to select more than one file.
      *

package/components/file-input/file-input.js

@@ -10,10 +10,10 @@ import { property, state } from 'lit/decorators.js';
 import { ariaBindings } from '#internals/controllers/aria-projection.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { registerComponent } from '#internals/definitions/register.js';
-import { addI18nController } from '#internals/i18n/i18n-controller.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { FormValueFileListTransformers } from '#internals/mixins/forms/form-transformers.js';
 import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { I18nMixin } from '#internals/mixins/i18n.js';
 import { partMap } from '#internals/part-map.js';
 import { hasFiles } from '#internals/utils/dom.js';
 import { bindIf } from '#internals/utils/lit.js';
@@ -27,7 +27,10 @@ import { styles } from './themes/file-input.base.css.js';
 import { all } from './themes/themes.js';
 import { fileValidators } from './validators.js';
 const Slots = setSlots('prefix', 'suffix', 'helper-text', 'file-selector-text', 'file-missing-text', 'value-missing', 'custom-error', 'invalid');
-export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBaseComponent) {
+const i18n = {
+    defaultEN: FileInputResourceStringsEN,
+};
+export default class IgcFileInputComponent extends I18nMixin(EventEmitterMixin(IgcInputBaseComponent), i18n) {
     constructor() {
         super(...arguments);
         this._themes = addThemingController(this, all);
@@ -38,9 +41,6 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
             initialValue: null,
             transformers: FormValueFileListTransformers,
         });
-        this._i18nController = addI18nController(this, {
-            defaultEN: FileInputResourceStringsEN,
-        });
         this._filePickerActive = false;
         this.multiple = false;
         this.accept = '';
@@ -69,18 +69,6 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
     get value() {
         return this._input?.value ?? '';
     }
-    set resourceStrings(value) {
-        this._i18nController.resourceStrings = value;
-    }
-    get resourceStrings() {
-        return this._i18nController.resourceStrings;
-    }
-    set locale(value) {
-        this._i18nController.locale = value;
-    }
-    get locale() {
-        return this._i18nController.locale;
-    }
     get files() {
         return this._input?.files ?? new DataTransfer().files;
     }
@@ -161,12 +149,6 @@ __decorate([
 __decorate([
     property()
 ], IgcFileInputComponent.prototype, "value", null);
-__decorate([
-    property({ attribute: false })
-], IgcFileInputComponent.prototype, "resourceStrings", null);
-__decorate([
-    property()
-], IgcFileInputComponent.prototype, "locale", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcFileInputComponent.prototype, "multiple", void 0);