@sankhyalabs/ezui 5.22.0-dev.9 → 5.22.0-dev.90

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

@@ -0,0 +1,85 @@
+/**
+ * O dragElement é posicionado ANTERIORMENTE ao targetIndex.
+ * Ex: no array: ["A", "B", "C", "D", "E"]
+ * se o dragItem for "B" e o targetIndex 3 (referente à "D"),
+ * "B" será posicionado logo antes de "D".
+ * O resultado será: ["A", "C", "B", "D", "E"]
+ *
+ * @param configs
+ */
+export function processListOnDrop(configs) {
+  let newList;
+  if (hasToMoveMultipleItems(configs)) {
+    newList = processMoveMultipleItems(configs);
+  }
+  else {
+    newList = processMoveSingleItem(configs);
+    configs.clearSelection();
+  }
+  return newList;
+}
+function hasToMoveMultipleItems(configs) {
+  const { enableMultipleSelection, listItems, dragItem, moveToFinal, targetIndex } = configs;
+  if (!enableMultipleSelection)
+    return false;
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  if (selectedItemsIndexes.length <= 1)
+    return false;
+  if (!selectedItemsIndexes.includes(dragItem.index))
+    return false;
+  if (!isContinuousSequence(selectedItemsIndexes))
+    return false;
+  if (moveToFinal)
+    return true;
+  return !selectedItemsIndexes.includes(targetIndex);
+}
+function processMoveSingleItem(configs) {
+  const { listItems, dragItem, targetIndex, moveToFinal } = configs;
+  const newList = [...listItems];
+  newList.splice(dragItem.index, 1);
+  if (moveToFinal) {
+    newList.push(dragItem.item);
+  }
+  else {
+    const adjustedIndex = (targetIndex > dragItem.index) ? Math.max(0, targetIndex - 1) : targetIndex;
+    newList.splice(adjustedIndex, 0, dragItem.item);
+  }
+  return newList;
+}
+function processMoveMultipleItems(configs) {
+  const { listItems, moveToFinal, targetIndex } = configs;
+  const selectedItems = listItems.filter(item => item.selected);
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  const minorIndex = Math.min(...selectedItemsIndexes);
+  const majorIndex = Math.max(...selectedItemsIndexes);
+  const qtdToMove = selectedItems.length;
+  const newList = [...listItems];
+  newList.splice(minorIndex, qtdToMove);
+  if (moveToFinal) {
+    newList.push(...selectedItems);
+  }
+  else {
+    let adjustedIndex = (targetIndex > majorIndex) ? Math.max(0, targetIndex - qtdToMove) : targetIndex;
+    newList.splice(adjustedIndex, 0, ...selectedItems);
+  }
+  return newList;
+}
+export function isContinuousSequence(numbers) {
+  if (numbers.length === 0)
+    return false;
+  const sortedNumbers = [...numbers].sort((a, b) => a - b);
+  for (let i = 1; i < sortedNumbers.length; i++) {
+    if (sortedNumbers[i] !== sortedNumbers[i - 1] + 1) {
+      return false;
+    }
+  }
+  return true;
+}
+function getSelectedIndices(listItems) {
+  return listItems.reduce((indices, item, index) => {
+    if (item.selected) {
+      indices.push(index);
+    }
+    return indices;
+  }, []);
+}

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 */
@@ -16,13 +16,18 @@
   left: 0px;
   width: 100%;
   box-sizing: border-box;
-  height: 100vh;
+  height: 100vh;  
+  outline: none;
 }
 
 .modal__screen-light{
   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

@@ -31,9 +31,18 @@ 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) {
@@ -202,8 +211,8 @@ export class EzModal {
         "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.css

@@ -46,6 +46,7 @@
   cursor: pointer;
   background-color: transparent;
   border: none;
+  outline: none;
 }
 
 .ez-modal-container__close-icon {

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

@@ -48,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))), (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() })));
+    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"; }

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

@@ -1,9 +1,11 @@
 :host {
   --ez-check--outter-gap: 0px;
+  --ez-multi-selection-default-height: 322px;
 
   display: block;
   width: 304px;
-  height: 322px;
+  height: var(--ez-multi-selection-default-height);
+  min-height: fit-content;
   max-height: calc(100vh - 350px);
 }
 
@@ -13,7 +15,6 @@
 
 .multi-selection__content-options {
   position: relative;
-  top: -12px;
   left: -4px;
 }
 
@@ -23,7 +24,6 @@
 }
 
 .multi-selection__list {
-  height: 235px;
   max-height: calc(100vh - 435px);
   overflow-y: auto;
   overflow-x: clip;

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.css

@@ -1,8 +1,16 @@
 :host {
+  /*@doc Define a largura maxima do componente.*/
+  --ez-number-input__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-number-input__max-width: 100%;
+
   display: block;
   width: 100%;
 }
 
 .number__input {
   height: 100%;
+
+  min-width: var(--ez-number-input__min-width);
+  max-width: var(--ez-number-input__max-width);
 }

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-popover-plus/ez-popover-plus.css

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