@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-86600.1 → 0.0.0-bugfix-dev-KB-86904.0

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

@@ -13,6 +13,7 @@ export class EzSplitButton {
     this.rightTitle = 'Mais opções';
     this.mode = 'default';
     this.size = 'medium';
+    this.itemBuilder = undefined;
   }
   /**
    * Remove o foco de ambos os botões.
@@ -33,6 +34,18 @@ export class EzSplitButton {
   async setRightButtonFocus() {
     this.rightButton.focus();
   }
+  /**
+   * Abre ou Fecha o dropdown do Split Button.
+   */
+  async toggleDropdown() {
+    this.show = !this.show;
+  }
+  /**
+   * Informa se a lista de ações está aberta.
+   */
+  async isOpenedDropdown() {
+    return this.show;
+  }
   clickListener(evt) {
     if (!this.enabled) {
       evt.preventDefault();
@@ -49,16 +62,12 @@ export class EzSplitButton {
   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);
@@ -140,7 +149,7 @@ export class EzSplitButton {
     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); } }))))));
+    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); }, itemBuilder: this.itemBuilder }))))));
   }
   shouldShowLabelOnLeftButton() {
     return ['icon-left', 'default'].includes(this.mode);
@@ -162,6 +171,24 @@ export class EzSplitButton {
   }
   static get properties() {
     return {
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "enabled": {
         "type": "boolean",
         "mutable": false,
@@ -324,14 +351,32 @@ export class EzSplitButton {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'medium'"
+      },
+      "itemBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: IDropdownItem, level: number) => HTMLElement | string",
+          "resolved": "(item: IDropdownItem, level: number) => string | HTMLElement",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
       }
     };
   }
-  static get states() {
-    return {
-      "show": {}
-    };
-  }
   static get events() {
     return [{
         "method": "buttonClick",
@@ -439,6 +484,38 @@ export class EzSplitButton {
           "text": "Aplica o foco no bot\u00E3o do dropdown.",
           "tags": []
         }
+      },
+      "toggleDropdown": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre ou Fecha o dropdown do Split Button.",
+          "tags": []
+        }
+      },
+      "isOpenedDropdown": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Informa se a lista de a\u00E7\u00F5es est\u00E1 aberta.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -158,6 +158,13 @@ input:focus {
   border-color: var(--ez-text-input__input--focus--border-color);
 }
 
+input.focused{
+  /*private*/
+  border: var(--border--medium, 2px solid);
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
 input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -123,7 +123,12 @@ export class EzTextInput {
     const { selectText } = options || {};
     if (selectText)
       this._inputElem.select();
-    this._inputElem.focus();
+    if (this._inputElem.disabled) {
+      this._inputElem.classList.add("focused");
+      this._inputElem.scrollIntoView({ behavior: "smooth", block: "start" });
+      return;
+    }
+    requestAnimationFrame(() => this._inputElem.focus());
   }
   /**
    * Remove o foco do campo.
@@ -318,6 +323,15 @@ export class EzTextInput {
       var _a;
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
+    this.onClickOutside = (event) => {
+      if (!this._inputElem.contains(event.target)) {
+        this._inputElem.classList.remove("focused");
+      }
+    };
+    document.addEventListener("click", this.onClickOutside);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.onClickOutside);
   }
   componentDidRender() {
     this.adjustFloatingLabel();

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

@@ -1,5 +1,6 @@
 :host {
     --triangle-size: 8px;
+    width: 100%;
 }
 
 .tooltip {

package/dist/collection/components/ez-tooltip/ez-tooltip.js

@@ -1,6 +1,6 @@
 import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { ElementIDUtils } from "@sankhyalabs/core";
-import { Fragment, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class EzTooltip {
   constructor() {
     this._opened = false;
@@ -109,7 +109,7 @@ export class EzTooltip {
     this.setEvents();
   }
   render() {
-    return (h(Fragment, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+    return (h(Host, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
         "tooltip": true,
         [`${this.type}-tooltip`]: true,
       }, style: {

package/dist/collection/utils/index.js

@@ -8,3 +8,4 @@ export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
 export { CustomRenderSource } from './customRender/interfaces/ICustomRender';
 export { SearchMode } from './search/types';
 export { FormLayout } from './form/interfaces';
+export { buildFieldSearch, openFieldSearch, focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, LABEL_SEARCH_FIELD, LABEL_SEARCH_COLUMN, SHORTCUT_SEARCH_FIELD } from './searchColumn/search-column';

package/dist/collection/utils/searchColumn/search-column.js

@@ -0,0 +1,35 @@
+import { h } from '@stencil/core';
+export const LABEL_SEARCH_FIELD = "Buscar campos (ctrl+F)";
+export const LABEL_SEARCH_COLUMN = "Buscar colunas (Ctrl+F)";
+export const SHORTCUT_SEARCH_FIELD = "ctrl+f";
+export const SEARCH_FIELD_FULL_WIDTH = 240;
+const SEARCH_FIELD_MARGIN_BOTTOM = "0px";
+const SEARCH_FIELD_WIDTH = String(SEARCH_FIELD_FULL_WIDTH - 30) + "px";
+export const buildFieldSearch = (action, optionLoader, onSelectField) => {
+  return h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
+      "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
+      "--ez-search--width": SEARCH_FIELD_WIDTH
+    }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+};
+export const openFieldSearch = async (splitButton, field) => {
+  if (!splitButton) {
+    return;
+  }
+  const isOpen = await splitButton.isOpenedDropdown();
+  if (isOpen) {
+    await focusOnFieldSerch(field);
+    return;
+  }
+  await splitButton.toggleDropdown();
+};
+export const focusOnFieldSerch = async (field) => {
+  requestAnimationFrame(async () => {
+    if (field) {
+      const realElement = field['$elm$'];
+      if (!realElement)
+        return;
+      realElement.value = null;
+      await realElement.setFocus();
+    }
+  });
+};

package/dist/custom-elements/index.d.ts

@@ -26,6 +26,12 @@ export const EzApplication: {
   new (): EzApplication;
 };
 
+interface EzAvatar extends Components.EzAvatar, HTMLElement {}
+export const EzAvatar: {
+  prototype: EzAvatar;
+  new (): EzAvatar;
+};
+
 interface EzBadge extends Components.EzBadge, HTMLElement {}
 export const EzBadge: {
   prototype: EzBadge;