@sankhyalabs/ezui 5.20.0-dev.2 → 5.20.0-dev.21

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,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,10 +1,11 @@
-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.direction = 'column';
+    this.anchorToExpand = false;
   }
   componentDidLoad() {
     this._panelID = StringUtils.generateUUID();
@@ -31,7 +32,7 @@ export class SplitPanel {
   getGutters() {
     const gutters = {
       columnGutters: [],
-      rowGutters: []
+      rowGutters: [],
     };
     if (!this._items.length) {
       return gutters;
@@ -41,19 +42,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 +62,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 +118,24 @@ 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"
       }
     };
   }

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

@@ -1,12 +1,47 @@
-  :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-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.ez-split-item--content {
+  display: block;
+  height: 100%;
+}