@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-78242.3 → 0.0.0-bugfix-dev-KB-78242.4

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/custom-elements/index.d.ts

@@ -296,6 +296,12 @@ export const EzToast: {
   new (): EzToast;
 };
 
+interface EzTooltip extends Components.EzTooltip, HTMLElement {}
+export const EzTooltip: {
+  prototype: EzTooltip;
+  new (): EzTooltip;
+};
+
 interface EzTree extends Components.EzTree, HTMLElement {}
 export const EzTree: {
   prototype: EzTree;

package/dist/custom-elements/index.js

@@ -1026,8 +1026,9 @@ const EzActionsButton$1 = class extends HTMLElement$1 {
     var _a;
     const docWidth = document.body.clientWidth;
     const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      return (docWidth - boundingList.width) + "px";
+    const rightOffset = docWidth - this._button.getBoundingClientRect().right;
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) >= docWidth || (boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) === (docWidth - rightOffset)) {
+      return (docWidth - boundingList.width - rightOffset) + "px";
     }
     return;
   }
@@ -3066,7 +3067,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       return this.listOptionsPosition;
     }
     return {
-      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+      verticalPosition: 6
     };
   }
   isDifferentValues(firstValue, secondValue) {
@@ -5543,7 +5544,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-bottom--large" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -5557,20 +5558,20 @@ const buildComboBox$1 = ({ name, label, readOnly, required, props, contextName,
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };
 
 const buildDate$1 = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime$1 = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime$1 = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
@@ -5583,7 +5584,7 @@ const buildFile = ({ name, label, readOnly, contextName, props }) => {
       INTERNAL_FILENAME: props.INTERNAL_FILENAME
     })),
   });
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };
 
@@ -5597,23 +5598,23 @@ const buildInteger$1 = ({ name, label, readOnly, contextName, canShowError }) =>
   return buildNumeric$1(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric$1(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 " },
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
 const buildSearch$1 = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
   var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
 
 const buildTextInput$1 = ({ name, label, readOnly, contextName, canShowError, props }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
@@ -5673,7 +5674,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--sapce-width:5px}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--sapce-width);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView$1 = class extends HTMLElement$1 {
   constructor() {
@@ -71103,7 +71104,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid__container.box-outline.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}";
 
 const windowInstace$1 = window;
 const matches = (text, filter) => {
@@ -73570,7 +73571,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       return this.listOptionsPosition;
     }
     return {
-      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+      verticalPosition: 6
     };
   }
   isDifferentValues(firstValue, secondValue) {
@@ -75897,7 +75898,7 @@ const applyEllipsisToInput = (inputElement) => {
   adjustEllipsis();
 };
 
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__message_box--font-size:var(--text--extra-small, 10px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.message-box{min-height:14px;min-width:100%;margin-top:3px;line-height:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}";
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
 
 const EzTextInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -75917,18 +75918,19 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     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();
         }
       });
     }
@@ -76092,8 +76094,10 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     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";
@@ -76119,6 +76123,10 @@ const EzTextInput$1 = class extends HTMLElement$1 {
         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);
     }
@@ -76130,26 +76138,39 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     }
     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();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
-    this._inputElem.addEventListener('focus', () => {
-      this._inputElem.setSelectionRange(0, this._inputElem.value.length);
-    });
-    if (this._inputElem) {
-      applyEllipsisToInput(this._inputElem);
-    }
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
@@ -76172,12 +76193,52 @@ const EzTextInput$1 = class extends HTMLElement$1 {
       }
     }
   }
+  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.mask && this.cleanValueMask ? this.applyMask(this.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); } }, " ")));
   }
   get _hostElement() { return this; }
   static get watchers() { return {
@@ -76450,6 +76511,55 @@ const EzToast$1 = class extends HTMLElement$1 {
   static get style() { return ezToastCss; }
 };
 
+const ezTooltipCss = ":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;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%)}";
+
+const EzTooltip$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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));
+  }
+  get _element() { return this; }
+  static get style() { return ezTooltipCss; }
+};
+
 const ICON_EXPANDED = "chevron-down";
 const ICON_COLAPSED = "chevron-right";
 const defaultIconResolver = (item, expanded, _level) => {
@@ -77730,9 +77840,10 @@ const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-pa
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"],"autoRows":[516,"auto-rows"],"autoFocus":[4,"auto-focus"]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
-const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"]}]);
+const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
+const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"errorMessage":[1,"error-message"],"anchoringElement":[16]}]);
 const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"subtitle":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
@@ -77790,6 +77901,7 @@ const defineCustomElements = (opts) => {
   EzTextInput,
   EzTimeInput,
   EzToast,
+  EzTooltip,
   EzTree,
   EzUpload,
   EzViewStack,
@@ -77803,4 +77915,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };

package/dist/esm/ez-actions-button.entry.js

@@ -95,8 +95,9 @@ const EzActionsButton = class {
     var _a;
     const docWidth = document.body.clientWidth;
     const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      return (docWidth - boundingList.width) + "px";
+    const rightOffset = docWidth - this._button.getBoundingClientRect().right;
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) >= docWidth || (boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) === (docWidth - rightOffset)) {
+      return (docWidth - boundingList.width - rightOffset) + "px";
     }
     return;
   }

package/dist/esm/ez-combo-box.entry.js

@@ -182,7 +182,7 @@ const EzComboBox = class {
       return this.listOptionsPosition;
     }
     return {
-      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+      verticalPosition: 6
     };
   }
   isDifferentValues(firstValue, secondValue) {

package/dist/esm/ez-form-view.entry.js

@@ -10,7 +10,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-bottom--large" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -24,20 +24,20 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };
 
 const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
@@ -50,7 +50,7 @@ const buildFile = ({ name, label, readOnly, contextName, props }) => {
       INTERNAL_FILENAME: props.INTERNAL_FILENAME
     })),
   });
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };
 
@@ -64,23 +64,23 @@ const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 " },
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
 const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
   var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };
 
 const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
@@ -140,7 +140,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--sapce-width:5px}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--sapce-width);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {