@sankhyalabs/ezui 7.3.4-dev.1 → 7.3.4

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

@@ -343,7 +343,7 @@
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
-    z-index:  var(--elevation--8);
+    z-index:  var(--ez-elevation--8);
     border-radius: var(--ez-split-button--border-radius);
   }
 

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

@@ -60,11 +60,7 @@ export class EzSplitButton {
         const spaceLeft = rightButtonRect.left;
         const shouldOpenUpward = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
         const shouldOpenLeftward = spaceRight < dropdownRect.width && spaceLeft > dropdownRect.width;
-        const styles = {
-          position: 'fixed',
-          top: shouldOpenUpward ? `${rightButtonRect.top - dropdownRect.height}px` : `${rightButtonRect.bottom}px`,
-          left: shouldOpenLeftward ? `${rightButtonRect.right - dropdownRect.width}px` : `${rightButtonRect.left}px`,
-        };
+        const styles = this.calculateDropdownPosition(rightButtonRect, dropdownRect, shouldOpenUpward, shouldOpenLeftward);
         Object.assign(dropdownParent.style, styles);
       });
     };
@@ -201,9 +197,6 @@ export class EzSplitButton {
       return;
     }
   }
-  onItemActionExecuted() {
-    this.closeDropdown();
-  }
   clickListener(evt) {
     const isDisabled = !this.enabled ||
       this.isDisabled === true ||
@@ -234,18 +227,26 @@ export class EzSplitButton {
     this.buttonClick.emit();
   }
   handleDropdownItemClick(evt) {
-    var _a;
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
-    if (!((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.disableCloseOnSelect)) {
-      this.closeDropdown();
-    }
+    this.closeDropdown();
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
     evt.stopPropagation();
     this.closeDropdown();
   }
+  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'
+    };
+  }
   setupEventListeners() {
     const controller = new AbortController();
     const { signal } = controller;
@@ -302,7 +303,7 @@ export class EzSplitButton {
     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))));
   }
   renderLeftButton(hasIconButton, hasLabelButton, iconSize) {
-    return (h("ez-tooltip", { message: this.leftTitle || this.label }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode} ${this.isLeftPressed ? 'pressed' : ''}`, 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))));
+    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)));
   }
   renderDivider() {
     return h("div", { class: `ez-split-button__divider ${this.mode} ez-split-button__divider--${this.size} ${this.isButtonDisabled ? 'disabled' : ''}`, "aria-disabled": this.isButtonAriaDisabled });
@@ -311,7 +312,7 @@ export class EzSplitButton {
     return (h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
   }
   renderRightButton(iconSize) {
-    return (h("ez-tooltip", { message: this.rightTitle || this.i18n("ez-split-button.moreOptions") }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ${this.isRightPressed ? 'pressed' : ''}`, 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))));
+    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()));
@@ -834,12 +835,6 @@ export class EzSplitButton {
         "target": undefined,
         "capture": false,
         "passive": true
-      }, {
-        "name": "ezCloseSplitButtonDropdown",
-        "method": "onItemActionExecuted",
-        "target": "window",
-        "capture": false,
-        "passive": false
       }, {
         "name": "click",
         "method": "clickListener",

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

@@ -21,32 +21,3 @@
   margin: 0;
   border: 0;
 }
