@sankhyalabs/ezui 5.22.0-dev.5 → 5.22.0-dev.51

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

@@ -25,10 +25,10 @@ export class EzList {
    */
   async scrollToTop() {
     if (this.useGroups) {
-      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
+      this._element.querySelector('.group-container').scrollTop = 0;
     }
     else {
-      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
+      this._element.querySelector('.items-container').scrollTop = 0;
     }
   }
   /**
@@ -148,8 +148,7 @@ export class EzList {
     }
   }
   buildIdDraggableListAndSelectable() {
-    const shadow = this._element.shadowRoot;
-    const draggableList = shadow.querySelectorAll('.draggable-list');
+    const draggableList = this._element.querySelectorAll('.draggable-list');
     draggableList === null || draggableList === void 0 ? void 0 : draggableList.forEach((draggable, index) => {
       var _a, _b;
       let suffix = 'draggableList';
@@ -159,7 +158,7 @@ export class EzList {
       }
       ElementIDUtils.addIDInfoIfNotExists(draggable, suffix);
     });
-    const selectable = shadow.querySelectorAll('.selectable-container');
+    const selectable = this._element.querySelectorAll('.selectable-container');
     selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
       ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
@@ -288,7 +287,7 @@ export class EzList {
     }
     if (this._draggingElement) {
       try {
-        this._element.shadowRoot.removeChild(this._draggingElement);
+        this._element.removeChild(this._draggingElement);
       }
       catch (err) { }
       this._draggingElement = undefined;
@@ -551,7 +550,7 @@ export class EzList {
       }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
   static get is() { return "ez-list"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["ez-list.css"]

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

@@ -1,6 +1,6 @@
 :host {
   /*@doc Define a camada em que o componente será exibido.*/
-  --ez-modal-z-index: var(--elevation--12, 12);;
+  --ez-modal-z-index: var(--elevation--22, 22);
   /*@doc Define o espaçamento vertical do conteúdo do modal.*/
   --ez-modal-vertical-padding: var(--space--large, 24px);
   /*@doc Define o padding entre o conteúdo e o modal */
@@ -23,6 +23,10 @@
   background: rgba(0, 4, 12, 0.1);
 }
 
+.modal__screen-none{
+  background: none;
+}
+
 .modal__screen-medium{
   backdrop-filter: blur(4px);
   background: rgba(0, 4, 12, 0.4)

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

@@ -8,6 +8,7 @@ export class EzModal {
     this.opened = true;
     this.closeEsc = false;
     this.closeOutsideClick = false;
+    this.closeOutsideLeave = false;
     this.scrim = "medium";
   }
   observeOpened() {
@@ -30,15 +31,29 @@ export class EzModal {
       .bind("Esc", () => this.closeModal());
   }
   componentDidRender() {
-    if (this.opened) {
-      this.ezOpenModal.emit();
+    this.modalFocus();
+  }
+  modalFocus() {
+    if (!this.opened) {
+      return;
     }
+    requestAnimationFrame(() => {
+      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
+      if (this._modalRef && slot === null) {
+        this._modalRef.focus();
+      }
+    });
   }
   onMouseDownHandler(event) {
     if (this.closeOutsideClick && event.target === this._overlay) {
       this.closeModal();
     }
   }
+  onMouseLeaveHandler() {
+    if (this.closeOutsideLeave) {
+      this.closeModal();
+    }
+  }
   render() {
     const positionSufix = this.align === "left" ? "left" : "right";
     const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
@@ -46,7 +61,7 @@ export class EzModal {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }
@@ -174,12 +189,30 @@ export class EzModal {
         "reflect": false,
         "defaultValue": "false"
       },
+      "closeOutsideLeave": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o modal ser\u00E1 fechado se o mouse sair para fora do conte\u00FAdo."
+        },
+        "attribute": "close-outside-leave",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "scrim": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"medium\" | \"light\"",
-          "resolved": "\"light\" | \"medium\"",
+          "original": "\"medium\" | \"light\" | \"none\"",
+          "resolved": "\"light\" | \"medium\" | \"none\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -11,6 +11,7 @@ export class EzModalContainer {
     this.okButtonLabel = undefined;
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
+    this.showCloseButton = true;
   }
   async handleEzModalAction(event) {
     var _a;
@@ -47,7 +48,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }
@@ -182,6 +183,24 @@ export class EzModalContainer {
         },
         "attribute": "ok-button-status",
         "reflect": false
+      },
+      "showCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a visibilidade do bot\u00E3o de fechar."
+        },
+        "attribute": "show-close-button",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js

