@sankhyalabs/ezui 5.20.0-dev.10 → 5.20.0-dev.12

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

@@ -0,0 +1,436 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+export class EzSplitButton {
+  constructor() {
+    this.rightDefaultTitle = 'Mais opções';
+    this.show = false;
+    this.enabled = true;
+    this.iconName = undefined;
+    this.image = undefined;
+    this.items = undefined;
+    this.label = undefined;
+    this.leftTitle = undefined;
+    this.rightTitle = 'Mais opções';
+    this.mode = 'default';
+    this.size = 'medium';
+  }
+  /**
+   * Remove o foco de ambos os botões.
+   */
+  async setBlur() {
+    this.leftButton.blur();
+    this.rightButton.blur();
+  }
+  /**
+   * Aplica o foco no botão principal.
+   */
+  async setLeftButtonFocus() {
+    this.leftButton.focus();
+  }
+  /**
+   * Aplica o foco no botão do dropdown.
+   */
+  async setRightButtonFocus() {
+    this.rightButton.focus();
+  }
+  clickListener(evt) {
+    if (!this.enabled) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  }
+  getIconSize(sizeParam = 'medium') {
+    var _a;
+    const sizeList = ['medium', 'large'];
+    const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
+  closeDropdown() {
+    this.show = false;
+  }
+  toggleDropdown() {
+    this.show = !this.show;
+  }
+  handleButtonClick() {
+    this.buttonClick.emit();
+  }
+  handleDropdownItemClick(evt) {
+    this.dropdownItemClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  handleDropdownSubActionClick(evt) {
+    this.dropdownSubActionClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  /**
+   * Método responsável em posicionar o dropdown na tela.
+   * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+   */
+  positionDropdown() {
+    const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
+    const rightButtonRect = _rightButton.getBoundingClientRect();
+    const dropdownParentRect = _dropdownParent.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rightButtonRect.bottom;
+    const spaceAbove = rightButtonRect.top;
+    const spaceRight = window.innerWidth - rightButtonRect.right;
+    const spaceLeft = rightButtonRect.left;
+    const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
+    const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
+    let top = `${rightButtonRect.bottom + window.scrollY}px`;
+    let left = `${rightButtonRect.left + window.scrollX}px`;
+    let bottom = 'auto';
+    if (hasSpaceBelow) {
+      bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
+      top = 'auto';
+      _dropdownParent.style.maxHeight = `${spaceAbove}px`;
+    }
+    if (hasSpaceRight) {
+      left = `${rightButtonRect.right - dropdownParentRect.width + window.scrollX}px`;
+    }
+    _dropdownParent.style.top = top;
+    _dropdownParent.style.bottom = bottom;
+    _dropdownParent.style.left = left;
+  }
+  setEvents() {
+    window.removeEventListener('scroll', this.positionDropdown.bind(this));
+    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  }
+  componentWillLoad() {
+    this.setEvents();
+  }
+  componentDidLoad() {
+    if (this._element)
+      ElementIDUtils.addIDInfo(this._element);
+    if (this.leftButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+    }
+    if (this.rightButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+    }
+    this.positionDropdown();
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+  }
+  render() {
+    const hasIconButton = this.shouldShowIconOnLeftButton();
+    const hasLabelButton = this.shouldShowLabelOnLeftButton();
+    const iconSize = this.getIconSize();
+    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
+  }
+  shouldShowLabelOnLeftButton() {
+    return ['icon-left', 'default'].includes(this.mode);
+  }
+  shouldShowIconOnLeftButton() {
+    return ['icon-left', 'icon-only'].includes(this.mode);
+  }
+  static get is() { return "ez-split-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-split-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-split-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o caminho usado nos modos `icon-only` e `icon-left` para imagens n\u00E3o contempladas na biblioteca de \u00EDcones."
+        },
+        "attribute": "image",
+        "reflect": true
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IDropdownItem>",
+          "resolved": "IDropdownItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IDropdownItem": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o conte\u00FAdo do dropdown."
+        }
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como label do bot\u00E3o."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "leftTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como title do bot\u00E3o principal"
+        },
+        "attribute": "left-title",
+        "reflect": true
+      },
+      "rightTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como title do bot\u00E3o dropdown"
+        },
+        "attribute": "right-title",
+        "reflect": true,
+        "defaultValue": "'Mais op\u00E7\u00F5es'"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'icon-only' | 'icon-left'",
+          "resolved": "\"default\" | \"icon-left\" | \"icon-only\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de uso do bot\u00E3o."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do ez-split-button."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "show": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "buttonClick",
+        "name": "buttonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o bot\u00E3o principal \u00E9 clicado"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "dropdownItemClick",
+        "name": "dropdownItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando um item do dropdown \u00E9 clicado"
+        },
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            }
+          }
+        }
+      }, {
+        "method": "dropdownSubActionClick",
+        "name": "dropdownSubActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando uma subAction de um item do dropdown \u00E9 clicada"
+        },
+        "complexType": {
+          "original": "IDropdownSubAction",
+          "resolved": "IDropdownSubAction",
+          "references": {
+            "IDropdownSubAction": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco de ambos os bot\u00F5es.",
+          "tags": []
+        }
+      },
+      "setLeftButtonFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no bot\u00E3o principal.",
+          "tags": []
+        }
+      },
+      "setRightButtonFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no bot\u00E3o do dropdown.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

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,16 @@
 .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 +36,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,10 @@
-import { h } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class SplitItem {
   constructor() {
     this.label = undefined;
     this.enableExpand = true;
     this._expanded = false;
+    this.size = undefined;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -12,7 +13,7 @@ export class SplitItem {
     this._expanded = !this._expanded;
   }
   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: "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))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -61,6 +62,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/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;