igniteui-webcomponents 6.1.2 → 6.2.0

package/components/dialog/dialog.js

@@ -4,92 +4,103 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var IgcDialogComponent_1;
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
-import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter, isEmpty, numberInRangeInclusive, } from '../common/util.js';
+import { numberInRangeInclusive } from '../common/util.js';
 import { styles } from './themes/dialog.base.css.js';
 import { styles as shared } from './themes/shared/dialog.common.css.js';
 import { all } from './themes/themes.js';
-let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends EventEmitterMixin(LitElement) {
+let nextId = 1;
+class IgcDialogComponent extends EventEmitterMixin(LitElement) {
     static register() {
-        registerComponent(IgcDialogComponent_1, IgcButtonComponent);
+        registerComponent(IgcDialogComponent, IgcButtonComponent);
     }
-    get dialog() {
-        return this.dialogRef.value;
-    }
-    handleOpenState() {
-        this.open ? this.dialog.showModal() : this.dialog.close();
+    get _dialog() {
+        return this._dialogRef.value;
     }
     constructor() {
         super();
-        this.titleId = `title-${IgcDialogComponent_1.increment()}`;
-        this.dialogRef = createRef();
-        this.animationPlayer = addAnimationController(this, this.dialogRef);
-        this.animating = false;
+        this._titleId = `title-${nextId++}`;
+        this._slots = addSlotController(this, {
+            slots: setSlots('title', 'message', 'footer'),
+        });
+        this._dialogRef = createRef();
+        this._player = addAnimationController(this, this._dialogRef);
+        this._animating = false;
         this.keepOpenOnEscape = false;
         this.closeOnOutsideClick = false;
         this.hideDefaultAction = false;
         this.open = false;
-        this.formSubmitHandler = (e) => {
-            if (e.submitter) {
-                this.returnValue = e.submitter?.value ?? '';
-            }
-            if (!e.defaultPrevented) {
-                this._hide(true);
-            }
-        };
         addThemingController(this, all);
     }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
-    }
     firstUpdated() {
         if (this.open) {
-            this.dialog.showModal();
+            this._dialog.showModal();
         }
     }
-    async toggleAnimation(dir) {
-        const animation = dir === 'open' ? fadeIn : fadeOut;
-        const [_, event] = await Promise.all([
-            this.animationPlayer.stopAll(),
-            this.animationPlayer.play(animation()),
-        ]);
-        return event.type === 'finish';
+    _handleOpenState() {
+        this.open ? this._dialog.showModal() : this._dialog.close();
+    }
+    _emitClosing() {
+        return this.emitEvent('igcClosing', { cancelable: true });
     }
     async _hide(emitEvent = false) {
-        if (!this.open || (emitEvent && !this.emitClosing())) {
+        if (!this.open || (emitEvent && !this._emitClosing())) {
             return false;
         }
-        this.animating = true;
-        await this.toggleAnimation('close');
+        this._animating = true;
+        await this._player.playExclusive(fadeOut());
         this.open = false;
-        this.animating = false;
+        this._animating = false;
         if (emitEvent) {
             await this.updateComplete;
             this.emitEvent('igcClosed');
         }
         return true;
     }
+    _handleFormSubmit(event) {
+        const form = event.target;
+        if (form.method === 'dialog') {
+            if (hasSubmitter(event.submitter)) {
+                this.returnValue = event.submitter.value ?? '';
+            }
+            if (!event.defaultPrevented) {
+                this._hide(true);
+            }
+        }
+    }
+    _handleCancel(event) {
+        event.preventDefault();
+        if (!this.keepOpenOnEscape) {
+            this._hide(true);
+        }
+    }
+    _handleClick({ clientX, clientY, target }) {
+        if (this.closeOnOutsideClick && this._dialog === target) {
+            const rect = this._dialog.getBoundingClientRect();
+            const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
+            const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
+            if (!(inX && inY)) {
+                this._hide(true);
+            }
+        }
+    }
     async show() {
         if (this.open) {
             return false;
         }
         this.open = true;
-        await this.toggleAnimation('open');
+        await this._player.playExclusive(fadeIn());
         return true;
     }
     async hide() {
@@ -98,90 +109,73 @@ let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends
     async toggle() {
         return this.open ? this.hide() : this.show();
     }
-    handleCancel(event) {
-        event.preventDefault();
-        if (!this.keepOpenOnEscape) {
-            this._hide(true);
-        }
+    _renderBackdrop() {
+        return html `
+      <div
+        aria-hidden=${!this.open}
+        part=${partMap({ backdrop: true, animating: this._animating })}
+      ></div>
+    `;
     }
-    handleClick({ clientX, clientY, target }) {
-        if (this.closeOnOutsideClick && this.dialog === target) {
-            const rect = this.dialog.getBoundingClientRect();
-            const inX = numberInRangeInclusive(clientX, rect.left, rect.right);
-            const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
-            if (!(inX && inY)) {
-                this._hide(true);
-            }
-        }
+    _renderHeader() {
+        return html `
+      <header part="title" id=${this._titleId}>
+        <slot name="title">
+          <span>${this.title}</span>
+        </slot>
+      </header>
+    `;
     }
-    emitClosing() {
-        return this.emitEvent('igcClosing', { cancelable: true });
+    _renderContent() {
+        const hasMessage = this._slots.hasAssignedElements('message');
+        return html `
+      <section part="content">
+        <slot name="message" ?hidden=${!hasMessage}></slot>
+        <slot @submit=${this._handleFormSubmit}></slot>
+      </section>
+    `;
     }
-    handleContentChange() {
-        const forms = this.querySelectorAll('form[method="dialog"]');
-        for (const form of forms) {
-            form.removeEventListener('submit', this.formSubmitHandler);
-            form.addEventListener('submit', this.formSubmitHandler);
-        }
+    _renderFooter() {
+        return html `
+      <footer part="footer">
+        <slot name="footer">
+          ${this.hideDefaultAction
+            ? nothing
+            : html `
+                <igc-button variant="flat" @click=${() => this._hide(true)}>
+                  OK
+                </igc-button>
+              `}
+        </slot>
+      </footer>
+    `;
     }
     render() {
-        const label = this.ariaLabel ? this.ariaLabel : undefined;
-        const labelledBy = label ? undefined : this.titleId;
-        const backdropParts = {
-            backdrop: true,
-            animating: this.animating,
-        };
-        const baseParts = {
-            base: true,
-            titled: this.titleElements.length > 0 || !!this.title,
-            footed: this.footerElements.length > 0 || !this.hideDefaultAction,
-        };
+        const hasTitle = this._slots.hasAssignedElements('title') || !!this.title;
+        const hasFooter = this._slots.hasAssignedElements('footer') || !this.hideDefaultAction;
+        const labelledBy = this.ariaLabel ?? this._titleId;
         return html `
-      <div part=${partMap(backdropParts)} aria-hidden=${!this.open}></div>
+      ${this._renderBackdrop()}
       <dialog
-        ${ref(this.dialogRef)}
-        part=${partMap(baseParts)}
+        ${ref(this._dialogRef)}
+        part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}
         role="dialog"
-        @click=${this.handleClick}
-        @cancel=${this.handleCancel}
-        aria-label=${ifDefined(label)}
-        aria-labelledby=${ifDefined(labelledBy)}
+        aria-label=${this.ariaLabel || nothing}
+        aria-labelledby=${labelledBy || nothing}
+        @click=${this._handleClick}
+        @cancel=${this._handleCancel}
       >
-        <header part="title" id=${this.titleId}>
-          <slot name="title"><span>${this.title}</span></slot>
-        </header>
-        <section part="content">
-          <slot name="message" .hidden=${isEmpty(this.messageElements)}></slot>
-          <slot @slotchange=${this.handleContentChange}></slot>
-        </section>
-        <footer part="footer">
-          <slot name="footer">
-            ${this.hideDefaultAction
-            ? nothing
-            : html `<igc-button variant="flat" @click=${() => this._hide(true)}
-                  >OK</igc-button
-                >`}
-          </slot>
-        </footer>
+        ${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}
       </dialog>
     `;
     }
-};
+}
 IgcDialogComponent.tagName = 'igc-dialog';
 IgcDialogComponent.styles = [styles, shared];
-IgcDialogComponent.increment = createCounter();
+export default IgcDialogComponent;
 __decorate([
     state()
-], IgcDialogComponent.prototype, "animating", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'title' })
-], IgcDialogComponent.prototype, "titleElements", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'message' })
-], IgcDialogComponent.prototype, "messageElements", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'footer' })
-], IgcDialogComponent.prototype, "footerElements", void 0);
+], IgcDialogComponent.prototype, "_animating", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'keep-open-on-escape' })
 ], IgcDialogComponent.prototype, "keepOpenOnEscape", void 0);
