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

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

@@ -0,0 +1,139 @@
+:host {
+  /* Cores e outras definições */
+  --ez-avatar--background-color: var(--color--ocean-green-600, #008561);
+  --ez-avatar--color: var(--color--gray-70, #fff);
+  --ez-avatar--border-radius-circle: 50%;
+  --ez-avatar--border-radius-square: 25%;
+
+  /* Hover */
+  --ez-avatar--background-color-hover: var(--color--ocean-green-700, #00684C);
+
+}
+
+button,
+figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--ez-avatar--border);
+  background-color: var(--ez-avatar--background-color);
+  color: var(--ez-avatar--color);
+  font-weight: var(--font-weight--medium, 500);
+  font-family: var(--font-pattern, 'Roboto');
+  transition: background-color 0.2s linear, color 0.2s linear;
+  margin: 0;
+  padding: 0;
+}
+
+button:hover {
+  cursor: pointer;
+  background-color: var(--ez-avatar--background-color-hover);
+}
+
+/* Definindo o tamanho do avatar com variáveis 
+ * A largura e altura do avatar são definidas em rem para manter a consistência e escalabilidade em relação ao --avatar-size. 
+ * Por exemplo, width: 20rem significa que o avatar terá 20 vezes o tamanho base da fonte do root (normalmente 320px se a base for 16px).
+*/
+.avatar--320 {
+  --avatar-size: 320px;
+  width: 20rem;
+  height: 20rem;
+}
+.avatar--300 {
+  --avatar-size: 300px;
+  width: 18.75rem;
+  height: 18.75rem;
+}
+.avatar--280 {
+  --avatar-size: 280px;
+  width: 17.5rem;
+  height: 17.5rem;
+}
+.avatar--260 {
+  --avatar-size: 260px;
+  width: 16.25rem;
+  height: 16.25rem;
+}
+.avatar--240 {
+  --avatar-size: 240px;
+  width: 15rem;
+  height: 15rem;
+}
+.avatar--220 {
+  --avatar-size: 220px;
+  width: 13.75rem;
+  height: 13.75rem;
+}
+.avatar--200 {
+  --avatar-size: 200px;
+  width: 12.5rem;
+  height: 12.5rem;
+}
+.avatar--180 {
+  --avatar-size: 180px;
+  width: 11.25rem;
+  height: 11.25rem;
+}
+.avatar--160 {
+  --avatar-size: 160px;
+  width: 10rem;
+  height: 10rem;
+}
+.avatar--140 {
+  --avatar-size: 140px;
+  width: 8.75rem;
+  height: 8.75rem;
+}
+.avatar--120 {
+  --avatar-size: 120px;
+  width: 7.5rem;
+  height: 7.5rem;
+}
+.avatar--100 {
+  --avatar-size: 100px;
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.avatar--80 {
+  --avatar-size: 80px;
+  width: 5rem;
+  height: 5rem;
+}
+.avatar--60 {
+  --avatar-size: 60px;
+  width: 3.75rem;
+  height: 3.75rem;
+}
+
+/* Estilo para inicial do Avatar */
+.avatar-initial {
+  font-size: calc(0.375 * var(--avatar-size)); /* 37.5% do tamanho do avatar. */
+}
+
+/* Classes de formato */
+.avatar--circle {
+  border-radius: var(--ez-avatar--border-radius-circle);
+}
+
+.avatar--square {
+  border-radius: var(--ez-avatar--border-radius-square);
+}
+
+/* Estilo para imagens dentro do avatar */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.avatar--has-image {
+  background-color: transparent;
+}
+
+ez-icon {
+  --ez-icon--color: var(--color--gray-70, #fff);
+
+  font-weight: var(--font-weight--medium, 500);
+}
+

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

@@ -0,0 +1,143 @@
+import { h } from '@stencil/core';
+export class EzAvatar {
+  constructor() {
+    this.DECIMAL_PARSE_BASE = 10;
+    this.FONT_SIZE_BASE_CALC = 0.375;
+    this.name = undefined;
+    this.imageSrc = undefined;
+    this.size = '100';
+    this.shape = 'circle';
+    this.isInteractive = false;
+  }
+  /** Obtém a inicial do nome do usuário. */
+  getInitial() {
+    var _a;
+    return ((_a = this.name) === null || _a === void 0 ? void 0 : _a.trim()) ? this.name.charAt(0).toUpperCase() : '';
+  }
+  calcFontSize() {
+    const sizeNumber = parseInt(this.size, this.DECIMAL_PARSE_BASE);
+    return this.FONT_SIZE_BASE_CALC * sizeNumber;
+  }
+  getClass() {
+    return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
+  }
+  renderAvatarContent() {
+    if (this.imageSrc) {
+      return h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
+    }
+    if (this.name) {
+      return h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
+    }
+    return h("ez-icon", { class: "avatar-icon", iconName: "account-outline", fontSize: this.calcFontSize() });
+  }
+  render() {
+    if (this.isInteractive) {
+      return (h("button", { "aria-label": "Perfil", class: this.getClass() }, this.renderAvatarContent()));
+    }
+    return (h("figure", { class: this.getClass() }, this.renderAvatarContent()));
+  }
+  static get is() { return "ez-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-avatar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-avatar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do usu\u00E1rio para exibi\u00E7\u00E3o da inicial."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "imageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "URL da imagem do Avatar."
+        },
+        "attribute": "image-src",
+        "reflect": true
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'320' | '300' | '280' | '260' | '240' | '220' | '200' | '180' | '160' | '140' | '120' | '100' | '80' | '60'",
+          "resolved": "\"100\" | \"120\" | \"140\" | \"160\" | \"180\" | \"200\" | \"220\" | \"240\" | \"260\" | \"280\" | \"300\" | \"320\" | \"60\" | \"80\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho do Avatar (valores permitidos):\n'320x320', '300x300', '280x280', '260x260', '240x240', '220x220', '200x200',\n'180x180', '160x160', '140x140', '120x120', '100x100', '80x80', '60x60'."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'100'"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'circle' | 'square'",
+          "resolved": "\"circle\" | \"square\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o formato do Avatar: 'circle' ou 'square'."
+        },
+        "attribute": "shape",
+        "reflect": true,
+        "defaultValue": "'circle'"
+      },
+      "isInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, o Avatar ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico."
+        },
+        "attribute": "is-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -106,8 +106,8 @@ button {
 }
 
 button:focus {
-  outline: var(--ez-button--focus--border);
-  box-shadow: none;
+  outline: none;
+  box-shadow: var(--ez-button--focus--box-shadow);
 }
 
 button:hover {

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

@@ -351,7 +351,7 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
-  display: flex;
+  display: block;
   align-content: center;
   gap: var(--space--small);
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -48,6 +48,7 @@ ez-icon {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 
 
@@ -98,7 +99,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: block;
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -193,17 +193,17 @@ export class EzComboBox {
     }
     return 0;
   }
-  showOptions() {
+  async showOptions() {
     var _a, _b;
     if (!this.enabled)
       return;
-    this.openPopover();
+    await this.openPopover();
     const valueString = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
     const indexValue = this._visibleOptions.findIndex(option => option.value === valueString);
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    this.setFocus();
+    await this.setFocus();
   }
   hideOptions() {
     var _a;
@@ -430,10 +430,10 @@ export class EzComboBox {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
-  openPopover() {
+  async openPopover() {
     var _a;
     this.isOpen = true;
-    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.show();
+    await ((_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput));
   }
   render() {
     var _a;

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

@@ -129,7 +129,7 @@ export class EzDropdown {
           return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
         case "divider":
           return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
-        case "item":
+        default:
           return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
             ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
             : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&

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

@@ -1,10 +1,12 @@
-import { Action, DataUnit, ElementIDUtils, StringUtils, ApplicationContext } from "@sankhyalabs/core";
+import { Action, DataUnit, ElementIDUtils, StringUtils, ApplicationContext, KeyboardManager } from "@sankhyalabs/core";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createStore } from "redux";
 import DataBinder from "../../utils/form/DataBinder";
 import { buildFormMetadata } from "../../utils/form/FormMetadata";
 import { FormLayout } from '../../utils/form/interfaces';
 import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
+import { buildFieldSearch } from "../../utils";
+import { focusOnFieldSerch, LABEL_SEARCH_FIELD, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from "../../utils/searchColumn/search-column";
 export class EzForm {
   constructor() {
     this._customEditors = new Map();
@@ -21,6 +23,8 @@ export class EzForm {
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
     this.onlyStaticFields = false;
+    this.useSearchField = true;
+    this.elementFocusSearchField = undefined;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -78,7 +82,56 @@ export class EzForm {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
+  }
+  renderFieldColumn() {
+    if (this._fieldSearch != undefined) {
+      return this._fieldSearch;
+    }
+    this._fieldSearch = buildFieldSearch({
+      value: StringUtils.generateUUID(),
+      label: LABEL_SEARCH_FIELD,
+    }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
+    return this._fieldSearch;
+  }
+  getFormFields() {
+    var _a;
+    return (_a = this.config) === null || _a === void 0 ? void 0 : _a.fields;
+  }
+  fieldsOptionLoader(argument) {
+    const searchTerm = argument === null || argument === void 0 ? void 0 : argument.toLowerCase();
+    const allFields = this.getFormFields().map(field => { var _a; return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field.name); });
+    const filteredFields = allFields.filter(field => {
+      var _a, _b;
+      return ((_a = field.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm)) ||
+        ((_b = field.label) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchTerm));
+    });
+    const options = filteredFields.map(field => ({ value: field.name, label: field.label }));
+    return Promise.resolve(options);
+  }
+  onSelectField(option) {
+    if (option == undefined || option.value == undefined) {
+      this.fieldToFocus = "";
+      return;
+    }
+    this.fieldToFocus = option.value;
+    this._ezPopoverSearchField.hide();
+  }
+  async initKeyboardManager() {
+    var _a, _b;
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: (_a = this.elementFocusSearchField) !== null && _a !== void 0 ? _a : this._element });
+    if (this.useSearchField) {
+      this._keyboardManager.bind(SHORTCUT_SEARCH_FIELD, async () => {
+        if (!this._container || !this._ezPopoverSearchField)
+          return;
+        const container = this._container.getBoundingClientRect();
+        await focusOnFieldSerch(this._fieldSearch);
+        this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
+      }, { description: LABEL_SEARCH_FIELD, element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
+    }
+  }
+  componentDidLoad() {
+    this.initKeyboardManager();
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -161,6 +214,7 @@ export class EzForm {
     requestAnimationFrame(() => {
       this._dataBinder.setFocus(this.fieldToFocus);
       this.ezFormRequestClearFieldToFocus.emit();
+      this.fieldToFocus = null;
     });
   }
   setFieldsProps() {
@@ -175,8 +229,10 @@ export class EzForm {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
@@ -295,6 +351,43 @@ export class EzForm {
         "attribute": "only-static-fields",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "useSearchField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o formulario deve exibir um buscador de coluna com uso do Ctrl+F"
+        },
+        "attribute": "use-search-field",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "elementFocusSearchField": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma ancoragem"
+        }
       }
     };
   }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -65,8 +65,25 @@ export default class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
-  locateColumn(columnName) {
+  locateColumn(columnName, gridElement) {
     this._gridOptions.api.ensureColumnVisible(columnName);
+    requestAnimationFrame(() => {
+      this.highlightColumnHeader(columnName, gridElement);
+    });
+  }
+  highlightColumnHeader(columnName, gridElement) {
+    const headerElement = gridElement.querySelector(`.ag-header-cell[col-id="${columnName}"]`);
+    if (!headerElement)
+      return;
+    headerElement.classList.add("ez-grid__column-highlight-header");
+    headerElement.setAttribute("tabindex", "0");
+    const removeHighlight = (event) => {
+      if (!headerElement.contains(event.target)) {
+        headerElement.classList.remove("ez-grid__column-highlight-header");
+        document.removeEventListener("click", removeHighlight);
+      }
+    };
+    document.addEventListener("click", removeHighlight);
   }
   getSort(_dataUnitName, defaultSorting) {
     const sortedColumns = [];
@@ -163,6 +180,7 @@ export default class AgGridController {
         this._dataUnit.addFilterProvider(this);
       }
       this._gridOptions = {
+        suppressHorizontalScroll: options.suppressHorizontalScroll,
         localeText: gridTerms,
         enableRangeSelection: this._multipleSelection,
         rowSelection: this._multipleSelection ? 'multiple' : 'single',
@@ -752,6 +770,9 @@ export default class AgGridController {
     });
     return sortedColumnDefs;
   }
+  clearRangeSelection() {
+    this._gridOptions.api.clearRangeSelection();
+  }
   hideSelectionColumn() {
     var _a, _b;
     (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.columnApi) === null || _b === void 0 ? void 0 : _b.setColumnVisible(this.CHECK_BOX_COL_ID, false);
@@ -1208,8 +1229,10 @@ export default class AgGridController {
       return cfgColumn.customWidth;
     }
     if (cfgColumn.width != undefined && !isNaN(cfgColumn.width)) {
+      const parseWidth = parseInt(cfgColumn.width);
       // TODO: Valor somado devido a divergência do tamanho das fontes entre HTML5 e Design System.
-      return parseInt(cfgColumn.width) + this.DEFAULT_FONT_SIZE_HTML5;
+      if (parseWidth > 0)
+        return parseWidth + this.DEFAULT_FONT_SIZE_HTML5;
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;

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

@@ -65,6 +65,14 @@
   border-radius: var(--border--radius-small);
 }
 
+.grid__container.no-scroll{
+  width: 100vw;
+}
+
+:host(:not([no-header])) .grid__container {
+  border: none;
+}
+
 .grid__container.outline-mode {
   /*public*/
   box-shadow: var(--ez-grid__container--shadow--outline);