@sankhyalabs/ezui 6.0.2 → 6.1.0-dev.10

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

@@ -11,6 +11,7 @@ export class EzTimeInput {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -148,7 +149,7 @@ export class EzTimeInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -305,6 +306,23 @@ export class EzTimeInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
       }
     };
   }

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

@@ -1,20 +1,62 @@
 :host {
+    --triangle-size: 8px;
+    width: 100%;
+}
+
+.tooltip {
     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);
+    box-sizing: border-box;
+    font-family: var(--font-pattern	, 'Roboto', sans-serif);
+    font-size: var(--text--small, 12px);
+    font-weight: var(--text-weight--medium, 400);
+    text-align: center;
+    width: max-content;
+    /* Initially hide the tooltip */
+    display: none;
 }
 
-.tooltip::after{
-    --triangle-size: 8px;
-    content: '';
-    right: 50%;
-    border: var(--triangle-size) solid transparent;
-    border-bottom-color: var(--color-alert--error-800, #BD0025);
+.arrow {
     position: absolute;
-    transform: translateX(calc(50%)) translateY(-100%);
-  }
+    width: var(--triangle-size);
+    height: var(--triangle-size);
+    transform: rotate(45deg);
+}
+
+.default-tooltip {
+    background: var(--title--primary, #2b3a54);
+    color: var(--color--inverted);
+}
+
+.default-tooltip .arrow {
+    background: var(--title--primary, #2b3a54);
+}
+
+.error-tooltip {
+    background: var(--color-alert--error-800, #BD0025);
+    color: var(--color--error-200, #F7E0E5);
+}
+
+.error-tooltip .arrow {
+    background: var(--color-alert--error-800, #BD0025);
+}
+
+.success-tooltip {
+    background: var(--color--success, #00cb94);
+    color: var(--color--success-200, #EBFFFA);
+}
+
+.success-tooltip .arrow {
+    background: var(--color--success, #00cb94);
+}
+
+.warning-tooltip {
+    background: var(--color--warning, #f2d410);
+    color: var(--color--warning-200, #FDF8D8);
+}
+
+.warning-tooltip .arrow {
+    background: var(--color--warning, #f2d410);
+}

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

@@ -1,44 +1,120 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class EzTooltip {
   constructor() {
-    this.errorMessage = undefined;
+    this._opened = false;
+    this.message = undefined;
     this.anchoringElement = undefined;
+    this.placement = 'bottom';
+    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
+    this.type = 'default';
+    this.debouncingTime = 500;
+    this.active = true;
+    this.maxWidth = 200;
+    this.useAnchorSize = false;
   }
-  /**
-   * 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`;
+  watchAnchoringElement(newValue, oldValue) {
+    if (newValue) {
+      this.setEvents(newValue);
+      this.removeEvents(oldValue);
+    }
   }
-  setEvents() {
-    window.addEventListener('scroll', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    window.addEventListener('resize', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    this.anchoringElement.addEventListener('mouseover', () => {
-      this._element.style.display = 'block';
+  watchMessage(newValue) {
+    if (!newValue) {
+      this.closeTooltip();
+      return;
+    }
+    this.updatePosition();
+  }
+  openTooltip() {
+    if (this.message && this.active) {
+      if (this._debouncingTimeout) {
+        clearTimeout(this._debouncingTimeout);
+      }
+      this._debouncingTimeout = setTimeout(() => {
+        this._opened = true;
+        this._tooltipElement.style.display = 'block';
+        this.updatePosition();
+      }, this.debouncingTime);
+    }
+  }
+  closeTooltip() {
+    clearTimeout(this._debouncingTimeout);
+    this._tooltipElement.style.display = 'none';
+    this._opened = false;
+  }
+  async updatePosition(element = this.anchoringElement) {
+    if (!element || !this._opened) {
+      return;
+    }
+    if (this.useAnchorSize) {
+      const anchorSize = element.getBoundingClientRect().width;
+      this._tooltipElement.style.width = `${anchorSize}px`;
+    }
+    await computePosition(element, this._tooltipElement, {
+      placement: this.placement,
+      middleware: [
+        offset(5),
+        flip(),
+        shift(),
+        arrow({ element: this._arrowElement })
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+      Object.assign(this._tooltipElement.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x } = middlewareData.arrow;
+        const onBottom = placement.includes("bottom");
+        Object.assign(this._arrowElement.style, {
+          left: `${x}px`,
+          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+        });
+      }
+    });
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    this.anchoringElement = content;
+  }
+  setEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.addEventListener('mouseleave', () => {
+      this.closeTooltip();
     });
-    this.anchoringElement.addEventListener('mouseout', () => {
-      this._element.style.display = 'none';
+  }
+  removeEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.removeEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.removeEventListener('mouseleave', () => {
+      this.closeTooltip();
     });
   }
   componentDidLoad() {
-    this.positionTooltip();
     this.setEvents();
   }
   render() {
-    return (h("div", { inert: true, class: "tooltip", role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }, this.errorMessage));
+    return (h(Host, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+        "tooltip": true,
+        [`${this.type}-tooltip`]: true,
+      }, style: {
+        maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
+      }, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
   }
   static get is() { return "ez-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -54,7 +130,7 @@ export class EzTooltip {
   }
   static get properties() {
     return {
-      "errorMessage": {
+      "message": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -66,14 +142,14 @@ export class EzTooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Mensagem de erro que ser\u00E1 apresentada no tooltip."
+          "text": "Mensagem que ser\u00E1 apresentada no tooltip."
         },
-        "attribute": "error-message",
+        "attribute": "message",
         "reflect": false
       },
       "anchoringElement": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "HTMLElement",
           "resolved": "HTMLElement",
@@ -89,28 +165,146 @@ export class EzTooltip {
           "tags": [],
           "text": "Elemento HTML que ser\u00E1 utilizado como ancoragem do tooltip."
         }
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "positionTooltip": {
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
-            "Promise": {
-              "location": "global"
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
             }
-          },
-          "return": "Promise<void>"
+          }
         },
+        "required": false,
+        "optional": false,
         "docs": {
-          "text": "Reposiciona o tooltip de acordo com a posi\u00E7\u00E3o do elemento de ancoragem.",
-          "tags": []
-        }
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do tooltip em rela\u00E7\u00E3o ao elemento de ancoragem."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "gapOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ horizontalGap: number; verticalGap: number; }",
+          "resolved": "{ horizontalGap: number; verticalGap: number; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o espa\u00E7amento entre o tooltip e o elemento de ancoragem."
+        },
+        "defaultValue": "{ horizontalGap: 0, verticalGap: 0 }"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'success' | 'error' | 'warning'",
+          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de tooltip a ser exibido."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "debouncingTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tempo de espera para exibir o tooltip ap\u00F3s o evento de mouseenter."
+        },
+        "attribute": "debouncing-time",
+        "reflect": false,
+        "defaultValue": "500"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o tooltip est\u00E1 ativo."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "maxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura m\u00E1xima do elemento."
+        },
+        "attribute": "max-width",
+        "reflect": false,
+        "defaultValue": "200"
+      },
+      "useAnchorSize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o elemento manter\u00E1 o mesmo tamanho do componente de ancora."
+        },
+        "attribute": "use-anchor-size",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "anchoringElement",
+        "methodName": "watchAnchoringElement"
+      }, {
+        "propName": "message",
+        "methodName": "watchMessage"
+      }];
+  }
 }

package/dist/collection/utils/constants.js

@@ -2,3 +2,5 @@ export const REQUIRED_INFO = " (obrigatório) *";
 export const ALL_RECORD = "ALL_RECORD";
 export const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
 export const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
+export const PRESENTATION_COL_ID_PROP_NAME = "gridDescriptionColID";
+export const PRESENTATION_FROM_COL_PROP_NAME = "presentationFieldFrom";

package/dist/collection/utils/form/DataBinder.js

@@ -1,10 +1,14 @@
-import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils } from "@sankhyalabs/core";
+import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils, ObjectUtils, } from '@sankhyalabs/core';
 import { RecordValidationProcessor } from "../validators/recordvalidator/RecordValidationProcessor";
 export default class DataBinder {
   constructor(dataUnit) {
     this.onDataUnitEvent = (action) => {
-      var _a, _b;
+      var _a;
       switch (action.type) {
+        case Action.MULTIPLE_EDITION_CHANGED:
+          this.clearInvalid();
+          this.updateAllFieldsValues();
+          break;
         case Action.DATA_LOADED:
         case Action.DATA_SAVED:
         case Action.RECORDS_REMOVED:
@@ -19,13 +23,11 @@ export default class DataBinder {
         case Action.CHANGE_UNDONE:
         case Action.CHANGE_REDONE:
         case Action.RECORD_LOADED:
-          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field);
-          });
+          this.updateAllFieldsValues();
           this.clearFieldError(Object.keys(action.payload)[0]);
           break;
         case Action.FIELD_INVALIDATED:
-          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
             this.updateErrorMessage(field.fieldName, field.field);
           });
           break;
@@ -123,13 +125,19 @@ export default class DataBinder {
       this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
     }
   }
-  updateValue(fieldName, field) {
+  updateFieldValue(fieldName, field) {
     const bind = this._fields.get(fieldName);
     try {
-      if (bind) {
+      if (bind)
         bind.listen = false;
+      if (this._dataUnit.isMultipleEdition && this.hasMultipleValuesBetweenRecords(fieldName)) {
+        field['value'] = undefined;
+        field['alternativePlaceholder'] = 'Múltiplos Valores';
+      }
+      else {
+        field["value"] = this._dataUnit.getFieldValue(fieldName);
+        field['alternativePlaceholder'] = undefined;
       }
-      field["value"] = this._dataUnit.getFieldValue(fieldName);
       this.updateErrorMessage(fieldName, field);
     }
     finally {
@@ -138,6 +146,14 @@ export default class DataBinder {
       }
     }
   }
+  hasMultipleValuesBetweenRecords(key) {
+    var _a, _b;
+    const selectedRecords = (_b = (_a = this._dataUnit.getSelectionInfo()) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
+    if (selectedRecords.length <= 1)
+      return false;
+    const firstValue = selectedRecords[0][key];
+    return !selectedRecords.every(record => ObjectUtils.equals(record[key], firstValue));
+  }
   validate() {
     return this._recordValidatorProcessor.validate();
   }
@@ -176,7 +192,7 @@ export default class DataBinder {
       oldBind.destroy();
     }
     this.bindSearchOptionsLoader(fieldName, field);
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateFieldValue(fieldName, field);
     this.updateErrorMessage(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.applyEzUploadContext(fieldName, field);
@@ -218,8 +234,14 @@ export default class DataBinder {
       this._dataUnit.addRecord();
     }
     this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
-    const record = this._dataUnit.getSelectedRecord();
-    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
+    if (this._dataUnit.isMultipleEdition) {
+      const selectionInfo = this._dataUnit.getSelectionInfo();
+      this._dataUnit.setFieldValue(fieldName, newValue, selectionInfo.recordIds);
+    }
+    else {
+      const record = this._dataUnit.getSelectedRecord();
+      this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
+    }
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
       if (bind) {
@@ -228,8 +250,9 @@ export default class DataBinder {
     }
   }
   bindSearchOptionsLoader(fieldName, field) {
-    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
-      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+      const loader = isSearchPlus ? ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__") : ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
       if (loader) {
         field["optionLoader"] = (arg, ctxOptions) => {
           return loader(arg, fieldName, this._dataUnit, ctxOptions);
@@ -250,6 +273,12 @@ export default class DataBinder {
       field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
     }
   }
+  updateAllFieldsValues() {
+    var _a;
+    (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+      this.updateFieldValue(field.fieldName, field.field);
+    });
+  }
   interceptAction(action) {
     if (action.type === Action.RECORDS_COPIED) {
       const cleanFields = this._formMetadata.getCleanOnCopyFields();

package/dist/collection/utils/form/test/DataBinder.test.js

@@ -43,4 +43,18 @@ describe('DataBinder', () => {
     const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
     expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(0);
   });
+  it('Should tell if has multiple values between fields', () => {
+    dataBinder['_dataUnit'].getSelectionInfo = jest.fn().mockReturnValue({ records: mockRecords() });
+    const hasMultiplesLabels = dataBinder['hasMultipleValuesBetweenRecords']('label');
+    const hasMultiplesValues = dataBinder['hasMultipleValuesBetweenRecords']('value');
+    expect(hasMultiplesLabels).toBe(false);
+    expect(hasMultiplesValues).toBe(true);
+  });
 });
+function mockRecords() {
+  return [
+    { label: 'label mocked', value: 'value mocked 1' },
+    { label: 'label mocked', value: 'value mocked 2' },
+    { label: 'label mocked', value: 'value mocked 3' },
+  ];
+}

package/dist/collection/utils/index.js

@@ -6,4 +6,6 @@ export { FormMetadata } from './form/FormMetadata';
 export { default as DataBinder } from './form/DataBinder';
 export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
 export { CustomRenderSource } from './customRender/interfaces/ICustomRender';
+export { SearchMode } from './search/types';
 export { FormLayout } from './form/interfaces';
+export { buildFieldSearch, openFieldSearch, focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, LABEL_SEARCH_FIELD, LABEL_SEARCH_COLUMN, SHORTCUT_SEARCH_FIELD } from './searchColumn/search-column';

package/dist/collection/utils/search/types.js

@@ -0,0 +1,7 @@
+export var SearchMode;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+  SearchMode["LOAD_DESCRIPTION"] = "LOAD_DESCRIPTION";
+  SearchMode["PRELOAD"] = "PRELOAD";
+})(SearchMode || (SearchMode = {}));

package/dist/collection/utils/searchColumn/search-column.js

@@ -0,0 +1,35 @@
+import { h } from '@stencil/core';
+export const LABEL_SEARCH_FIELD = "Buscar campos (ctrl+F)";
+export const LABEL_SEARCH_COLUMN = "Buscar colunas (Ctrl+F)";
+export const SHORTCUT_SEARCH_FIELD = "ctrl+f";
+export const SEARCH_FIELD_FULL_WIDTH = 240;
+const SEARCH_FIELD_MARGIN_BOTTOM = "0px";
+const SEARCH_FIELD_WIDTH = String(SEARCH_FIELD_FULL_WIDTH - 30) + "px";
+export const buildFieldSearch = (action, optionLoader, onSelectField) => {
+  return h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
+      "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
+      "--ez-search--width": SEARCH_FIELD_WIDTH
+    }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+};
+export const openFieldSearch = async (splitButton, field) => {
+  if (!splitButton) {
+    return;
+  }
+  const isOpen = await splitButton.isOpenedDropdown();
+  if (isOpen) {
+    await focusOnFieldSerch(field);
+    return;
+  }
+  await splitButton.toggleDropdown();
+};
+export const focusOnFieldSerch = async (field) => {
+  requestAnimationFrame(async () => {
+    if (field) {
+      const realElement = field['$elm$'];
+      if (!realElement)
+        return;
+      realElement.value = null;
+      await realElement.setFocus();
+    }
+  });
+};