@@ -202,9 +196,8 @@ __decorate([
 ], IgcDialogComponent.prototype, "returnValue", void 0);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
-], IgcDialogComponent.prototype, "handleOpenState", null);
-IgcDialogComponent = IgcDialogComponent_1 = __decorate([
-    blazorAdditionalDependencies('IgcButtonComponent')
-], IgcDialogComponent);
-export default IgcDialogComponent;
+], IgcDialogComponent.prototype, "_handleOpenState", null);
+function hasSubmitter(submitter) {
+    return submitter != null;
+}
 //# sourceMappingURL=dialog.js.map

package/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createRef, type Ref, ref } from 'lit/directives/ref.js';\n\nimport { addAnimationController } from '../../animations/player.js';\nimport { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport {\n  createCounter,\n  isEmpty,\n  numberInRangeInclusive,\n} from '../common/util.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\n/**\n * Represents a Dialog component.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitter just before the dialog is closed.\n * @fires igcClosed - Emitted after closing the dialog.\n *\n * @slot - Renders content inside the default slot.\n * @slot title - Renders the title of the dialog header.\n * @slot message - Renders the message content of the dialog.\n * @slot footer - Renders the dialog footer.\n *\n * @csspart base - The base wrapper of the dialog.\n * @csspart title - The title container.\n * @csspart footer - The footer container.\n * @csspart overlay - The overlay.\n */\n@blazorAdditionalDependencies('IgcButtonComponent')\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() {\n    registerComponent(IgcDialogComponent, IgcButtonComponent);\n  }\n\n  private static readonly increment = createCounter();\n  private titleId = `title-${IgcDialogComponent.increment()}`;\n\n  private dialogRef: Ref<HTMLDialogElement> = createRef();\n  private animationPlayer = addAnimationController(this, this.dialogRef);\n\n  /**\n   * Backdrop animation helper.\n   */\n  @state()\n  private animating = false;\n\n  private get dialog() {\n    return this.dialogRef.value!;\n  }\n\n  @queryAssignedElements({ slot: 'title' })\n  private titleElements!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'message' })\n  private messageElements!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'footer' })\n  private footerElements!: Array<HTMLElement>;\n\n  /**\n   * Whether the dialog should be kept open when pressing the 'ESCAPE' button.\n   * @attr keep-open-on-escape\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * Whether the dialog should be closed when clicking outside of it.\n   * @attr close-on-outside-click\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * Whether to hide the default action button for the dialog.\n   *\n   * When there is projected content in the `footer` slot this property\n   * has no effect.\n   * @attr hide-default-action\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Sets the title of the dialog.\n   * @attr\n   */\n  @property()\n  public override title!: string;\n\n  /** Sets the return value for the dialog. */\n  @property({ attribute: false })\n  public returnValue!: string;\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  protected handleOpenState() {\n    this.open ? this.dialog.showModal() : this.dialog.close();\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => this.requestUpdate());\n    return root;\n  }\n\n  protected override firstUpdated() {\n    if (this.open) {\n      this.dialog.showModal();\n    }\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? fadeIn : fadeOut;\n\n    const [_, event] = await Promise.all([\n      this.animationPlayer.stopAll(),\n      this.animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  private async _hide(emitEvent = false) {\n    if (!this.open || (emitEvent && !this.emitClosing())) {\n      return false;\n    }\n\n    this.animating = true;\n    await this.toggleAnimation('close');\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  /** Opens the dialog. */\n  public async show(): Promise<boolean> {\n    if (this.open) {\n      return false;\n    }\n\n    this.open = true;\n    await this.toggleAnimation('open');\n    return true;\n  }\n\n  /** Closes the dialog. */\n  public async hide(): Promise<boolean> {\n    return this._hide();\n  }\n\n  /** Toggles the open state of the dialog. */\n  public async toggle(): Promise<boolean> {\n    return this.open ? this.hide() : this.show();\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._hide(true);\n    }\n  }\n\n  private handleClick({ clientX, clientY, target }: PointerEvent) {\n    if (this.closeOnOutsideClick && this.dialog === target) {\n      const rect = this.dialog.getBoundingClientRect();\n      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);\n      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);\n\n      if (!(inX && inY)) {\n        this._hide(true);\n      }\n    }\n  }\n\n  private emitClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  protected formSubmitHandler = (e: SubmitEvent) => {\n    if (e.submitter) {\n      this.returnValue = (e.submitter as any)?.value ?? '';\n    }\n\n    if (!e.defaultPrevented) {\n      this._hide(true);\n    }\n  };\n\n  private handleContentChange() {\n    // Setup submit handling for forms\n    const forms = this.querySelectorAll<HTMLFormElement>(\n      'form[method=\"dialog\"]'\n    );\n\n    for (const form of forms) {\n      form.removeEventListener('submit', this.formSubmitHandler);\n      form.addEventListener('submit', this.formSubmitHandler);\n    }\n  }\n\n  protected override render() {\n    const label = this.ariaLabel ? this.ariaLabel : undefined;\n    const labelledBy = label ? undefined : this.titleId;\n    const backdropParts = {\n      backdrop: true,\n      animating: this.animating,\n    };\n    const baseParts = {\n      base: true,\n      titled: this.titleElements.length > 0 || !!this.title,\n      footed: this.footerElements.length > 0 || !this.hideDefaultAction,\n    };\n\n    return html`\n      <div part=${partMap(backdropParts)} aria-hidden=${!this.open}></div>\n      <dialog\n        ${ref(this.dialogRef)}\n        part=${partMap(baseParts)}\n        role=\"dialog\"\n        @click=${this.handleClick}\n        @cancel=${this.handleCancel}\n        aria-label=${ifDefined(label)}\n        aria-labelledby=${ifDefined(labelledBy)}\n      >\n        <header part=\"title\" id=${this.titleId}>\n          <slot name=\"title\"><span>${this.title}</span></slot>\n        </header>\n        <section part=\"content\">\n          <slot name=\"message\" .hidden=${isEmpty(this.messageElements)}></slot>\n          <slot @slotchange=${this.handleContentChange}></slot>\n        </section>\n        <footer part=\"footer\">\n          <slot name=\"footer\">\n            ${this.hideDefaultAction\n              ? nothing\n              : html`<igc-button variant=\"flat\" @click=${() => this._hide(true)}\n                  >OK</igc-button\n                >`}\n          </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dialog': IgcDialogComponent;\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } 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 { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport { numberInRangeInclusive } from '../common/util.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\nlet nextId = 1;\n\n/* blazorAdditionalDependency: IgcButtonComponent */\n/**\n * Represents a Dialog component.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitter just before the dialog is closed. Cancelable.\n * @fires igcClosed - Emitted after closing the dialog.\n *\n * @slot - Renders content inside the default slot of the dialog.\n * @slot title - Renders content in the title slot of the dialog header.\n * @slot message - Renders the message content of the dialog.\n * @slot footer - Renders content in the dialog footer.\n *\n * @csspart base - The base wrapper of the dialog.\n * @csspart title - The title container of the dialog.\n * @csspart footer - The footer container of the dialog.\n * @csspart overlay - The backdrop overlay of the dialog.\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 = `title-${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 {\n    return this._dialogRef.value!;\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Whether the dialog should be kept open when pressing the 'Escape' button.\n   * @attr keep-open-on-escape\n   */\n  @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n  public keepOpenOnEscape = false;\n\n  /**\n   * Whether the dialog should be closed when clicking outside of it.\n   * @attr close-on-outside-click\n   */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' })\n  public closeOnOutsideClick = false;\n\n  /**\n   * Whether to hide the default action button for the dialog.\n   *\n   * When there is projected content in the `footer` slot this property\n   * has no effect.\n   * @attr hide-default-action\n   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /**\n   * Whether the dialog is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Sets the title of the dialog.\n   * @attr\n   */\n  @property()\n  public override title!: string;\n\n  /** Sets the return value for the dialog. */\n  @property({ attribute: false })\n  public returnValue!: string;\n\n  //#endregion\n\n  //#region Internal API\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override firstUpdated(): void {\n    if (this.open) {\n      this._dialog.showModal();\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  protected _handleOpenState(): void {\n    this.open ? this._dialog.showModal() : this._dialog.close();\n  }\n\n  private _emitClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\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  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._hide(true);\n      }\n    }\n  }\n\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (!this.keepOpenOnEscape) {\n      this._hide(true);\n    }\n  }\n\n  private _handleClick({ clientX, clientY, target }: PointerEvent): void {\n    if (this.closeOnOutsideClick && this._dialog === target) {\n      const rect = this._dialog.getBoundingClientRect();\n      const inX = numberInRangeInclusive(clientX, rect.left, rect.right);\n      const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);\n\n      if (!(inX && inY)) {\n        this._hide(true);\n      }\n    }\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Opens the dialog. */\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  /** Closes the dialog. */\n  public async hide(): Promise<boolean> {\n    return this._hide();\n  }\n\n  /** Toggles the open state of the dialog. */\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          ${this.hideDefaultAction\n            ? nothing\n            : html`\n                <igc-button variant=\"flat\" @click=${() => this._hide(true)}>\n                  OK\n                </igc-button>\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=${this.ariaLabel || nothing}\n        aria-labelledby=${labelledBy || nothing}\n        @click=${this._handleClick}\n        @cancel=${this._handleCancel}\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/dialog/themes/dark/dialog.bootstrap.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--elevation: var(--ig-dialog-elevation, var(--ig-elevation-0));--background: var(--ig-dialog-background, var(--ig-surface-500));--title-color: var(--ig-dialog-title-color, var(--ig-gray-900));--border-color: var(--ig-dialog-border-color, var(--ig-gray-100));--backdrop: var(--ig-dialog-backdrop, hsl(from var(--ig-gray-500) h s l/0.54));--border-radius: var(--ig-dialog-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1111111111) * 2.25rem), 2.25rem));--default-size: var(--ig-dialog-default-size, 2);--ig-theme: bootstrap}`;
+export const styles = css `:host{--elevation: var(--ig-dialog-elevation, var(--ig-elevation-0));--background: var(--ig-dialog-background, var(--ig-surface-500));--title-color: var(--ig-dialog-title-color, var(--ig-gray-900));--border-color: var(--ig-dialog-border-color, var(--ig-gray-300));--backdrop: var(--ig-dialog-backdrop, hsl(from var(--ig-gray-500) h s l/0.54));--border-radius: var(--ig-dialog-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1111111111) * 2.25rem), 2.25rem));--default-size: var(--ig-dialog-default-size, 2);--ig-theme: bootstrap}`;
 //# sourceMappingURL=dialog.bootstrap.css.js.map

package/components/dialog/themes/dark/dialog.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/dark/dialog.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6hBAA6hB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--elevation: var(--ig-dialog-elevation, var(--ig-elevation-0));--background: var(--ig-dialog-background, var(--ig-surface-500));--title-color: var(--ig-dialog-title-color, var(--ig-gray-900));--border-color: var(--ig-dialog-border-color, var(--ig-gray-100));--backdrop: var(--ig-dialog-backdrop, hsl(from var(--ig-gray-500) h s l/0.54));--border-radius: var(--ig-dialog-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1111111111) * 2.25rem), 2.25rem));--default-size: var(--ig-dialog-default-size, 2);--ig-theme: bootstrap}`;\n"]}
+{"version":3,"file":"dialog.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/dark/dialog.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6hBAA6hB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--elevation: var(--ig-dialog-elevation, var(--ig-elevation-0));--background: var(--ig-dialog-background, var(--ig-surface-500));--title-color: var(--ig-dialog-title-color, var(--ig-gray-900));--border-color: var(--ig-dialog-border-color, var(--ig-gray-300));--backdrop: var(--ig-dialog-backdrop, hsl(from var(--ig-gray-500) h s l/0.54));--border-radius: var(--ig-dialog-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1111111111) * 2.25rem), 2.25rem));--default-size: var(--ig-dialog-default-size, 2);--ig-theme: bootstrap}`;\n"]}

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

