@sankhyalabs/ezui 2.7.3 → 2.7.5

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

@@ -19,6 +19,7 @@
   display: flex;
   cursor: grab;
   width: 100%;
+  overflow: hidden;
 }
 
 .dragging {
@@ -27,139 +28,165 @@
 
 .ez-scroller__container {
   display: flex;
-  flex-direction: column;
   overflow-y: hidden;
   overflow-x: hidden;
   scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
 
+.ez-scroller__container--both:not(.ez-scroller__container--locked),
+.ez-scroller__container:not(.ez-scroller__container--locked):hover {
   /*public*/
   scrollbar-color: var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background);
 }
 
-.ez-scroller__container--horizontal {
-  flex-direction: row;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  padding-bottom: var(--ez-scroller__scrollbar--width);
-  margin-bottom: calc(var(--ez-scroller__scrollbar--width) * -1);
-}
-
-.ez-scroller__container--horizontal:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
-  overflow-x: overlay;
-}
-
-.ez-scroller__container--horizontal.ez-scroller__container--no-overlay {
-  padding-bottom: 8px;
-  margin-bottom: -8px;
+.ez-scroller__container--both {
+  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
-.ez-scroller__container--horizontal.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover {
-  overflow-x: auto;
-  padding-bottom: 0px;
+.ez-scroller__container--horizontal {
+  overflow-x: scroll;
+  flex-direction: row;
 }
 
 .ez-scroller__container--vertical {
-  overflow-y: hidden;
-  overflow-x: hidden;
-  padding-right: var(--ez-scroller__scrollbar--width);
-  margin-right: calc(var(--ez-scroller__scrollbar--width) * -1);
-}
-
-.ez-scroller__container--vertical:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover {
-  overflow-y: overlay;
-}
-
-.ez-scroller__container--vertical.ez-scroller__container--no-overlay {
-  padding-right: 8px;
-  margin-right: -8px;
-}
-
-.ez-scroller__container--vertical.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover {
-  overflow-y: auto;
-  padding-right: 0px;
-}
-
-.ez-scroller__container--both {
-  overflow: auto;
+  overflow-y: scroll;
+  flex-direction: column;
 }
 
 .ez-scroller__container::-webkit-scrollbar {
+  background-color: transparent;
+
   /*public*/
-  background-color: var(--ez-scroller__scrollbar--color-background);
   width: var(--ez-scroller__scrollbar--width);
   height: var(--ez-scroller__scrollbar--width);
   max-width: var(--ez-scroller__scrollbar--width);
   min-width: var(--ez-scroller__scrollbar--width);
 }
 
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+}
+
 .ez-scroller__container::-webkit-scrollbar-track {
   visibility: hidden;
+  background-color: transparent;
 
   /*public*/
-  background-color: var(--ez-scroller__scrollbar--color-background);
   border-radius: var(--ez-scroller__scrollbar--border-radius);
 }
 
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-background);
+}
+
 .ez-scroller__container::-webkit-scrollbar-thumb {
+  background-color: transparent;
+
   /*public*/
-  background-color: var(--ez-scroller__scrollbar--color-default);
   border-radius: var(--ez-scroller__scrollbar--border-radius);
 }
 
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-scroller__scrollbar--color-default);
+}
+
 .ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,
 .ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: transparent;
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover {
   /*public*/
   background-color: var(--ez-scroller__scrollbar--color-hover);
 }
 
 .ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,
 .ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active {
+  background-color: transparent;
+}
+
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,
+.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active {
   /*public*/
   background-color: var(--ez-scroller__scrollbar--color-clicked);
 }
 
