@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-75065.0 → 0.0.0-bugfix-dev-KB-83282.0

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, ObjectUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { CSSVarsUtils } from "../../utils";
 export class EzComboBox {
@@ -9,11 +9,13 @@ export class EzComboBox {
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
     this._lookupMode = false;
+    this.isOpen = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
+    this._textInputReady = undefined;
     this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
@@ -119,63 +121,6 @@ export class EzComboBox {
   async clearValue() {
     this.clearSearch();
   }
-  scrollListener() {
-    var _a;
-    if (this._floatingID == undefined) {
-      return;
-    }
-    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
-      this.hideOptions();
-    }
-    else {
-      window.requestAnimationFrame(() => {
-        this.updateListPosition();
-      });
-    }
-  }
-  updateListPosition() {
-    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
-    const elementRect = this._listWrapper.getBoundingClientRect();
-    const containerRect = this._listContainer.getBoundingClientRect();
-    const textInputRect = this._textInput.getBoundingClientRect();
-    const limitHeight = bottomLimit || window.innerHeight;
-    const neededHeight = containerRect.bottom + elementRect.height;
-    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
-      fromBottom = true;
-    }
-    if (!hardPosition) {
-      verticalPosition = verticalPosition || 0;
-      horizontalPosition = horizontalPosition || 0;
-      if (fromBottom) {
-        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
-      }
-      else {
-        verticalPosition += containerRect.top;
-      }
-      if (fromRight) {
-        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
-      }
-      else {
-        horizontalPosition += containerRect.left;
-      }
-    }
-    if (verticalPosition != undefined) {
-      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
-      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
-    }
-    if (horizontalPosition != undefined) {
-      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
-      this._listWrapper.style[fromRight ? "left" : "right"] = "";
-    }
-  }
-  getListPosition() {
-    if (this.listOptionsPosition) {
-      return this.listOptionsPosition;
-    }
-    return {
-      verticalPosition: 6
-    };
-  }
   isDifferentValues(firstValue, secondValue) {
     return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
   }
@@ -248,85 +193,24 @@ export class EzComboBox {
     }
     return 0;
   }
-  buildItem(opt, index) {
-    const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || opt.value;
-    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
-      ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
-      : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
-  }
   showOptions() {
     var _a, _b;
     if (!this.enabled)
       return;
-    if (this.isOptionsVisible()) {
-      return;
-    }
+    this.openPopover();
     const valueString = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
     const indexValue = this._visibleOptions.findIndex(option => option.value === valueString);
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true, backClickListener: () => this.hideOptions() });
     this.setFocus();
-    window.requestAnimationFrame(() => {
-      this.updateListPosition();
-      if (!this.listOptionsPosition) {
-        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-      }
-    });
   }
   hideOptions() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
+    var _a;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.hide();
     if (!!this._resizeObserver)
       this._resizeObserver.unobserve(this._textInput);
   }
