@nectary/components 4.8.1 → 4.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/tag/index.d.ts

@@ -1,4 +1,5 @@
 import '../text';
+import '../tooltip';
 import type { TSinchTagElement, TSinchTagReact } from './types';
 declare global {
     interface HTMLElementTagNameMap {

package/tag/index.js

@@ -1,11 +1,13 @@
 import '../text';
+import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
   #$text;
+  #$tooltip;
   #$wrapper;
   constructor() {
     super();
@@ -13,10 +15,12 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#updateColor();
+    this.#updateEllipsisTooltip();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -32,6 +36,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
   }
   set text(value) {
     updateAttribute(this, 'text', value);
+    updateAttribute(this.#$tooltip, 'text', value);
   }
   get small() {
     return getBooleanAttribute(this, 'small');
@@ -55,6 +60,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       case 'text':
         {
           this.#$text.textContent = newVal;
+          this.#updateEllipsisTooltip();
           break;
         }
       case 'small':
@@ -81,4 +87,15 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
     }
   }
+  #updateEllipsisTooltip() {
+    const ellipsis = getBooleanAttribute(this, 'ellipsis');
+    requestAnimationFrame(() => {
+      const hasOverflow = this.#$text.offsetWidth < this.#$text.scrollWidth;
+      if (ellipsis && hasOverflow) {
+        updateAttribute(this.#$tooltip, 'text', this.text);
+      } else {
+        updateAttribute(this.#$tooltip, 'text', '');
+      }
+    });
+  }
 });

package/tag/types.d.ts

@@ -8,12 +8,16 @@ export type TSinchTagElement = HTMLElement & {
     color: TSinchTagColor | null;
     /** Small */
     small: boolean;
+    /** Ellipsis */
+    ellipsis: boolean;
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** Color, gray by default */
     setAttribute(name: 'color', value: string): void;
     /** Small */
     setAttribute(name: 'small', value: ''): void;
+    /** Ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     /** Text */
@@ -22,6 +26,8 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     color?: TSinchTagColor;
     /** Small */
     small?: boolean;
+    /** Ellipsis */
+    ellipsis?: boolean;
 } & {
     style?: {
         '--sinch-comp-tag-size-container-m'?: string;