@sankhyalabs/ezui 6.6.0 → 6.7.0-dev.1

package/dist/cjs/ez-split-button.cjs.entry.js

@@ -4,19 +4,77 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-0f1e0e99.js');
+const index$1 = require('./index-1be40f19.js');
 
-const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #2B3A54);--ez-split-button--font-size:var(--text--small, 12px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--light, #ffffff);--ez-split-button--border-radius:var(--border--radius-large, 24px);--ez-split-button--border:1px solid var(--color--strokes);--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--background--light, #ffffff);--ez-split-button--disabled-color:var(--text--primary);--ez-split-button--disabled--background-color:var(--background--medium);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;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:none;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{border:var(--ez-split-button--border);border-right:none;outline:none}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button:focus{box-shadow:0 0 0 2px var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__right-button:focus{box-shadow:2px 0 0 0 var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.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:active,.ez-split-button__right-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: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}.ez-split-button__left-button:disabled{border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled{border:var(--ez-split-button--disabled-border);border-left:none}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.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{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;border-right:var(--ez-split-button--border)}.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:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+const ezSplitButtonCss = ":host{--ez-split-button--min-width:var(--space--40, 40px);--ez-split-button--width:auto;--ez-split-button--height:var(--space--32, 32px);--ez-split-button__medium-icon--width:var(--space--40, 40px);--ez-split-button__large-icon--width:var(--space--44, 44px);--ez-split-button__label--padding-top:var(--space--0, 0px);--ez-split-button__label--padding-bottom:var(--space--0, 0px);--ez-split-button__right-button--padding-left:var(--space--8, 8px);--ez-split-button__right-button--padding-right:var(--space--12, 12px);--ez-split-button--color:var(--color--ocean-green-600, #008561);--ez-split-button__left-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button__right-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button--background-color:var(--color--gray-70, #FFFFFF);--ez-split-button--border:1px solid var(--color--gray-90, #EAEAEA);--ez-split-button--font-size:var(--font-size--default, 14px);--ez-split-button--line-height:var(--line-height--28, 28px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--font-weight--regular,400);--ez-split-button--border-radius:var(--border--radius-24, 24px);--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--disabled-color:var(--color--gray-400, #77777A);--ez-split-button--disabled--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;display:flex;width:fit-content}:host(.ez-split-button--primary){--ez-split-button--color:var(--color--gray-70);--ez-split-button--background-color:var(--color--ocean-green-500);--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button__left-icon--color:var(--color--gray-70);--ez-split-button__right-icon--color:var(--color--gray-70);--ez-split-button--hover-color:var(--color--gray-70);--ez-split-button--hover--background-color:var(--color--ocean-green-700);--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--gray-70);--ez-split-button--right-icon--hover-color:var(--color--gray-70);--ez-split-button--disabled-color:var(--color--gray-70);--ez-split-button--disabled--background-color:var(--color--gray-400);--ez-split-button--disabled--border:none;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}:host(.ez-split-button--secondary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:var(--color--gray-70);--ez-split-button--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-600);--ez-split-button--hover--background-color:var(--color--gray-80);--ez-split-button--hover--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:var(--color--gray-80);--ez-split-button--disabled--border:1px solid var(--color--gray-200);--ez-split-button--disabled-icon-color:var(--color--gray-400);--ez-split-button__left-icon--disabled-color:var(--color--gray-300);--ez-split-button__right-icon--disabled-color:var(--color--gray-300)}:host(.ez-split-button--tertiary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:transparent;--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-800);--ez-split-button--hover--background-color:transparent;--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:transparent;--ez-split-button--disabled--border:transparent;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}.ez-split-button.large{--ez-split-button--height:var(--space--42, 42px)}.ez-split-button.medium{--ez-split-button--height:var(--space--32, 32px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear, transform 0.15s ease;white-space:nowrap;overflow:hidden;transform:scale(1);min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button--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:none}label{cursor:pointer;line-height:var(--ez-split-button--line-height)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none;gap:var(--space--8, 8px);padding-left:var(--space--12, 12px);padding-right:var(--space--8, 8px)}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button.force-focus-visible,.ez-split-button__left-button:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--ocean-green-200), \n    -2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__right-button.force-focus-visible,.ez-split-button__right-button:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--ocean-green-200), \n    2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__left-button[aria-disabled].force-focus-visible,.ez-split-button__left-button[aria-disabled]:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--petroleum-100), \n    -2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.ez-split-button__right-button[aria-disabled].force-focus-visible,.ez-split-button__right-button[aria-disabled]:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--petroleum-100), \n    2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.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[aria-disabled],.ez-split-button__left-button:disabled label,.ez-split-button__left-button[aria-disabled] label,.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-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__left-icon--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__left-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__right-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-left:none}.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;border-right:var(--ez-split-button--border)}.ez-split-button__divider{width:1px;box-sizing:border-box;position:relative;background-color:var(--ez-split-button--background-color);height:var(--ez-split-button--height);border-top:var(--ez-split-button--border);border-bottom:var(--ez-split-button--border)}.ez-split-button__divider[aria-disabled],.ez-split-button__divider.disabled{cursor:not-allowed;background-color:var(--ez-split-button--disabled--background-color);border-top:var(--ez-split-button--disabled--border);border-bottom:var(--ez-split-button--disabled--border)}.ez-split-button__divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 10%);border-radius:2px;height:75%;top:10%;bottom:10%}.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);padding-right:var(--ez-split-button__right-button--padding-right)}.ez-split-button{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}.ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(255, 255, 255, 0.3);pointer-events:none;transform:scale(0);animation:ripple-animation 0.6s linear;z-index:0}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}:host .ripple,:host(.ez-split-button--secondary) .ripple{background:rgba(0, 133, 97, 0.2)}:host(.ez-split-button--primary) .ripple{background:rgba(255, 255, 255, 0.3)}:host(.ez-split-button--tertiary) .ripple{background:rgba(0, 133, 97, 0.15)}.ez-split-button__left-button.pressed,.ez-split-button__right-button.pressed{transform:scale(0.98)}.ez-split-button__left-button>*:not(.ripple),.ez-split-button__right-button>*:not(.ripple){position:relative;z-index:1}.ez-split-button__left-button:disabled .ripple,.ez-split-button__left-button[aria-disabled] .ripple,.ez-split-button__right-button:disabled .ripple,.ez-split-button__right-button[aria-disabled] .ripple{display:none}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled],.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{transform:scale(1) !important}";
 
