igniteui-webcomponents 5.3.0 → 5.4.0

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,154 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type PopoverPlacement } from '../popover/popover.js';
+export interface IgcTooltipComponentEventMap {
+    igcOpening: CustomEvent<Element | null>;
+    igcOpened: CustomEvent<Element | null>;
+    igcClosing: CustomEvent<Element | null>;
+    igcClosed: CustomEvent<Element | null>;
+}
+declare const IgcTooltipComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTooltipComponentEventMap>> & Constructor<LitElement>;
+/**
+ * Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).
+ * It offers features such as placement customization, delays, sticky mode, and animations.
+ *
+ * @element igc-tooltip
+ *
+ * @slot - Default slot of the tooltip component.
+ * @slot close-button - Slot for custom sticky-mode close action (e.g., an icon/button).
+ *
+ * @csspart base - The wrapping container of the tooltip content.
+ *
+ * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.
+ * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.
+ * @fires igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing.
+ * @fires igcClosed - Emitted after the tooltip has been fully removed from view.
+ */
+export default class IgcTooltipComponent extends IgcTooltipComponent_base {
+    static readonly tagName = "igc-tooltip";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private readonly _internals;
+    private readonly _controller;
+    private readonly _containerRef;
+    private readonly _player;
+    private readonly _showAnimation;
+    private readonly _hideAnimation;
+    private _timeoutId?;
+    private _autoHideDelay;
+    private _showDelay;
+    private _hideDelay;
+    private _arrowElement;
+    private get _arrowOffset();
+    /**
+     * Whether the tooltip is showing.
+     *
+     * @attr open
+     * @default false
+     */
+    set open(value: boolean);
+    get open(): boolean;
+    /**
+     * Whether to disable the rendering of the arrow indicator for the tooltip.
+     *
+     * @attr disable-arrow
+     * @default false
+     */
+    disableArrow: boolean;
+    /**
+     * The offset of the tooltip from the anchor in pixels.
+     *
+     * @attr offset
+     * @default 6
+     */
+    offset: number;
+    /**
+     * Where to place the floating element relative to the parent anchor element.
+     *
+     * @attr placement
+     * @default top
+     */
+    placement: PopoverPlacement;
+    /**
+     * An element instance or an IDREF to use as the anchor for the tooltip.
+     *
+     * @attr anchor
+     */
+    anchor?: Element | string;
+    /**
+     * Which event triggers will show the tooltip.
+     * Expects a comma separate string of different event triggers.
+     *
+     * @attr show-triggers
+     * @default pointerenter
+     */
+    set showTriggers(value: string);
+    get showTriggers(): string;
+    /**
+     * Which event triggers will hide the tooltip.
+     * Expects a comma separate string of different event triggers.
+     *
+     * @attr hide-triggers
+     * @default pointerleave, click
+     */
+    set hideTriggers(value: string);
+    get hideTriggers(): string;
+    /**
+     * Specifies the number of milliseconds that should pass before showing the tooltip.
+     *
+     * @attr show-delay
+     * @default 200
+     */
+    set showDelay(value: number);
+    get showDelay(): number;
+    /**
+     * Specifies the number of milliseconds that should pass before hiding the tooltip.
+     *
+     * @attr hide-delay
+     * @default 300
+     */
+    set hideDelay(value: number);
+    get hideDelay(): number;
+    /**
+     * Specifies a plain text as tooltip content.
+     *
+     * @attr message
+     */
+    message: string;
+    /**
+     * Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
+     *
+     * @attr sticky
+     * @default false
+     */
+    sticky: boolean;
+    constructor();
+    protected firstUpdated(): void;
+    protected _onAnchorChange(): void;
+    protected _onStickyChange(): void;
+    private _emitEvent;
+    private _applyTooltipState;
+    /**
+     *  Shows the tooltip if not already showing.
+     *  If a target is provided, sets it as a transient anchor.
+     */
+    show(target?: Element | string): Promise<boolean>;
+    /** Hides the tooltip if not already hidden. */
+    hide(): Promise<boolean>;
+    /** Toggles the tooltip between shown/hidden state */
+    toggle(): Promise<boolean>;
+    protected _showWithEvent(): Promise<boolean>;
+    protected _hideWithEvent(): Promise<boolean>;
+    private _showOnInteraction;
+    private _stopTimeoutAndAnimation;
+    private _setAutoHide;
+    private _hideOnInteraction;
+    private _hideOnEscape;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tooltip': IgcTooltipComponent;
+    }
+}
+export {};

package/components/tooltip/tooltip.js

