@sankhyalabs/ezui 7.2.1-rc.1 → 7.3.0

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

@@ -6,8 +6,6 @@
   /*@doc Define o padding entre o conteúdo e o modal */
   --ez-modal-content-padding: 24px;
   display: block;
-  /*@doc Define a largura mínima do conteúdo do modal */
-  --ez-modal-content-min-width: auto;
 }
 
 .modal {
@@ -75,7 +73,6 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   max-height: 100%;
-  min-width: var(--ez-modal-content-min-width);
   height: 100%;
   overflow-y: auto;
   background-color: rgb(255, 255, 255);

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

@@ -78,13 +78,6 @@ export class EzPopover {
   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.
    */
@@ -115,7 +108,6 @@ export class EzPopover {
     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 });
@@ -317,25 +309,6 @@ export class EzPopover {
           "tags": []
         }
       },
-      "showAbove": {
-        "complexType": {
-          "signature": "(offsets?: { bottom?: string; left?: string; right?: string; }) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Exibe o ez-popover ancorado acima da posi\u00E7\u00E3o de origem (usa `bottom` em vez de `top`).\nAceita opcionalmente `left` ou `right` para alinhamento horizontal.",
-          "tags": []
-        }
-      },
       "showUnder": {
         "complexType": {
           "signature": "(element: HTMLElement, options?: IEzPopoverAnchorOptions) => Promise<void>",

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

@@ -1,8 +1,6 @@
 :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.*/
@@ -143,160 +141,56 @@
 
 .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--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 {
+.ez-scroller__wrapper--shadow-start::before,
+.ez-scroller__wrapper--shadow-end::after {
   content: "";
   display: flex;
   position: absolute;
   z-index: 1;
 }
 
-.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 {
+.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__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
+.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__wrapper--horizontal:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
+.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__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 {
+.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:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-start::before {
+.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:not(.ez-scroller__wrapper--buttons-mode).ez-scroller__wrapper--shadow-end::after {
+.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%);
-}
-
-/* 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;
-}
+}

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

@@ -1,64 +1,25 @@
 import { JSUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
-import initI18n from '../../utils/i18n';
 import { EzScrollDirection } from './EzScrollDirection';
-import { EzScrollNavigationMode } from './EzScrollNavigationMode';
 export class EzScroller {
   constructor() {
     this._shadowStart = "ez-scroller__wrapper--shadow-start";
     this._shadowEnd = "ez-scroller__wrapper--shadow-end";
-    this._startHidden = undefined;
-    this._endHidden = undefined;
     this.isActive = false;
     this.direction = undefined;
     this.locked = false;
     this.activeShadow = false;
-    this.navigationMode = EzScrollNavigationMode.SCROLLBAR;
-    this.scrollAmount = 200;
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
-  scrollToPrevious() {
-    if (!this._container)
-      return;
-    const scrollOptions = {
-      behavior: 'smooth'
-    };
-    if (this.direction === EzScrollDirection.HORIZONTAL) {
-      scrollOptions.left = Math.max(0, this._container.scrollLeft - this.scrollAmount);
-    }
-    else if (this.direction === EzScrollDirection.VERTICAL) {
-      scrollOptions.top = Math.max(0, this._container.scrollTop - this.scrollAmount);
-    }
-    this._container.scrollTo(scrollOptions);
-  }
-  scrollToNext() {
-    if (!this._container)
-      return;
-    const scrollOptions = {
-      behavior: 'smooth'
-    };
-    if (this.direction === EzScrollDirection.HORIZONTAL) {
-      scrollOptions.left = this._container.scrollLeft + this.scrollAmount;
-    }
-    else if (this.direction === EzScrollDirection.VERTICAL) {
-      scrollOptions.top = this._container.scrollTop + this.scrollAmount;
-    }
-    this._container.scrollTo(scrollOptions);
-  }
   getContainerClass() {
-    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
     return `ez-scroller__container ez-scroller__container--${this.direction}
       ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
-      ${isButtonMode ? " ez-scroller__container--buttons-mode" : ""}
     `;
   }
   getWrapperClass() {
-    const isButtonMode = this.navigationMode === EzScrollNavigationMode.BUTTONS;
-    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}
-      ${isButtonMode ? " ez-scroller__wrapper--buttons-mode" : ""}
-    `;
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
   }
   finishDrag() {
     if (this._controller) {
@@ -86,33 +47,27 @@ export class EzScroller {
     this.updateShadow();
   }
   updateShadow() {
-    if (!this.activeShadow) {
-      return;
-    }
-    // Apply shadow classes to container when in buttons mode, otherwise to wrapper
-    const targetElement = this.navigationMode === EzScrollNavigationMode.BUTTONS
-      ? this._container
-      : this._wrapper;
-    if (targetElement == undefined) {
+    const wrapper = this._wrapper;
+    if (!this.activeShadow || wrapper == undefined) {
       return;
     }
     const shadowPositions = ["", "start", "end", "middle"];
     const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
     if (currentPosition === "start") {
-      targetElement.classList.add(this._shadowStart);
-      targetElement.classList.remove(this._shadowEnd);
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
     }
     else if (currentPosition === "end") {
-      targetElement.classList.remove(this._shadowStart);
-      targetElement.classList.add(this._shadowEnd);
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
     }
     else if (currentPosition === "middle") {
-      targetElement.classList.add(this._shadowStart);
-      targetElement.classList.add(this._shadowEnd);
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
     }
     else {
-      targetElement.classList.remove(this._shadowStart);
-      targetElement.classList.remove(this._shadowEnd);
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
     }
   }
   configResize() {
@@ -136,17 +91,6 @@ export class EzScroller {
     return this._container.scrollWidth > this._container.clientWidth
       || this._container.scrollHeight > this._container.clientHeight;
   }
-  renderNavigationButtons() {
-    if (this.navigationMode !== EzScrollNavigationMode.BUTTONS || this.direction === EzScrollDirection.BOTH) {
-      return null;
-    }
-    const isHorizontal = this.direction === EzScrollDirection.HORIZONTAL;
-    const previousIconName = isHorizontal ? "arrow_back" : "arrow-up";
-    const nextIconName = isHorizontal ? "arrow-forward" : "arrow-down";
-    const previousButton = this._startHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--previous", onClick: () => this.scrollToPrevious(), title: this.i18n('ez-scroller.previousButton'), "aria-label": this.i18n('ez-scroller.previousButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: previousIconName }, h("ez-icon", { iconName: previousIconName }))) : null;
-    const nextButton = this._endHidden ? (h("ez-button", { class: "ez-scroller__nav-button ez-scroller__nav-button--next", onClick: () => this.scrollToNext(), title: this.i18n('ez-scroller.nextButton'), "aria-label": this.i18n('ez-scroller.nextButton'), type: "button", variant: "tertiary", mode: 'icon', suppressAnimation: true, iconName: nextIconName }, h("ez-icon", { iconName: nextIconName }))) : null;
-    return { previousButton, nextButton };
-  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -185,9 +129,6 @@ export class EzScroller {
       }
     }
   }
-  async componentWillLoad() {
-    this.i18n = await initI18n();
-  }
   componentDidRender() {
     var _a, _b;
     if (this._container == undefined) {
@@ -204,11 +145,8 @@ export class EzScroller {
     this.updateScroller();
   }
   render() {
-    const buttons = this.navigationMode === EzScrollNavigationMode.BUTTONS ? this.renderNavigationButtons() : null;
-    return (h(Host, null, this.activeShadow || this.navigationMode === EzScrollNavigationMode.BUTTONS
-      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, buttons === null || buttons === void 0 ? void 0 :
-        buttons.previousButton, this.getContainerElement(), buttons === null || buttons === void 0 ? void 0 :
-        buttons.nextButton)
+    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"; }
@@ -282,54 +220,11 @@ export class EzScroller {
         "attribute": "active-shadow",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "navigationMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "EzScrollNavigationMode",
-          "resolved": "EzScrollNavigationMode.BUTTONS | EzScrollNavigationMode.SCROLLBAR",
-          "references": {
-            "EzScrollNavigationMode": {
-              "location": "import",
-              "path": "./EzScrollNavigationMode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o modo de navega\u00E7\u00E3o: 'scrollbar' (padr\u00E3o) ou 'buttons' (bot\u00F5es de carrossel)."
-        },
-        "attribute": "navigation-mode",
-        "reflect": false,
-        "defaultValue": "EzScrollNavigationMode.SCROLLBAR"
-      },
-      "scrollAmount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define a quantidade de pixels que ser\u00E1 rolado ao clicar nos bot\u00F5es de navega\u00E7\u00E3o."
-        },
-        "attribute": "scroll-amount",
-        "reflect": false,
-        "defaultValue": "200"
       }
     };
   }
   static get states() {
     return {
-      "_startHidden": {},
-      "_endHidden": {},
       "isActive": {}
     };
   }

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

@@ -4,9 +4,6 @@
   --ez-search--height: 42px;
   /*@doc Define largura do input.*/
   --ez-search--width: 100%;
-  /*@doc Define largura mínima do input.*/
-  --ez-search--min-width: 0;
-
   /*@doc Define largura do slot do ícone do input.*/
   --ez-search__icon--width: 48px;
 
@@ -75,7 +72,6 @@
 
   /*public*/
   width: var(--ez-search--width);
-  min-width: var(--ez-search--min-width);
 }
 
 ez-icon {