igniteui-webcomponents 3.3.1 → 3.4.0-beta.0

package/components/dialog/dialog.js

@@ -0,0 +1,168 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../common/decorators/watch.js';
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { createCounter } from '../common/util.js';
+import { styles } from './themes/light/dialog.base.css.js';
+import { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';
+import { styles as fluent } from './themes/light/dialog.fluent.css.js';
+import { styles as indigo } from './themes/light/dialog.indigo.css.js';
+import { styles as material } from './themes/light/dialog.material.css.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcButtonComponent from '../button/button.js';
+defineComponents(IgcButtonComponent);
+let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.titleId = `title-${IgcDialogComponent_1.increment()}`;
+        this.closeOnEscape = true;
+        this.closeOnOutsideClick = false;
+        this.hideDefaultAction = false;
+        this.open = false;
+        this.formSubmitHandler = (e) => {
+            var _a;
+            if (e instanceof SubmitEvent && e.submitter) {
+                this.returnValue = ((_a = e.submitter) === null || _a === void 0 ? void 0 : _a.value) || '';
+            }
+            if (!e.defaultPrevented) {
+                this.hideWithEvent();
+            }
+        };
+    }
+    handleOpenState() {
+        this.open ? this.dialog.showModal() : this.dialog.close();
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        if (this.open) {
+            this.dialog.showModal();
+        }
+    }
+    show() {
+        if (this.open) {
+            return;
+        }
+        this.open = true;
+    }
+    hide() {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+    }
+    toggle() {
+        this.open ? this.hide() : this.show();
+    }
+    async hideWithEvent() {
+        if (!this.open) {
+            return;
+        }
+        if (!this.handleClosing()) {
+            return;
+        }
+        this.open = false;
+        await this.updateComplete;
+        this.emitEvent('igcClosed');
+    }
+    handleCancel(event) {
+        event.preventDefault();
+        if (this.closeOnEscape) {
+            this.hideWithEvent();
+        }
+    }
+    handleClick({ clientX, clientY, target }) {
+        if (this.closeOnOutsideClick && this.dialog.isSameNode(target)) {
+            const { left, top, right, bottom } = this.dialog.getBoundingClientRect();
+            const between = (x, low, high) => x >= low && x <= high;
+            if (!(between(clientX, left, right) && between(clientY, top, bottom))) {
+                this.hideWithEvent();
+            }
+        }
+    }
+    handleClosing() {
+        return this.emitEvent('igcClosing', { cancelable: true });
+    }
+    handleSlotChange() {
+        Array.from(this.querySelectorAll('igc-form, form'))
+            .filter((each) => each.getAttribute('method') === 'dialog')
+            .forEach((form) => {
+            const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';
+            form.removeEventListener(event, this.formSubmitHandler);
+            form.addEventListener(event, this.formSubmitHandler);
+        });
+    }
+    render() {
+        const label = this.ariaLabel ? this.ariaLabel : undefined;
+        const labelledby = label ? undefined : this.titleId;
+        return html `
+      <div part="backdrop" aria-hidden="true" ?hidden=${!this.open}></div>
+      <dialog
+        part="base"
+        role="dialog"
+        @click=${this.handleClick}
+        @cancel=${this.handleCancel}
+        aria-label=${ifDefined(label)}
+        aria-labelledby=${ifDefined(labelledby)}
+      >
+        <header part="title" id=${this.titleId}>
+          <slot name="title"><span>${this.title}</span></slot>
+        </header>
+        <section part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </section>
+        <footer part="footer">
+          <slot name="footer">
+            ${this.hideDefaultAction
+            ? nothing
+            : html `<igc-button variant="flat" @click=${this.hideWithEvent}
+                  >OK</igc-button
+                >`}
+          </slot>
+        </footer>
+      </dialog>
+    `;
+    }
+};
+IgcDialogComponent.tagName = 'igc-dialog';
+IgcDialogComponent.styles = [styles];
+IgcDialogComponent.increment = createCounter();
+__decorate([
+    query('dialog', true)
+], IgcDialogComponent.prototype, "dialog", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-escape' })
+], IgcDialogComponent.prototype, "closeOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-outside-click' })
+], IgcDialogComponent.prototype, "closeOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-default-action' })
+], IgcDialogComponent.prototype, "hideDefaultAction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcDialogComponent.prototype, "open", void 0);
+__decorate([
+    property()
+], IgcDialogComponent.prototype, "title", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcDialogComponent.prototype, "returnValue", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], IgcDialogComponent.prototype, "handleOpenState", null);
+IgcDialogComponent = IgcDialogComponent_1 = __decorate([
+    themes({ bootstrap, material, fluent, indigo }),
+    blazorAdditionalDependencies('IgcButtonComponent')
+], IgcDialogComponent);
+export default IgcDialogComponent;
+//# sourceMappingURL=dialog.js.map