@@ -0,0 +1,284 @@
+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 IgcTooltipComponent_1;
+import { LitElement, html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { EaseOut } from '../../animations/easings.js';
+import { addAnimationController } from '../../animations/player.js';
+import { fadeOut } from '../../animations/presets/fade/index.js';
+import { scaleInCenter } from '../../animations/presets/scale/index.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { asNumber, isLTR } from '../common/util.js';
+import IgcIconComponent from '../icon/icon.js';
+import IgcPopoverComponent from '../popover/popover.js';
+import { TooltipRegexes, addTooltipController } from './controller.js';
+import { styles as shared } from './themes/shared/tooltip.common.css';
+import { all } from './themes/themes.js';
+import { styles } from './themes/tooltip.base.css.js';
+let IgcTooltipComponent = IgcTooltipComponent_1 = class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcTooltipComponent_1, IgcPopoverComponent, IgcIconComponent);
+    }
+    get _arrowOffset() {
+        if (this.placement.includes('-')) {
+            if (TooltipRegexes.horizontalStart.test(this.placement)) {
+                return -8;
+            }
+            if (TooltipRegexes.horizontalEnd.test(this.placement)) {
+                return 8;
+            }
+            if (TooltipRegexes.start.test(this.placement)) {
+                return isLTR(this) ? -8 : 8;
+            }
+            if (TooltipRegexes.end.test(this.placement)) {
+                return isLTR(this) ? 8 : -8;
+            }
+        }
+        return 0;
+    }
+    set open(value) {
+        this._controller.open = value;
+    }
+    get open() {
+        return this._controller.open;
+    }
+    set showTriggers(value) {
+        this._controller.showTriggers = value;
+    }
+    get showTriggers() {
+        return this._controller.showTriggers;
+    }
+    set hideTriggers(value) {
+        this._controller.hideTriggers = value;
+    }
+    get hideTriggers() {
+        return this._controller.hideTriggers;
+    }
+    set showDelay(value) {
+        this._showDelay = Math.max(0, asNumber(value));
+    }
+    get showDelay() {
+        return this._showDelay;
+    }
+    set hideDelay(value) {
+        this._hideDelay = Math.max(0, asNumber(value));
+    }
+    get hideDelay() {
+        return this._hideDelay;
+    }
+    constructor() {
+        super();
+        this._controller = addTooltipController(this, {
+            onShow: this._showOnInteraction,
+            onHide: this._hideOnInteraction,
+            onEscape: this._hideOnEscape,
+        });
+        this._containerRef = createRef();
+        this._player = addAnimationController(this, this._containerRef);
+        this._showAnimation = scaleInCenter({
+            duration: 150,
+            easing: EaseOut.Quad,
+        });
+        this._hideAnimation = fadeOut({
+            duration: 75,
+            easing: EaseOut.Sine,
+        });
+        this._autoHideDelay = 180;
+        this._showDelay = 200;
+        this._hideDelay = 300;
+        this.disableArrow = false;
+        this.offset = 6;
+        this.placement = 'top';
+        this.message = '';
+        this.sticky = false;
+        this._internals = this.attachInternals();
+        this._internals.role = 'tooltip';
+        this._internals.ariaAtomic = 'true';
+        this._internals.ariaLive = 'polite';
+    }
+    firstUpdated() {
+        if (this.open) {
+            this.updateComplete.then(() => {
+                this._player.playExclusive(this._showAnimation);
+                this.requestUpdate();
+            });
+        }
+    }
+    _onAnchorChange() {
+        this._controller.resolveAnchor(this.anchor);
+    }
+    _onStickyChange() {
+        this._internals.role = this.sticky ? 'status' : 'tooltip';
+    }
+    _emitEvent(name) {
+        return this.emitEvent(name, {
+            cancelable: name === 'igcOpening' || name === 'igcClosing',
+            detail: this._controller.anchor,
+        });
+    }
+    async _applyTooltipState({ show, withDelay = false, withEvents = false, }) {
+        if (show === this.open) {
+            return false;
+        }
+        if (withEvents && !this._emitEvent(show ? 'igcOpening' : 'igcClosing')) {
+            return false;
+        }
+        const commitStateChange = async () => {
+            if (show) {
+                this.open = true;
+            }
+            this.inert = true;
+            const animationComplete = await this._player.playExclusive(show ? this._showAnimation : this._hideAnimation);
+            this.inert = false;
+            this.open = show;
+            if (animationComplete && withEvents) {
+                this._emitEvent(show ? 'igcOpened' : 'igcClosed');
+            }
+            return animationComplete;
+        };
+        if (withDelay) {
+            clearTimeout(this._timeoutId);
+            return new Promise(() => {
+                this._timeoutId = setTimeout(async () => await commitStateChange(), show ? this.showDelay : this.hideDelay);
+            });
+        }
+        return commitStateChange();
+    }
+    async show(target) {
+        if (target) {
+            this._stopTimeoutAndAnimation();
+            this._controller.setAnchor(target, true);
+        }
+        return await this._applyTooltipState({ show: true });
+    }
+    async hide() {
+        return await this._applyTooltipState({ show: false });
+    }
+    async toggle() {
+        return await (this.open ? this.hide() : this.show());
+    }
+    _showWithEvent() {
+        return this._applyTooltipState({
+            show: true,
+            withDelay: true,
+            withEvents: true,
+        });
+    }
+    _hideWithEvent() {
+        return this._applyTooltipState({
+            show: false,
+            withDelay: true,
+            withEvents: true,
+        });
+    }
+    _showOnInteraction() {
+        this._stopTimeoutAndAnimation();
+        this._showWithEvent();
+    }
+    _stopTimeoutAndAnimation() {
+        clearTimeout(this._timeoutId);
+        this._player.stopAll();
+    }
+    _setAutoHide() {
+        this._stopTimeoutAndAnimation();
+        this._timeoutId = setTimeout(this._hideWithEvent.bind(this), this._autoHideDelay);
+    }
+    _hideOnInteraction() {
+        if (!this.sticky) {
+            this._setAutoHide();
+        }
+    }
+    async _hideOnEscape() {
+        await this.hide();
+        this._emitEvent('igcClosed');
+    }
+    render() {
+        return html `
+      <igc-popover
+        .inert=${!this.open}
+        .placement=${this.placement}
+        .offset=${this.offset}
+        .anchor=${this._controller.anchor ?? undefined}
+        .arrow=${this.disableArrow ? null : this._arrowElement}
+        .arrowOffset=${this._arrowOffset}
+        .shiftPadding=${8}
+        ?open=${this.open}
+        flip
+        shift
+      >
+        <div ${ref(this._containerRef)} part="base">
+          <slot>${this.message}</slot>
+          ${this.sticky
+            ? html `
+                <slot name="close-button" @click=${this._setAutoHide}>
+                  <igc-icon
+                    name="input_clear"
+                    collection="default"
+                    aria-hidden="true"
+                  ></igc-icon>
+                </slot>
+              `
+            : nothing}
+          ${this.disableArrow ? nothing : html `<div id="arrow"></div>`}
+        </div>
+      </igc-popover>
+    `;
+    }
+};
+IgcTooltipComponent.tagName = 'igc-tooltip';
+IgcTooltipComponent.styles = [styles, shared];
+__decorate([
+    query('#arrow')
+], IgcTooltipComponent.prototype, "_arrowElement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTooltipComponent.prototype, "open", null);
+__decorate([
+    property({ attribute: 'disable-arrow', type: Boolean, reflect: true })
+], IgcTooltipComponent.prototype, "disableArrow", void 0);
+__decorate([
+    property({ type: Number })
+], IgcTooltipComponent.prototype, "offset", void 0);
+__decorate([
+    property()
+], IgcTooltipComponent.prototype, "placement", void 0);
+__decorate([
+    property()
+], IgcTooltipComponent.prototype, "anchor", void 0);
+__decorate([
+    property({ attribute: 'show-triggers' })
+], IgcTooltipComponent.prototype, "showTriggers", null);
+__decorate([
+    property({ attribute: 'hide-triggers' })
+], IgcTooltipComponent.prototype, "hideTriggers", null);
+__decorate([
+    property({ attribute: 'show-delay', type: Number })
+], IgcTooltipComponent.prototype, "showDelay", null);
+__decorate([
+    property({ attribute: 'hide-delay', type: Number })
+], IgcTooltipComponent.prototype, "hideDelay", null);
+__decorate([
+    property()
+], IgcTooltipComponent.prototype, "message", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTooltipComponent.prototype, "sticky", void 0);
+__decorate([
+    watch('anchor')
+], IgcTooltipComponent.prototype, "_onAnchorChange", null);
+__decorate([
+    watch('sticky')
+], IgcTooltipComponent.prototype, "_onStickyChange", null);
+IgcTooltipComponent = IgcTooltipComponent_1 = __decorate([
+    themes(all)
+], IgcTooltipComponent);
+export default IgcTooltipComponent;
+//# sourceMappingURL=tooltip.js.map

package/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { EaseOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { fadeOut } from '../../animations/presets/fade/index.js';\nimport { scaleInCenter } from '../../animations/presets/scale/index.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { asNumber, isLTR } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcPopoverComponent, {\n  type PopoverPlacement,\n} from '../popover/popover.js';\nimport { TooltipRegexes, addTooltipController } from './controller.js';\nimport { styles as shared } from './themes/shared/tooltip.common.css';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/tooltip.base.css.js';\n\nexport interface IgcTooltipComponentEventMap {\n  igcOpening: CustomEvent<Element | null>;\n  igcOpened: CustomEvent<Element | null>;\n  igcClosing: CustomEvent<Element | null>;\n  igcClosed: CustomEvent<Element | null>;\n}\n\ntype TooltipStateOptions = {\n  show: boolean;\n  withDelay?: boolean;\n  withEvents?: boolean;\n};\n\n/**\n * Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).\n * It offers features such as placement customization, delays, sticky mode, and animations.\n *\n * @element igc-tooltip\n *\n * @slot - Default slot of the tooltip component.\n * @slot close-button - Slot for custom sticky-mode close action (e.g., an icon/button).\n *\n * @csspart base - The wrapping container of the tooltip content.\n *\n * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.\n * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.\n * @fires igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing.\n * @fires igcClosed - Emitted after the tooltip has been fully removed from view.\n */\n@themes(all)\nexport default class IgcTooltipComponent extends EventEmitterMixin<\n  IgcTooltipComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tooltip';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcTooltipComponent,\n      IgcPopoverComponent,\n      IgcIconComponent\n    );\n  }\n\n  private readonly _internals: ElementInternals;\n\n  private readonly _controller = addTooltipController(this, {\n    onShow: this._showOnInteraction,\n    onHide: this._hideOnInteraction,\n    onEscape: this._hideOnEscape,\n  });\n\n  private readonly _containerRef = createRef<HTMLElement>();\n  private readonly _player = addAnimationController(this, this._containerRef);\n\n  private readonly _showAnimation = scaleInCenter({\n    duration: 150,\n    easing: EaseOut.Quad,\n  });\n\n  private readonly _hideAnimation = fadeOut({\n    duration: 75,\n    easing: EaseOut.Sine,\n  });\n\n  private _timeoutId?: number;\n  private _autoHideDelay = 180;\n  private _showDelay = 200;\n  private _hideDelay = 300;\n\n  @query('#arrow')\n  private _arrowElement!: HTMLElement;\n\n  private get _arrowOffset() {\n    if (this.placement.includes('-')) {\n      // Horizontal start | end placement\n\n      if (TooltipRegexes.horizontalStart.test(this.placement)) {\n        return -8;\n      }\n\n      if (TooltipRegexes.horizontalEnd.test(this.placement)) {\n        return 8;\n      }\n\n      // Vertical start | end placement\n\n      if (TooltipRegexes.start.test(this.placement)) {\n        return isLTR(this) ? -8 : 8;\n      }\n\n      if (TooltipRegexes.end.test(this.placement)) {\n        return isLTR(this) ? 8 : -8;\n      }\n    }\n\n    return 0;\n  }\n\n  /**\n   * Whether the tooltip is showing.\n   *\n   * @attr open\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public set open(value: boolean) {\n    this._controller.open = value;\n  }\n\n  public get open(): boolean {\n    return this._controller.open;\n  }\n\n  /**\n   * Whether to disable the rendering of the arrow indicator for the tooltip.\n   *\n   * @attr disable-arrow\n   * @default false\n   */\n  @property({ attribute: 'disable-arrow', type: Boolean, reflect: true })\n  public disableArrow = false;\n\n  /**\n   * The offset of the tooltip from the anchor in pixels.\n   *\n   * @attr offset\n   * @default 6\n   */\n  @property({ type: Number })\n  public offset = 6;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   *\n   * @attr placement\n   * @default top\n   */\n  @property()\n  public placement: PopoverPlacement = 'top';\n\n  /**\n   * An element instance or an IDREF to use as the anchor for the tooltip.\n   *\n   * @attr anchor\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * Which event triggers will show the tooltip.\n   * Expects a comma separate string of different event triggers.\n   *\n   * @attr show-triggers\n   * @default pointerenter\n   */\n  @property({ attribute: 'show-triggers' })\n  public set showTriggers(value: string) {\n    this._controller.showTriggers = value;\n  }\n\n  public get showTriggers(): string {\n    return this._controller.showTriggers;\n  }\n\n  /**\n   * Which event triggers will hide the tooltip.\n   * Expects a comma separate string of different event triggers.\n   *\n   * @attr hide-triggers\n   * @default pointerleave, click\n   */\n  @property({ attribute: 'hide-triggers' })\n  public set hideTriggers(value: string) {\n    this._controller.hideTriggers = value;\n  }\n\n  public get hideTriggers(): string {\n    return this._controller.hideTriggers;\n  }\n\n  /**\n   * Specifies the number of milliseconds that should pass before showing the tooltip.\n   *\n   * @attr show-delay\n   * @default 200\n   */\n  @property({ attribute: 'show-delay', type: Number })\n  public set showDelay(value: number) {\n    this._showDelay = Math.max(0, asNumber(value));\n  }\n\n  public get showDelay(): number {\n    return this._showDelay;\n  }\n\n  /**\n   * Specifies the number of milliseconds that should pass before hiding the tooltip.\n   *\n   * @attr hide-delay\n   * @default 300\n   */\n  @property({ attribute: 'hide-delay', type: Number })\n  public set hideDelay(value: number) {\n    this._hideDelay = Math.max(0, asNumber(value));\n  }\n\n  public get hideDelay(): number {\n    return this._hideDelay;\n  }\n\n  /**\n   * Specifies a plain text as tooltip content.\n   *\n   * @attr message\n   */\n  @property()\n  public message = '';\n\n  /**\n   * Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.\n   *\n   * @attr sticky\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public sticky = false;\n\n  constructor() {\n    super();\n\n    this._internals = this.attachInternals();\n    this._internals.role = 'tooltip';\n    this._internals.ariaAtomic = 'true';\n    this._internals.ariaLive = 'polite';\n  }\n\n  protected override firstUpdated(): void {\n    if (this.open) {\n      this.updateComplete.then(() => {\n        this._player.playExclusive(this._showAnimation);\n        this.requestUpdate();\n      });\n    }\n  }\n\n  @watch('anchor')\n  protected _onAnchorChange(): void {\n    this._controller.resolveAnchor(this.anchor);\n  }\n\n  @watch('sticky')\n  protected _onStickyChange(): void {\n    this._internals.role = this.sticky ? 'status' : 'tooltip';\n  }\n\n  private _emitEvent(name: keyof IgcTooltipComponentEventMap): boolean {\n    return this.emitEvent(name, {\n      cancelable: name === 'igcOpening' || name === 'igcClosing',\n      detail: this._controller.anchor,\n    });\n  }\n\n  private async _applyTooltipState({\n    show,\n    withDelay = false,\n    withEvents = false,\n  }: TooltipStateOptions): Promise<boolean> {\n    if (show === this.open) {\n      return false;\n    }\n\n    if (withEvents && !this._emitEvent(show ? 'igcOpening' : 'igcClosing')) {\n      return false;\n    }\n\n    const commitStateChange = async () => {\n      if (show) {\n        this.open = true;\n      }\n\n      // Make the tooltip ignore most interactions while the animation\n      // is running. In the rare case when the popover overlaps its anchor\n      // this will prevent looping between the anchor and tooltip handlers.\n      this.inert = true;\n\n      const animationComplete = await this._player.playExclusive(\n        show ? this._showAnimation : this._hideAnimation\n      );\n\n      this.inert = false;\n      this.open = show;\n\n      if (animationComplete && withEvents) {\n        this._emitEvent(show ? 'igcOpened' : 'igcClosed');\n      }\n\n      return animationComplete;\n    };\n\n    if (withDelay) {\n      clearTimeout(this._timeoutId);\n\n      return new Promise(() => {\n        this._timeoutId = setTimeout(\n          async () => await commitStateChange(),\n          show ? this.showDelay : this.hideDelay\n        );\n      });\n    }\n\n    return commitStateChange();\n  }\n\n  /**\n   *  Shows the tooltip if not already showing.\n   *  If a target is provided, sets it as a transient anchor.\n   */\n  public async show(target?: Element | string): Promise<boolean> {\n    if (target) {\n      this._stopTimeoutAndAnimation();\n      this._controller.setAnchor(target, true);\n    }\n\n    return await this._applyTooltipState({ show: true });\n  }\n\n  /** Hides the tooltip if not already hidden. */\n  public async hide(): Promise<boolean> {\n    return await this._applyTooltipState({ show: false });\n  }\n\n  /** Toggles the tooltip between shown/hidden state */\n  public async toggle(): Promise<boolean> {\n    return await (this.open ? this.hide() : this.show());\n  }\n\n  protected _showWithEvent(): Promise<boolean> {\n    return this._applyTooltipState({\n      show: true,\n      withDelay: true,\n      withEvents: true,\n    });\n  }\n\n  protected _hideWithEvent(): Promise<boolean> {\n    return this._applyTooltipState({\n      show: false,\n      withDelay: true,\n      withEvents: true,\n    });\n  }\n\n  private _showOnInteraction(): void {\n    this._stopTimeoutAndAnimation();\n    this._showWithEvent();\n  }\n\n  private _stopTimeoutAndAnimation(): void {\n    clearTimeout(this._timeoutId);\n    this._player.stopAll();\n  }\n\n  private _setAutoHide(): void {\n    this._stopTimeoutAndAnimation();\n\n    this._timeoutId = setTimeout(\n      this._hideWithEvent.bind(this),\n      this._autoHideDelay\n    );\n  }\n\n  private _hideOnInteraction(): void {\n    if (!this.sticky) {\n      this._setAutoHide();\n    }\n  }\n\n  private async _hideOnEscape(): Promise<void> {\n    await this.hide();\n    this._emitEvent('igcClosed');\n  }\n\n  protected override render() {\n    return html`\n      <igc-popover\n        .inert=${!this.open}\n        .placement=${this.placement}\n        .offset=${this.offset}\n        .anchor=${this._controller.anchor ?? undefined}\n        .arrow=${this.disableArrow ? null : this._arrowElement}\n        .arrowOffset=${this._arrowOffset}\n        .shiftPadding=${8}\n        ?open=${this.open}\n        flip\n        shift\n      >\n        <div ${ref(this._containerRef)} part=\"base\">\n          <slot>${this.message}</slot>\n          ${this.sticky\n            ? html`\n                <slot name=\"close-button\" @click=${this._setAutoHide}>\n                  <igc-icon\n                    name=\"input_clear\"\n                    collection=\"default\"\n                    aria-hidden=\"true\"\n                  ></igc-icon>\n                </slot>\n              `\n            : nothing}\n          ${this.disableArrow ? nothing : html`<div id=\"arrow\"></div>`}\n        </div>\n      </igc-popover>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tooltip': IgcTooltipComponent;\n  }\n}\n"]}

package/components/tree/tree.common.d.ts

@@ -1,16 +1,14 @@
+import type { RequiredProps } from '../common/util.js';
 import type IgcTreeItemComponent from './tree-item.js';
 export interface IgcTreeComponentEventMap {
-    igcSelection: CustomEvent<TreeSelectionChange>;
+    igcSelection: CustomEvent<IgcTreeSelectionEventArgs>;
     igcItemExpanding: CustomEvent<IgcTreeItemComponent>;
     igcItemExpanded: CustomEvent<IgcTreeItemComponent>;
     igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;
     igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;
     igcActiveItem: CustomEvent<IgcTreeItemComponent>;
 }
-export interface IgcSelectionEventArgs {
-    detail: TreeSelectionChange;
-    cancelable: boolean;
-}
-export interface TreeSelectionChange {
+export type TreeSelectionEventInit = RequiredProps<CustomEventInit<IgcTreeSelectionEventArgs>, 'detail' | 'cancelable'>;
+export interface IgcTreeSelectionEventArgs {
     newSelection: IgcTreeItemComponent[];
 }

package/components/tree/tree.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.common.js","sourceRoot":"","sources":["../../../src/components/tree/tree.common.ts"],"names":[],"mappings":"","sourcesContent":["import type IgcTreeItemComponent from './tree-item.js';\n\nexport interface IgcTreeComponentEventMap {\n  /* alternateName: selectionChanged */\n  igcSelection: CustomEvent<TreeSelectionChange>;\n  igcItemExpanding: CustomEvent<IgcTreeItemComponent>;\n  igcItemExpanded: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;\n  igcActiveItem: CustomEvent<IgcTreeItemComponent>;\n}\nexport interface IgcSelectionEventArgs {\n  detail: TreeSelectionChange;\n  cancelable: boolean;\n}\n\nexport interface TreeSelectionChange {\n  newSelection: IgcTreeItemComponent[];\n}\n"]}
+{"version":3,"file":"tree.common.js","sourceRoot":"","sources":["../../../src/components/tree/tree.common.ts"],"names":[],"mappings":"","sourcesContent":["import type { RequiredProps } from '../common/util.js';\nimport type IgcTreeItemComponent from './tree-item.js';\n\nexport interface IgcTreeComponentEventMap {\n  /* alternateName: selectionChanged */\n  igcSelection: CustomEvent<IgcTreeSelectionEventArgs>;\n  igcItemExpanding: CustomEvent<IgcTreeItemComponent>;\n  igcItemExpanded: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;\n  igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;\n  igcActiveItem: CustomEvent<IgcTreeItemComponent>;\n}\nexport type TreeSelectionEventInit = RequiredProps<\n  CustomEventInit<IgcTreeSelectionEventArgs>,\n  'detail' | 'cancelable'\n>;\n\nexport interface IgcTreeSelectionEventArgs {\n  newSelection: IgcTreeItemComponent[];\n}\n"]}

package/components/tree/tree.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
+import type { TreeSelection } from '../types.js';
 import IgcTreeItemComponent from './tree-item.js';
 import type { IgcTreeComponentEventMap } from './tree.common.js';
 import { IgcTreeNavigationService } from './tree.navigation.js';
@@ -42,7 +43,7 @@ export default class IgcTreeComponent extends IgcTreeComponent_base {
      * The selection state of the tree.
      * @attr
      */
-    selection: 'none' | 'multiple' | 'cascade';
+    selection: TreeSelection;
     protected onDirChange(): void;
     protected selectionModeChange(): void;
     protected singleBranchExpandChange(): void;

package/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport IgcTreeItemComponent from './tree-item.js';\nimport type { IgcTreeComponentEventMap } from './tree.common.js';\nimport { IgcTreeNavigationService } from './tree.navigation.js';\nimport { IgcTreeSelectionService } from './tree.selection.js';\n\n/**\n * The tree allows users to represent hierarchical data in a tree-view structure,\n * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.\n *\n * @element igc-tree\n *\n * @slot - Renders the tree items inside default slot.\n *\n * @fires igcSelection - Emitted when item selection is changing, before the selection completes.\n * @fires igcItemCollapsed - Emitted when tree item is collapsed.\n * @fires igcItemCollapsing - Emitted when tree item is about to collapse.\n * @fires igcItemExpanded - Emitted when tree item is expanded.\n * @fires igcItemExpanding - Emitted when tree item is about to expand.\n * @fires igcActiveItem - Emitted when the tree's `active` item changes.\n */\n@themes(all)\n@blazorAdditionalDependencies('IgcTreeItemComponent')\nexport default class IgcTreeComponent extends EventEmitterMixin<\n  IgcTreeComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tree';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTreeComponent, IgcTreeItemComponent);\n  }\n\n  /** @private @hidden @internal */\n  public selectionService!: IgcTreeSelectionService;\n\n  /** @private @hidden @internal */\n  public navService!: IgcTreeNavigationService;\n\n  /**\n   * Whether a single or multiple of a parent's child items can be expanded.\n   * @attr single-branch-expand\n   */\n  @property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })\n  public singleBranchExpand = false;\n\n  /**\n   * Whether clicking over nodes will change their expanded state or not.\n   * @attr toggle-node-on-click\n   */\n  @property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })\n  public toggleNodeOnClick = false;\n\n  /**\n   * The selection state of the tree.\n   * @attr\n   */\n  @property({ reflect: true })\n  public selection: 'none' | 'multiple' | 'cascade' = 'none';\n\n  @watch('dir')\n  protected onDirChange(): void {\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('selection', { waitUntilFirstUpdate: true })\n  protected selectionModeChange(): void {\n    this.selectionService.clearItemsSelection();\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('singleBranchExpand')\n  protected singleBranchExpandChange(): void {\n    if (this.singleBranchExpand) {\n      // if activeItem -> do not collapse its branch\n      if (this.navService.activeItem) {\n        const path = this.navService.activeItem.path;\n        const remainExpanded = new Set(path.splice(0, path.length - 1));\n        this.items.forEach((item) => {\n          if (!remainExpanded.has(item)) {\n            item.collapseWithEvent();\n          }\n        });\n      } else {\n        this.items.forEach((item) => item.collapseWithEvent());\n      }\n    }\n  }\n\n  constructor() {\n    super();\n    this.selectionService = new IgcTreeSelectionService(this);\n    this.navService = new IgcTreeNavigationService(this, this.selectionService);\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tree');\n    this.addEventListener('keydown', this.handleKeydown);\n    // set init to true for all items which are rendered along with the tree\n    this.items.forEach((i: IgcTreeItemComponent) => {\n      i.init = true;\n    });\n    const firstNotDisabledItem = this.items.find(\n      (i: IgcTreeItemComponent) => !i.disabled\n    );\n    if (firstNotDisabledItem) {\n      firstNotDisabledItem.tabIndex = 0;\n      this.navService.focusItem(firstNotDisabledItem);\n    }\n  }\n\n  /* blazorSuppress */\n  /** Returns all of the tree's items. */\n  public get items(): Array<IgcTreeItemComponent> {\n    return Array.from(this.querySelectorAll('igc-tree-item'));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.navService.handleKeydown(event);\n  }\n\n  /** @private */\n  public expandToItem(item: IgcTreeItemComponent): void {\n    if (item?.parent) {\n      item.path.forEach((i) => {\n        if (i !== item && !i.expanded) {\n          i.expanded = true;\n        }\n      });\n    }\n  }\n\n  /* blazorSuppress */\n  /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */\n  public select(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    if (!items) {\n      this.selectionService.selectItemsWithNoEvent(\n        this.selection === 'cascade'\n          ? this.items.filter((item) => item.level === 0)\n          : this.items\n      );\n    } else {\n      this.selectionService.selectItemsWithNoEvent(items);\n    }\n  }\n\n  /* blazorSuppress */\n  /** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */\n  public deselect(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    this.selectionService.deselectItemsWithNoEvent(items);\n  }\n\n  /* blazorSuppress */\n  /**\n   * Expands all of the passed items.\n   * If no items are passed, expands ALL items.\n   */\n  public expand(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    const _items = items || this.items;\n    _items.forEach((item) => {\n      item.expanded = true;\n    });\n  }\n\n  /* blazorSuppress */\n  /**\n   * Collapses all of the passed items.\n   * If no items are passed, collapses ALL items.\n   */\n  public collapse(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    const _items = items || this.items;\n    _items.forEach((item) => {\n      item.expanded = false;\n    });\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tree': IgcTreeComponent;\n  }\n}\n"]}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport type { TreeSelection } from '../types.js';\nimport { styles } from './themes/container.base.css.js';\nimport { all } from './themes/container.js';\nimport IgcTreeItemComponent from './tree-item.js';\nimport type { IgcTreeComponentEventMap } from './tree.common.js';\nimport { IgcTreeNavigationService } from './tree.navigation.js';\nimport { IgcTreeSelectionService } from './tree.selection.js';\n\n/**\n * The tree allows users to represent hierarchical data in a tree-view structure,\n * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.\n *\n * @element igc-tree\n *\n * @slot - Renders the tree items inside default slot.\n *\n * @fires igcSelection - Emitted when item selection is changing, before the selection completes.\n * @fires igcItemCollapsed - Emitted when tree item is collapsed.\n * @fires igcItemCollapsing - Emitted when tree item is about to collapse.\n * @fires igcItemExpanded - Emitted when tree item is expanded.\n * @fires igcItemExpanding - Emitted when tree item is about to expand.\n * @fires igcActiveItem - Emitted when the tree's `active` item changes.\n */\n@themes(all)\n@blazorAdditionalDependencies('IgcTreeItemComponent')\nexport default class IgcTreeComponent extends EventEmitterMixin<\n  IgcTreeComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tree';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTreeComponent, IgcTreeItemComponent);\n  }\n\n  /** @private @hidden @internal */\n  public selectionService!: IgcTreeSelectionService;\n\n  /** @private @hidden @internal */\n  public navService!: IgcTreeNavigationService;\n\n  /**\n   * Whether a single or multiple of a parent's child items can be expanded.\n   * @attr single-branch-expand\n   */\n  @property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })\n  public singleBranchExpand = false;\n\n  /**\n   * Whether clicking over nodes will change their expanded state or not.\n   * @attr toggle-node-on-click\n   */\n  @property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })\n  public toggleNodeOnClick = false;\n\n  /**\n   * The selection state of the tree.\n   * @attr\n   */\n  @property({ reflect: true })\n  public selection: TreeSelection = 'none';\n\n  @watch('dir')\n  protected onDirChange(): void {\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('selection', { waitUntilFirstUpdate: true })\n  protected selectionModeChange(): void {\n    this.selectionService.clearItemsSelection();\n    this.items?.forEach((item: IgcTreeItemComponent) => {\n      item.requestUpdate();\n    });\n  }\n\n  @watch('singleBranchExpand')\n  protected singleBranchExpandChange(): void {\n    if (this.singleBranchExpand) {\n      // if activeItem -> do not collapse its branch\n      if (this.navService.activeItem) {\n        const path = this.navService.activeItem.path;\n        const remainExpanded = new Set(path.splice(0, path.length - 1));\n        this.items.forEach((item) => {\n          if (!remainExpanded.has(item)) {\n            item.collapseWithEvent();\n          }\n        });\n      } else {\n        this.items.forEach((item) => item.collapseWithEvent());\n      }\n    }\n  }\n\n  constructor() {\n    super();\n    this.selectionService = new IgcTreeSelectionService(this);\n    this.navService = new IgcTreeNavigationService(this, this.selectionService);\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tree');\n    this.addEventListener('keydown', this.handleKeydown);\n    // set init to true for all items which are rendered along with the tree\n    this.items.forEach((i: IgcTreeItemComponent) => {\n      i.init = true;\n    });\n    const firstNotDisabledItem = this.items.find(\n      (i: IgcTreeItemComponent) => !i.disabled\n    );\n    if (firstNotDisabledItem) {\n      firstNotDisabledItem.tabIndex = 0;\n      this.navService.focusItem(firstNotDisabledItem);\n    }\n  }\n\n  /* blazorSuppress */\n  /** Returns all of the tree's items. */\n  public get items(): Array<IgcTreeItemComponent> {\n    return Array.from(this.querySelectorAll('igc-tree-item'));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.navService.handleKeydown(event);\n  }\n\n  /** @private */\n  public expandToItem(item: IgcTreeItemComponent): void {\n    if (item?.parent) {\n      item.path.forEach((i) => {\n        if (i !== item && !i.expanded) {\n          i.expanded = true;\n        }\n      });\n    }\n  }\n\n  /* blazorSuppress */\n  /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */\n  public select(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    if (!items) {\n      this.selectionService.selectItemsWithNoEvent(\n        this.selection === 'cascade'\n          ? this.items.filter((item) => item.level === 0)\n          : this.items\n      );\n    } else {\n      this.selectionService.selectItemsWithNoEvent(items);\n    }\n  }\n\n  /* blazorSuppress */\n  /** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */\n  public deselect(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    this.selectionService.deselectItemsWithNoEvent(items);\n  }\n\n  /* blazorSuppress */\n  /**\n   * Expands all of the passed items.\n   * If no items are passed, expands ALL items.\n   */\n  public expand(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    const _items = items || this.items;\n    _items.forEach((item) => {\n      item.expanded = true;\n    });\n  }\n\n  /* blazorSuppress */\n  /**\n   * Collapses all of the passed items.\n   * If no items are passed, collapses ALL items.\n   */\n  public collapse(\n    /* alternateType: TreeItemCollection */\n    items?: IgcTreeItemComponent[]\n  ): void {\n    const _items = items || this.items;\n    _items.forEach((item) => {\n      item.expanded = false;\n    });\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tree': IgcTreeComponent;\n  }\n}\n"]}