@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.BEB47LM2.js

@@ -0,0 +1,278 @@
+import {
+  tooltip_styles_default
+} from "./chunk.EMJZLQCL.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  parseDuration,
+  stopAnimations
+} from "./chunk.2FK6USFR.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.V7RJROLH.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/tooltip/tooltip.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATooltip = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.content = "";
+    this.placement = "top";
+    this.disabled = false;
+    this.distance = 8;
+    this.open = false;
+    this.skidding = 0;
+    this.trigger = "hover focus";
+    this.hoist = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.updateComplete.then(() => {
+      this.addEventListener("blur", this.handleBlur, true);
+      this.addEventListener("focus", this.handleFocus, true);
+      this.addEventListener("click", this.handleClick);
+      this.addEventListener("keydown", this.handleKeyDown);
+      this.addEventListener("mouseover", this.handleMouseOver);
+      this.addEventListener("mouseout", this.handleMouseOut);
+    });
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("blur", this.handleBlur, true);
+    this.removeEventListener("focus", this.handleFocus, true);
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("mouseover", this.handleMouseOver);
+    this.removeEventListener("mouseout", this.handleMouseOut);
+  }
+  handleBlur() {
+    if (this.hasTrigger("focus")) {
+      this.hide();
+    }
+  }
+  handleClick() {
+    if (this.hasTrigger("click")) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+  }
+  handleFocus() {
+    if (this.hasTrigger("focus")) {
+      this.show();
+    }
+  }
+  handleKeyDown(event) {
+    if (this.open && event.key === "Escape") {
+      event.stopPropagation();
+      this.hide();
+    }
+  }
+  handleMouseOver() {
+    if (this.hasTrigger("hover")) {
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue("--show-delay")
+      );
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+    }
+  }
+  handleMouseOut() {
+    if (this.hasTrigger("hover")) {
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue("--hide-delay")
+      );
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+    }
+  }
+  hasTrigger(triggerType) {
+    const triggers = this.trigger.split(" ");
+    return triggers.includes(triggerType);
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+      this.emit("dsa-show");
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "tooltip.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.emit("dsa-after-show");
+    } else {
+      this.emit("dsa-hide");
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "tooltip.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+      this.emit("dsa-after-hide");
+    }
+  }
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the tooltip */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  render() {
+    return html`
+      <dsa-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${classMap({
+      tooltip: true,
+      "tooltip--open": this.open
+    })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        arrow
+      >
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        <slot
+          name="content"
+          part="body"
+          id="tooltip"
+          class="tooltip__body"
+          role="tooltip"
+          aria-live=${this.open ? "polite" : "off"}
+        >
+          ${this.content}
+        </slot>
+      </dsa-popup>
+    `;
+  }
+};
+DSATooltip.styles = tooltip_styles_default;
+__decorateClass([
+  query("slot:not([name])")
+], DSATooltip.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".tooltip__body")
+], DSATooltip.prototype, "body", 2);
+__decorateClass([
+  query("dsa-popup")
+], DSATooltip.prototype, "popup", 2);
+__decorateClass([
+  property()
+], DSATooltip.prototype, "content", 2);
+__decorateClass([
+  property()
+], DSATooltip.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATooltip.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Number })
+], DSATooltip.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATooltip.prototype, "open", 2);
+__decorateClass([
+  property({ type: Number })
+], DSATooltip.prototype, "skidding", 2);
+__decorateClass([
+  property()
+], DSATooltip.prototype, "trigger", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSATooltip.prototype, "hoist", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSATooltip.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch(["content", "distance", "hoist", "placement", "skidding"])
+], DSATooltip.prototype, "handleOptionsChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSATooltip.prototype, "handleDisabledChange", 1);
+DSATooltip = __decorateClass([
+  customElement("dsa-tooltip")
+], DSATooltip);
+setDefaultAnimation("tooltip.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("tooltip.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+
+export {
+  DSATooltip
+};