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

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

@@ -1,229 +0,0 @@
-: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

@@ -1,436 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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,
-  }
-];