+const ANIMATION_TIMINGS = {
+  PRESSED_DURATION: 150,
+  RIPPLE_DURATION: 600
+};
 const EzSplitButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonClick = index.createEvent(this, "buttonClick", 7);
     this.dropdownItemClick = index.createEvent(this, "dropdownItemClick", 7);
     this.dropdownSubActionClick = index.createEvent(this, "dropdownSubActionClick", 7);
+    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;
@@ -24,6 +82,8 @@ const EzSplitButton = class {
     this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
+    this.variant = undefined;
+    this.suppressAnimation = false;
     this.itemBuilder = undefined;
   }
   /**
@@ -38,12 +98,14 @@ const EzSplitButton = class {
    */
   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.
@@ -57,18 +119,99 @@ const EzSplitButton = class {
   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;
@@ -79,95 +222,127 @@ const EzSplitButton = class {
   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;
-  }
-  setEvents() {
-    window.removeEventListener('scroll', this.positionDropdown.bind(this));
-    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  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);
+  }
+  cleanupEventListeners() {
+    const controller = this.eventListeners.get(this._element);
+    if (controller) {
+      controller.abort();
+      this.eventListeners.delete(this._element);
+    }
   }
   async componentWillLoad() {
     this.i18n = await index$1.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) {
       core.ElementIDUtils.addIDInfo(this._element);
+    }
     if (this.leftButton) {
-      const dataInfo = { id: 'embedded' };
-      core.ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+      core.ElementIDUtils.addIDInfo(this.leftButton, 'leftButton', { id: 'embedded' });
     }
     if (this.rightButton) {
-      const dataInfo = { id: 'embedded' };
-      core.ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+      core.ElementIDUtils.addIDInfo(this.rightButton, 'rightButton', { id: 'embedded' });
     }
