igniteui-webcomponents 4.3.0-alpha.0 → 4.3.0

package/components/snackbar/snackbar.js

@@ -5,7 +5,7 @@ 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 } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -15,6 +15,7 @@ import { styles as fluent } from './themes/light/snackbar.fluent.css.js';
 import { styles as indigo } from './themes/light/snackbar.indigo.css.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import IgcButtonComponent from '../button/button.js';
+import { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';
 defineComponents(IgcButtonComponent);
 let IgcSnackbarComponent = class IgcSnackbarComponent extends EventEmitterMixin(LitElement) {
     constructor() {
@@ -23,20 +24,33 @@ let IgcSnackbarComponent = class IgcSnackbarComponent extends EventEmitterMixin(
         this.displayTime = 4000;
         this.keepOpen = false;
     }
+    firstUpdated() {
+        this.animationPlayer = new AnimationPlayer(this.content);
+    }
+    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';
+    }
     show() {
         if (this.open) {
             return;
         }
+        this.toggleAnimation('open');
         this.open = true;
         clearTimeout(this.autoHideTimeout);
         if (this.open && !this.keepOpen) {
             this.autoHideTimeout = window.setTimeout(() => this.hide(), this.displayTime);
         }
     }
-    hide() {
+    async hide() {
         if (!this.open) {
             return;
         }
+        await this.toggleAnimation('close');
         this.open = false;
         clearTimeout(this.autoHideTimeout);
     }
@@ -70,6 +84,9 @@ let IgcSnackbarComponent = class IgcSnackbarComponent extends EventEmitterMixin(
 };
 IgcSnackbarComponent.tagName = 'igc-snackbar';
 IgcSnackbarComponent.styles = styles;
+__decorate([
+    query('[part~="base"]', true)
+], IgcSnackbarComponent.prototype, "content", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcSnackbarComponent.prototype, "open", void 0);

package/components/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-snackbar';\n\n  /** @private */\n  public static styles = styles;\n\n  private autoHideTimeout!: number;\n\n  /**\n   * Determines whether the snackbar is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the duration in ms in which the snackbar will be visible.\n   * @attr display-time\n   */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the snackbar should close after the displayTime is over.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /**\n   * The snackbar action button.\n   * @attr action-text\n   */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE7E,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAqBrC,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,iBAAiB,CAGjE,UAAU,CAAC;IAHb;;QAqBS,SAAI,GAAG,KAAK,CAAC;QAOb,gBAAW,GAAG,IAAI,CAAC;QAOnB,aAAQ,GAAG,KAAK,CAAC;IAmF1B,CAAC;IA1EoB,YAAY;QAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3D,CAAC;IAEO,KAAK,CAAC,eAAe,CAAC,GAAqB;QACjD,MAAM,SAAS,GAAG,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEpD,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;SACrC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAGM,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EACjB,IAAI,CAAC,WAAW,CACjB,CAAC;SACH;IACH,CAAC;IAGM,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IAGM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;UAKL,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,WAAW;;kBAEvB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;aAE/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAhHa,4BAAO,GAAG,cAAc,AAAjB,CAAkB;AAGzB,2BAAM,GAAG,MAAM,AAAT,CAAU;AAMpB;IADT,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;qDACE;AAOzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACvB;AAOb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;yDAC5B;AAOnB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;sDAC5B;AAOjB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDACZ;AA1CR,oBAAoB;IADxC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,oBAAoB,CAsHxC;eAtHoB,oBAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-snackbar';\n\n  /** @private */\n  public static styles = styles;\n\n  private autoHideTimeout!: number;\n  private animationPlayer!: AnimationPlayer;\n\n  @query('[part~=\"base\"]', true)\n  protected content!: HTMLElement;\n\n  /**\n   * Determines whether the snackbar is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the duration in ms in which the snackbar will be visible.\n   * @attr display-time\n   */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the snackbar should close after the displayTime is over.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /**\n   * The snackbar action button.\n   * @attr action-text\n   */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this.content);\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  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggleAnimation('open');\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    await this.toggleAnimation('close');\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}

package/components/stepper/step.d.ts

@@ -79,6 +79,7 @@ export default class IgcStepComponent extends LitElement {
     protected completeChange(): void;
     private handleClick;
     private handleKeydown;
+    /** @hidden @internal */
     get isAccessible(): boolean;
     private get headerContainerParts();
     private get textParts();

package/components/stepper/step.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { partNameMap } from '../common/util.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/step/light/step.base.css.js';\nimport { styles as bootstrap } from './themes/step/light/step.bootstrap.css.js';\nimport { styles as indigo } from './themes/step/light/step.indigo.css.js';\nimport { styles as fluent } from './themes/step/light/step.fluent.css.js';\nimport { styles as material } from './themes/step/light/step.material.css.js';\n\n/**\n * The step component is used within the `igc-stepper` element and it holds the content of each step.\n * It also supports custom indicators, title and subtitle.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The steps `content`.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcStepComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-step';\n  /** @private */\n  public static override styles = styles;\n\n  @queryAssignedElements({ slot: 'title' })\n  private _titleChildren!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'subtitle' })\n  private _subTitleChildren!: Array<HTMLElement>;\n\n  /* blazorSuppress */\n  @query('[part~=\"header\"]')\n  public header!: HTMLElement;\n\n  /* blazorSuppress */\n  @query('[part~=\"body\"]')\n  public contentBody!: HTMLElement;\n\n  /** Gets/sets whether the step is invalid. */\n  @property({ reflect: true, type: Boolean })\n  public invalid = false;\n\n  /** Gets/sets whether the step is activе. */\n  @property({ reflect: true, type: Boolean })\n  public active = false;\n\n  /**\n   * Gets/sets whether the step is optional.\n   *\n   * @remarks\n   * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n   * if optional step is invalid the user could still move to the next step.\n   */\n  @property({ type: Boolean })\n  public optional = false;\n\n  /** Gets/sets whether the step is interactable. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** Gets/sets whether the step is completed.\n   *\n   * @remarks\n   * When set to `true` the following separator is styled `solid`.\n   */\n  @property({ reflect: true, type: Boolean })\n  public complete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public previousComplete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public stepType: 'indicator' | 'title' | 'full' = 'full';\n\n  /** @private */\n  @property({ attribute: false })\n  public titlePosition?: 'bottom' | 'top' | 'end' | 'start';\n\n  /** @private */\n  @property({ attribute: false })\n  public orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** @private */\n  @property({ attribute: false })\n  public index = -1;\n\n  /** @private */\n  @property({ attribute: false })\n  public contentTop = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public linearDisabled = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public visited = false;\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChange() {\n    if (this.active) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: false })\n      );\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  @watch('invalid', { waitUntilFirstUpdate: true })\n  @watch('optional', { waitUntilFirstUpdate: true })\n  protected disabledInvalidOptionalChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepDisabledInvalidChanged', { bubbles: true })\n    );\n  }\n\n  @watch('complete', { waitUntilFirstUpdate: true })\n  protected completeChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepCompleteChanged', { bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.isAccessible) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: true })\n      );\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('stepHeaderKeydown', {\n        bubbles: true,\n        detail: { event, focusedStep: this },\n      })\n    );\n  }\n\n  public get isAccessible(): boolean {\n    return !this.disabled && !this.linearDisabled;\n  }\n\n  private get headerContainerParts() {\n    return {\n      'header-container': true,\n      disabled: !this.isAccessible,\n      'complete-start': this.complete,\n      'complete-end': this.previousComplete,\n      optional: this.optional,\n      invalid:\n        this.invalid && this.visited && !this.active && this.isAccessible,\n      top: this.titlePosition === 'top',\n      bottom:\n        this.titlePosition === 'bottom' ||\n        (this.orientation === 'horizontal' && !this.titlePosition),\n      start: this.titlePosition === 'start',\n      end:\n        this.titlePosition === 'end' ||\n        (this.orientation === 'vertical' && !this.titlePosition),\n    };\n  }\n\n  private get textParts() {\n    return {\n      text: true,\n      empty:\n        this.stepType === 'indicator'\n          ? true\n          : this.stepType === 'full' &&\n            !this._titleChildren.length &&\n            !this._subTitleChildren.length,\n    };\n  }\n\n  protected renderIndicator() {\n    if (this.stepType !== 'title') {\n      return html`\n        <div part=\"indicator\">\n          <slot name=\"indicator\">\n            <span>${this.index + 1}</span>\n          </slot>\n        </div>\n      `;\n    } else {\n      return nothing;\n    }\n  }\n\n  protected renderTitleAndSubtitle() {\n    return html`\n      <div part=\"${partNameMap(this.textParts)}\">\n        <div part=\"title\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div part=\"subtitle\">\n          <slot name=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderContent() {\n    return html`<div\n      id=\"igc-step-content-${this.index}\"\n      part=\"body\"\n      role=\"tabpanel\"\n      aria-labelledby=\"igc-step-header-${this.index}\"\n    >\n      <div part=\"content\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      ${when(\n        this.contentTop && this.orientation === 'horizontal',\n        () => this.renderContent(),\n        () => nothing\n      )}\n      <div part=\"${partNameMap(this.headerContainerParts)}\">\n        <div\n          part=\"header\"\n          tabindex=\"${this.active ? '0' : '-1'}\"\n          role=\"tab\"\n          aria-selected=\"${this.active}\"\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n        >\n          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}\n        </div>\n      </div>\n      ${when(\n        this.orientation === 'vertical' || !this.contentTop,\n        () => this.renderContent(),\n        () => nothing\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-step': IgcStepComponent;\n  }\n}\n"]}
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { partNameMap } from '../common/util.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/step/light/step.base.css.js';\nimport { styles as bootstrap } from './themes/step/light/step.bootstrap.css.js';\nimport { styles as indigo } from './themes/step/light/step.indigo.css.js';\nimport { styles as fluent } from './themes/step/light/step.fluent.css.js';\nimport { styles as material } from './themes/step/light/step.material.css.js';\n\n/**\n * The step component is used within the `igc-stepper` element and it holds the content of each step.\n * It also supports custom indicators, title and subtitle.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The steps `content`.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcStepComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-step';\n  /** @private */\n  public static override styles = styles;\n\n  @queryAssignedElements({ slot: 'title' })\n  private _titleChildren!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'subtitle' })\n  private _subTitleChildren!: Array<HTMLElement>;\n\n  /* blazorSuppress */\n  @query('[part~=\"header\"]')\n  public header!: HTMLElement;\n\n  /* blazorSuppress */\n  @query('[part~=\"body\"]')\n  public contentBody!: HTMLElement;\n\n  /** Gets/sets whether the step is invalid. */\n  @property({ reflect: true, type: Boolean })\n  public invalid = false;\n\n  /** Gets/sets whether the step is activе. */\n  @property({ reflect: true, type: Boolean })\n  public active = false;\n\n  /**\n   * Gets/sets whether the step is optional.\n   *\n   * @remarks\n   * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n   * if optional step is invalid the user could still move to the next step.\n   */\n  @property({ type: Boolean })\n  public optional = false;\n\n  /** Gets/sets whether the step is interactable. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** Gets/sets whether the step is completed.\n   *\n   * @remarks\n   * When set to `true` the following separator is styled `solid`.\n   */\n  @property({ reflect: true, type: Boolean })\n  public complete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public previousComplete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public stepType: 'indicator' | 'title' | 'full' = 'full';\n\n  /** @private */\n  @property({ attribute: false })\n  public titlePosition?: 'bottom' | 'top' | 'end' | 'start';\n\n  /** @private */\n  @property({ attribute: false })\n  public orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** @private */\n  @property({ attribute: false })\n  public index = -1;\n\n  /** @private */\n  @property({ attribute: false })\n  public contentTop = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public linearDisabled = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public visited = false;\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChange() {\n    if (this.active) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: false })\n      );\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  @watch('invalid', { waitUntilFirstUpdate: true })\n  @watch('optional', { waitUntilFirstUpdate: true })\n  protected disabledInvalidOptionalChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepDisabledInvalidChanged', { bubbles: true })\n    );\n  }\n\n  @watch('complete', { waitUntilFirstUpdate: true })\n  protected completeChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepCompleteChanged', { bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.isAccessible) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: true })\n      );\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('stepHeaderKeydown', {\n        bubbles: true,\n        detail: { event, focusedStep: this },\n      })\n    );\n  }\n\n  /** @hidden @internal */\n  public get isAccessible(): boolean {\n    return !this.disabled && !this.linearDisabled;\n  }\n\n  private get headerContainerParts() {\n    return {\n      'header-container': true,\n      disabled: !this.isAccessible,\n      'complete-start': this.complete,\n      'complete-end': this.previousComplete,\n      optional: this.optional,\n      invalid:\n        this.invalid && this.visited && !this.active && this.isAccessible,\n      top: this.titlePosition === 'top',\n      bottom:\n        this.titlePosition === 'bottom' ||\n        (this.orientation === 'horizontal' && !this.titlePosition),\n      start: this.titlePosition === 'start',\n      end:\n        this.titlePosition === 'end' ||\n        (this.orientation === 'vertical' && !this.titlePosition),\n    };\n  }\n\n  private get textParts() {\n    return {\n      text: true,\n      empty:\n        this.stepType === 'indicator'\n          ? true\n          : this.stepType === 'full' &&\n            !this._titleChildren.length &&\n            !this._subTitleChildren.length,\n    };\n  }\n\n  protected renderIndicator() {\n    if (this.stepType !== 'title') {\n      return html`\n        <div part=\"indicator\">\n          <slot name=\"indicator\">\n            <span>${this.index + 1}</span>\n          </slot>\n        </div>\n      `;\n    } else {\n      return nothing;\n    }\n  }\n\n  protected renderTitleAndSubtitle() {\n    return html`\n      <div part=\"${partNameMap(this.textParts)}\">\n        <div part=\"title\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div part=\"subtitle\">\n          <slot name=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderContent() {\n    return html`<div\n      id=\"igc-step-content-${this.index}\"\n      part=\"body\"\n      role=\"tabpanel\"\n      aria-labelledby=\"igc-step-header-${this.index}\"\n    >\n      <div part=\"content\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      ${when(\n        this.contentTop && this.orientation === 'horizontal',\n        () => this.renderContent(),\n        () => nothing\n      )}\n      <div part=\"${partNameMap(this.headerContainerParts)}\">\n        <div\n          part=\"header\"\n          tabindex=\"${this.active ? '0' : '-1'}\"\n          role=\"tab\"\n          aria-selected=\"${this.active}\"\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n        >\n          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}\n        </div>\n      </div>\n      ${when(\n        this.orientation === 'vertical' || !this.contentTop,\n        () => this.renderContent(),\n        () => nothing\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-step': IgcStepComponent;\n  }\n}\n"]}

