@sankhyalabs/ezui 7.2.0-dev.2 → 7.2.0-dev.20

package/dist/collection/components/ez-image-input/ez-image-input.css

@@ -123,7 +123,22 @@
   border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
 }
 
-ez-button {
+.image-input__actions {
+  position: absolute;
+  top: var(--space--8);
+  right: var(--space--8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.image-input__container:hover .image-input__actions {
+  opacity: 1;
+}
+
+.image-input__remove-button {
   --ez-button--background-color: var(--ez-image-input--remove-button-bg);
   --ez-button--hover--background-color: var(--ez-image-input--remove-button-bg-hover);
   --ez-button--color: var(--ez-image-input--remove-button-color);
@@ -131,13 +146,14 @@ ez-button {
   --ez-button--hover--border: var(--ez-image-input--remove-button-border);
 }
 
-.image-input__remove-button {
-  position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.image-input__edit-button {
+  --ez-button--background-color: var(--ez-image-input--edit-button-bg);
+  --ez-button--hover--background-color: var(--ez-image-input--edit-button-bg-hover);
+  --ez-button--color: var(--ez-image-input--edit-button-color);
+  --ez-button--border: var(--ez-image-input--edit-button-border);
+  --ez-button--hover--border: var(--ez-image-input--edit-button-border);
+  --ez-button--left-icon--color: var(--ez-image-input--edit-button-color);
+  --ez-button--right-icon--color: var(--ez-image-input--edit-button-color);
 }
 
 .image-input__popup-content {

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

@@ -42,6 +42,11 @@ export class EzImageInput {
       }
       this.ezChange.emit('');
     };
+    this.handleEditImage = (event) => {
+      var _a;
+      event.stopPropagation();
+      (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
+    };
     this.handleClickDropZone = () => {
       var _a;
       if (this.enabled && !this._hasImage) {
@@ -133,7 +138,7 @@ export class EzImageInput {
         'image-input__container--disabled': !this.enabled,
         'image-input__container--dragging': this._isDragging,
         'image-input__container--has-image': this._hasImage
-      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') })))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
+      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("div", { class: "image-input__actions" }, h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') }), h("ez-button", { class: "image-input__edit-button", variant: "secondary", type: "button", mode: "icon", size: "small", iconName: "edit", onClick: this.handleEditImage, "aria-label": this.i18n('ez-image-input.editImage'), title: this.i18n('ez-image-input.editImage') }))))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
   }
   static get is() { return "ez-image-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -49,10 +49,10 @@ export class EzPopup {
   }
   manageOverlay() {
     if (this.opened) {
-      this._overlayId = FloatingManager.subscribeOverlayControl(this._popupRef);
+      this._overlayId = FloatingManager.subscribeOverlayControl(this._overlayRef);
     }
     else {
-      FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
+      FloatingManager.unsubscribeOverlayControl(this._overlayRef || this._overlayId);
     }
   }
   popUpFocus() {
@@ -147,7 +147,7 @@ export class EzPopup {
     return this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps))));
   }
   render() {
-    return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
+    return (h(Host, null, this.opened && (h("div", { class: "overlay", ref: ref => this._overlayRef = ref, tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
       h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: {
         "popup__expandable-content": true,
         "popup__overflow-y--auto": this.enabledScroll

package/dist/collection/components/ez-record-navigation/ez-record-navigation.css

@@ -0,0 +1,51 @@
+: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;
+}

package/dist/collection/components/ez-record-navigation/ez-record-navigation.js

@@ -0,0 +1,246 @@
+import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { Fragment, Host, h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
+export class EzRecordNavigation {
+  constructor() {
+    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;
+      default:
+        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") }))))));
+  }
+  static get is() { return "ez-record-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-record-navigation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-record-navigation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "DataUnit."
+        }
+      },
+      "primaryKeys": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chaves prim\u00E1rias dos registros, usadas para visualizar o registro atual."
+        }
+      },
+      "textPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-position",
+        "reflect": false,
+        "defaultValue": "'right'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Desabilita a navega\u00E7\u00E3o entre os registros."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "leftButtonDisabled": {},
+      "rightButtonDisabled": {}
+    };
+  }
+  static get methods() {
+    return {
+      "previousRecord": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a p\u00E1gina anterior.",
+          "tags": []
+        }
+      },
+      "nextRecord": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a pr\u00F3xima p\u00E1gina.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "dataUnit",
+        "methodName": "onDataUnitChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "onDisabledChange"
+      }];
+  }
+}

package/dist/collection/components/ez-scroller/EzScrollNavigationMode.js

@@ -0,0 +1,5 @@
+export var EzScrollNavigationMode;
+(function (EzScrollNavigationMode) {
+  EzScrollNavigationMode["SCROLLBAR"] = "scrollbar";
+  EzScrollNavigationMode["BUTTONS"] = "buttons";
+})(EzScrollNavigationMode || (EzScrollNavigationMode = {}));

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

@@ -1,6 +1,8 @@
 :host {
   /*@doc Define a cor de efeito de sombreado com componente.*/
   --ez-scroller--box-shadow-color: var(--background--body, #fafcff);
+  /*@doc Define o espaçamento entre os botões de navegação e o conteúdo.*/
+  --ez-scroller__nav-button--spacing: var(--space--8, 8px);
 
   /* scrollbar */
   /*@doc Define a cor da barra de rolagem do componente.*/
@@ -141,56 +143,160 @@
 
 .ez-scroller__wrapper--horizontal {
   flex-direction: row;
+  align-items: center;
+  gap: var(--ez-scroller__nav-button--spacing);
 }
 
 .ez-scroller__wrapper--vertical {
   flex-direction: column;
+  align-items: center;
+  gap: var(--ez-scroller__nav-button--spacing);
 }
 
-.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--buttons-mode {
+  display: flex;
+}
+
+.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--horizontal {
+  flex-direction: row;
+}
+
+.ez-scroller__wrapper--buttons-mode.ez-scroller__wrapper--vertical {
+  flex-direction: column;
+}
+
+/* Shadow effects - applied to wrapper when not in buttons mode */
+.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   content: "";
   display: flex;
   position: absolute;
   z-index: 1;
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   width: 24px;
   min-height: calc(100% - 10px);
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
   left: 0;
 
   /*public*/
   background: linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   right: 0;
 
   /*public*/
   background: linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   min-width: calc(100% - 10px);
   height: 24px;
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
   top: 0;
 
   /*public*/
   background: linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }
 
-.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+.ez-scroller__wrapper--vertical:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
   bottom: 0;
 
   /*public*/
   background: linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
-}
+}
+
+/* Navigation buttons */
+.ez-scroller__container--buttons-mode::-webkit-scrollbar {
+  display: none;
+}
+
+.ez-scroller__container--buttons-mode {
+  scrollbar-width: none;
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.ez-scroller__nav-button {
+  /*@doc Define o tamanho do botão de navegação.*/
+  --ez-scroller__nav-button--size: var(--space--32, 32px);
+  /*@doc Define o raio da borda do botão de navegação.*/
+  --ez-scroller__nav-button--border-radius: var(--border--radius-24, 24px);
+  /*@doc Define a largura do gradiente ao lado do botão.*/
+  --ez-scroller__nav-button--gradient-width: 40px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+
+  /*public*/
+  width: var(--ez-scroller__nav-button--size);
+  height: var(--ez-scroller__nav-button--size);
+  border-radius: var(--ez-scroller__nav-button--border-radius);
+}
+
+/* Gradient attached to previous button (left/top) */
+.ez-scroller__nav-button--previous::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--previous::after {
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  width: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to left, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__wrapper--vertical .ez-scroller__nav-button--previous::after {
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to top, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+/* Gradient attached to next button (right/bottom) */
+.ez-scroller__nav-button--next::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.ez-scroller__wrapper--horizontal .ez-scroller__nav-button--next::before {
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to right, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__wrapper--vertical .ez-scroller__nav-button--next::before {
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: var(--ez-scroller__nav-button--gradient-width);
+  background: linear-gradient(to bottom, transparent 0%, var(--ez-scroller--box-shadow-color, #fafcff) 100%);
+}
+
+.ez-scroller__nav-button ez-icon {
+  pointer-events: none;
+}