@sankhyalabs/ezui 6.6.1 → 6.7.0-dev.2

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

@@ -1,11 +1,87 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import initI18n from '../../utils/i18n';
+const ANIMATION_TIMINGS = {
+  PRESSED_DURATION: 150,
+  RIPPLE_DURATION: 600
+};
+/**
+ * Split Button Component
+ *
+ * @example
+ * ```html
+ * <ez-split-button
+ *   label="Save"
+ *   mode="icon-left"
+ *   left-icon-name="save"
+ *   size="medium"
+ *   variant="primary">
+ * </ez-split-button>
+ * ```
+ *
+ * @fires buttonClick - Emitido quando o botão principal é clicado
+ * @fires dropdownItemClick - Emitido quando um botão do dropdown é clicado
+ * @fires dropdownSubActionClick - Emitido quando uma subação de um item do dropdown é clicada
+ */
 export class EzSplitButton {
   constructor() {
+    this.rippleCounter = 0;
+    this.eventListeners = new WeakMap();
+    this.createRipple = (event, isLeftButton) => {
+      const button = isLeftButton ? this.leftButton : this.rightButton;
+      if (!button || this.isButtonDisabled || this.suppressAnimation)
+        return;
+      const coordinates = this.getEventCoordinates(event);
+      const rect = button.getBoundingClientRect();
+      const ripplePosition = {
+        x: coordinates.x - rect.left,
+        y: coordinates.y - rect.top
+      };
+      const newRipple = Object.assign(Object.assign({}, ripplePosition), { id: ++this.rippleCounter });
+      this.addRippleToButton(newRipple, isLeftButton);
+    };
+    /**
+     * Método responsável em posicionar o dropdown na tela.
+     * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+     */
+    this.positionDropdown = () => {
+      if (!this.rightButton || !this.dropdownParent)
+        return;
+      requestAnimationFrame(() => {
+        const { rightButton, dropdownParent } = this;
+        const rightButtonRect = rightButton.getBoundingClientRect();
+        const dropdownRect = dropdownParent.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        // Calcule posições de forma mais eficiente
+        const spaceBelow = viewportHeight - rightButtonRect.bottom;
+        const spaceAbove = rightButtonRect.top;
+        const spaceRight = viewportWidth - rightButtonRect.left;
+        const spaceLeft = rightButtonRect.left;
+        const shouldOpenUpward = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
+        const shouldOpenLeftward = spaceRight < dropdownRect.width && spaceLeft > dropdownRect.width;
+        const styles = this.calculateDropdownPosition(rightButtonRect, dropdownRect, shouldOpenUpward, shouldOpenLeftward);
+        Object.assign(dropdownParent.style, styles);
+      });
+    };
+    this.removeForcedFocusVisibleLeft = () => {
+      var _a;
+      (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+    };
+    this.removeForcedFocusVisibleRight = () => {
+      var _a;
+      (_a = this.rightButton) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
+    };
+    this.leftRipples = [];
+    this.rightRipples = [];
+    this.isLeftPressed = false;
+    this.isRightPressed = false;
     this.show = false;
     this.enabled = true;
+    this.isDisabled = false;
     this.iconName = undefined;
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
     this.image = undefined;
     this.items = undefined;
     this.label = undefined;
@@ -13,6 +89,8 @@ export class EzSplitButton {
     this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
+    this.variant = undefined;
+    this.suppressAnimation = false;
     this.itemBuilder = undefined;
   }
   /**
@@ -27,12 +105,14 @@ export class EzSplitButton {
    */
   async setLeftButtonFocus() {
     this.leftButton.focus();
+    this.leftButton.classList.add("force-focus-visible");
   }
   /**
    * Aplica o foco no botão do dropdown.
-   */
+  */
   async setRightButtonFocus() {
     this.rightButton.focus();
+    this.rightButton.classList.add("force-focus-visible");
   }
   /**
    * Abre ou Fecha o dropdown do Split Button.
@@ -46,18 +126,99 @@ export class EzSplitButton {
   async isOpenedDropdown() {
     return this.show;
   }
+  getEventCoordinates(event) {
+    if (event instanceof MouseEvent) {
+      return { x: event.clientX, y: event.clientY };
+    }
+    return {
+      x: event.touches[0].clientX,
+      y: event.touches[0].clientY
+    };
+  }
+  addRippleToButton(ripple, isLeftButton) {
+    if (isLeftButton) {
+      this.leftRipples = [...this.leftRipples, ripple];
+      this.setButtonPressed(true, true);
+      this.scheduleRippleCleanup(ripple, true);
+    }
+    else {
+      this.rightRipples = [...this.rightRipples, ripple];
+      this.setButtonPressed(false, true);
+      this.scheduleRippleCleanup(ripple, false);
+    }
+  }
+  setButtonPressed(isLeftButton, pressed) {
+    if (isLeftButton) {
+      this.isLeftPressed = pressed;
+    }
+    else {
+      this.isRightPressed = pressed;
+    }
+  }
+  scheduleRippleCleanup(ripple, isLeftButton) {
+    setTimeout(() => {
+      this.setButtonPressed(isLeftButton, false);
+    }, ANIMATION_TIMINGS.PRESSED_DURATION);
+    setTimeout(() => {
+      this.removeRipple(ripple.id, isLeftButton);
+    }, ANIMATION_TIMINGS.RIPPLE_DURATION);
+  }
+  removeRipple(rippleId, isLeftButton) {
+    if (isLeftButton) {
+      this.leftRipples = this.leftRipples.filter(ripple => ripple.id !== rippleId);
+    }
+    else {
+      this.rightRipples = this.rightRipples.filter(ripple => ripple.id !== rippleId);
+    }
+  }
+  onMouseDown(event) {
+    const composedPath = event.composedPath();
+    const isLeftButton = composedPath.includes(this.leftButton);
+    const isRightButton = composedPath.includes(this.rightButton);
+    if (isLeftButton) {
+      this.createRipple(event, true);
+      return;
+    }
+    if (isRightButton) {
+      this.createRipple(event, false);
+      return;
+    }
+  }
+  onTouchStart(event) {
+    const composedPath = event.composedPath();
+    const isLeftButton = composedPath.includes(this.leftButton);
+    const isRightButton = composedPath.includes(this.rightButton);
+    if (isLeftButton) {
+      this.createRipple(event, true);
+      return;
+    }
+    if (isRightButton) {
+      this.createRipple(event, false);
+      return;
+    }
+  }
   clickListener(evt) {
-    if (!this.enabled) {
+    const isDisabled = !this.enabled ||
+      this.isDisabled === true ||
+      this.isDisabled === "" ||
+      this.isDisabled === "full";
+    if (isDisabled) {
       evt.preventDefault();
       evt.stopPropagation();
       evt.stopImmediatePropagation();
     }
   }
-  getIconSize(sizeParam = 'medium') {
+  shouldShowLabelOnLeftButton() {
+    return this.mode !== 'icon-only';
+  }
+  shouldShowIconOnLeftButton() {
+    return this.mode !== 'default';
+  }
+  getIconSize(defaultSize = 'medium') {
     var _a;
-    const sizeList = ['small', 'medium', 'large'];
+    const validSizes = ['small', 'medium', 'large'];
     const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+    return validSizes.includes(sizeLowerCase) ? sizeLowerCase : defaultSize;
   }
   closeDropdown() {
     this.show = false;
@@ -68,95 +229,127 @@ export class EzSplitButton {
   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
+  calculateDropdownPosition(buttonRect, dropdownRect, openUpward, openLeftward) {
+    const baseOffset = this.offsetParentRect || { top: 0, left: 0 };
+    return {
+      top: openUpward ? 'auto' : `${buttonRect.bottom - baseOffset.top + window.scrollY}px`,
+      bottom: openUpward ? `${window.innerHeight - buttonRect.top - window.scrollY}px` : 'auto',
+      left: openLeftward
+        ? `${buttonRect.right - dropdownRect.width - baseOffset.left + window.scrollX}px`
+        : `${buttonRect.left - baseOffset.left + window.scrollX}px`,
+      maxHeight: openUpward ? `${buttonRect.top - baseOffset.top}px` : 'none'
     };
-    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;
+  setupEventListeners() {
+    const controller = new AbortController();
+    const { signal } = controller;
+    window.addEventListener('scroll', this.positionDropdown, { signal, passive: true });
+    window.addEventListener('resize', this.positionDropdown, { signal, passive: true });
+    this.eventListeners.set(this._element, controller);
   }
-  setEvents() {
-    window.removeEventListener('scroll', this.positionDropdown.bind(this));
-    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  cleanupEventListeners() {
+    const controller = this.eventListeners.get(this._element);
+    if (controller) {
+      controller.abort();
+      this.eventListeners.delete(this._element);
+    }
   }
   async componentWillLoad() {
     this.i18n = await initI18n();
-    this.setEvents();
-  }
-  componentWillRender() {
-    this.resolveOffsetParentRect();
   }
   componentDidLoad() {
-    if (this._element)
+    this.addElementIDs();
+    this.setupEventListeners();
+    this.addBlurListeners();
+    setTimeout(() => this.positionDropdown(), 0);
+  }
+  disconnectedCallback() {
+    this.cleanupEventListeners();
+    this.removeBlurListeners();
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.positionDropdown();
+    }
+  }
+  addElementIDs() {
+    if (this._element) {
       ElementIDUtils.addIDInfo(this._element);
+    }
     if (this.leftButton) {
-      const dataInfo = { id: 'embedded' };
-      ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+      ElementIDUtils.addIDInfo(this.leftButton, 'leftButton', { id: 'embedded' });
     }
     if (this.rightButton) {
-      const dataInfo = { id: 'embedded' };
-      ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+      ElementIDUtils.addIDInfo(this.rightButton, 'rightButton', { id: 'embedded' });
     }
-    this.positionDropdown();
   }
-  componentDidUpdate() {
-    this.positionDropdown();
+  renderRipples(ripples) {
+    return ripples.map((ripple) => (h("span", { key: ripple.id, class: "ripple", style: {
+        left: `${ripple.x - 10}px`,
+        top: `${ripple.y - 10}px`,
+      } })));
   }
   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.i18n("ez-split-button.moreOptions"), 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); }, itemBuilder: this.itemBuilder }))))));
+    return (h(Host, { class: this.variant ? `ez-split-button--${this.variant}` : '' }, h("div", { class: `ez-split-button ${this.size} ${this.mode}` }, this.renderLeftButton(hasIconButton, hasLabelButton, iconSize), this.renderDivider(), this.renderDropdownSection(iconSize))));
   }
-  shouldShowLabelOnLeftButton() {
-    return ['icon-left', 'default'].includes(this.mode);
+  renderLeftButton(hasIconButton, hasLabelButton, iconSize) {
+    return (h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode} ${this.isLeftPressed ? 'pressed' : ''}`, title: this.leftTitle || this.label, type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.handleButtonClick(), ref: el => (this.leftButton = el) }, hasIconButton && this.renderLeftIcon(iconSize), hasLabelButton && this.renderLabel(), !this.suppressAnimation && this.renderRipples(this.leftRipples)));
   }
-  shouldShowIconOnLeftButton() {
-    return ['icon-left', 'icon-only'].includes(this.mode);
+  renderDivider() {
+    return h("div", { class: `ez-split-button__divider ${this.mode} ez-split-button__divider--${this.size} ${this.isButtonDisabled ? 'disabled' : ''}`, "aria-disabled": this.isButtonAriaDisabled });
+  }
+  renderDropdownSection(iconSize) {
+    return (h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
+  }
+  renderRightButton(iconSize) {
+    return (h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ${this.isRightPressed ? 'pressed' : ''}`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.toggleDropdown(), ref: el => (this.rightButton = el) }, this.renderRightIcon(iconSize), !this.suppressAnimation && this.renderRipples(this.rightRipples)));
+  }
+  renderDropdownContent() {
+    return (h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && this.renderDropdown()));
+  }
+  renderLeftIcon(iconSize) {
+    return (h("ez-icon", { href: this.image, iconName: this.leftIconName || this.iconName, size: iconSize }));
+  }
+  renderLabel() {
+    return h("label", { title: this.leftTitle || this.label }, this.label);
+  }
+  renderRightIcon(iconSize) {
+    const iconName = this.rightIconName || 'chevron-down';
+    const containerClass = `ez-split-button__right-button-container ${iconSize ? `btn-icon--${iconSize}` : ''}`;
+    return (h("ez-icon", { class: containerClass, iconName: iconName, size: iconSize }));
+  }
+  renderDropdown() {
+    return (h("ez-dropdown", { items: this.items, onClick: evt => evt.stopPropagation(), onEzOutsideClick: () => this.closeDropdown(), onEzClick: evt => this.handleDropdownItemClick(evt), onEzSubActionClick: evt => this.handleDropdownSubActionClick(evt), itemBuilder: this.itemBuilder }));
+  }
+  addBlurListeners() {
+    var _a, _b;
+    this.removeBlurListeners();
+    (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.removeForcedFocusVisibleLeft);
+    (_b = this.rightButton) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.removeForcedFocusVisibleRight);
+  }
+  removeBlurListeners() {
+    var _a, _b;
+    (_a = this.leftButton) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisibleLeft);
+    (_b = this.rightButton) === null || _b === void 0 ? void 0 : _b.removeEventListener('blur', this.removeForcedFocusVisibleRight);
+  }
+  connectedCallback() {
+    this.addBlurListeners();
+  }
+  get isButtonDisabled() {
+    return this.isDisabled === "full" || !this.enabled;
+  }
+  get isButtonAriaDisabled() {
+    return this.isDisabled === true || this.isDisabled === "";
   }
   static get is() { return "ez-split-button"; }
   static get encapsulation() { return "shadow"; }
@@ -174,7 +367,7 @@ export class EzSplitButton {
     return {
       "show": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -184,7 +377,7 @@ export class EzSplitButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Se true, o dropdown do bot\u00E3o \u00E9 exibido."
         },
         "attribute": "show",
         "reflect": true,
@@ -201,13 +394,34 @@ export class EzSplitButton {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `isDisabled` prop instead."
+            }],
           "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
         },
         "attribute": "enabled",
         "reflect": true,
         "defaultValue": "true"
       },
+      "isDisabled": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | \"full\" | \"\"",
+          "resolved": "\"\" | \"full\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro o clique no bot\u00E3o fica desabilitado mas a navega\u00E7\u00E3o continua funcional.\nSe full, o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
+        },
+        "attribute": "is-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "iconName": {
         "type": "string",
         "mutable": false,
@@ -219,12 +433,49 @@ export class EzSplitButton {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `leftIconName` prop instead."
+            }],
           "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
       },
+      "leftIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone esquerdo a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
+        },
+        "attribute": "left-icon-name",
+        "reflect": true
+      },
+      "rightIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone direito a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
+        },
+        "attribute": "right-icon-name",
+        "reflect": true
+      },
       "image": {
         "type": "string",
         "mutable": false,
@@ -320,9 +571,13 @@ export class EzSplitButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'icon-only' | 'icon-left'",
+          "original": "ButtonMode",
           "resolved": "\"default\" | \"icon-left\" | \"icon-only\"",
-          "references": {}
+          "references": {
+            "ButtonMode": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -338,9 +593,13 @@ export class EzSplitButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'small' | 'medium' | 'large'",
+          "original": "ButtonSize",
           "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
+          "references": {
+            "ButtonSize": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -352,6 +611,41 @@ export class EzSplitButton {
         "reflect": true,
         "defaultValue": "'medium'"
       },
+      "variant": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a variante do ez-split-button."
+        },
+        "attribute": "variant",
+        "reflect": true
+      },
+      "suppressAnimation": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Se verdadeiro, desabilita a anima\u00E7\u00E3o de ripple."
+        },
+        "attribute": "suppress-animation",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "itemBuilder": {
         "type": "unknown",
         "mutable": false,
@@ -377,6 +671,14 @@ export class EzSplitButton {
       }
     };
   }
+  static get states() {
+    return {
+      "leftRipples": {},
+      "rightRipples": {},
+      "isLeftPressed": {},
+      "isRightPressed": {}
+    };
+  }
   static get events() {
     return [{
         "method": "buttonClick",
@@ -522,6 +824,18 @@ export class EzSplitButton {
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{
+        "name": "mousedown",
+        "method": "onMouseDown",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchstart",
+        "method": "onTouchStart",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
         "name": "click",
         "method": "clickListener",
         "target": undefined,

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

@@ -1,18 +1,18 @@
 export const dropdownItems = [
   {
     id: "1",
-    label: "label1",
+    label: "Item 1",
     type: 'item',
     iconName: "iconName1",
     subAction: {
-      id: "1",
-      label: "subActionLabel1",
+      id: "sub1",
+      label: "Sub Action 1",
       type: "primary"
     },
     group: "group"
   }, {
     id: "2",
-    label: "label2",
+    label: "Item 2",
     type: 'item',
     iconName: "iconName2",
     subAction: null,