@@ -36,12 +36,11 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
     static readonly tagName = "igc-expansion-panel";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private static readonly increment;
     private _panelId;
-    private headerRef;
-    private contentRef;
-    private animationPlayer;
-    private _indicatorExpandedElements;
+    private readonly _headerRef;
+    private readonly _contentRef;
+    private readonly _player;
+    private readonly _slots;
     /**
      * Indicates whether the contents of the control should be visible.
      * @attr
@@ -58,22 +57,21 @@ export default class IgcExpansionPanelComponent extends IgcExpansionPanelCompone
      */
     indicatorPosition: ExpansionPanelIndicatorPosition;
     constructor();
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
-    private handleClick;
-    private toggleWithEvent;
-    private toggleAnimation;
-    private openWithEvent;
-    private closeWithEvent;
+    private _handleClick;
+    private _toggleWithEvent;
+    private _toggleAnimation;
+    private _openWithEvent;
+    private _closeWithEvent;
     /** Toggles the panel open/close state. */
     toggle(): Promise<boolean>;
     /** Hides the panel content. */
     hide(): Promise<boolean>;
     /** Shows the panel content. */
     show(): Promise<boolean>;
-    private renderIndicatorTemplate;
-    private renderHeaderTemplate;
-    private renderContentTemplate;
+    private _renderIndicator;
+    private _renderHeader;
+    private _renderPanel;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -5,84 +5,82 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { createCounter, isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import { styles } from './themes/expansion-panel.base.css.js';
 import { styles as shared } from './themes/shared/expansion-panel.common.css.js';
 import { all } from './themes/themes.js';
+let nextId = 1;
 class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcExpansionPanelComponent, IgcIconComponent);
     }
     constructor() {
         super();
-        this.headerRef = createRef();
-        this.contentRef = createRef();
-        this.animationPlayer = addAnimationController(this, this.contentRef);
+        this._panelId = `${IgcExpansionPanelComponent.tagName}-${nextId++}`;
+        this._headerRef = createRef();
+        this._contentRef = createRef();
+        this._player = addAnimationController(this, this._contentRef);
+        this._slots = addSlotController(this, {
+            slots: setSlots('title', 'subtitle', 'indicator', 'indicator-expanded'),
+        });
         this.open = false;
         this.disabled = false;
         this.indicatorPosition = 'start';
         addThemingController(this, all);
         addKeybindings(this, {
-            ref: this.headerRef,
+            ref: this._headerRef,
             skip: () => this.disabled,
             bindingDefaults: { preventDefault: true },
         })
-            .setActivateHandler(this.toggleWithEvent)
-            .set([altKey, arrowDown], this.openWithEvent)
-            .set([altKey, arrowUp], this.closeWithEvent);
-    }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
+            .setActivateHandler(this._toggleWithEvent)
+            .set([altKey, arrowDown], this._openWithEvent)
+            .set([altKey, arrowUp], this._closeWithEvent);
     }
     connectedCallback() {
         super.connectedCallback();
-        this._panelId =
-            this.id ||
-                `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;
+        this._panelId = this.id || this._panelId;
     }
-    handleClick() {
-        this.headerRef.value.focus();
-        this.toggleWithEvent();
+    _handleClick() {
+        this._headerRef.value.focus();
+        this._toggleWithEvent();
     }
-    toggleWithEvent() {
-        this.open ? this.closeWithEvent() : this.openWithEvent();
+    _toggleWithEvent() {
+        this.open ? this._closeWithEvent() : this._openWithEvent();
     }
-    async toggleAnimation(dir) {
+    async _toggleAnimation(dir) {
         const animation = dir === 'open' ? growVerIn : growVerOut;
         const [_, event] = await Promise.all([
-            this.animationPlayer.stopAll(),
-            this.animationPlayer.play(animation()),
+            this._player.stopAll(),
+            this._player.play(animation()),
         ]);
         return event.type === 'finish';
     }
-    async openWithEvent() {
+    async _openWithEvent() {
         if (this.open ||
             !this.emitEvent('igcOpening', { cancelable: true, detail: this })) {
             return;
         }
         this.open = true;
-        if (await this.toggleAnimation('open')) {
+        if (await this._toggleAnimation('open')) {
             this.emitEvent('igcOpened', { detail: this });
         }
     }
-    async closeWithEvent() {
+    async _closeWithEvent() {
         if (!(this.open &&
             this.emitEvent('igcClosing', { cancelable: true, detail: this }))) {
             return;
         }
         this.open = false;
-        if (await this.toggleAnimation('close')) {
+        if (await this._toggleAnimation('close')) {
             this.emitEvent('igcClosed', { detail: this });
         }
     }
@@ -94,7 +92,7 @@ class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
             return false;
         }
         this.open = false;
-        await this.toggleAnimation('close');
+        await this._toggleAnimation('close');
         return true;
     }
     async show() {
@@ -102,32 +100,25 @@ class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
             return false;
         }
         this.open = true;
-        await this.toggleAnimation('open');
+        await this._toggleAnimation('open');
         return true;
     }
-    renderIndicatorTemplate() {
-        const indicatorHidden = this.open && this._indicatorExpandedElements.length > 0;
-        const indicatorExpandedHidden = isEmpty(this._indicatorExpandedElements) || !this.open;
+    _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=${this.open ? 'collapse' : 'expand'}
-            collection="default"
-          >
-          </igc-icon>
+          <igc-icon name=${iconName} collection="default"></igc-icon>
         </slot>
-        <slot
-          name="indicator-expanded"
-          ?hidden=${indicatorExpandedHidden}
-        ></slot>
+        <slot name="indicator-expanded" ?hidden=${!indicatorHidden}></slot>
       </div>
     `;
     }
