@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.2

package/dist/collection/components/ez-split-button/test/dropdownItems.js

@@ -0,0 +1,42 @@
+export const dropdownItems = [
+  {
+    id: "1",
+    label: "label1",
+    type: 'item',
+    iconName: "iconName1",
+    subAction: {
+      id: "1",
+      label: "subActionLabel1",
+      type: "primary"
+    },
+    group: "group"
+  }, {
+    id: "2",
+    label: "label2",
+    type: 'item',
+    iconName: "iconName2",
+    subAction: null,
+    group: null,
+  }, {
+    id: "3",
+    label: "label3",
+    type: 'item',
+    iconName: "iconName3",
+    subAction: null,
+    group: null,
+  }, {
+    id: "",
+    label: "",
+    type: 'divider',
+    iconName: "",
+    subAction: null,
+    group: null,
+  }, {
+    id: "4",
+    label: "label4",
+    type: 'item',
+    iconName: "iconName4",
+    subAction: null,
+    group: null,
+  }
+];

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

@@ -1,8 +1,7 @@
-  :host {
+:host {
+}
 
-  }
-
-  .ez-split-gutter {
-    cursor: grab;
-    background-color: transparent;
-  }
+.ez-split-gutter {
+  cursor: grab;
+  background-color: transparent;
+}

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

@@ -1,14 +1,27 @@
-import { h, Host } from "@stencil/core";
+import { StringUtils } from '@sankhyalabs/core';
+import { Host, h } from '@stencil/core';
 import Split from 'split-grid';
