@sankhyalabs/ezui 5.20.0-dev.3 → 5.20.0-dev.31

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,31 @@ 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;
   }
   getGridTemplate() {
     let template = '';
-    this._items.forEach((_col, index) => {
+    this._items.forEach((col, index) => {
+      const size = col.size || '1fr';
       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 +153,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,62 @@
-  :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);
-  }
+ez-split-item {
+  /*@doc Define altura mínima da snk-grid */
+  --snk-grid-min-height: 0;
+  /*@doc Define altura mínima da grid */
+  --ez-grid--min-height: 0;
+}
+
+.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%;
+}
+
+

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-margin--small ez-title ez-title--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, this.enableExpand && (h("ez-button", { size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })), h("slot", { name: "rightButtons" }))), h("div", { class: "ez-split-item--content", 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/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;