package/components/toast/toast.d.ts

@@ -10,6 +10,7 @@ export default class IgcToastComponent extends LitElement {
     static readonly tagName = "igc-toast";
     static styles: import("lit").CSSResult[];
     private displayTimeout;
+    private animationPlayer;
     /**
      * Determines whether the toast is opened.
      * @attr
@@ -25,8 +26,10 @@ export default class IgcToastComponent extends LitElement {
      * @attr keep-open
      */
     keepOpen: boolean;
+    protected firstUpdated(): void;
+    private toggleAnimation;
     /** Closes the toast. */
-    hide(): void;
+    hide(): Promise<void>;
     /** Opens the toast. */
     show(): void;
     /** Toggles the open state of the toast. */

package/components/toast/toast.js

@@ -11,6 +11,7 @@ import { styles } from './themes/toast.base.css.js';
 import { styles as bootstrap } from './themes/toast.bootstrap.css.js';
 import { styles as fluent } from './themes/toast.fluent.css.js';
 import { styles as indigo } from './themes/toast.indigo.css.js';
+import { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';
 let IgcToastComponent = class IgcToastComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,18 +19,32 @@ let IgcToastComponent = class IgcToastComponent extends LitElement {
         this.displayTime = 4000;
         this.keepOpen = false;
     }
-    hide() {
+    firstUpdated() {
+        this.animationPlayer = new AnimationPlayer(this);
+    }
+    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';
+    }
+    async hide() {
         if (this.open) {
+            await this.toggleAnimation('close');
             this.open = false;
         }
     }
     show() {
         window.clearTimeout(this.displayTimeout);
         if (!this.open) {
+            this.toggleAnimation('open');
             this.open = true;
         }
         if (this.keepOpen === false) {
-            this.displayTimeout = setTimeout(() => {
+            this.displayTimeout = setTimeout(async () => {
+                await this.toggleAnimation('close');
                 this.open = false;
             }, this.displayTime);
         }

package/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.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,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAWhE,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAAzD;;QAWS,SAAI,GAAG,KAAK,CAAC;QAOb,gBAAW,GAAG,IAAI,CAAC;QAOnB,aAAQ,GAAG,KAAK,CAAC;IA8C1B,CAAC;IA3CQ,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;IACH,CAAC;IAGM,IAAI;QACT,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;YAC3B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;gBACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SACtB;IACH,CAAC;IAGM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE;YACnC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;SAC1C;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AArEsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AASlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACvB;AAOb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;sDAC5C;AAOnB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAC3C;AAzBL,iBAAiB;IADrC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,iBAAiB,CAuErC;eAvEoB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/toast.base.css.js';\nimport { styles as bootstrap } from './themes/toast.bootstrap.css.js';\nimport { styles as fluent } from './themes/toast.fluent.css.js';\nimport { styles as indigo } from './themes/toast.indigo.css.js';\n\n/**\n * A toast component is used to show a notification\n *\n * @element igc-toast\n *\n * @csspart base - The base wrapper of the toast.\n */\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcToastComponent extends LitElement {\n  public static readonly tagName = 'igc-toast';\n  public static override styles = [styles];\n\n  private displayTimeout!: ReturnType<typeof setTimeout>;\n\n  /**\n   * Determines whether the toast is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the time after which the toast will close\n   * @attr display-time\n   */\n  @property({ type: Number, reflect: false, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the toast is closed automatically or not.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /** Closes the toast. */\n  public hide() {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  /** Opens the toast. */\n  public show() {\n    window.clearTimeout(this.displayTimeout);\n\n    if (!this.open) {\n      this.open = true;\n    }\n\n    if (this.keepOpen === false) {\n      this.displayTimeout = setTimeout(() => {\n        this.open = false;\n      }, this.displayTime);\n    }\n  }\n\n  /** Toggles the open state of the toast. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    if (!this.hasAttribute('aria-live')) {\n      this.setAttribute('aria-live', 'polite');\n    }\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toast': IgcToastComponent;\n  }\n}\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/toast.base.css.js';\nimport { styles as bootstrap } from './themes/toast.bootstrap.css.js';\nimport { styles as fluent } from './themes/toast.fluent.css.js';\nimport { styles as indigo } from './themes/toast.indigo.css.js';\nimport { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';\n\n/**\n * A toast component is used to show a notification\n *\n * @element igc-toast\n *\n * @csspart base - The base wrapper of the toast.\n */\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcToastComponent extends LitElement {\n  public static readonly tagName = 'igc-toast';\n  public static override styles = [styles];\n\n  private displayTimeout!: ReturnType<typeof setTimeout>;\n  private animationPlayer!: AnimationPlayer;\n\n  /**\n   * Determines whether the toast is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the time after which the toast will close\n   * @attr display-time\n   */\n  @property({ type: Number, reflect: false, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the toast is closed automatically or not.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this);\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  /** Closes the toast. */\n  public async hide() {\n    if (this.open) {\n      await this.toggleAnimation('close');\n      this.open = false;\n    }\n  }\n\n  /** Opens the toast. */\n  public show() {\n    window.clearTimeout(this.displayTimeout);\n\n    if (!this.open) {\n      this.toggleAnimation('open');\n      this.open = true;\n    }\n\n    if (this.keepOpen === false) {\n      this.displayTimeout = setTimeout(async () => {\n        await this.toggleAnimation('close');\n        this.open = false;\n      }, this.displayTime);\n    }\n  }\n\n  /** Toggles the open state of the toast. */\n  public toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    if (!this.hasAttribute('aria-live')) {\n      this.setAttribute('aria-live', 'polite');\n    }\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toast': IgcToastComponent;\n  }\n}\n"]}

package/components/toggle/toggle.directive.d.ts

@@ -3,10 +3,16 @@ import type { IgcToggleOptions } from './types.js';
 import type { IgcToggleController } from './toggle.controller.js';
 export declare class IgcToggleDirective extends Directive {
     private part;
-    private shiftOptions?;
-    private floatingElement;
+    private _floatingElement;
+    private _dispose;
+    private target;
+    private options;
+    private controller?;
+    private get floatingElement();
+    private dispose;
+    private notifyController;
     private updatePosition;
-    private createFloatingElement;
+    private reposition;
     private createMiddleware;
     constructor(partInfo: PartInfo);
     render(target: HTMLElement, options: IgcToggleOptions, controller?: IgcToggleController): symbol;

package/components/toggle/toggle.directive.js

@@ -1,41 +1,37 @@
-import { computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+import { computePosition, flip, offset, shift, size, autoUpdate, } from '@floating-ui/dom';
 import { directive, Directive, PartType, } from 'lit/directive.js';
 import { noChange } from 'lit';
 export class IgcToggleDirective extends Directive {
-    updatePosition(target, options, controller) {
-        var _a, _b;
-        this.floatingElement = this.createFloatingElement(options.open);
-        if (!target) {
-            if (controller) {
-                controller.rendered = Promise.resolve();
-            }
-            return noChange;
+    get floatingElement() {
+        if (!this._floatingElement) {
+            this._floatingElement = this.part.element;
         }
-        const promise = computePosition(target, this.floatingElement, {
-            placement: (_a = options.placement) !== null && _a !== void 0 ? _a : 'bottom-start',
-            strategy: (_b = options.positionStrategy) !== null && _b !== void 0 ? _b : 'absolute',
-            middleware: this.createMiddleware(options),
-        }).then(({ x, y }) => {
-            Object.assign(this.floatingElement.style, {
-                left: 0,
-                top: 0,
-                transform: `translate(${x}px,${y}px)`,
-            });
+        Object.assign(this._floatingElement.style, {
+            display: this.options.open ? '' : 'none',
         });
-        if (controller) {
-            controller.rendered = promise;
+        return this._floatingElement;
+    }
+    dispose() {
+        if (this._dispose) {
+            this._dispose();
+        }
+    }
+    notifyController(promise) {
+        if (this.controller) {
+            this.controller.rendered = promise;
         }
-        return noChange;
     }
-    createFloatingElement(open = false) {
-        if (!this.floatingElement) {
-            this.floatingElement = this.part.element;
+    updatePosition() {
+        this.dispose();
+        if (!this.floatingElement || !this.target || !this.options.open) {
+            return noChange;
         }
-        this.floatingElement.style.display = open ? '' : 'none';
-        return this.floatingElement;
+        this._dispose = autoUpdate(this.target, this.floatingElement, this.reposition);
+        return noChange;
     }
     createMiddleware(options) {
         const middleware = [];
+        const { style: floatingStyles } = this._floatingElement;
         if (options.distance) {
             middleware.push(offset({
                 mainAxis: options.distance,
@@ -44,27 +40,46 @@ export class IgcToggleDirective extends Directive {
         if (options.flip) {
             middleware.push(flip());
         }
-        if (this.shiftOptions) {
-            middleware.push(shift(this.shiftOptions));
-        }
-        Object.assign(this.floatingElement.style, { width: '' });
+        middleware.push(shift({
+            mainAxis: true,
+        }));
         if (options.sameWidth) {
-            const floatingElement = this.floatingElement;
             middleware.push(size({
-                apply: (args) => {
-                    const { rects } = args;
-                    Object.assign(floatingElement.style, {
+                apply: ({ rects }) => {
+                    Object.assign(floatingStyles, {
                         width: `${rects.reference.width}px`,
                     });
                 },
             }));
         }
+        else {
+            Object.assign(floatingStyles, { width: '' });
+        }
         return middleware;
     }
     constructor(partInfo) {
         super(partInfo);
-        this.shiftOptions = {
-            mainAxis: true,
+        this.reposition = () => {
+            var _a, _b;
+            if (!this.target) {
+                this.dispose();
+                this.notifyController(Promise.resolve());
+                return noChange;
+            }
+            const config = {
+                placement: (_a = this.options.placement) !== null && _a !== void 0 ? _a : 'bottom-start',
+                strategy: (_b = this.options.positionStrategy) !== null && _b !== void 0 ? _b : 'absolute',
+                middleware: this.createMiddleware(this.options),
+            };
+            const promise = computePosition(this.target, this.floatingElement, config).then(({ x, y }) => {
+                Object.assign(this.floatingElement.style, {
+                    left: 0,
+                    top: 0,
+                    transform: `translate(${x}px,${y}px)`,
+                });
+            });
+            this.notifyController(promise);
+            return noChange;
         };
         this.part = partInfo;
         if (partInfo.type !== PartType.ELEMENT) {
@@ -72,7 +87,8 @@ export class IgcToggleDirective extends Directive {
         }
     }
     render(target, options, controller) {
-        return this.updatePosition(target, options, controller);
+        Object.assign(this, { target, options, controller });
+        return this.updatePosition();
     }
 }
 export const igcToggle = directive(IgcToggleDirective);

package/components/toggle/toggle.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.directive.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  Middleware,\n} from '@floating-ui/dom';\nimport {\n  directive,\n  Directive,\n  PartInfo,\n  ElementPart,\n  PartType,\n} from 'lit/directive.js';\nimport { noChange } from 'lit';\nimport type { IgcToggleOptions } from './types.js';\nimport type { IgcToggleController } from './toggle.controller.js';\n\n/* blazorSuppressComponent */\nexport class IgcToggleDirective extends Directive {\n  private part: PartInfo;\n  private shiftOptions? = {\n    mainAxis: true,\n  };\n\n  private floatingElement!: HTMLElement;\n\n  private updatePosition(\n    target: HTMLElement,\n    options: IgcToggleOptions,\n    controller?: IgcToggleController\n  ) {\n    this.floatingElement = this.createFloatingElement(options.open);\n\n    if (!target) {\n      if (controller) {\n        controller.rendered = Promise.resolve();\n      }\n      return noChange;\n    }\n\n    const promise = computePosition(target, this.floatingElement, {\n      placement: options.placement ?? 'bottom-start',\n      strategy: options.positionStrategy ?? 'absolute',\n      middleware: this.createMiddleware(options),\n    }).then(({ x, y }) => {\n      Object.assign(this.floatingElement.style, {\n        left: 0,\n        top: 0,\n        transform: `translate(${x}px,${y}px)`,\n      });\n    });\n\n    if (controller) {\n      controller.rendered = promise;\n    }\n\n    return noChange;\n  }\n\n  private createFloatingElement(open = false) {\n    if (!this.floatingElement) {\n      this.floatingElement = (this.part as ElementPart).element as HTMLElement;\n    }\n\n    this.floatingElement.style.display = open ? '' : 'none';\n\n    return this.floatingElement;\n  }\n\n  private createMiddleware(options: IgcToggleOptions) {\n    const middleware: Middleware[] = [];\n\n    if (options.distance) {\n      middleware.push(\n        offset({\n          mainAxis: options.distance,\n        })\n      );\n    }\n\n    if (options.flip) {\n      middleware.push(flip());\n    }\n\n    if (this.shiftOptions) {\n      middleware.push(shift(this.shiftOptions));\n    }\n\n    // Toggling `sameWidth` does not reset the applied style on the floater element\n    Object.assign(this.floatingElement.style, { width: '' });\n\n    if (options.sameWidth) {\n      const floatingElement = this.floatingElement;\n      middleware.push(\n        size({\n          apply: (args) => {\n            const { rects } = args;\n            Object.assign(floatingElement.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        })\n      );\n    }\n\n    return middleware;\n  }\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    this.part = partInfo;\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        'The `igcToggle` directive must be attached to an element tag.'\n      );\n    }\n  }\n\n  public render(\n    target: HTMLElement,\n    options: IgcToggleOptions,\n    controller?: IgcToggleController\n  ) {\n    return this.updatePosition(target, options, controller);\n  }\n}\n\nexport const igcToggle = directive(IgcToggleDirective);\n"]}
+{"version":3,"file":"toggle.directive.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  Middleware,\n  autoUpdate,\n  ComputePositionConfig,\n} from '@floating-ui/dom';\nimport {\n  directive,\n  Directive,\n  PartInfo,\n  ElementPart,\n  PartType,\n} from 'lit/directive.js';\nimport { noChange } from 'lit';\nimport type { IgcToggleOptions } from './types.js';\nimport type { IgcToggleController } from './toggle.controller.js';\n\n/* blazorSuppressComponent */\nexport class IgcToggleDirective extends Directive {\n  private part: PartInfo;\n\n  private _floatingElement!: HTMLElement;\n  private _dispose!: Function;\n\n  private target!: HTMLElement;\n  private options!: IgcToggleOptions;\n  private controller?: IgcToggleController;\n\n  private get floatingElement() {\n    if (!this._floatingElement) {\n      this._floatingElement = (this.part as ElementPart).element as HTMLElement;\n    }\n\n    Object.assign(this._floatingElement.style, {\n      display: this.options.open ? '' : 'none',\n    });\n\n    return this._floatingElement;\n  }\n\n  private dispose() {\n    if (this._dispose) {\n      this._dispose();\n    }\n  }\n\n  private notifyController(promise: Promise<void>) {\n    if (this.controller) {\n      this.controller.rendered = promise;\n    }\n  }\n\n  private updatePosition() {\n    this.dispose();\n\n    if (!this.floatingElement || !this.target || !this.options.open) {\n      return noChange;\n    }\n\n    this._dispose = autoUpdate(\n      this.target,\n      this.floatingElement,\n      this.reposition\n    );\n\n    return noChange;\n  }\n\n  private reposition = () => {\n    if (!this.target) {\n      this.dispose();\n      this.notifyController(Promise.resolve());\n      return noChange;\n    }\n\n    const config: Partial<ComputePositionConfig> = {\n      placement: this.options.placement ?? 'bottom-start',\n      strategy: this.options.positionStrategy ?? 'absolute',\n      middleware: this.createMiddleware(this.options),\n    };\n\n    const promise = computePosition(\n      this.target,\n      this.floatingElement,\n      config\n    ).then(({ x, y }) => {\n      Object.assign(this.floatingElement.style, {\n        left: 0,\n        top: 0,\n        transform: `translate(${x}px,${y}px)`,\n      });\n    });\n\n    this.notifyController(promise);\n    return noChange;\n  };\n\n  private createMiddleware(options: IgcToggleOptions) {\n    const middleware: Middleware[] = [];\n    const { style: floatingStyles } = this._floatingElement;\n\n    if (options.distance) {\n      middleware.push(\n        offset({\n          mainAxis: options.distance,\n        })\n      );\n    }\n\n    if (options.flip) {\n      middleware.push(flip());\n    }\n\n    middleware.push(\n      shift({\n        mainAxis: true,\n      })\n    );\n\n    if (options.sameWidth) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            Object.assign(floatingStyles, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        })\n      );\n    } else {\n      // Reset previously applied `same-width` styles\n      Object.assign(floatingStyles, { width: '' });\n    }\n\n    return middleware;\n  }\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    this.part = partInfo;\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        'The `igcToggle` directive must be attached to an element tag.'\n      );\n    }\n  }\n\n  public render(\n    target: HTMLElement,\n    options: IgcToggleOptions,\n    controller?: IgcToggleController\n  ) {\n    Object.assign(this, { target, options, controller });\n    return this.updatePosition();\n  }\n}\n\nexport const igcToggle = directive(IgcToggleDirective);\n"]}

package/custom-elements.json

@@ -2010,7 +2010,7 @@
         {
           "name": "value",
           "description": "Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.",
-          "type": "string[]"
+          "type": "ComboValue<T>[]"
         }
       ],
       "properties": [
@@ -2182,23 +2182,11 @@
           "type": "ComboItemTemplate<T>",
           "default": "\"({ item }) => {\\n    return html`${this.groupKey && item[this.groupKey]}`;\\n  }\""
         },
-        {
-          "name": "positionStrategy",
-          "description": "Sets the component's positioning strategy.",
-          "type": "\"absolute\" | \"fixed\"",
-          "default": "\"fixed\""
-        },
-        {
-          "name": "sameWidth",
-          "description": "Whether the dropdown's width should be the same as the target's one.",
-          "type": "boolean",
-          "default": "true"
-        },
         {
           "name": "value",
           "attribute": "value",
           "description": "Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.",
-          "type": "string[]"
+          "type": "ComboValue<T>[]"
         },
         {
           "name": "selection",
@@ -5381,30 +5369,12 @@
           "type": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"",
           "default": "\"bottom-start\""
         },
-        {
-          "name": "position-strategy",
-          "description": "Sets the component's positioning strategy.",
-          "type": "\"absolute\" | \"fixed\"",
-          "default": "\"absolute\""
-        },
-        {
-          "name": "flip",
-          "description": "Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "distance",
           "description": "The distance from the target element.",
           "type": "number",
           "default": "0"
         },
-        {
-          "name": "same-width",
-          "description": "Whether the dropdown's width should be the same as the target's one.",
-          "type": "boolean",
-          "default": "true"
-        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
@@ -5518,20 +5488,6 @@
           "type": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"",
           "default": "\"bottom-start\""
         },
-        {
-          "name": "positionStrategy",
-          "attribute": "position-strategy",
-          "description": "Sets the component's positioning strategy.",
-          "type": "\"absolute\" | \"fixed\"",
-          "default": "\"absolute\""
-        },
-        {
-          "name": "flip",
-          "attribute": "flip",
-          "description": "Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\nWhen true, once enough space is detected on its preferred side, it will flip back.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "distance",
           "attribute": "distance",
@@ -5539,13 +5495,6 @@
           "type": "number",
           "default": "0"
         },
-        {
-          "name": "sameWidth",
-          "attribute": "same-width",
-          "description": "Whether the dropdown's width should be the same as the target's one.",
-          "type": "boolean",
-          "default": "true"
-        },
         {
           "name": "size",
           "attribute": "size",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "4.3.0-alpha.0",
+  "version": "4.3.0",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -34,6 +34,7 @@
     "chip",
     "combo",
     "date input",
+    "dialog",
     "dropdown",
     "expansion panel",
     "form",
@@ -50,6 +51,7 @@
     "radio",
     "rating",
     "snackbar",
+    "stepper",
     "switch",
     "slider",
     "tabs",
@@ -57,8 +59,8 @@
     "tree"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.2.7",
-    "@lit-labs/virtualizer": "^2.0.1",
-    "lit": "^2.7.4"
+    "@floating-ui/dom": "^1.4.1",
+    "@lit-labs/virtualizer": "^2.0.3",
+    "lit": "^2.7.5"
   }
 }