package/components/dialog/dialog.js.map

@@ -0,0 +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, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/dialog.base.css.js';\nimport { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dialog.fluent.css.js';\nimport { styles as indigo } from './themes/light/dialog.indigo.css.js';\nimport { styles as material } from './themes/light/dialog.material.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcDialogEventMap {\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 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@themes({ bootstrap, material, fluent, indigo })\n@blazorAdditionalDependencies('IgcButtonComponent')\nexport default class IgcDialogComponent extends EventEmitterMixin<\n  IgcDialogEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-dialog';\n  public static styles = [styles];\n\n  private static readonly increment = createCounter();\n  private titleId = `title-${IgcDialogComponent.increment()}`;\n\n  @query('dialog', true)\n  private dialog!: HTMLDialogElement;\n\n  /** Whether the dialog should be closed when pressing the 'ESCAPE' button.  */\n  @property({ type: Boolean, attribute: 'close-on-escape' })\n  public closeOnEscape = true;\n\n  /** Whether the dialog should be closed when clicking outside of it.  */\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   */\n  @property({ type: Boolean, attribute: 'hide-default-action' })\n  public hideDefaultAction = false;\n\n  /** Whether the dialog is opened. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /** Sets the title of the dialog.  */\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  protected override async firstUpdated() {\n    await this.updateComplete;\n    if (this.open) {\n      this.dialog.showModal();\n    }\n  }\n\n  /** Opens the dialog. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n  }\n\n  /** Closes the dialog. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Toggles the open state of the dialog. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  protected async hideWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this.handleClosing()) {\n      return;\n    }\n\n    this.open = false;\n    await this.updateComplete;\n    this.emitEvent('igcClosed');\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n\n    if (this.closeOnEscape) {\n      this.hideWithEvent();\n    }\n  }\n\n  private handleClick({ clientX, clientY, target }: MouseEvent) {\n    if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {\n      const { left, top, right, bottom } = this.dialog.getBoundingClientRect();\n      const between = (x: number, low: number, high: number) =>\n        x >= low && x <= high;\n      if (!(between(clientX, left, right) && between(clientY, top, bottom))) {\n        this.hideWithEvent();\n      }\n    }\n  }\n\n  private handleClosing(): boolean {\n    return this.emitEvent('igcClosing', { cancelable: true });\n  }\n\n  protected formSubmitHandler = (e: Event) => {\n    if (e instanceof SubmitEvent && e.submitter) {\n      this.returnValue = (e.submitter as any)?.value || '';\n    }\n    if (!e.defaultPrevented) {\n      this.hideWithEvent();\n    }\n  };\n\n  private handleSlotChange() {\n    // Setup submit handling for supported forms\n    Array.from(this.querySelectorAll('igc-form, form'))\n      .filter((each) => each.getAttribute('method') === 'dialog')\n      .forEach((form) => {\n        const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';\n        form.removeEventListener(event, this.formSubmitHandler);\n        form.addEventListener(event, 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\n    return html`\n      <div part=\"backdrop\" aria-hidden=\"true\" ?hidden=${!this.open}></div>\n      <dialog\n        part=\"base\"\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 @slotchange=${this.handleSlotChange}></slot>\n        </section>\n        <footer part=\"footer\">\n          <slot name=\"footer\">\n            ${this.hideDefaultAction\n              ? nothing\n              : html`<igc-button variant=\"flat\" @click=${this.hideWithEvent}\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"]}

package/components/dialog/themes/light/dialog.base.css.d.ts

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

package/components/dialog/themes/light/dialog.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{border-radius:clamp(0rem,var(--igc-radius-factor)*2px,2px);background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);border-style:none;padding:unset}[part=base]{background:inherit;color:inherit;border-style:inherit;padding:inherit;border:inherit;border-radius:inherit;min-width:inherit;-webkit-box-shadow:var(--igc-elevation-24);box-shadow:var(--igc-elevation-24)}[part=content]{max-width:40ch;color:var(--content-color, hsla(var(--igc-gray-700), var(--igc-gray-a)));font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);margin:0}[part=title],[part=footer]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-h6-font-family);font-weight:var(--igc-h6-font-weight);font-size:var(--igc-h6-font-size);font-style:var(--igc-h6-font-style);letter-spacing:var(--igc-h6-letter-spacing);text-transform:var(--igc-h6-text-transform);line-height:var(--igc-h6-line-height);margin-top:var(--igc-h6-margin-top);margin-bottom:var(--igc-h6-margin-bottom);margin:0}[part=footer]{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}::slotted(*){font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}slot[name=title]::slotted(:not(:last-child)),slot[name=footer]::slotted(:not(:last-child)){-webkit-margin-end:.5rem;margin-inline-end:.5rem}dialog::-webkit-backdrop{background:none}dialog::backdrop{background:none}[part=backdrop]{position:fixed;inset:0;background:hsla(var(--igc-gray-500), 0.54)}`;
+//# sourceMappingURL=dialog.base.css.js.map

package/components/dialog/themes/light/dialog.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2pFAA2pF,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{border-radius:clamp(0rem,var(--igc-radius-factor)*2px,2px);background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);border-style:none;padding:unset}[part=base]{background:inherit;color:inherit;border-style:inherit;padding:inherit;border:inherit;border-radius:inherit;min-width:inherit;-webkit-box-shadow:var(--igc-elevation-24);box-shadow:var(--igc-elevation-24)}[part=content]{max-width:40ch;color:var(--content-color, hsla(var(--igc-gray-700), var(--igc-gray-a)));font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);margin:0}[part=title],[part=footer]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:hsla(var(--igc-gray-900), var(--igc-gray-a));font-family:var(--igc-h6-font-family);font-weight:var(--igc-h6-font-weight);font-size:var(--igc-h6-font-size);font-style:var(--igc-h6-font-style);letter-spacing:var(--igc-h6-letter-spacing);text-transform:var(--igc-h6-text-transform);line-height:var(--igc-h6-line-height);margin-top:var(--igc-h6-margin-top);margin-bottom:var(--igc-h6-margin-bottom);margin:0}[part=footer]{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}::slotted(*){font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}slot[name=title]::slotted(:not(:last-child)),slot[name=footer]::slotted(:not(:last-child)){-webkit-margin-end:.5rem;margin-inline-end:.5rem}dialog::-webkit-backdrop{background:none}dialog::backdrop{background:none}[part=backdrop]{position:fixed;inset:0;background:hsla(var(--igc-gray-500), 0.54)}`;\n"]}

package/components/dialog/themes/light/dialog.bootstrap.css.d.ts

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

package/components/dialog/themes/light/dialog.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{border-radius:clamp(0rem,var(--igc-radius-factor)*4px,4px)}[part=base]{min-width:18rem;border:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));-webkit-box-shadow:none;box-shadow:none}[part=title],[part=footer]{font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);margin:0;padding:1rem}[part=content]{padding:1rem}[part=title]{-webkit-border-after:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-block-end:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}[part=footer]{-webkit-border-before:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-block-start:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}`;
+//# sourceMappingURL=dialog.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+hCAA+hC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{border-radius:clamp(0rem,var(--igc-radius-factor)*4px,4px)}[part=base]{min-width:18rem;border:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));-webkit-box-shadow:none;box-shadow:none}[part=title],[part=footer]{font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);margin:0;padding:1rem}[part=content]{padding:1rem}[part=title]{-webkit-border-after:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-block-end:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}[part=footer]{-webkit-border-before:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)));border-block-start:1px solid var(--border-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}`;\n"]}

package/components/dialog/themes/light/dialog.fluent.css.d.ts

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

package/components/dialog/themes/light/dialog.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part=title]{padding:1.5rem;-webkit-padding-before:1rem;padding-block-start:1rem}[part=content]{padding-inline:1.5rem;-webkit-padding-after:1.25rem;padding-block-end:1.25rem}[part=footer]{padding:1.5rem;-webkit-padding-before:0;padding-block-start:0}[part=backdrop]{background:rgba(255,255,255,.4)}`;
+//# sourceMappingURL=dialog.fluent.css.js.map

package/components/dialog/themes/light/dialog.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4SAA4S,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=title]{padding:1.5rem;-webkit-padding-before:1rem;padding-block-start:1rem}[part=content]{padding-inline:1.5rem;-webkit-padding-after:1.25rem;padding-block-end:1.25rem}[part=footer]{padding:1.5rem;-webkit-padding-before:0;padding-block-start:0}[part=backdrop]{background:rgba(255,255,255,.4)}`;\n"]}

package/components/dialog/themes/light/dialog.indigo.css.d.ts

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

package/components/dialog/themes/light/dialog.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part=title]{padding:1rem 1.5rem}[part=content]{padding-inline:1.5rem;-webkit-padding-after:.5rem;padding-block-end:.5rem;color:hsla(var(--igc-gray-500), var(--igc-gray-a))}[part=footer]{padding:.5rem}`;
+//# sourceMappingURL=dialog.indigo.css.js.map

package/components/dialog/themes/light/dialog.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2MAA2M,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=title]{padding:1rem 1.5rem}[part=content]{padding-inline:1.5rem;-webkit-padding-after:.5rem;padding-block-end:.5rem;color:hsla(var(--igc-gray-500), var(--igc-gray-a))}[part=footer]{padding:.5rem}`;\n"]}

package/components/dialog/themes/light/dialog.material.css.d.ts

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

package/components/dialog/themes/light/dialog.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part=title]{padding-inline:1.5rem;-webkit-padding-before:1rem;padding-block-start:1rem}[part=content]{padding:.875rem 1.5rem}[part=footer]{padding:.5rem;-webkit-padding-before:0;padding-block-start:0}`;
+//# sourceMappingURL=dialog.material.css.js.map

package/components/dialog/themes/light/dialog.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.material.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2MAA2M,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=title]{padding-inline:1.5rem;-webkit-padding-before:1rem;padding-block-start:1rem}[part=content]{padding:.875rem 1.5rem}[part=footer]{padding:.5rem;-webkit-padding-before:0;padding-block-start:0}`;\n"]}

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import type IgcDropdownItemComponent from './dropdown-item';
 import { SizableInterface } from '../common/mixins/sizable.js';
+import type IgcDropdownItemComponent from './dropdown-item';
 /**
  * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.
  *
@@ -10,7 +10,7 @@ import { SizableInterface } from '../common/mixins/sizable.js';
  * @csspart label - The native label element.
  */
 export default class IgcDropdownGroupComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-group";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     protected parent: SizableInterface;
     /** All child `igc-dropdown-item`s. */