-    renderHeaderTemplate() {
+    _renderHeader() {
         return html `
       <div
-        ${ref(this.headerRef)}
+        ${ref(this._headerRef)}
         part="header"
         id="${this._panelId}-header"
         role="button"
@@ -135,9 +126,9 @@ class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
         aria-disabled=${this.disabled}
         aria-controls="${this._panelId}-content"
         tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.disabled ? nothing : this.handleClick}
+        @click=${this.disabled ? nothing : this._handleClick}
       >
-        ${this.renderIndicatorTemplate()}
+        ${this._renderIndicator()}
         <div>
           <slot name="title" part="title"></slot>
           <slot name="subtitle" part="subtitle"></slot>
@@ -145,10 +136,10 @@ class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
       </div>
     `;
     }
-    renderContentTemplate() {
+    _renderPanel() {
         return html `
       <div
-        ${ref(this.contentRef)}
+        ${ref(this._contentRef)}
         part="content"
         role="region"
         id="${this._panelId}-content"
@@ -161,21 +152,17 @@ class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
     `;
     }
     render() {
-        return html `${this.renderHeaderTemplate()}${this.renderContentTemplate()}`;
+        return html `${this._renderHeader()}${this._renderPanel()}`;
     }
 }
 IgcExpansionPanelComponent.tagName = 'igc-expansion-panel';
 IgcExpansionPanelComponent.styles = [styles, shared];
-IgcExpansionPanelComponent.increment = createCounter();
 export default IgcExpansionPanelComponent;
 __decorate([
-    queryAssignedElements({ slot: 'indicator-expanded' })
-], IgcExpansionPanelComponent.prototype, "_indicatorExpandedElements", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcExpansionPanelComponent.prototype, "open", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcExpansionPanelComponent.prototype, "disabled", void 0);
 __decorate([
     property({ reflect: true, attribute: 'indicator-position' })