-
-/* Alça visível do divisor (opt-in via prop showGutter). */
-.ez-split-panel--gutter .ez-split-gutter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ez-split-panel--gutter .ez-split-gutter::before {
-  content: "";
-  border-radius: var(--border--radius-2, 2px);
-  background: var(--color--strokes, #E1E2E5);
-  transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
-}
-.ez-split-panel--gutter .ez-split-gutter__row::before {
-  width: var(--space--48, 48px);
-  height: var(--space--4, 4px);
-}
-.ez-split-panel--gutter .ez-split-gutter__column::before {
-  width: var(--space--4, 4px);
-  height: var(--space--48, 48px);
-}
-.ez-split-panel--gutter .ez-split-gutter__row:hover::before {
-  width: 72px;
-  background: var(--color--ocean-green-600, #008561);
-}
-.ez-split-panel--gutter .ez-split-gutter__column:hover::before {
-  height: 72px;
-  background: var(--color--ocean-green-600, #008561);
-}

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

@@ -8,7 +8,6 @@ export class SplitPanel {
     this.direction = 'column';
     this.anchorToExpand = false;
     this.structural = false;
-    this.showGutter = false;
   }
   rebuildLayout() {
     Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
@@ -136,7 +135,6 @@ export class SplitPanel {
   }
   getGridTemplate() {
     let template = '';
-    const gutterSize = this.showGutter ? '12px' : '5px';
     const freeSpacePercentage = this.calcFreeSpacePercentage();
     this._items.forEach((col, index) => {
       let size = col.size || '1fr';
@@ -148,10 +146,10 @@ export class SplitPanel {
         return;
       }
       if (index === 0) {
-        template += `${size} ${gutterSize}`;
+        template += `${size} 5px`;
         return;
       }
-      template += ` ${size} ${gutterSize}`;
+      template += ` ${size} 5px`;
     });
     return template;
   }
@@ -200,7 +198,7 @@ export class SplitPanel {
     });
   }
   render() {
-    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}${this.showGutter ? ' ez-split-panel--gutter' : ''}`, style: this.getElementStyle() });
+    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}`, style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -268,24 +266,6 @@ export class SplitPanel {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "showGutter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Exibe uma al\u00E7a vis\u00EDvel no divisor entre os itens (indicador de arraste)."
-        },
-        "attribute": "show-gutter",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -69,12 +69,3 @@ h3.ez-margin--small {
   width: calc(100% - 2*(var(--space--extra-small)));
   height: calc(100% - 2*(var(--space--extra-small)));
 }
-
-/* Modo contorno: só borda, sem fundo/sombra. Especificidade > .structural__item
-   para vencer o border:0 quando os dois estão ativos. */
-.box_split-item.outline__item {
-  background: none;
-  box-shadow: none;
-  border: 1px solid var(--color--strokes, #E1E2E5);
-  border-radius: var(--border--radius-medium, 12px);
-}

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

@@ -8,7 +8,6 @@ export class SplitItem {
     this._expanded = false;
     this.size = undefined;
     this.structural = false;
-    this.outline = false;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -25,7 +24,7 @@ export class SplitItem {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}${this.outline ? ' outline__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -112,24 +111,6 @@ export class SplitItem {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "outline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Exibe o item apenas com contorno (borda), sem preenchimento nem sombra."
-        },
-        "attribute": "outline",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-tabselector/ez-tabselector.css

@@ -86,34 +86,6 @@
   border: 1px dashed var(--color--primary, #000000c5);
 }
 
-.is-disabled,
-.tab:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  color: var(--text--disabled, #a0a7b4);
-  pointer-events: none;
-}
-
-.is-disabled ez-icon {
-  --ez-icon--color: var(--text--disabled, #a0a7b4);
-}
-
-.is-reorderable:not(.is-disabled) {
-  cursor: grab;
-}
-
-.is-reorderable:not(.is-disabled):active {
-  cursor: grabbing;
-}
-
-.is-dragging {
-  opacity: 0.4;
-}
-
-.is-drag-over {
-  box-shadow: inset 2px 0 0 0 var(--color--primary, #008561);
-}
-
 .tab-label {
   overflow: hidden;
   white-space: nowrap;
@@ -127,7 +99,7 @@
   display: flex;
   box-sizing: border-box;
   padding: 0px;
-  top: -2px;
+  top: 0px;
   right: 0px;
   width: 16px;
   height: 100%;
@@ -178,8 +150,4 @@
 
 .right-icon {
   padding-left: var(--space--small);
-}
-
-.right-icon--error {
-  --ez-icon--color: var(--color--red-600, #BD0025);
 }