@@ -96,7 +96,7 @@ export class EzMuiltiSelectionList {
   }
   async searchWithDataSource(searchArgument, fieldName) {
     const { argument, mode } = searchArgument;
-    if (mode !== 'PRELOAD') {
+    if (mode !== 'PRELOAD' && fieldName) {
       return this.dataSource.fetchData(argument, fieldName);
     }
   }

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

@@ -12,9 +12,11 @@ export class EzNumberInput {
     this.enabled = true;
     this.canShowError = true;
     this.errorMessage = undefined;
+    this.allowNegative = true;
     this.precision = undefined;
     this.prettyPrecision = undefined;
     this.mode = "regular";
+    this.autoFocus = false;
   }
   /**
    * Aplica o foco no campo.
@@ -155,15 +157,25 @@ export class EzNumberInput {
     const textValue = this.getTextValue(this.value) || '';
     if ((this._value || '') !== textValue) {
       this._value = textValue;
+      this._textInput.value = this._value;
     }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
+    let restrict = this.precision > 0 ? "0123456789,." : "0123456789";
+    if (this.allowNegative) {
+      restrict += '-';
+    }
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -266,6 +278,24 @@ export class EzNumberInput {
         "attribute": "error-message",
         "reflect": true
       },
+      "allowNegative": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false, o input n\u00E3o aceitar\u00E1 n\u00FAmeros negativos."
+        },
+        "attribute": "allow-negative",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "precision": {
         "type": "number",
         "mutable": false,
@@ -317,6 +347,24 @@ export class EzNumberInput {
         "attribute": "mode",
         "reflect": true,
         "defaultValue": "\"regular\""
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -8,7 +8,7 @@
   /*@doc Define a cor do texto do container do popup.*/
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
-  --ez-popup__container--padding: var(--space--large, 24px);
+  --ez-popup__container--padding: var(--space--md, 20px);
 
   /* Popup Header */
   /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
@@ -18,7 +18,7 @@
   /*@doc Define a família da fonte do título do popup.*/
   --ez-popup__title--font-family: var(--font-pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
-  --ez-popup__title--font-size: var(--title--extra-large, 24px);
+  --ez-popup__title--font-size: var(--title--large, 20px);
   /*@doc Define a cor da fonte do título do popup.*/
   --ez-popup__title--color: var(--title--primary, #2b3a54);
   /*@doc Define o peso da fonte do título do popup.*/
@@ -68,13 +68,17 @@
   border-radius: 12px;
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
-  padding: var(--ez-popup__container--padding)
+  padding: var(--ez-popup__container--padding);
 }
 
 .popup__container--auto {
   height: auto;
 }
 
+.popup__overflow-y--auto {
+  overflow-y: auto;
+}
+
 .popup__content {
   box-sizing: border-box;
   height: 100%;

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

@@ -15,6 +15,7 @@ export class EzPopup {
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
+    this.enabledScroll = false;
   }
   observeConfig() {
     this.manageOverflow();
@@ -49,14 +50,32 @@ export class EzPopup {
       FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
     }
   }
+  popUpFocus() {
+    if (!this.opened) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
+      if (this._popupRef && slot === null) {
+        this._popupRef.focus();
+      }
+    });
+  }
   getGridSize() {
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
+  handlePopupHeight() {
+    return this.heightMode === 'auto' ? 'popup__container--auto' : '';
+  }
+  handlePopupOverflowY() {
+    return this.enabledScroll ? 'popup__overflow-y--auto' : '';
+  }
   componentDidRender() {
     this.manageOverlay();
+    this.popUpFocus();
   }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : "") }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
+    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: `popup__container ${(this.handlePopupHeight())} ${this.handlePopupOverflowY()}` }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
       h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
   }
   static get is() { return "ez-popup"; }
@@ -161,6 +180,24 @@ export class EzPopup {
         },
         "attribute": "ez-title",
         "reflect": false
+      },
+      "enabledScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Possibilita scroll vertical no conte\u00FAdo interno do componente"
+        },
+        "attribute": "enabled-scroll",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -56,6 +56,7 @@
 .ez-scroller__container--vertical {
   overflow-y: scroll;
   flex-direction: column;
+  width: 100%;
   max-height: var(--ez-scroller__max-height);
 }
 

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

@@ -135,10 +135,10 @@ ez-icon {
   background-color: var(--ez-search--background-color--xlight);
   border-radius: var(--ez-search--border-radius);
   box-shadow: var(--shadow, 0px 0px 16px 0px #000);
-  padding: var(--ez-search--space--small);
 }
 
 .list-options {
+  margin-top: 0px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -146,20 +146,24 @@ ez-icon {
   display: flex;
   flex-direction: column;  
   scroll-behavior: smooth;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   scrollbar-width: thin;
-  gap: 3px;
 
   /*public*/
   scrollbar-color: var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background);
+
 }
 
 .list-options::-webkit-scrollbar {
   /*public*/
-  background-color: var(--ez-search__scrollbar--color-background);
-  width: var(--ez-search__scrollbar--width);
-  max-width: var(--ez-search__scrollbar--width);
-  min-width: var(--ez-search__scrollbar--width);
+  background-color: var(--scrollbar--background);
+  width: var(--space--small);
+  max-width: var(--space--small);
+  min-width: var(--space--small);
+  height: var(--space--small);
+  max-height: var(--space--small);
+  min-height: var(--space--small);
 }
 
 .list-options::-webkit-scrollbar-track {
@@ -196,7 +200,6 @@ ez-icon {
 
   /*public*/
   border-radius: var(--ez-search--border-radius-small);
-  padding: var(--ez-search--space--small);
   gap: var(--space--small, 6px);
 }
 
@@ -296,14 +299,14 @@ ez-icon {
 }
 
 .btn:disabled {
-  cursor: unset;
+  cursor: not-allowed;
 
   /*public*/
   color: var(--ez-search__btn-disabled--color);
 }
 
 .btn:disabled:hover {
-  cursor: unset;
+  cursor: not-allowed;
 
   /*public*/
   color: var(--ez-search__btn-disabled--color);
@@ -331,4 +334,12 @@ ez-text-input:hover .btn__close, ez-text-input:focus .btn__close {
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
+}
+
+@supports not (scrollbar-width: thin) {
+  /* Estilos para navegadores que NÃO suportam scrollbar-width */
+  .item {
+      /* Estilos alternativos, por exemplo, para navegadores que não suportam scrollbar-width */
+      padding-right: 8px;
+  }
 }