@ctrliq/quantic-components 1.63.5 → 1.64.0

package/dist/quantic-components.js

@@ -10471,6 +10471,7 @@
       gap: var(--quantic-spacing-3);
       margin: 0;
       color: var(--quantic-text-secondary);
+      overflow-wrap: break-word;
     }
 
     [size='md'] .body,
@@ -69091,6 +69092,125 @@
         quanticElement('quantic-toast')
     ], exports.Toast);
 
+    exports.Tooltip.ensureDefined();
+    exports.Truncate = class Truncate extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.value = '';
+            this.maxLines = 1;
+            this.placement = TooltipPlacement.Top;
+            this.isTruncated = false;
+        }
+        firstUpdated() {
+            this.observer = new ResizeObserver(() => this.checkTruncation());
+            this.observer.observe(this);
+            this.checkTruncation();
+        }
+        updated(changed) {
+            if (changed.has('maxLines') || changed.has('value')) {
+                this.checkTruncation();
+            }
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.observer?.disconnect();
+        }
+        checkTruncation() {
+            if (!this.textEl)
+                return;
+            const isTruncated = this.maxLines > 1
+                ? this.textEl.scrollHeight > this.textEl.clientHeight
+                : this.textEl.scrollWidth > this.textEl.clientWidth;
+            if (isTruncated !== this.isTruncated) {
+                this.isTruncated = isTruncated;
+            }
+        }
+        render() {
+            const text = x `
+      <div
+        class=${e$3({ text: true, 'text--multiline': this.maxLines > 1 })}
+        style=${o({ '--truncate-max-lines': String(this.maxLines) })}
+        tabindex=${this.isTruncated ? '0' : E}
+      >
+        ${this.value}
+      </div>
+    `;
+            return this.isTruncated
+                ? x `
+          <quantic-tooltip placement=${this.placement}>
+            ${text}
+            <span slot="content">${this.value}</span>
+          </quantic-tooltip>
+        `
+                : text;
+        }
+    };
+    exports.Truncate.meta = {
+        tag: 'quantic-truncate',
+        description: 'Renders text with ellipsis overflow. ' +
+            'A tooltip revealing the full value appears on hover or keyboard focus when the text is actually truncated.',
+        category: 'display',
+        relatedTo: ['quantic-tooltip'],
+    };
+    exports.Truncate.styles = i$6 `
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    quantic-tooltip {
+      display: block;
+      min-width: 0;
+    }
+
+    .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .text--multiline {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--truncate-max-lines);
+      line-clamp: var(--truncate-max-lines);
+      white-space: normal;
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            default: '',
+            description: 'Text to display and show in the tooltip when truncated.',
+        })
+    ], exports.Truncate.prototype, "value", void 0);
+    __decorate([
+        prop({
+            type: 'number',
+            attribute: 'max-lines',
+            default: '1',
+            description: 'Maximum number of visible lines before truncating. Defaults to 1 (single-line).',
+        })
+    ], exports.Truncate.prototype, "maxLines", void 0);
+    __decorate([
+        prop({
+            type: 'TooltipPlacement',
+            options: Object.values(TooltipPlacement),
+            default: TooltipPlacement.Top,
+            description: 'Preferred tooltip placement relative to the text.',
+        })
+    ], exports.Truncate.prototype, "placement", void 0);
+    __decorate([
+        e$5('.text')
+    ], exports.Truncate.prototype, "textEl", void 0);
+    __decorate([
+        r$2()
+    ], exports.Truncate.prototype, "isTruncated", void 0);
+    exports.Truncate = __decorate([
+        quanticElement('quantic-truncate')
+    ], exports.Truncate);
+
     exports.AlertType = AlertType;
     exports.BadgeColor = BadgeColor;
     exports.BadgeSize = BadgeSize;
@@ -69147,6 +69267,7 @@
     exports.TextareaSize = TextareaSize;
     exports.ToastType = ToastType;
     exports.ToggleSize = ToggleSize;
+    exports.TooltipPlacement = TooltipPlacement;
     exports.icons = icons;
     exports.quanticElement = quanticElement;
     exports.tableVariantContext = tableVariantContext;