-    this.positionDropdown();
   }
-  componentDidUpdate() {
-    this.positionDropdown();
+  renderRipples(ripples) {
+    return ripples.map((ripple) => (index.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 (index.h("div", { class: "label-icon" }, index.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 && index.h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && index.h("label", { title: this.leftTitle || this.label }, this.label)), index.h("div", { class: "dropdown" }, index.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) }, index.h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (index.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 (index.h(index.Host, { class: this.variant ? `ez-split-button--${this.variant}` : '' }, index.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 (index.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 index.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 (index.h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
+  }
+  renderRightButton(iconSize) {
+    return (index.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 (index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && this.renderDropdown()));
+  }
+  renderLeftIcon(iconSize) {
+    return (index.h("ez-icon", { href: this.image, iconName: this.leftIconName || this.iconName, size: iconSize }));
+  }
+  renderLabel() {
+    return index.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 (index.h("ez-icon", { class: containerClass, iconName: iconName, size: iconSize }));
+  }
+  renderDropdown() {
+    return (index.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 === "";
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/ez-split-item.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-require('./ApplicationUtils-bef4fd4d.js');
+require('./ApplicationUtils-5cc05979.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 require('@sankhyalabs/core');
-const index$1 = require('./index-0f1e0e99.js');
+const index$1 = require('./index-1be40f19.js');
 require('./FormLayout-18853e70.js');
 
 const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow--xsmall);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-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center;max-height:20px}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}.structural__item{background:none;box-shadow:none;padding:0;margin:0;border:0}.content__item{margin:var(--space--extra-small);width:calc(100% - 2*(var(--space--extra-small)));height:calc(100% - 2*(var(--space--extra-small)))}";

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
-const index$1 = require('./index-0f1e0e99.js');
+const index$1 = require('./index-1be40f19.js');
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 

package/dist/cjs/ez-tooltip.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-f4d87617.js');
 const core = require('@sankhyalabs/core');
 
-const ezTooltipCss = ":host{--triangle-size:8px;width:100%}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;width:max-content;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
+const ezTooltipCss = ":host{--ez-tooltip--triangle-size:var(--space--8);--ez-tooltip--z-index:var(--elevation--24);--ez-tooltip--padding:var(--space--4) var(--space--8);--ez-tooltip--border-radius:var(--border--radius-8);--ez-tooltip--font-family:var(--font--pattern);--ez-tooltip--font-size:var(--font-size--small);--ez-tooltip--font-weight:var(--font-weight--regular);width:100%}.tooltip{position:absolute;z-index:var(--ez-tooltip--z-index);padding:var(--ez-tooltip--padding);border-radius:var(--ez-tooltip--border-radius);box-sizing:border-box;font-family:var(--ez-tooltip--font-family);font-size:var(--ez-tooltip--font-size);font-weight:var(--ez-tooltip--font-weight);text-align:center;width:max-content;display:none}.tooltip[data-strategy=\"fixed\"]{position:fixed}.arrow{position:absolute;width:var(--ez-tooltip--triangle-size);height:var(--ez-tooltip--triangle-size);transform:rotate(45deg)}.tooltip[data-type=\"default\"]{background:var(--color--petroleum-600);color:var(--color--gray-70)}.tooltip[data-type=\"default\"] .arrow{background:var(--color--petroleum-600)}.tooltip[data-type=\"error\"]{background:var(--color--red-600);color:var(--color--red-100)}.tooltip[data-type=\"error\"] .arrow{background:var(--color--red-600)}.tooltip[data-type=\"success\"]{background:var(--color--green-600);color:var(--color--green-100)}.tooltip[data-type=\"success\"] .arrow{background:var(--color--green-600)}.tooltip[data-type=\"warning\"]{background:var(--color--yellow-600);color:var(--color--yellow-100)}.tooltip[data-type=\"warning\"] .arrow{background:var(--color--yellow-600)}.tooltip[data-active=\"false\"]{display:none !important}";
 
 const EzTooltip = class {
   constructor(hostRef) {
@@ -21,6 +21,7 @@ const EzTooltip = class {
     this.active = true;
     this.maxWidth = 200;
     this.useAnchorSize = false;
+    this.strategy = 'absolute';
   }
   watchAnchoringElement(newValue, oldValue) {
     if (newValue) {
@@ -60,30 +61,36 @@ const EzTooltip = class {
       const anchorSize = element.getBoundingClientRect().width;
       this._tooltipElement.style.width = `${anchorSize}px`;
     }
-    await floatingUi_dom_esm.computePosition(element, this._tooltipElement, {
-      placement: this.placement,
-      middleware: [
-        floatingUi_dom_esm.offset(5),
-        floatingUi_dom_esm.flip(),
-        floatingUi_dom_esm.shift(),
-        floatingUi_dom_esm.arrow({ element: this._arrowElement })
-      ],
-    }).then(({ x, y, placement, middlewareData }) => {
-      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
-      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
-      Object.assign(this._tooltipElement.style, {
-        top: `${newTop}px`,
-        left: `${newLeft}px`,
-      });
-      if (middlewareData.arrow) {
-        const { x } = middlewareData.arrow;
-        const onBottom = placement.includes("bottom");
-        Object.assign(this._arrowElement.style, {
-          left: `${x}px`,
-          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
-          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+    if (this._cleanup) {
+      this._cleanup();
+    }
+    this._cleanup = floatingUi_dom_esm.autoUpdate(element, this._tooltipElement, () => {
+      floatingUi_dom_esm.computePosition(element, this._tooltipElement, {
+        placement: this.placement,
+        strategy: this.strategy,
+        middleware: [
+          floatingUi_dom_esm.offset(5),
+          floatingUi_dom_esm.flip(),
+          floatingUi_dom_esm.shift({ padding: 8 }),
+          floatingUi_dom_esm.arrow({ element: this._arrowElement })
+        ],
+      }).then(({ x, y, placement, middlewareData }) => {
+        const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+        const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+        Object.assign(this._tooltipElement.style, {
+          top: `${newTop}px`,
+          left: `${newLeft}px`,
         });
-      }
+        if (middlewareData.arrow) {
+          const { x } = middlewareData.arrow;
+          const onBottom = placement.includes("bottom");
+          Object.assign(this._arrowElement.style, {
+            left: `${x}px`,
+            top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+            bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          });
+        }
+      });
     });
   }
   handleSlotChange(ev) {
@@ -95,32 +102,41 @@ const EzTooltip = class {
     if (!element) {
       return;
     }
-    element.addEventListener('mouseenter', () => {
-      this.openTooltip();
-    });
-    element.addEventListener('mouseleave', () => {
-      this.closeTooltip();
-    });
+    this.removeEvents(element);
+    this._mouseEnterHandler = () => this.openTooltip();
+    this._mouseLeaveHandler = () => this.closeTooltip();
+    element.addEventListener('mouseenter', this._mouseEnterHandler);
+    element.addEventListener('mouseleave', this._mouseLeaveHandler);
   }
   removeEvents(element = this.anchoringElement) {
     if (!element) {
       return;
     }
-    element.removeEventListener('mouseenter', () => {
-      this.openTooltip();
-    });
-    element.removeEventListener('mouseleave', () => {
-      this.closeTooltip();
-    });
+    if (this._mouseEnterHandler) {
+      element.removeEventListener('mouseenter', this._mouseEnterHandler);
+    }
+    if (this._mouseLeaveHandler) {
+      element.removeEventListener('mouseleave', this._mouseLeaveHandler);
+    }
   }
   componentDidLoad() {
     this.setEvents();
+    this.addInfoId();
+  }
+  addInfoId() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  disconnectedCallback() {
+    this.removeEvents();
+    if (this._cleanup) {
+      this._cleanup();
+    }
+    clearTimeout(this._debouncingTimeout);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
-        "tooltip": true,
-        [`${this.type}-tooltip`]: true,
-      }, style: {
+    return (index.h(index.Host, null, index.h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: "tooltip", "data-type": this.type, "data-active": this.active.toString(), "data-strategy": this.strategy, style: {
         maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
       }, role: "tooltip", "data-element-id": core.ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, index.h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), index.h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
   }