@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-74998.4 → 0.0.0-bugfix-dev-KB-75210.0

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-multi-selection-list/ez-multi-selection-list.css

@@ -1,9 +1,10 @@
 :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);
   max-height: calc(100vh - 350px);
 }
 
@@ -22,7 +23,6 @@
 }
 
 .multi-selection__list {
-  height: 235px;
   max-height: calc(100vh - 435px);
   overflow-y: auto;
   overflow-x: clip;

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

@@ -1,5 +1,6 @@
 :host {
   display: flex;
+  width: auto;
   /* General */
   /*@doc Define a camada em que o componente será exibido.*/
   --ez-popup-z-index: var(--elevation--24, 24);

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

@@ -9,6 +9,7 @@ export class EzPopup {
       "large": "col--sd-9",
       "x-large": "col--sd-11",
       "default": "ez-popup__size-limit--x-small",
+      "auto": "",
     };
     this.size = "medium";
     this.opened = false;
@@ -62,6 +63,8 @@ export class EzPopup {
     });
   }
   getGridSize() {
+    if (this.size === "auto")
+      return "";
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   handlePopupHeight() {
@@ -96,8 +99,8 @@ export class EzPopup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\"",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | \"auto\"",
+          "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -6,3 +6,18 @@
   background-color: transparent;
   max-width: 100%;
 }
+.ez-split-gutter__row {
+  cursor: ns-resize;
+}
+.ez-split-gutter__column {
+  cursor: ew-resize;
+}
+
+.structural__panel {
+  background: none;
+  box-shadow: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -7,6 +7,7 @@ export class SplitPanel {
     this._buildInProgress = false;
     this.direction = 'column';
     this.anchorToExpand = false;
+    this.structural = false;
   }
   rebuildLayout() {
     Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
@@ -62,6 +63,7 @@ export class SplitPanel {
       return;
     }
     this._element.style[this.direction === 'row' ? 'grid-template-rows' : 'grid-template-columns'] = this.getGridTemplate();
+    this.removeGuttersMargin();
     Split(this.getGutters());
   }
   handlePanelDragEnd() {
@@ -100,6 +102,12 @@ export class SplitPanel {
     const gutter = document.createElement('div');
     gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
+    if (this.direction === 'row') {
+      gutter.classList.add('ez-split-gutter__row');
+    }
+    else {
+      gutter.classList.add('ez-split-gutter__column');
+    }
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
     item.parentNode.insertBefore(gutter, item.nextSibling);
@@ -145,8 +153,52 @@ export class SplitPanel {
     });
     return template;
   }
+  removeGuttersMargin() {
+    if (this._items.length <= 1)
+      return;
+    if (this.direction == "column") {
+      this.removeGuttersMarginColumn();
+      return;
+    }
+    if (this.direction == "row") {
+      this.removeGuttersMarginRow();
+      return;
+    }
+  }
+  removeGuttersMarginColumn() {
+    this._items.forEach((item, index) => {
+      if (index == 0) {
+        item.style.marginRight = "0";
+        return;
+      }
+      if (index === this._items.length - 1) {
+        item.style.marginLeft = "0";
+        return;
+      }
+      item.style.marginRight = "0";
+      item.style.marginLeft = "0";
+      return;
+    });
+  }
+  removeGuttersMarginRow() {
+    if (this._items.length <= 1)
+      return;
+    this._items.forEach((item, index) => {
+      if (index == 0) {
+        item.style.marginBottom = "0";
+        return;
+      }
+      if (index === this._items.length - 1) {
+        item.style.marginTop = "0";
+        return;
+      }
+      item.style.marginBottom = "0";
+      item.style.marginTop = "0";
+      return;
+    });
+  }
   render() {
-    return h(Host, { style: this.getElementStyle() });
+    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}`, style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -196,6 +248,24 @@ export class SplitPanel {
         "attribute": "anchor-to-expand",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "structural": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o painel est\u00E1 sendo utilizado como estrutura para apresenta\u00E7\u00E3o de outro item"
+        },
+        "attribute": "structural",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   border-radius: var(--border--radius-medium);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow--xsmall);
   flex-direction: column;
   overflow: hidden;
   display: flex;
@@ -57,4 +57,15 @@ h3.ez-margin--small {
   margin-left: var(--space--small);
 }
 
-
+.structural__item {
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.content__item {
+  margin: var(--space--extra-small);
+  width: calc(100% - 2*(var(--space--extra-small)));
+  height: calc(100% - 2*(var(--space--extra-small)));
+}

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -6,6 +6,7 @@ export class SplitItem {
     this.enableExpand = true;
     this._expanded = false;
     this.size = undefined;
+    this.structural = false;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -17,7 +18,7 @@ export class SplitItem {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--small ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--small ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -86,6 +87,24 @@ export class SplitItem {
         },
         "attribute": "size",
         "reflect": false
+      },
+      "structural": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o painel est\u00E1 sendo utilizado como estrutura para apresenta\u00E7\u00E3o de outro item"
+        },
+        "attribute": "structural",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/custom-elements/index.d.ts

@@ -110,6 +110,12 @@ export const EzDialog: {
   new (): EzDialog;
 };
 
+interface EzDoubleList extends Components.EzDoubleList, HTMLElement {}
+export const EzDoubleList: {
+  prototype: EzDoubleList;
+  new (): EzDoubleList;
+};
+
 interface EzDropdown extends Components.EzDropdown, HTMLElement {}
 export const EzDropdown: {
   prototype: EzDropdown;