-.ez-scroller__shadow-start,
-.ez-scroller__shadow-end {
+.ez-scroller__wrapper {
   display: flex;
   position: relative;
-  z-index: 0;
-  background: var(--ez-scroller--box-shadow-color);
+  width: 100%;
+  height: 100%;
 }
 
-.ez-scroller__shadow-start--horizontal,
-.ez-scroller__shadow-end--horizontal {
-  width: 10px;
-  min-height: 100%;
-  top: -13px;
+.ez-scroller__wrapper--horizontal {
+  flex-direction: row;
+  width: 100%;
+  height: auto;
 }
 
-.ez-scroller__shadow-start--horizontal {
-  box-shadow: var(--ez-scroller--box-shadow-color) -4px 0px 6px 10px;
-  margin-right: -10px;
+.ez-scroller__wrapper--vertical {
+  flex-direction: column;
+  width: auto;
+  height: 100%;
 }
 
-.ez-scroller__shadow-end--horizontal {
-  box-shadow: var(--ez-scroller--box-shadow-color) 4px 0px 6px 10px;
-  margin-left: -10px;
+.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--shadow-end::after {
+  content: "";
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
 
-.ez-scroller__shadow-start--vertical,
-.ez-scroller__shadow-end--vertical {
-  min-width: 100%;
-  height: 10px;
-  left: -13px;
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after {
+  width: 24px;
+  min-height: calc(100% - 10px);
 }
 
-.ez-scroller__shadow-start--vertical {
-  box-shadow: var(--ez-scroller--box-shadow-color) 0px -4px 6px 10px;
-  margin-bottom: -10px;
+.ez-scroller__wrapper--horizontal.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__shadow-end--vertical {
-  box-shadow: var(--ez-scroller--box-shadow-color) 0px 4px 6px 10px;
-  margin-top: -10px;
+.ez-scroller__wrapper--horizontal.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__shadow--hidden {
-  display: none;
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after {
+  min-width: calc(100% - 10px);
+  height: 24px;
+}
+
+.ez-scroller__wrapper--vertical.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 {
+  bottom: 0;
+
+  /*public*/
+  background: linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%);
 }

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

@@ -1,10 +1,10 @@
-import { JSUtils, UserAgentUtils } from '@sankhyalabs/core';
+import { JSUtils } from '@sankhyalabs/core';
 import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
 import { EzScrollDirection } from './EzScrollDirection';
 export class EzScroller {
   constructor() {
-    this._classHidden = "ez-scroller__shadow--hidden";
-    this.isFirefox = false;
+    this._shadowStart = "ez-scroller__wrapper--shadow-start";
+    this._shadowEnd = "ez-scroller__wrapper--shadow-end";
     this.isActive = false;
     /**
      * Define se o `scroll` estará bloqueado.
@@ -20,15 +20,11 @@ export class EzScroller {
   //---------------------------------------------
   getContainerClass() {
     return `ez-scroller__container ez-scroller__container--${this.direction}
-      ${this.locked ? " ez-scroller__container--locked" : ""}
-      ${this.isFirefox && this.isActive ? " ez-scroller__container--no-overlay" : ""}
+      ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
     `;
   }
-  getShadowStartClass() {
-    return `ez-scroller__shadow-start ez-scroller__shadow-start--${this.direction}`;
-  }
-  getShadowEndClass() {
-    return `ez-scroller__shadow-end ez-scroller__shadow-end--${this.direction}`;
+  getWrapperClass() {
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
   }
   finishDrag() {
     if (this._controller) {
@@ -37,38 +33,40 @@ export class EzScroller {
   }
   updateShadow() {
     const container = this._container;
-    if (container) {
-      let remainingScroll;
-      if (this.direction === EzScrollDirection.HORIZONTAL) {
-        const { scrollWidth, clientWidth, scrollLeft } = container;
-        remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
-        this._startHidden = container.scrollLeft > 0;
-      }
-      else if (this.direction === EzScrollDirection.VERTICAL) {
-        const { scrollHeight, clientHeight, scrollTop } = container;
-        remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
-        this._startHidden = container.scrollTop > 0;
-      }
-      this._endHidden = remainingScroll > 0;
-      this.isActive = this._startHidden || this._endHidden;
-      const shadowPositions = ["", "start", "end", "middle"];
-      const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
-      if (currentPosition === "start") {
-        this._shadowStart.classList.remove(this._classHidden);
-        this._shadowEnd.classList.add(this._classHidden);
-      }
-      else if (currentPosition === "end") {
-        this._shadowStart.classList.add(this._classHidden);
-        this._shadowEnd.classList.remove(this._classHidden);
-      }
-      else if (currentPosition === "middle") {
-        this._shadowStart.classList.remove(this._classHidden);
-        this._shadowEnd.classList.remove(this._classHidden);
-      }
-      else {
-        this._shadowStart.classList.add(this._classHidden);
-        this._shadowEnd.classList.add(this._classHidden);
-      }
+    const wrapper = this._wrapper;
+    if (container == undefined || wrapper == undefined) {
+      return;
+    }
+    let remainingScroll;
+    if (this.direction === EzScrollDirection.HORIZONTAL) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+    }
+    else if (this.direction === EzScrollDirection.VERTICAL) {
+      const { scrollHeight, clientHeight, scrollTop } = container;
+      remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+      this._startHidden = container.scrollTop > 0;
+    }
+    this._endHidden = remainingScroll > 0;
+    this.isActive = this._startHidden || this._endHidden;
+    const shadowPositions = ["", "start", "end", "middle"];
+    const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
+    if (currentPosition === "start") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
+    }
+    else if (currentPosition === "end") {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else if (currentPosition === "middle") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
     }
   }
   configResize() {
@@ -82,6 +80,10 @@ export class EzScroller {
     this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateShadow.bind(this), 200));
     this._resizeObserver.observe(container);
   }
+  getContainerElement() {
+    return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() },
+      h("slot", null));
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -120,14 +122,11 @@ export class EzScroller {
       }
     }
   }
-  componentDidLoad() {
-    this.isFirefox = UserAgentUtils.isFirefox();
-  }
   componentDidRender() {
     var _a, _b;
     if (this.direction === EzScrollDirection.BOTH) {
-      (_a = this._shadowStart) === null || _a === void 0 ? void 0 : _a.classList.add(this._classHidden);
-      (_b = this._shadowEnd) === null || _b === void 0 ? void 0 : _b.classList.add(this._classHidden);
+      (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
+      (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
       return;
     }
     if (this._container && this.activeShadow) {
@@ -137,13 +136,9 @@ export class EzScroller {
     }
   }
   render() {
-    return (h(Host, null,
-      this.activeShadow &&
-        h("span", { ref: ref => this._shadowStart = ref, class: this.getShadowStartClass() }),
-      h("div", { ref: ref => this._container = ref, class: this.getContainerClass() },
-        h("slot", null)),
-      this.activeShadow &&
-        h("span", { ref: ref => this._shadowEnd = ref, class: this.getShadowEndClass() })));
+    return (h(Host, null, this.activeShadow
+      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+      : this.getContainerElement()));
   }
   static get is() { return "ez-scroller"; }
   static get encapsulation() { return "shadow"; }
@@ -214,7 +209,6 @@ export class EzScroller {
     }
   }; }
   static get states() { return {
-    "isFirefox": {},
     "isActive": {}
   }; }
   static get listeners() { return [{