@sankhyalabs/ezui 5.20.2 → 5.21.0-dev.1

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

@@ -0,0 +1,229 @@
+:host {
+
+    /* dimensions */
+    /*@doc Define a largura mínima do componente.*/
+    --ez-split-button--min-width: 24;
+    /*@doc Define a largura do componente.*/
+    --ez-split-button--width: 'auto';
+    /*@doc Define a altura do componente.*/
+    --ez-split-button__medium--height: 32px;
+    --ez-split-button__large--height: 42px;
+    /*@doc Define a largura do slot que contém o ícone.*/
+    --ez-split-button__medium-icon--width: 40px;
+    --ez-split-button__large-icon--width: 44px;
+    /*@doc Define o espaçamento entre o ícone e o label.*/
+    --ez-split-button__inline__icon--gap: 6px;
+    /*@doc Define o espaçamento superior ao label.*/
+    --ez-split-button__label--padding-top: 0px;
+    /*@doc Define o espaçamento inferior ao label.*/
+    --ez-split-button__label--padding-bottom: 0px;
+    /*@doc Define o espaçamento esquerdo ao ícone.*/
+    --ez-split-button__right-button--padding-left: 8px;
+    /* general */
+    /*@doc Define a cor do label.*/
+    --ez-split-button--color: var(--title--primary, #FFF);
+    /*@doc Define o tamanho do label.*/
+    --ez-split-button--font-size: var(--text--medium, 14px);
+    /*@doc Define a família da fonte do label.*/
+    --ez-split-button--font-family: var(--font-pattern, Arial);
+    /*@doc Define o peso da fonte do label.*/
+    --ez-split-button--font-weight: var(--text-weight--large);
+    /*@doc Define a cor de fundo do botão.*/
+    --ez-split-button--background-color: var(--background--medium, #008561);
+    /*@doc Define o raio da borda do botão.*/
+    --ez-split-button--border-radius: var(--border--radius-large, 12px);
+    /*@doc Define o estilo da borda do botão.*/
+    --ez-split-button--border: none;
+    /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
+    --ez-split-button--justify-content: center;
+    /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
+    --ez-split-button--hover-color: var(--color--primary-600);
+    /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+    --ez-split-button--hover--background-color: var(--background--medium, var(--ez-split-button--background-color));
+    /*@doc Define a cor do texto quando o botão está desabilitado.*/
+    --ez-split-button--disabled-color: var(--text--disable);
+    /*@doc Define a cor de fundo quando o botão está desabilitado.*/
+    --ez-split-button--disabled--background-color: var(--color--disable-secondary);
+    /*@doc Define o estido da borda quando o botão está selecionado.*/
+    --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
+    /*@doc Define a sombra do botão quando selecionado.*/
+    --ez-split-button--focus--box-shadow: none;
+    /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+    --ez-split-button--active-color: var(--color--primary-700);
+     /*@doc Define a cor do fundo ao ativar o botão.*/
+    --ez-split-button--active--background-color: var(--background--strong);
+  }
+  
+  ez-icon {
+    --ez-icon--color: inherit;
+  }
+  
+  button {
+    /*private*/
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.2s linear;
+    white-space: nowrap;
+  
+    /*public*/
+    min-width: var(--ez-split-button--min-width);
+    width: var(--ez-split-button--width);
+    height: var(--ez-split-button__medium--height);
+    font-family: var(--ez-split-button--font-family);
+    font-size: var(--ez-split-button--font-size);
+    font-weight: var(--ez-split-button--font-weight);
+    padding: var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;
+    border-top-left-radius: var(--ez-split-button--border-radius);
+    border-bottom-left-radius: var(--ez-split-button--border-radius);
+    background-color: var(--ez-split-button--background-color);
+    color: var(--ez-split-button--color);
+    fill: var(--ez-split-button--color);
+    border: var(--ez-split-button--border);
+    justify-content: var(--ez-split-button--justify-content);
+  }
+
+  label {
+    cursor: pointer;
+  }
+
+  button:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--ez-split-button--active--background-color);
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .ez-split-button__left-button:focus,
+  .ez-split-button__right-button:focus {
+    outline: var(--ez-split-button--focus--border);
+    box-shadow: var(--ez-split-button--focus--box-shadow);
+  }
+
+  .ez-split-button__left-button:hover,
+  .ez-split-button__right-button:hover {
+    outline: none;
+    background-color: var(--ez-split-button--hover--background-color);
+    color: var(--ez-split-button--hover-color);
+    fill: var(--ez-split-button--hover-color);
+    --ez-icon--color: var(--ez-split-button--hover-color);
+  }
+
+  .ez-split-button__left-button:disabled,
+  .ez-split-button__left-button:disabled label,
+  .ez-split-button__right-button:disabled{
+    background-color: var(--ez-split-button--disabled--background-color);
+    color: var(--ez-split-button--disabled-color);
+    fill: var(--ez-split-button--disabled-color);
+    border: none;
+    --ez-icon--color: var(--ez-split-button--disabled-color);
+    cursor: not-allowed;
+  }
+
+  button.large {
+    height: var(--ez-split-button__large--height);
+  }
+
+  button.medium {
+    height: var(--ez-split-button__medium--height);
+  }
+
+  /*default*/
+  .default label {
+    padding: var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px;
+  }
+
+  /*icon-left*/
+  .icon-left {
+    gap: var(--ez-split-button__inline__icon--gap);
+  }
+  
+  .icon-left label {
+    padding-right: 12px;
+  }
+
+  .icon-left ez-icon {
+    padding-left: 20px;
+  }
+
+  /*icon-only*/
+  .icon-only {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .ez-split-button__right-button {
+    border-top-right-radius: var(--ez-split-button--border-radius);
+    border-bottom-right-radius: var(--ez-split-button--border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius:0;
+  }
+  
+  .ez-split-button__right-button--medium {
+    min-width: var(--ez-split-button__medium-icon--width);
+  }
+
+  .ez-split-button__right-button--large {
+    min-width: var(--ez-split-button__large-icon--width);
+  }
+
+  .ez-split-button__right-button--divider {
+    top: 10%;
+    bottom: 10%;
+  }
+  .ez-split-button__right-button--divider:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    border-left: 1px solid rgba(0, 0, 0, 20%);
+    border-radius: 2px;
+    height: 75%;
+  }
+  
+  .btn-icon--medium {
+    min-width: --ez-split-button__medium-icon--width;
+  }
+  
+  .btn-icon--large {
+    min-width: --ez-split-button__large-icon--width;
+  }
+
+  .ez-split-button__right-button-container {
+    position: absolute;
+    left: 0;
+    padding-left: var(--ez-split-button__right-button--padding-left);
+  }
+  
+  .label-icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--ez-split-button--color);
+  }
+  
+  .label-icon:active {
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
+  .dropdown {
+    display: flex;
+  }
+  
+  .dropdown-content {
+    display: block;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    z-index: --ez-elevation--8;
+    border-radius: var(--ez-split-button--border-radius);
+  }
+
+  .dropdown-content > ez-dropdown {
+    position: relative;
+}

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

@@ -0,0 +1,455 @@
+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();
+  }
+  resolveOffsetParentRect() {
+    var _a, _b;
+    const offsetParentRect = (_b = (_a = this.dropdownParent) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const rectWithoutScroll = {
+      top: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) + scrollTop,
+      left: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) + scrollLeft,
+      bottom: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.bottom) + scrollTop,
+      right: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.right) + scrollLeft,
+      width: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.width,
+      height: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.height
+    };
+    this.offsetParentRect = rectWithoutScroll;
+  }
+  /**
+   * Método responsável em posicionar o dropdown na tela.
+   * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+   */
+  positionDropdown() {
+    var _a, _b, _c, _d, _e, _f;
+    const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
+    const rightButtonRect = _rightButton.getBoundingClientRect();
+    const dropdownParentRect = _dropdownParent.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - (rightButtonRect.bottom + ((_a = this.offsetParentRect) === null || _a === void 0 ? void 0 : _a.top));
+    const spaceAbove = rightButtonRect.top + ((_b = this.offsetParentRect) === null || _b === void 0 ? void 0 : _b.top);
+    const spaceRight = window.innerWidth - (rightButtonRect.left + ((_c = this.offsetParentRect) === null || _c === void 0 ? void 0 : _c.left));
+    const spaceLeft = rightButtonRect.left;
+    const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
+    const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
+    let top = `${rightButtonRect.bottom - ((_d = this.offsetParentRect) === null || _d === void 0 ? void 0 : _d.top) + window.scrollY}px`;
+    let left = `${rightButtonRect.left - ((_e = this.offsetParentRect) === null || _e === void 0 ? void 0 : _e.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 - ((_f = this.offsetParentRect) === null || _f === void 0 ? void 0 : _f.left) + 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();
+  }
+  componentWillRender() {
+    this.resolveOffsetParentRect();
+  }
+  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
+      }];
+  }
+}