@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.18

package/components/tooltip/index.cjs

@@ -116,9 +116,10 @@ class LuzmoTooltip extends sizedMixin.SizedMixin(base.LuzmoElement, {
     this.delayed = false;
     this.dependencyManager = new dependencyManger.DependencyManagerController(this);
     this.disabled = false;
+    this.showOnlyIfTruncated = false;
     this.selfManaged = false;
     this.offset = 0;
-    this.open = false;
+    this._open = false;
     this._variant = "";
     this.handleOpenOverlay = () => {
       this.open = true;
@@ -130,6 +131,15 @@ class LuzmoTooltip extends sizedMixin.SizedMixin(base.LuzmoElement, {
   static get styles() {
     return [lit.unsafeCSS(tooltipStyles)];
   }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    if (value && this.showOnlyIfTruncated && !this.isContentTruncated()) {
+      return;
+    }
+    this._open = value;
+  }
   get variant() {
     return this._variant;
   }
@@ -145,6 +155,19 @@ class LuzmoTooltip extends sizedMixin.SizedMixin(base.LuzmoElement, {
     this.removeAttribute("variant");
     this._variant = "";
   }
+  isContentTruncated() {
+    const triggerEl = this.triggerElement;
+    if (!triggerEl) {
+      return false;
+    }
+    if (this.truncatedElementSelector) {
+      const targetEl = triggerEl.querySelector(this.truncatedElementSelector);
+      if (targetEl) {
+        return targetEl.scrollWidth > targetEl.clientWidth;
+      }
+    }
+    return triggerEl.scrollWidth > triggerEl.clientWidth;
+  }
   forwardTransitionEvent(event) {
     this.dispatchEvent(
       new TransitionEvent(event.type, {
@@ -230,6 +253,12 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean })
 ], LuzmoTooltip.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "show-only-if-truncated" })
+], LuzmoTooltip.prototype, "showOnlyIfTruncated", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "truncated-element-selector" })
+], LuzmoTooltip.prototype, "truncatedElementSelector", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, attribute: "self-managed" })
 ], LuzmoTooltip.prototype, "selfManaged", 2);
@@ -238,7 +267,7 @@ __decorateClass([
 ], LuzmoTooltip.prototype, "offset", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoTooltip.prototype, "open", 2);
+], LuzmoTooltip.prototype, "open", 1);
 __decorateClass([
   decorators_js.query("luzmo-overlay")
 ], LuzmoTooltip.prototype, "overlayElement", 2);

package/components/tooltip/index.js

@@ -123,9 +123,10 @@ class LuzmoTooltip extends SizedMixin(LuzmoElement, {
     this.delayed = false;
     this.dependencyManager = new DependencyManagerController(this);
     this.disabled = false;
+    this.showOnlyIfTruncated = false;
     this.selfManaged = false;
     this.offset = 0;
-    this.open = false;
+    this._open = false;
     this._variant = "";
     this.handleOpenOverlay = () => {
       this.open = true;
@@ -137,6 +138,15 @@ class LuzmoTooltip extends SizedMixin(LuzmoElement, {
   static get styles() {
     return [unsafeCSS(tooltipStyles)];
   }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    if (value && this.showOnlyIfTruncated && !this.isContentTruncated()) {
+      return;
+    }
+    this._open = value;
+  }
   get variant() {
     return this._variant;
   }
@@ -152,6 +162,19 @@ class LuzmoTooltip extends SizedMixin(LuzmoElement, {
     this.removeAttribute("variant");
     this._variant = "";
   }
+  isContentTruncated() {
+    const triggerEl = this.triggerElement;
+    if (!triggerEl) {
+      return false;
+    }
+    if (this.truncatedElementSelector) {
+      const targetEl = triggerEl.querySelector(this.truncatedElementSelector);
+      if (targetEl) {
+        return targetEl.scrollWidth > targetEl.clientWidth;
+      }
+    }
+    return triggerEl.scrollWidth > triggerEl.clientWidth;
+  }
   forwardTransitionEvent(event) {
     this.dispatchEvent(
       new TransitionEvent(event.type, {
@@ -237,6 +260,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], LuzmoTooltip.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-only-if-truncated" })
+], LuzmoTooltip.prototype, "showOnlyIfTruncated", 2);
+__decorateClass([
+  property({ type: String, attribute: "truncated-element-selector" })
+], LuzmoTooltip.prototype, "truncatedElementSelector", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "self-managed" })
 ], LuzmoTooltip.prototype, "selfManaged", 2);
@@ -245,7 +274,7 @@ __decorateClass([
 ], LuzmoTooltip.prototype, "offset", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LuzmoTooltip.prototype, "open", 2);
+], LuzmoTooltip.prototype, "open", 1);
 __decorateClass([
   query("luzmo-overlay")
 ], LuzmoTooltip.prototype, "overlayElement", 2);

package/components/tooltip/tooltip.d.ts

@@ -27,13 +27,23 @@ export declare class LuzmoTooltip extends LuzmoTooltip_base {
      * Whether to prevent a self-managed Tooltip from responding to user input.
      */
     disabled: boolean;
+    /**
+     * Whether to show the tooltip only if the content is truncated.
+     */
+    showOnlyIfTruncated: boolean;
+    /**
+     * The selector of the element to check for truncation.
+     */
+    truncatedElementSelector?: string;
     /**
      * Automatically bind to the parent element of the assigned `slot` or the parent element of the `luzmo-tooltip`.
      * Without this, you must provide your own `overlay-trigger`.
      */
     selfManaged: boolean;
     offset: number;
-    open: boolean;
+    private _open;
+    get open(): boolean;
+    set open(value: boolean);
     overlayElement?: LuzmoOverlay;
     /**
      * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
@@ -45,6 +55,7 @@ export declare class LuzmoTooltip extends LuzmoTooltip_base {
     private _variant;
     get variant(): string;
     set variant(variant: string);
+    private isContentTruncated;
     private handleOpenOverlay;
     protected handleCloseOverlay: () => void;
     protected forwardTransitionEvent(event: TransitionEvent): void;