-import { StringUtils } from "@sankhyalabs/core";
 export class SplitPanel {
   constructor() {
     this._items = [];
+    this._buildInProgress = false;
     this.direction = 'column';
+    this.anchorToExpand = false;
   }
-  componentDidLoad() {
+  rebuildLayout() {
+    Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
+      el.remove();
+    });
+    Array.from(this._element.getElementsByTagName("EzSplitPanel")).reverse().forEach(el => {
+      el['rebuildLayout']();
+    });
+    this.buildItems();
+    this.initSplit();
+  }
+  buildItems() {
     this._panelID = StringUtils.generateUUID();
     this._element.dataset.panelId = this._panelID;
+    this._element.dataset.uniqueId = "EzSplitPanel";
     let itemsElements = Array.from(this._element.children);
     this._items = itemsElements.filter(child => { var _a; return ((_a = child.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'EZ-SPLIT-ITEM'; });
     let trackCount = 1;
@@ -19,7 +32,30 @@ export class SplitPanel {
       }
       trackCount += 2;
     });
+  }
+  componentDidLoad() {
+    this.buildItems();
     this.initSplit();
+    this._mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList' && this._buildInProgress === false) {
+          this._buildInProgress = true;
+          window.requestAnimationFrame(() => {
+            this.rebuildLayout();
+          });
+          window.requestAnimationFrame(() => this._buildInProgress = false);
+          break;
+        }
+      }
+    });
+    // Configure o observer para observar mudanças nos filhos
+    this._mutationObserver.observe(this._element, { childList: true, subtree: false });
+  }
+  disconnectedCallback() {
+    //disconect o _mutationObserver
+    if (this._mutationObserver != undefined) {
+      this._mutationObserver.disconnect();
+    }
   }
   initSplit() {
     if (!this._items.length) {
@@ -31,7 +67,7 @@ export class SplitPanel {
   getGutters() {
     const gutters = {
       columnGutters: [],
-      rowGutters: []
+      rowGutters: [],
     };
     if (!this._items.length) {
       return gutters;
@@ -41,19 +77,19 @@ export class SplitPanel {
       if (index == this._items.length - 1)
         return;
       let gutterTrack = item.dataset.trackNumber;
-      if (index === (this._items.length - 1)) {
+      if (index === this._items.length - 1) {
         gutterTrack = this._items.length.toString();
       }
       gutters[proToChange].push({
         track: Number(gutterTrack),
-        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`),
       });
     });
     return gutters;
   }
   addItemGutter(item) {
     const gutter = document.createElement('div');
-    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
@@ -61,29 +97,47 @@ export class SplitPanel {
   }
   getElementStyle() {
     const style = {
-      'display': "grid",
-      'height': '100%',
-      'width': '100%'
+      display: 'grid',
+      height: '100%',
+      width: '100%',
+      position: this.anchorToExpand ? 'relative' : 'unset',
     };
     return style;
   }
+  calcFreeSpacePercentage() {
+    const inUseSpacePercentage = this._items.reduce((accumulator, currentValue) => {
+      var _a;
+      return accumulator + (((_a = currentValue.size) === null || _a === void 0 ? void 0 : _a.includes('%')) ? Number(currentValue.size.replace("%", "")) : 0);
+    }, 0);
+    const itemsWithoutSizeAmount = this._items.filter((item) => item.size === undefined).length;
+    if (!itemsWithoutSizeAmount || !inUseSpacePercentage) {
+      return null;
+    }
+    const freeSpacePercentage = ((100 - inUseSpacePercentage) / itemsWithoutSizeAmount);
+    return freeSpacePercentage;
+  }
   getGridTemplate() {
     let template = '';
-    this._items.forEach((_col, index) => {
+    const freeSpacePercentage = this.calcFreeSpacePercentage();
+    this._items.forEach((col, index) => {
+      let size = col.size || '1fr';
+      if (!col.size && freeSpacePercentage) {
+        size = `${freeSpacePercentage}%`;
+      }
       if (index === this._items.length - 1) {
-        template += ` 1fr`;
+        template += ` ${size}`;
         return;
       }
       if (index === 0) {
-        template += `1fr 5px`;
+        template += `${size} 5px`;
         return;
       }
-      template += ` 1fr 5px`;
+      template += ` ${size} 5px`;
     });
     return template;
   }
   render() {
-    return (h(Host, { style: this.getElementStyle() }));
+    return h(Host, { style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -115,6 +169,40 @@ export class SplitPanel {
         "attribute": "direction",
         "reflect": false,
         "defaultValue": "'column'"
+      },
+      "anchorToExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por definir o painel que limita o tamanho do item expandido."
+        },
+        "attribute": "anchor-to-expand",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "rebuildLayout": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1,12 +1,59 @@
-  :host {
-
-  }
-
-  .box_split-item {
-    background-color: var(--background--xlight);
-    padding: var(--space--nano);
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border--radius-medium);
-    box-shadow: var(--shadow);
-  }
+.box_split-item {
+  background-color: var(--background--xlight);
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border--radius-medium);
+  box-shadow: var(--shadow);
+  flex-direction: column;
+  overflow: hidden;
+  display: flex;
+  padding: var(--space--nano);
+}
+
+.box_split-item > .ez-split-item--content {
+  overflow: auto;
+}
+
+.expanded__item {
+  position: absolute;
+  z-index: var(--more-visible);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ez-split-item--header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ez-split-item--header-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ez-split-item--header-title h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.ez-split-item--header-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.ez-split-item--content {
+  display: block;
+  height: 100%;
+}
+
+h3.ez-margin--small {
+  margin-left: var(--space--small);
+}
+
+

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

@@ -1,7 +1,23 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from '@stencil/core';
+import { CSSVarsUtils } from '../../../../utils';
 export class SplitItem {
+  constructor() {
+    this.label = undefined;
+    this.enableExpand = true;
+    this._expanded = false;
+    this.size = undefined;
+  }
+  /**
+   * Alterna a visibilidade do painel.
+   */
+  toggleExpandItem() {
+    this._expanded = !this._expanded;
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
+  }
   render() {
-    return (h(Host, { class: 'box_split-item' }));
+    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))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -14,4 +30,68 @@ export class SplitItem {
       "$": ["ez-split-item.css"]
     };
   }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um t\u00EDtulo para o painel."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "enableExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o item pode ser expandido"
+        },
+        "attribute": "enable-expand",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "values",
+              "text": "'%', 'fr'"
+            }],
+          "text": "Define o tamanho inicial do painel."
+        },
+        "attribute": "size",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_expanded": {}
+    };
+  }
 }

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

@@ -24,6 +24,8 @@
   --ez-tree--selected--color: var(--color--primary, #008561);
   /*@doc Define a cor da fonte e do ícone quando desabilitado.*/
   --ez-tree--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Usado em fontes com peso maior (bold)*/
+  --ez-tree--font-weight--bold: var(--text-weight--large, 600);
 
   /* Item */
   /*@doc Define a altura de cada item.*/
@@ -47,6 +49,18 @@
   /*@doc Define o espaçamento interno do ícone.*/
   --ez-tree__item-icon-box--padding: var(--ez-tree__tree-item--padding);
 
+  /* Badge ícone - Cores */
+  /*@doc Cor de ícone de badge padrão.*/
+  --ez-tree__badge--icon-color--default: var(--title--primary, #2B3A54);
+  /*@doc Cor de ícone de badge de erro.*/
+  --ez-tree__badge--icon-color--error: var(--color--error, #da4453);
+  /*@doc Cor de ícone de badge sucesso.*/
+  --ez-tree__badge--icon-color--success: var(--color-alert--success-800, #157a00);
+  /*@doc Cor de ícone de badge de aviso.*/
+  --ez-tree__badge--icon-color--warning: var(--color--warning, #f2d410);
+  /*@doc Cor de ícone de badge desabilitado.*/
+  --ez-tree__badge--icon-color--disabled: var(--text--disable, #AFB6C0);  
+ 
   /*private*/
   display: flex;
   flex-direction: column;
@@ -85,6 +99,14 @@ ul.first-level {
   --ez-icon--color: white;
 }
 
+.tree-item-badge-text{
+  /*public*/
+  font-family: var(--ez-tree--font-family);
+  font-size: var(--ez-tree--font-size);
+  font-weight: var(--ez-tree--font-weight);
+  color: var(--ez-tree--color);
+}
+
 .tree-item-badge.error{
   background: var(--color--error);
 }
@@ -180,6 +202,10 @@ ul.first-level {
   color: var(--ez-tree--color);
 }
 
+.item-label--bold {
+  font-weight: var(--ez-tree--font-weight--bold);
+}
+
 .tree-item[selected] .item-label {
   /*public*/
   color: var(--ez-tree--selected--color);

package/dist/collection/components/ez-tree/interfaces/ITreeItemBadge.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -14,11 +14,24 @@ export const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? 'tree-item-error' : ""}`, onClick: () => available && itemClick(treeItem) }, {
+  return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
   }), h("div", { class: "item-label-container" }, h("div", { class: "item-icon-box" }, expandable &&
-    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: "item-label" }, treeItem.label)), h("div", { class: `tree-item-badge ${(treeItem.id !== selectedId) ? treeItem.badge : null}` }, treeItem.badge === 'error' ? (h("ez-icon", { id: `${treeItem.id}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" })) : null)), expanded
+    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
     && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
+function getBadgeElement(itemId, badge, isSelectedItem) {
+  if (badge == undefined) {
+    return;
+  }
+  if (typeof badge === "string") {
+    return h("div", { class: `tree-item-badge ${isSelectedItem ? null : badge}` }, badge === "error" &&
+      h("ez-icon", { id: `${itemId}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" }));
+  }
+  if (badge.type === "text") {
+    return h("div", { id: `${itemId}-badge-text`, class: "tree-item-badge-text" }, badge.text);
+  }
+  return h("div", null, h("ez-icon", { id: `${itemId}-badge-icon`, class: "tree-item-badge-icon", style: { "--ez-icon--color": `var(--ez-tree__badge--icon-color--${badge.iconColor || "default"})` }, iconName: badge.iconName }));
+}

package/dist/collection/utils/CSSVarsUtils.js

@@ -64,6 +64,19 @@ export default class CSSVarsUtils {
       });
     }
   }
+  static applyVarsGrid(host, child) {
+    if (child) {
+      [
+        "--ez-grid--min-height",
+        "--snk-grid-min-height",
+      ].forEach(prop => {
+        const propValue = getComputedStyle(host).getPropertyValue(prop);
+        if (propValue !== null && propValue !== undefined) {
+          child.style.setProperty(prop, propValue);
+        }
+      });
+    }
+  }
   static applyIfExists(host, element, varName) {
     const prop = getComputedStyle(host).getPropertyValue(varName);
     if (prop) {

package/dist/collection/utils/form/test/DataBinder.test.js

@@ -0,0 +1,9 @@
+import { DataUnit } from "@sankhyalabs/core";
+import DataBinder from "../DataBinder";
+describe('DataBinder', () => {
+  it('constructor', async () => {
+    const du = new DataUnit();
+    const db = new DataBinder(du);
+    expect(db).toBeTruthy();
+  });
+});

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

@@ -224,6 +224,12 @@ export const EzSkeleton: {
   new (): EzSkeleton;
 };
 
+interface EzSplitButton extends Components.EzSplitButton, HTMLElement {}
+export const EzSplitButton: {
+  prototype: EzSplitButton;
+  new (): EzSplitButton;
+};
+
 interface EzSplitItem extends Components.EzSplitItem, HTMLElement {}
 export const EzSplitItem: {
   prototype: EzSplitItem;