-  isOptionsVisible() {
-    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
-  }
-  nextOption() {
-    if (!this.isOptionsVisible()) {
-      return;
-    }
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
-      if (liElem)
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-  }
-  selectCurrentOption(focusOnInput = true) {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
-      this._preSelection = undefined;
-    }
-    else {
-      this.controlListWithOnlyOne(focusOnInput);
-    }
-  }
-  controlListWithOnlyOne(focusOnInput = true) {
-    var _a;
-    const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
-    if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
-      let title = StringUtils.decodeHtmlEntities(source[0].label);
-      const option = {
-        value: source[0].value,
-        label: title,
-      };
-      this.selectOption(option, focusOnInput);
-    }
-  }
   updateSource(source) {
     this._startLoading = false;
     if (source instanceof Promise) {
@@ -352,12 +236,13 @@ export class EzComboBox {
     }
   }
   selectOption(newOption, focusOnInput = true) {
-    var _a, _b;
+    var _a, _b, _c;
     const currentValue = this.getSelectedOption(this.value);
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
       || (currentValue == undefined && newOption != undefined && "value" in newOption)) {
       const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
       this.value = adjustedOpt;
+      (_c = this._popover) === null || _c === void 0 ? void 0 : _c.hide();
     }
     else {
       this.resetOptions();
@@ -410,6 +295,11 @@ export class EzComboBox {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
+  componentDidRender() {
+    if (this._textInput) {
+      this._textInputReady = true;
+    }
+  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -428,15 +318,6 @@ export class EzComboBox {
     }
     this.loadOptions(SearchMode.PRELOAD);
   }
-  componentDidRender() {
-    var _a;
-    if (this._floatingID === undefined) {
-      this._listWrapper.remove();
-    }
-    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
-      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
-    });
-  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
@@ -444,10 +325,12 @@ export class EzComboBox {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
-        const { clientWidth } = this._listContainer;
-        if (clientWidth > 0 && !!this._listWrapper) {
-          this._listWrapper.style.width = `${clientWidth}px`;
-        }
+        if (!this._textInput)
+          return;
+        if (!this._comboBoxList)
+          return;
+        const textInputWidth = this._textInput.clientWidth;
+        this._comboBoxList.width = textInputWidth;
       });
     });
     if (this.autoFocus) {
@@ -456,6 +339,13 @@ export class EzComboBox {
       });
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.remove();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -495,65 +385,48 @@ export class EzComboBox {
     this.showOptions();
   }
   keyDownHandler(event) {
-    this._tabPressed = false;
-    if (event.ctrlKey) {
-      if (event.key === "f" || event.key === "F") {
-        this.loadOptions(SearchMode.ADVANCED);
-        //ATENÇÃO: Ctrl + F tem ação específica nos browsers
-        //nesse caso, como vamos abrir o popup de busca avançada,
-        //não é interessante deixar o evento propagar;
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        event.preventDefault();
-      }
+    var _a, _b, _c, _d, _e, _f;
+    if (event.ctrlKey && (event.key === "f" || event.key === "F")) {
+      this.loadOptions(SearchMode.ADVANCED);
+      event.preventDefault();
+      event.stopPropagation();
+      return;
     }
     switch (event.key) {
       case "ArrowDown":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
-        this.showOptions();
-        this.nextOption();
+        event.preventDefault();
+        if (this.canShowListOptions()) {
+          this.showOptions();
+          (_a = this._comboBoxList) === null || _a === void 0 ? void 0 : _a.nextOption();
+        }
         break;
       case "ArrowUp":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
-        this.showOptions();
-        this.previousOption();
+        event.preventDefault();
+        if (this.canShowListOptions()) {
+          this.showOptions();
+          (_b = this._comboBoxList) === null || _b === void 0 ? void 0 : _b.previousOption();
+        }
         break;
       case "Enter":
-        this.handleEventPropagation(event);
-        if (this.isOptionsVisible()) {
-          this.selectCurrentOption();
+        if (this.isOpen) {
+          event.preventDefault();
+          (_c = this._comboBoxList) === null || _c === void 0 ? void 0 : _c.selectCurrentOption();
         }
         break;
       case "Escape":
-        if (this.isOptionsVisible()) {
-          event.stopPropagation();
+        if (this.isOpen) {
+          event.preventDefault();
+          (_d = this._popover) === null || _d === void 0 ? void 0 : _d.hide();
         }
-        this.cancelPreselection();
-        this.resetOptions();
         break;
       case "Tab":
         this._tabPressed = true;
-        if (this.isOptionsVisible()) {
-          this.selectCurrentOption(false);
+        if (this.isOpen) {
+          (_e = this._comboBoxList) === null || _e === void 0 ? void 0 : _e.selectCurrentOption();
+          (_f = this._popover) === null || _f === void 0 ? void 0 : _f.hide();
         }
-        this.resetOptions();
         break;
     }
-    //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
-    //Por exemplo, quando o usuário dá um Enter, além de selecionar
-    //um valor, também significa que a ateração finalizou,
-    //e o contexto pode reagir (fechar um popup por exemplo).
-    //event.stopPropagation();
-  }
-  //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
-  handleEventPropagation(event) {
-    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
-      event.stopPropagation();
-    }
   }
   onTextInputFocusOutHandler() {
     if (this.hideErrorOnFocusOut)
@@ -562,14 +435,15 @@ export class EzComboBox {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
+  openPopover() {
+    var _a;
+    this.isOpen = true;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.show();
+  }
   render() {
+    var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
-      && this._visibleOptions.length === 0
-      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.showOptionValue
-      ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
-      : undefined, this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
@@ -929,11 +803,13 @@ export class EzComboBox {
   }
   static get states() {
     return {
+      "isOpen": {},
       "_preSelection": {},
       "_visibleOptions": {},
       "_startLoading": {},
       "_showLoading": {},
-      "_criteria": {}
+      "_criteria": {},
+      "_textInputReady": {}
     };
   }
   static get events() {
@@ -1062,15 +938,6 @@ export class EzComboBox {
         "methodName": "observeOptions"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "scroll",
-        "method": "scrollListener",
-        "target": "window",
-        "capture": true,
-        "passive": true
-      }];
-  }
 }
 var SearchMode;
 (function (SearchMode) {

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -1106,6 +1106,9 @@ export default class AgGridController {
     if (cfgColumn.customWidth != undefined) {
       return cfgColumn.customWidth;
     }
+    if (cfgColumn.width != undefined) {
+      return cfgColumn.width;
+    }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { Host, h } from '@stencil/core';
 import { ApplicationUtils } from '../../utils';
@@ -362,6 +362,20 @@ export class EzGrid {
         .then(() => this.resetPaginationState());
     }
   }
+  nextRecord() {
+    if (this.dataUnit) {
+      if (this.dataUnit.getSelectionInfo().records.length === 0) {
+        this.dataUnit.selectFirst();
+        return;
+      }
+      this.dataUnit.nextRecord();
+    }
+  }
+  previousRecord() {
+    if (this.dataUnit) {
+      this.dataUnit.previousRecord();
+    }
+  }
   resetPaginationState() {
     var _a;
     this._paginationChangedByKeyboard = false;
@@ -444,6 +458,7 @@ export class EzGrid {
     this._gridController.configFilterColumn(this._filterColumn);
     if (this.paginationCounterMode === 'auto')
       this._initHeaderOverflowWatcher();
+    this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
@@ -510,6 +525,7 @@ export class EzGrid {
     var _a, _b;
     (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
     (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.removeShortcuts();
   }
   connectedCallback() {
     var _a;
@@ -548,6 +564,45 @@ export class EzGrid {
       return "left__header-expanded";
     return "left__header-contracted";
   }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
+    this._keyboardManager
+      .bind("ctrl + .", () => {
+      if (!this._paginationInfo)
+        return;
+      this.nextRecord();
+    }, { description: "Avança para o próximo registro.", element: this._element })
+      .bind("ctrl + ,", () => {
+      if (!this._paginationInfo)
+        return;
+      this.previousRecord();
+    }, { description: "Retorna ao registro anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowLeft", () => {
+      if (!this._paginationInfo)
+        return;
+      const { currentPage } = this._paginationInfo;
+      if (currentPage > 0) {
+        this.previousPage();
+      }
+    }, { description: "Retorna a pagina anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowRight", () => {
+      if (!this._paginationInfo)
+        return;
+      const { hasMore } = this._paginationInfo;
+      if (hasMore) {
+        this.nextPage();
+      }
+    }, { description: "Avança para a próxima página.", element: this._element });
+  }
+  async removeShortcuts() {
+    if (this._keyboardManager) {
+      this._keyboardManager
+        .unbind("ctrl + .")
+        .unbind("ctrl + ,")
+        .unbind("ctrl + alt + ArrowLeft")
+        .unbind("ctrl + alt + ArrowRight");
+    }
+  }
   render() {
     var _a;
     return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: {

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

@@ -38,6 +38,10 @@ svg {
   height: 30px;
 }
 
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  color: var(--ez-icon--color);
+}
+
 /*
   START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
   WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED
@@ -46,7 +50,6 @@ svg {
   font-family: 'ez-icons' !important;
   font-size:16px;
   font-style:normal;
-  color: var(--ez-icon--color);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/dist/collection/components/ez-popover-plus/ez-popover-plus.css

@@ -1,67 +1,3 @@
 :host {
-
-  /* box */
-  /*@doc Define o raio da borda do popover.*/
-  --ez-popover__box--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define a sombra do popover.*/
-  --ez-popover__box--box-shadow: var(--shadow, 0px 0px 16px 0px #000);
-  /*@doc Define a cor de fundo do popover.*/
-  --ez-popover__box--background-color: var(--background--xlight, #fff);
-  /*@doc Define a camada de visibilidade do popover.*/
-  --ez-popover__box--z-index: var(--most-visible, 4);
-
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  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(--more-visible--2x, 3);
-}
-
-.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 {
-  /*private*/
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  z-index: var(--ez-popover__box--z-index);
-  flex-direction: column;
-
-  height: fit-content;
-
-  /*public*/
-  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);
 }