package/components/dropdown/dropdown-group.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 import { styles } from './themes/light/dropdown-group.base.css.js';
 import { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';
-import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
 let IgcDropdownGroupComponent = class IgcDropdownGroupComponent extends LitElement {
     connectedCallback() {
         super.connectedCallback();

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,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAYxE,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAW/C,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC;IAES,SAAS;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAE,CAAC;IACvC,CAAC;IAEkB,MAAM;;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,OAAO,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA7BwB,iCAAO,GAAG,oBAAqB,CAAA;AAE/B,gCAAM,GAAG,MAAO,CAAA;AAMvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAT5B,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA8B7C;eA9BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { SizableInterface } from '../common/mixins/sizable.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\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 */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n\n  public static override styles = styles;\n  protected parent!: SizableInterface;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    this.parent = this.getParent();\n  }\n\n  protected getParent() {\n    return this.closest('igc-dropdown')!;\n  }\n\n  protected override render() {\n    this.setAttribute('size', this.parent?.size ?? 'large');\n\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></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,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAW/E,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAW/C,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC;IAES,SAAS;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAE,CAAC;IACvC,CAAC;IAEkB,MAAM;;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,OAAO,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA7BwB,iCAAO,GAAW,oBAAqB,CAAA;AAEvC,gCAAM,GAAG,MAAO,CAAA;AAMvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAT5B,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA8B7C;eA9BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { SizableInterface } from '../common/mixins/sizable.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\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 */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-group';\n\n  public static override styles = styles;\n  protected parent!: SizableInterface;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    this.parent = this.getParent();\n  }\n\n  protected getParent() {\n    return this.closest('igc-dropdown')!;\n  }\n\n  protected override render() {\n    this.setAttribute('size', this.parent?.size ?? 'large');\n\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown-header.d.ts

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * @slot - Renders the header.
  */
 export default class IgcDropdownHeaderComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-header";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAQtF,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,UAAU;IAK7C,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAPwB,kCAAO,GAAG,qBAAsB,CAAA;AAEhC,iCAAM,GAAG,MAAO,CAAA;AAHpB,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,0BAA0B,CAQ9C;eARoB,0BAA0B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-header.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';\n\n/**\n * @element igc-dropdown-header - Represents a header item in a dropdown list.\n *\n * @slot - Renders the header.\n */\n@themes({ bootstrap })\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-header';\n\n  public static override styles = styles;\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-header': IgcDropdownHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAQtF,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,UAAU;IAK7C,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAPwB,kCAAO,GAAW,qBAAsB,CAAA;AAExC,iCAAM,GAAG,MAAO,CAAA;AAHpB,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,0BAA0B,CAQ9C;eARoB,0BAA0B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-header.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';\n\n/**\n * @element igc-dropdown-header - Represents a header item in a dropdown list.\n *\n * @slot - Renders the header.\n */\n@themes({ bootstrap })\nexport default class IgcDropdownHeaderComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-header';\n\n  public static override styles = styles;\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-header': IgcDropdownHeaderComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown-item.d.ts

@@ -13,7 +13,7 @@ import { LitElement } from 'lit';
  * @csspart suffix - The suffix wrapper.
  */
 export default class IgcDropdownItemComponent extends LitElement {
-    static readonly tagName = "igc-dropdown-item";
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
     private _value;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAgB9E,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA0BS,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAMf,aAAQ,GAAG,KAAK,CAAC;IA6B1B,CAAC;IAvDC,IAAW,KAAK;;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAqBS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAlEwB,gCAAO,GAAG,mBAAoB,CAAA;AAE9B,+BAAM,GAAG,MAAO,CAAA;AASvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAG1B;AAYD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACrB;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAGxB;IADC,KAAK,CAAC,UAAU,CAAC;8DAMjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;8DAKjB;AArDkB,wBAAwB;IAD5C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,wBAAwB,CAmE5C;eAnEoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { styles } from './themes/light/dropdown-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown-item.indigo.css.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcDropdownItemComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-item';\n\n  public static override styles = styles;\n\n  private _value!: string;\n\n  /**\n   * Тhe current value of the item.\n   * If not specified, the element's text content is used.\n   */\n  @property({ type: String })\n  public get value() {\n    return this._value ? this._value : this.textContent ?? '';\n  }\n\n  public set value(value: string) {\n    const oldVal = this._value;\n    this._value = value;\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n    this.active = this.selected;\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this.disabled\n      ? this.setAttribute('aria-disabled', 'true')\n      : this.removeAttribute('aria-disabled');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\"><slot name=\"prefix\"></slot></section>\n      <section part=\"content\"><slot></slot></section>\n      <section part=\"suffix\"><slot name=\"suffix\"></slot></section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAgB9E,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA0BS,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAMf,aAAQ,GAAG,KAAK,CAAC;IA6B1B,CAAC;IAvDC,IAAW,KAAK;;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAqBS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAlEwB,gCAAO,GAAW,mBAAoB,CAAA;AAEtC,+BAAM,GAAG,MAAO,CAAA;AASvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAG1B;AAYD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACrB;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAGxB;IADC,KAAK,CAAC,UAAU,CAAC;8DAMjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;8DAKjB;AArDkB,wBAAwB;IAD5C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,wBAAwB,CAmE5C;eAnEoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { styles } from './themes/light/dropdown-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown-item.indigo.css.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcDropdownItemComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-item';\n\n  public static override styles = styles;\n\n  private _value!: string;\n\n  /**\n   * Тhe current value of the item.\n   * If not specified, the element's text content is used.\n   */\n  @property({ type: String })\n  public get value() {\n    return this._value ? this._value : this.textContent ?? '';\n  }\n\n  public set value(value: string) {\n    const oldVal = this._value;\n    this._value = value;\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n    this.active = this.selected;\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this.disabled\n      ? this.setAttribute('aria-disabled', 'true')\n      : this.removeAttribute('aria-disabled');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\"><slot name=\"prefix\"></slot></section>\n      <section part=\"content\"><slot></slot></section>\n      <section part=\"suffix\"><slot name=\"suffix\"></slot></section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
+import { IgcToggleController } from '../toggle/toggle.controller.js';
 import type { IgcPlacement, IgcToggleComponent, IgcToggleEventMap } from '../toggle/types';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
@@ -25,12 +26,13 @@ declare const IgcDropdownComponent_base: Constructor<import("../common/mixins/si
  * @csspart list - The dropdown list.
  */
 export default class IgcDropdownComponent extends IgcDropdownComponent_base implements IgcToggleComponent {
-    static readonly tagName = "igc-dropdown";
+    /** @private */
+    static readonly tagName: string;
     static styles: import("lit").CSSResult;
-    private toggleController;
-    private selectedItem;
-    private activeItem;
-    private target;
+    protected toggleController: IgcToggleController;
+    protected selectedItem: IgcDropdownItemComponent | null;
+    protected activeItem: IgcDropdownItemComponent;
+    protected target: HTMLElement;
     private readonly keyDownHandlers;
     protected get allItems(): IgcDropdownItemComponent[];
     private targetNodes;
@@ -89,11 +91,11 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
     protected navigate(direction: -1 | 1, currentIndex?: number): void;
     private navigateItem;
     private scrollToHiddenItem;
-    private getNearestSiblingFocusableItemIndex;
+    protected getNearestSiblingFocusableItemIndex(startIndex: number, direction: -1 | 1): number;
     private navigateNext;
     private navigatePrev;
-    private onArrowDownKeyDown;
-    private onArrowUpKeyDown;
+    protected onArrowDownKeyDown(): void;
+    protected onArrowUpKeyDown(): void;
     private _hide;
     /** Shows the dropdown. */
     show(target?: HTMLElement): void;

package/components/dropdown/dropdown.js

@@ -5,19 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
+import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { SizableMixin } from '../common/mixins/sizable.js';
+import { IgcToggleController } from '../toggle/toggle.controller.js';
 import { styles } from './themes/light/dropdown.base.css.js';
 import { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js';
 import { styles as fluent } from './themes/light/dropdown.fluent.css.js';
 import { styles as indigo } from './themes/light/dropdown.indigo.css.js';
-import { IgcToggleController } from '../toggle/toggle.controller.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { SizableMixin } from '../common/mixins/sizable.js';
-import { themes } from '../../theming/theming-decorator.js';
-import { watch } from '../common/decorators/watch.js';
-import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
-import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownHeaderComponent from './dropdown-header.js';
@@ -31,6 +31,8 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
             Enter: this.onEnterKey,
             ArrowUp: this.onArrowUpKeyDown,
             ArrowDown: this.onArrowDownKeyDown,
+            ArrowLeft: this.onArrowUpKeyDown,
+            ArrowRight: this.onArrowDownKeyDown,
             Home: this.onHomeKey,
             End: this.onEndKey,
         }));
@@ -252,10 +254,10 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
         this.navigatePrev();
     }
     async _hide(emit = true) {
-        if (emit && !this.handleClosing())
-            return;
         if (!this.open)
             return;
+        if (emit && !this.handleClosing())
+            return;
         this.open = false;
         if (emit) {
             await this.updateComplete;
@@ -315,6 +317,9 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
 };
 IgcDropdownComponent.tagName = 'igc-dropdown';
 IgcDropdownComponent.styles = styles;
+__decorate([
+    state()
+], IgcDropdownComponent.prototype, "activeItem", void 0);
 __decorate([
     queryAssignedElements({ slot: 'target' })
 ], IgcDropdownComponent.prototype, "targetNodes", void 0);