@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-9999.0 → 0.0.0-bugfix-dev-KB-46291.0

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,5 +1,4 @@
 :host {
-  height: 100%;
 }
 
 .ez-split-gutter {

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

@@ -71,16 +71,17 @@ export class SplitPanel {
   }
   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;
   }

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

@@ -1,12 +1,23 @@
+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);
-  padding: var(--space--nano);
   width: 100%;
   height: 100%;
   border-radius: var(--border--radius-medium);
   box-shadow: var(--shadow);
-  display: flex;
   flex-direction: column;
+  overflow: hidden;
+  display: flex;
+  padding: var(--space--nano);
+}
+
+.box_split-item > .ez-split-item--content {
   overflow: auto;
 }
 
@@ -32,5 +43,5 @@
 
 .ez-split-item--content {
   display: block;
-  height: -webkit-fill-available;
-}
+  height: 100%;
+}

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

@@ -1,9 +1,11 @@
-import { h } 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.
@@ -11,8 +13,11 @@ export class SplitItem {
   toggleExpandItem() {
     this._expanded = !this._expanded;
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
+  }
   render() {
-    return (h("div", { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("div", null, this.label && (h("div", { class: "ez-margin--small" }, h("h3", { class: " ez-title ez-title--small" }, this.label)))), h("div", { class: "ez-split-item--header-buttons" }, this.enableExpand && (h("ez-button", { size: "medium", 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" }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("div", null, this.label && (h("div", { class: "ez-margin--small" }, h("h3", { class: " ez-title ez-title--small" }, 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() {
@@ -61,6 +66,26 @@ export class SplitItem {
         "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
       }
     };
   }

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/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;