@sankhyalabs/ezui 5.22.0-dev.10 → 5.22.0-dev.100

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
+import { applyEllipsisToInput } from "../../utils/ResponsiveInputUtils";
 export class EzTextInput {
   constructor() {
     this.label = undefined;
@@ -7,23 +8,26 @@ export class EzTextInput {
     this.enabled = true;
     this.errorMessage = undefined;
     this.mask = undefined;
+    this.cleanValueMask = false;
     this.canShowError = true;
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
     this.password = false;
+    this.autoFocus = false;
+    this.hasRightSlotContent = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
       this.isInvalid().then((hasError) => {
-        var _a, _b;
+        var _a;
         if (hasError) {
           this._inputElem.classList.add("hasError");
-          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
         }
         else {
           this._inputElem.classList.remove("hasError");
-          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+          this.removeGlobalTooltip();
         }
       });
     }
@@ -121,7 +125,12 @@ export class EzTextInput {
     const value = this._inputElem.value;
     if (value && this._maskFormatter) {
       try {
-        this._inputElem.value = this._maskFormatter.format(value);
+        if (this.cleanValueMask) {
+          this.applyMask(value);
+        }
+        else {
+          this._inputElem.value = this._maskFormatter.format(value);
+        }
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -139,8 +148,34 @@ export class EzTextInput {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      this.value = this._inputElem.value;
+      if (this.cleanValueMask) {
+        this.value = this._maskFormatter.removeMask(this._inputElem.value);
+      }
+      else {
+        this.value = this._inputElem.value;
+      }
+    }
+  }
+  applyMask(value) {
+    if (!value || value === "")
+      return value;
+    if (this._maskFormatter) {
+      try {
+        const formattedValue = this._maskFormatter.applyMask(this._maskFormatter.removeMask(value));
+        if (this._inputElem) {
+          this._inputElem.value = formattedValue;
+          return this._inputElem.value;
+        }
+        else {
+          this.value = formattedValue;
+          return this.value;
+        }
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
     }
+    return value;
   }
   handleChange() {
     if (!this._inputElem) {
@@ -156,8 +191,10 @@ export class EzTextInput {
     this.controlChangeValue();
   }
   handleSlotChange(ev) {
+    var _a;
     const slot = ev.target;
     const content = slot.assignedElements()[0];
+    this.hasRightSlotContent = false;
     if (content) {
       content.style.position = "absolute";
       content.style.display = "flex";
@@ -183,6 +220,10 @@ export class EzTextInput {
         if (this._labelElem) {
           this._labelElem.classList.add("input__label--right");
         }
+        if (this._tooltipIconElem) {
+          this._tooltipIconElem.classList.add("rightIconSlot");
+        }
+        this.hasRightSlotContent = ((_a = content.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
@@ -194,21 +235,50 @@ export class EzTextInput {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
+  renderGlobalTooltip() {
+    const tooltip = document.createElement('ez-tooltip');
+    tooltip.errorMessage = this.errorMessage;
+    tooltip.anchoringElement = this._tooltipIconElem;
+    document.body.appendChild(tooltip);
+    this._tooltipElem = tooltip;
+  }
+  removeGlobalTooltip() {
+    var _a;
+    if (!this._tooltipElem)
+      return;
+    this._tooltipElem.remove();
+    this._tooltipElem = undefined;
+    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
+  }
+  createTooltipPositioningObserver() {
+    const observer = new ResizeObserver(() => {
+      if (!this._tooltipElem)
+        return;
+      if (!this._tooltipIconElem)
+        return;
+      clearTimeout(this._observerDebounceTimeout);
+      this._observerDebounceTimeout = setTimeout(async () => {
+        if (this._tooltipElem) {
+          await this._tooltipElem.positionTooltip();
+        }
+      }, 200);
+    });
+    this._tooltipPositioningObserver = observer;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    this.observeErrorMessage();
-    this.observeMask();
-    this.adjustFloatingLabel();
-    this.adjustBorderInput();
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
       if (this._maskFormatter) {
         try {
-          this.value = this._maskFormatter.format(this.value);
+          if (this.cleanValueMask) {
+            this.applyMask(this.value);
+          }
+          else {
+            this.value = this._maskFormatter.format(this.value);
+          }
         }
         catch (e) {
           this.errorMessage = e.message;
@@ -220,12 +290,52 @@ export class EzTextInput {
       }
     }
   }
+  componentDidLoad() {
+    var _a, _b;
+    this.observeErrorMessage();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+    (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
+      var _a;
+      this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
+    });
+    this.createTooltipPositioningObserver();
+    if (this._inputElem) {
+      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
+      applyEllipsisToInput(this._inputElem);
+    }
+  }
+  componentDidRender() {
+    if (this._tooltipIconElem && !this._tooltipElem) {
+      this.renderGlobalTooltip();
+    }
+  }
+  componentDidUpdate() {
+    if (this._tooltipIconElem && this._tooltipElem) {
+      this._tooltipElem.positionTooltip();
+    }
+  }
+  disconnectedCallback() {
+    if (this._tooltipPositioningObserver) {
+      this._tooltipPositioningObserver.disconnect();
+    }
+    if (this._observerDebounceTimeout) {
+      clearTimeout(this._observerDebounceTimeout);
+    }
+    this.removeGlobalTooltip();
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+      h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -327,6 +437,24 @@ export class EzTextInput {
         "attribute": "mask",
         "reflect": false
       },
+      "cleanValueMask": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Para remover a m\u00E1scara quando fizer um apply no formul\u00E1rio."
+        },
+        "attribute": "clean-value-mask",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,
@@ -415,9 +543,32 @@ export class EzTextInput {
         "attribute": "password",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "hasRightSlotContent": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -10,6 +10,7 @@ export class EzTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -130,6 +131,11 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -281,6 +287,24 @@ export class EzTimeInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-tooltip/ez-tooltip.css

@@ -0,0 +1,20 @@
+:host {
+    position: absolute;
+    z-index: var(--elevation--24);
+    background: var(--color-alert--error-800, #BD0025);
+    padding: var(--space--extra-small, 3px) var(--space--small, 6px);
+    color: var(--color--inverted);
+    border-radius: var(--border--radius-small);
+    display: none; /* Initially hide the tooltip */
+    transform: translateX(calc(-50% + 12px)) translateY(8px);
+}
+
+.tooltip::after{
+    --triangle-size: 8px;
+    content: '';
+    right: 50%;
+    border: var(--triangle-size) solid transparent;
+    border-bottom-color: var(--color-alert--error-800, #BD0025);
+    position: absolute;
+    transform: translateX(calc(50%)) translateY(-100%);
+  }

package/dist/collection/components/ez-tooltip/ez-tooltip.js

@@ -0,0 +1,116 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export class EzTooltip {
+  constructor() {
+    this.errorMessage = undefined;
+    this.anchoringElement = undefined;
+  }
+  /**
+   * TODO: Implementar a possibilidade de definir a posição do tooltip.
+   */
+  // @Prop() tooltipSide: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
+  /**
+   * Reposiciona o tooltip de acordo com a posição do elemento de ancoragem.
+   */
+  async positionTooltip() {
+    const anchorRect = this.anchoringElement.getBoundingClientRect();
+    const top = (anchorRect.bottom + window.scrollY);
+    const left = (anchorRect.left + window.scrollX);
+    this._element.style.top = `${top}px`;
+    this._element.style.left = `${left}px`;
+  }
+  setEvents() {
+    window.addEventListener('scroll', () => {
+      this.positionTooltip();
+    }, { capture: true });
+    window.addEventListener('resize', () => {
+      this.positionTooltip();
+    }, { capture: true });
+    this.anchoringElement.addEventListener('mouseover', () => {
+      this._element.style.display = 'block';
+    });
+    this.anchoringElement.addEventListener('mouseout', () => {
+      this._element.style.display = 'none';
+    });
+  }
+  componentDidLoad() {
+    this.positionTooltip();
+    this.setEvents();
+  }
+  render() {
+    return (h("div", { inert: true, class: "tooltip", role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }, this.errorMessage));
+  }
+  static get is() { return "ez-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tooltip.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mensagem de erro que ser\u00E1 apresentada no tooltip."
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "anchoringElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Elemento HTML que ser\u00E1 utilizado como ancoragem do tooltip."
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "positionTooltip": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Reposiciona o tooltip de acordo com a posi\u00E7\u00E3o do elemento de ancoragem.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-tree/ez-tree.js

@@ -274,7 +274,7 @@ export class EzTree {
       :
         this._tree.getChildren().map(node => {
           var _a;
-          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver || defaultTooltipResolver, itemsList: this._visibleItems });
+          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver || defaultTooltipResolver, itemsList: this._visibleItems, itemDoubleClick: (item) => this.ezDbClickItem.emit(item) });
         })));
   }
   static get is() { return "ez-tree"; }
@@ -442,6 +442,26 @@ export class EzTree {
             }
           }
         }
+      }, {
+        "method": "ezDbClickItem",
+        "name": "ezDbClickItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao dar clique duplo em um item da \u00E1rvore."
+        },
+        "complexType": {
+          "original": "ITreeItem",
+          "resolved": "ITreeItem",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -1,7 +1,7 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 export const TreeItem = (props) => {
-  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList } = props;
+  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList, itemDoubleClick } = props;
   if (!node.visible) {
     return;
   }
@@ -14,13 +14,13 @@ export const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
+  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem), onDblClick: () => available && itemDoubleClick(treeItem) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
   }), h("div", { class: "item-label-container" }, h("div", { class: "item-icon-box" }, expandable &&
     h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
-    && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
+    && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList, itemDoubleClick: itemDoubleClick }))));
 };
 function getBadgeElement(itemId, badge, isSelectedItem) {
   if (badge == undefined) {

package/dist/collection/sw.js

@@ -0,0 +1,46 @@
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
+import { ExpirationPlugin } from 'workbox-expiration';
+
+// Placeholder for Workbox to inject the precache manifest
+precacheAndRoute([]);
+
+// Additional custom logic follows...
+registerRoute(
+  ({ url }) =>
+    url.pathname.endsWith('/service.sbr') &&
+    url.searchParams.has('serviceName'),
+  new StaleWhileRevalidate({
+    cacheName: 'api-cache',
+    plugins: [new CacheableResponsePlugin({ statuses: [200] })],
+  })
+);
+
+registerRoute(
+  ({ request }) =>
+    ['image', 'font', 'style'].includes(request.destination),
+  new CacheFirst({
+    cacheName: 'assets-cache',
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60 }),
+    ],
+  })
+);
+
+registerRoute(
+  ({ request }) => request.mode === 'navigate',
+  createHandlerBoundToURL('/index.html')
+);
+
+self.addEventListener('install', (event) => {
+  console.log('Service Worker installing.');
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  console.log('Service Worker activating.');
+  clients.claim();
+});

package/dist/collection/utils/CSSVarsUtils.js

@@ -28,6 +28,7 @@ export default class CSSVarsUtils {
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--border-color');
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__icon--width');
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--icon-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__margin-bottom');
     }
   }
   static applyVarsButton(host, child) {

package/dist/collection/utils/FocusResolver.js

@@ -0,0 +1,31 @@
+export default class FocusResolver {
+  static resolveFocus(element, selectText = true) {
+    var _a;
+    if (!element)
+      return;
+    (_a = element.focus) === null || _a === void 0 ? void 0 : _a.call(element);
+    if (element.setFocus) {
+      element.setFocus({ selectText });
+      return;
+    }
+    this.resolveFocusOnChild(element, selectText);
+  }
+  static resolveFocusOnChild(element, selectText = true) {
+    var _a, _b;
+    if (this.isGridCell(element) && element.firstElementChild) {
+      this.resolveFocusOnChild(element.firstElementChild);
+      return;
+    }
+    if (!element || !element.classList.contains('hydrated'))
+      return;
+    const firstChild = element.firstElementChild;
+    if (!(firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) && !(firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus))
+      return;
+    (_a = firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) === null || _a === void 0 ? void 0 : _a.call(firstChild);
+    (_b = firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus) === null || _b === void 0 ? void 0 : _b.call(firstChild, { selectText });
+  }
+  static isGridCell(element) {
+    var _a;
+    return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, "role")) === 'gridcell';
+  }
+}

package/dist/collection/utils/ResponsiveInputUtils.js

@@ -0,0 +1,26 @@
+/**
+ * Aplica comportamento de elipses a um input caso o texto ultrapasse o tamanho disponível.
+ *
+ * @param inputElement A referência ao elemento input (HTMLInputElement).
+ */
+export const applyEllipsisToInput = (inputElement) => {
+  if (!inputElement || !inputElement.style) {
+    console.error('[applyEllipsisToInput] Referência ao elemento input é inválida.');
+    return;
+  }
+  inputElement.style.textOverflow = 'ellipsis';
+  inputElement.style.overflow = 'hidden';
+  inputElement.style.whiteSpace = 'nowrap';
+  const adjustEllipsis = () => {
+    const value = inputElement.value || '';
+    const isOverflowing = inputElement.scrollWidth > inputElement.clientWidth;
+    if (isOverflowing) {
+      inputElement.setAttribute('title', value);
+    }
+    else {
+      inputElement.removeAttribute('title');
+    }
+  };
+  inputElement.addEventListener('input', adjustEllipsis);
+  adjustEllipsis();
+};