@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

package/dist/esm/{ez-card-item_5.entry.js → ez-multi-selection-list_5.entry.js}

@@ -1,62 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-baa5e267.js';
-import { StringUtils, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-41363fa6.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-baa5e267.js';
+import { i as initI18n } from './index-b5a15d4b.js';
+import { ArrayUtils, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { c as computePosition, f as flip, s as shift, a as size } from './floating-ui.dom.esm-ffa73324.js';
 import { a as replaceHighlight, r as replaceQuotes } from './searchFormatters-8229207e.js';
 
-const ezCardItemCss = ":host {  \n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define o tamanho da fonte do componente no modo compacto.*/\n  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define a cor da fonte do valor do detalhe do componente.*/\n  --ez-card-item__detail-value--color: var(--color--petroleum-500, #404E65);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n   /*@doc Define o peso da fonte do componente.*/\n   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item__detail{\n  display: inline-block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  opacity: 0.95;\n}\n\n\n\n.card-item__expanded {\n  padding: var(--space--medium);\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail{\n  cursor: pointer;\n}\n\n.card-item__detail-default:not(:last-child) {\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--detail-label--font-weight);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-value--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container_default{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n/* Modo compacto */\n.card-item__compacted {\n  padding: var(--space--2xs) var(--space--small);\n}\n\n.card-item__detail-label-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__detail-value-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__title-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__details-container__left-compacted{\n  width: 100%;\n}\n\n.card-item__details-container__right-compacted {\n  width: 100%;\n}\n\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
-
-const EzCardItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezClick = createEvent(this, "ezClick", 7);
-    this.item = undefined;
-    this.enableKey = true;
-    this.compacted = false;
-  }
-  componentWillRender() {
-    this.createDetailList();
-  }
-  componentDidLoad() {
-    var _a, _b;
-    const dataInfo = { id: StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
-  createDetailList() {
-    var _a, _b, _c;
-    this._details = { detailsLeft: [], detailsRight: [] };
-    let cont = 0;
-    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
-      for (const attribute in this.item.details) {
-        cont < 3 ?
-          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
-          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
-        cont++;
-      }
-    }
-  }
-  buildDetailContentTitle(detail) {
-    var _a, _b;
-    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
-      return;
-    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
-    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
-    return `${cleanLabel}: ${cleanValue}`;
-  }
-  buildDetailContent(detail) {
-    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
-  }
-  render() {
-    return (h(Host, null, this.item &&
-      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
-        return this.buildDetailContent(detail);
-      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
-        return this.buildDetailContent(detail);
-      })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
-  }
-  get _element() { return getElement(this); }
-};
-EzCardItem.style = ezCardItemCss;
-
 const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-max-height:calc(100vh - 435px);display:flex;flex-direction:column;box-sizing:border-box;width:var(--ez-multi-selection-default-width, 304px);min-width:0;max-width:100%;height:var(--ez-multi-selection-default-height, 322px);min-height:0;max-height:calc(100vh - 350px)}.multi-selection.sc-ez-multi-selection-list{display:flex;flex-direction:column;height:100%;min-height:0}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px);flex:0 0 auto}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px);flex:0 0 auto}.multi-selection__list.sc-ez-multi-selection-list{max-height:var(--ez-multi-selection-default-max-height);flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
 
 var ViewScenarios;
@@ -264,6 +211,225 @@ const EzMuiltiSelectionList = class {
 };
 EzMuiltiSelectionList.style = ezMultiSelectionListCss;
 
+const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--elevation--100, 100);--ez-popover__box--overlay-z-index:var(--elevation--24, 24);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--ez-popover__box--overlay-z-index)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
+
+const EzPopoverCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezVisibilityChange = createEvent(this, "ezVisibilityChange", 7);
+    this.autoClose = true;
+    this.boxWidth = "fit-content";
+    this.opened = false;
+    this.overlayType = "light";
+    this.anchorElement = undefined;
+    this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
+    this.useAnchorSize = false;
+    this.minWidth = 150;
+    this.fitInViewport = true;
+  }
+  observeOpened(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    if (newValue) {
+      this.openPopover();
+    }
+    else {
+      this.hidePopover();
+    }
+  }
+  /**
+   * Atualiza a posição do popover.
+   */
+  async updatePosition(top, left) {
+    this.updateOptionPosition(top, left);
+    await this.updatePositionPopover();
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async show(top, left) {
+    this.updateOptionPosition(top, left);
+    this.opened = true;
+  }
+  /**
+   * Ancora a exibição do popOver a um elemento HTML.
+   */
+  async showUnder(element, options) {
+    if (options) {
+      this.options = options;
+    }
+    this.anchorElement = element;
+    this.opened = true;
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    this.opened = false;
+  }
+  /**
+   * Altera as opções.
+  */
+  async setOptions(options) {
+    Object.assign(this.options, options);
+  }
+  /**
+   * Altera o elemento de ancoragem.
+  */
+  async setAnchorElement(anchor) {
+    this.anchorElement = anchor;
+  }
+  parseSizePixel(sizePixel, defaultValue) {
+    if (!sizePixel) {
+      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
+    }
+    if (typeof sizePixel === "string") {
+      return Number(sizePixel.replace("px", ""));
+    }
+    return sizePixel !== null && sizePixel !== void 0 ? sizePixel : 0;
+  }
+  updateOptionPosition(top, left) {
+    Object.assign(this.options, {
+      horizontalGap: this.parseSizePixel(left, this.options.horizontalGap),
+      verticalGap: this.parseSizePixel(top, this.options.verticalGap),
+    });
+  }
+  getElement(element) {
+    if (typeof element === 'string') {
+      return document.getElementById(element);
+    }
+    return element;
+  }
+  getAnchorElement() {
+    if (!this.anchorElement) {
+      return this._host;
+    }
+    if (Array.isArray(this.anchorElement)) {
+      for (const element of this.anchorElement) {
+        const htmlElement = this.getElement(element);
+        if (htmlElement) {
+          return htmlElement;
+        }
+      }
+      return this._host;
+    }
+    return this.getElement(this.anchorElement);
+  }
+  async updatePositionPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    const currentAnchorElement = this.getAnchorElement();
+    const middleware = [flip(), shift({ padding: 5 })];
+    if (this.fitInViewport) {
+      middleware.push(size({
+        padding: 5,
+        apply: ({ availableWidth, availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.max(0, availableWidth)}px`,
+            maxHeight: `${Math.max(0, availableHeight)}px`
+          });
+        },
+      }));
+    }
+    await computePosition(currentAnchorElement, this._box, {
+      placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
+      middleware,
+      strategy: 'fixed',
+    }).then(({ x, y, placement }) => {
+      const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.options.horizontalGap : x - this.options.horizontalGap;
+      Object.assign(this._box.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+    });
+  }
+  hidePopover() {
+    if (!this._box) {
+      return;
+    }
+    this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
+    this.hideOverlay();
+    this.ezVisibilityChange.emit(false);
+  }
+  async openPopover() {
+    if (!this._box || !this.opened) {
+      return;
+    }
+    this._box.style.display = 'flex';
+    this._box.style.visibility = 'hidden';
+    if (this.useAnchorSize) {
+      const currentAnchorElement = this.getAnchorElement();
+      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
+      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
+      this._box.style.width = `${width}px`;
+    }
+    await this.updatePositionPopover();
+    this.openOverlay();
+    this.ezVisibilityChange.emit(true);
+    this._box.style.visibility = 'visible';
+  }
+  openOverlay() {
+    if (!this._overlay || !this._overlayIsActive) {
+      return;
+    }
+    this._overlay.style.display = 'block';
+  }
+  hideOverlay() {
+    if (!this._overlay) {
+      return;
+    }
+    this._overlay.style.display = 'none';
+  }
+  checkStatusOverlay() {
+    if (this.overlayType !== "none") {
+      return true;
+    }
+    if (this.overlayType === "none" && this.autoClose) {
+      return true;
+    }
+    return false;
+  }
+  handlePositionUpdate() {
+    if (!this.opened) {
+      return;
+    }
+    this.updatePositionPopover();
+  }
+  componentWillLoad() {
+    window.addEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.addEventListener('resize', this.handlePositionUpdate.bind(this), true);
+  }
+  componentDidLoad() {
+    this._overlayIsActive = this.checkStatusOverlay();
+    this._resizeObserver = new ResizeObserver(this.updatePositionPopover.bind(this));
+    this._resizeObserver.observe(this._box);
+    this.openPopover();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.handlePositionUpdate.bind(this), true);
+    window.removeEventListener('resize', this.handlePositionUpdate.bind(this), true);
+    this._resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: el => this._overlay = el, onClick: () => this.hide(), class: `popover__overlay popover__overlay--${this.overlayType}` }), h("section", { ref: el => this._box = el, class: {
+        "popover__box": true,
+        "popover__box--fit-content": this.boxWidth === "fit-content",
+        "popover__box--full-width": this.boxWidth !== "fit-content",
+      } }, h("slot", null))));
+  }
+  get _host() { return getElement(this); }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+};
+EzPopoverCore.style = ezPopoverCoreCss;
+
 const ezPopoverPlusCss = ":host{display:none}";
 
 const EzPopoverPlus = class {
@@ -498,4 +664,4 @@ const SearchList = class {
 };
 SearchList.style = searchListCss;
 
-export { EzCardItem as ez_card_item, EzMuiltiSelectionList as ez_multi_selection_list, EzPopoverPlus as ez_popover_plus, MultiSelectionBoxMessage as multi_selection_box_message, SearchList as search_list };
+export { EzMuiltiSelectionList as ez_multi_selection_list, EzPopoverCore as ez_popover_core, EzPopoverPlus as ez_popover_plus, MultiSelectionBoxMessage as multi_selection_box_message, SearchList as search_list };

package/dist/esm/ez-number-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { NumberUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-b5a15d4b.js';
 
 const ezNumberInputCss = ":host{--ez-number-input__min-width:0px;--ez-number-input__max-width:100%;display:block;width:100%}.number__input{height:100%;min-width:var(--ez-number-input__min-width);max-width:var(--ez-number-input__max-width)}";
 

package/dist/esm/ez-pagination.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-baa5e267.js';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-b5a15d4b.js';
 import '@sankhyalabs/core';
 
 const ezPaginationCss = ".sc-ez-pagination-h{--ez-pagination__info--color:var(--color--petroleum-500);--ez-pagination__info--margin-right:var(--space--sm);--ez-pagination__info--text-weight:var(--text-weight--medium);--ez-pagination__info--font-size:var(--text--medium);--ez-pagination__info-range--font-weight:var(--font-weight--bold);--ez-pagination__pages-option-padding:var(--space--nano);--ez-pagination__pages-option-color:var(--color--petroleum-500);--ez-pagination__pages-option-weight:var(--text-weight--medium);--ez-pagination__pages-option-size:var(--text--medium)}.pagination-container.sc-ez-pagination{display:flex;align-items:center;justify-content:flex-start;overflow:hidden}.info.sc-ez-pagination{color:var(--ez-pagination__info--color);margin-right:var(--ez-pagination__info--margin-right);font-weight:var(--ez-pagination__info--text-weight);font-size:var(--ez-pagination__info--font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.info-range.sc-ez-pagination{font-weight:var(--ez-pagination__info-range--font-weight)}.controls.sc-ez-pagination{display:flex;align-items:center;flex-shrink:0}.controls-compact.sc-ez-pagination{gap:var(--space--2xs)}.pages-options.sc-ez-pagination{display:flex;align-items:center;padding:0 var(--ez-pagination__pages-option-padding)}.page-button.sc-ez-pagination{color:var(--ez-pagination__pages-option-color);font-weight:var(--ez-pagination__pages-option-weight);font-size:var(--ez-pagination__pages-option-size);background-color:transparent;padding:0;border:none;cursor:pointer;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center}.current-page.sc-ez-pagination{color:var(--color--primary)}.page-info.sc-ez-pagination{margin:0 8px}.ellipsis.sc-ez-pagination{color:var(--ez-pagination__pages-option-color);font-weight:var(--ez-pagination__pages-option-weight);font-size:var(--ez-pagination__pages-option-size);min-width:24px;height:24px;display:flex;align-items:center;justify-content:center}";

package/dist/esm/ez-popover.entry.js

@@ -83,6 +83,13 @@ const EzPopover = class {
   async show(top, left) {
     this.float({ top, left });
   }
+  /**
+   * Exibe o ez-popover ancorado acima da posição de origem (usa `bottom` em vez de `top`).
+   * Aceita opcionalmente `left` ou `right` para alinhamento horizontal.
+   */
+  async showAbove(offsets) {
+    this.float(Object.assign({}, (offsets || {})));
+  }
   /**
    * Ancora a exibição do popOver a um elemento HTML.
    */
@@ -113,6 +120,7 @@ const EzPopover = class {
     this._box.style.top = "";
     this._box.style.left = "";
     this._box.style.right = "";
+    this._box.style.bottom = "";
     const useOverlay = this.overlayType !== "none";
     const overlayClassName = `ez-scrim ez-scrim--${this.overlayType}`;
     let floatingOptions = Object.assign(Object.assign({}, position), { autoClose: this.autoClose, innerClickTest: this.innerClickTest, backClickListener: this.backClickListener });

package/dist/esm/ez-popup.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { KeyboardManager, FloatingManager } from '@sankhyalabs/core';
-import { i as initI18n } from './index-41363fa6.js';
+import { i as initI18n } from './index-b5a15d4b.js';
 
 const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:auto;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center;margin-bottom:var(--space--16, 16px)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.popup_margin-top{margin-top:var(--space--16, 16px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 

package/dist/esm/ez-record-navigation.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-baa5e267.js';
+import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-b5a15d4b.js';
+
+const ezRecordNavigationCss = ":host{display:block}.record-navigation__container{display:flex;align-items:center;flex-grow:1;flex-shrink:1;justify-content:flex-end;flex-wrap:nowrap}.record-navigation__buttons-container{display:flex;gap:var(--space--8, 8px)}.record-navigation__container-label{font-size:var(--font-size--default, 14px);font-family:var(--font--pattern, 'Roboto');color:var(--color--gray-600, #1C1D22);text-shadow:0 0 var(--color--gray-500, #494A4E), 0 0 1px transparent;margin-right:var(--space--12, 12px);display:flex;align-items:center}.record-navigation-contracted{width:100px}.record-navigation-expanded{min-width:150px}.record-navigation__label{width:100%;white-space:nowrap}.record-navigation__divider{width:3px;height:15px;background-color:var(--color--gray-300, #C1C2C6);margin-inline:var(--space--8, 8px)}.record-navigation-text-right{flex-direction:row-reverse}";
+
+const EzRecordNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._dataUnitInitialized = false;
+    this.leftButtonDisabled = undefined;
+    this.rightButtonDisabled = undefined;
+    this.dataUnit = undefined;
+    this.primaryKeys = undefined;
+    this.textPosition = 'right';
+    this.disabled = false;
+  }
+  /**
+   * Navega para a página anterior.
+   */
+  async previousRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.previousRecord();
+  }
+  /**
+   * Navega para a próxima página.
+   */
+  async nextRecord() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.nextRecord();
+  }
+  onDataUnitChange() {
+    this.initializeDataUnit();
+  }
+  onDisabledChange() {
+    this.setStatusButtonPagination();
+  }
+  renderPageTitle() {
+    if (!this.primaryKeys) {
+      return null;
+    }
+    return this.primaryKeys.map((key, index) => {
+      var _a;
+      const fieldValue = this.dataUnit.getFieldValue(key);
+      const fieldLabel = (_a = this.dataUnit.getField(key)) === null || _a === void 0 ? void 0 : _a.label;
+      const isLast = index === this.primaryKeys.length - 1;
+      return (h(Fragment, null, h("ez-tooltip", { message: fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : fieldValue }, h("span", { class: "record-navigation__label", "aria-live": "polite", "aria-atomic": "true" }, fieldValue !== null && fieldValue !== void 0 ? fieldValue : '-')), !isLast && h("span", { class: "record-navigation__divider" })));
+    });
+  }
+  dataUnitObserver(action) {
+    switch (action.type) {
+      case Action.SELECTION_CHANGED:
+      case Action.PREVIOUS_SELECTED:
+      case Action.NEXT_SELECTED:
+        this.setStatusButtonPagination();
+        break;
+    }
+  }
+  getLeftButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasPrevious();
+  }
+  getRightButtonDisabledStatus() {
+    if (!this.dataUnit || this.disabled)
+      return true;
+    return !this.dataUnit.hasNext();
+  }
+  setStatusButtonPagination() {
+    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
+    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
+  }
+  initializeDataUnit() {
+    if (!this.dataUnit || this._dataUnitInitialized) {
+      return;
+    }
+    this.setStatusButtonPagination();
+    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
+    this.dataUnit.subscribe(this._dataUnitObserverBound);
+    this._dataUnitInitialized = true;
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  async connectedCallback() {
+    this.i18n = await initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "record-navigation__container": true,
+        "record-navigation-text-right": this.textPosition === 'right'
+      } }, h("div", { class: "record-navigation__container-label" }, this.renderPageTitle()), h("div", { id: "grid-record-navigation-tooltip", class: "record-navigation__buttons-container" }, h("ez-tooltip", { message: this.i18n("ez-record-navigation.previousRecord") }, h("ez-button", { iconName: "chevron-left", mode: "icon", isDisabled: this.leftButtonDisabled, onClick: () => this.previousRecord(), label: this.i18n("ez-record-navigation.previousRecord") })), h("ez-tooltip", { message: this.i18n("ez-record-navigation.nextRecord") }, h("ez-button", { iconName: "chevron-right", mode: "icon", isDisabled: this.rightButtonDisabled, onClick: () => this.nextRecord(), label: this.i18n("ez-record-navigation.nextRecord") }))))));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "dataUnit": ["onDataUnitChange"],
+    "disabled": ["onDisabledChange"]
+  }; }
+};
+EzRecordNavigation.style = ezRecordNavigationCss;
+
+export { EzRecordNavigation as ez_record_navigation };