@sankhyalabs/ezui 1.2.0-beta.19 → 1.2.0-beta.20

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

@@ -59,35 +59,45 @@ function getTabConfig(tab, sheets) {
 function sortTabs(a, b) {
   return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
 }
-export const buildFromConfig = (fields, dataUnit) => {
+export const buildFromConfig = (config, dataUnit) => {
+  var _a, _b;
   const sheets = new Map();
+  const hiddenTabs = new Map();
   const requiredFields = [];
   const cleanOnCopyFields = [];
   const defaultValues = {};
-  fields.forEach(config => {
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
     var _a, _b, _c;
-    if (config.visible !== false) {
-      const tabConfig = getTabConfig(config.tab || "__main", sheets);
-      const descriptor = dataUnit.getField(config.name);
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
       if (descriptor && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, new Map());
         }
         const tabItens = sheets.get(tabConfig);
-        const isRequired = config.required === undefined ? descriptor.required : config.required;
+        const isRequired = field.required == undefined ? descriptor.required : field.required;
         if (isRequired) {
-          requiredFields.push(config.name);
+          requiredFields.push(field.name);
         }
-        const clearOnCopy = config.cleanOnCopy === undefined ? (((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) : config.cleanOnCopy;
+        const clearOnCopy = field.cleanOnCopy == undefined ? (((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) : field.cleanOnCopy;
         if (clearOnCopy) {
-          cleanOnCopyFields.push(config.name);
+          cleanOnCopyFields.push(field.name);
         }
-        const defaultValue = config.defaultValue === undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : config.defaultValue;
+        const defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
         if (defaultValue) {
-          defaultValues[config.name] = config.defaultValue;
+          defaultValues[field.name] = field.defaultValue;
         }
-        const fieldMD = { config, descriptor };
-        const group = config.group;
+        const fieldMD = { config: field, descriptor };
+        const group = field.group;
         if (group) {
           const key = `group::${group}`;
           if (!tabItens.has(key)) {
@@ -98,7 +108,7 @@ export const buildFromConfig = (fields, dataUnit) => {
           }
         }
         else {
-          tabItens.set(config.name, fieldMD);
+          tabItens.set(field.name, fieldMD);
         }
       }
     }

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

@@ -168,7 +168,7 @@ export class EzGrid {
     this._gridController.setColumnsState(config.columns);
     this.closeGridConfig();
   }
-  closeGridConfig() {
+  async closeGridConfig() {
     this._popUpGridConfig = false;
   }
   async openGridConfig() {
@@ -558,6 +558,22 @@ export class EzGrid {
         "tags": []
       }
     },
+    "closeGridConfig": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "openGridConfig": {
       "complexType": {
         "signature": "() => Promise<void>",

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

@@ -11,14 +11,20 @@
     /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
     --ez-grid-config__button-close--padding-left: var(--space--medium, 12px);
 
-    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
-    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
+    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
+    --snk-grid-config__title--color: var(--title--primary, #2B3A54);
 
     /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
     --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
+    --ez-grid-config__title--font-size: var(--title--large, 20px);
+
     /*@doc Define o peso do texto utilizado para o titulo do componente.*/
-    --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
+    --ez-grid-config__title--font-weight: var(--text-weight--extra-large, 700);
+
+    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
+    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-size: var(--text--medium, 14px);
@@ -27,10 +33,13 @@
     --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
 
     /*@doc Define a cor da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--background-color: var(--text--primary, #626e82);
+    --ez-grid-config__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --ez-grid-config__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--border-radius: var(--border--radius-medium, 12px);
+    --ez-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
 
     /* @doc Define o estilo do texto do grupo da lista. */
     --ez-grid-config__group--font-family: var(--font-pattern, "Sora");
@@ -82,13 +91,6 @@ ez-list {
     display: none;
 }
 
-.grid-config__main {
-    overflow-y: auto;
-
-    /*public*/
-    padding-right: var(--ez-grid-config__main--padding-right);
-}
-
 .tabselector-container {
     /*public*/
     padding: var(--ez-grid-config__tabselector-container--padding) 0;
@@ -106,13 +108,6 @@ ez-list {
     width: 100%;
 }
 
-.subtitle {
-    /*public*/
-    font-family: var(--ez-grid-config__subtitle--font-family);
-    font-size: var(--ez-grid-config__subtitle--font-size);
-    color: var(--text--primary);
-}
-
 .title {
     display: flex;
     margin: 0;
@@ -121,29 +116,45 @@ ez-list {
     text-align: left;
 
     /*public*/
-    color: var(--title--primary);
+    color: var(--snk-grid-config__title--color);
+    font-size: var(--ez-grid-config__title--font-size);
     font-family: var(--ez-grid-config__title--font-family);
-    font-size: var(--title--large);
     font-weight: var(--ez-grid-config__title--font-weight);
 }
 
+.subtitle {
+    /*public*/
+    color: var(--text--primary);
+    font-size: var(--ez-grid-config__subtitle--font-size);
+    font-family: var(--ez-grid-config__subtitle--font-family);
+}
+
+.grid-config__main {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    /*public*/
+    scrollbar-color: var(--ez-grid-config__scrollbar--background-color-primary) var(--ez-grid-config__scrollbar--background-color-secondary);
+    padding-right: var(--ez-grid-config__main--padding-right);
+}
+
 .grid-config__main::-webkit-scrollbar-track {
-    background-color: #f0f2f5;
+    /*public*/
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
     /*public*/
-    background-color: var(--ez-grid-config__scrollbar--background-color);
+    background-color: var(--ez-grid-config__scrollbar--background-color-primary);
     border-radius: var(--ez-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar {
-    background-color: #f0f2f5;
-
     /*public*/
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .group-name {

package/dist/collection/components/ez-grid/subcomponents/ez-grid-config/ez-grid-config.js

@@ -75,7 +75,7 @@ export class EzGridConfig {
   }
   buildColumnListSlot(item, group) {
     return (h("div", null,
-      h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+      h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
   }
   buildOrderListSlot(item) {
     let selectedOption = "na";
@@ -158,7 +158,6 @@ export class EzGridConfig {
     this.columns = newColumnList;
     this._dataChanged = false;
     this.closeConfig();
-    ApplicationUtils.info("As configurações foram salvas com sucesso!");
     this.save();
   }
   save() {

package/dist/collection/components/ez-grid/subcomponents/ez-select-box/ez-select-box.js

@@ -23,11 +23,12 @@ export class SelectBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
-            "location": "global"
+          "IOption": {
+            "location": "import",
+            "path": "../../../ez-combo-box/ez-combo-box"
           }
         }
       },

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

@@ -145,7 +145,15 @@ p {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: calc(100% - 41px);
+  width: 100%;
+}
+
+.group-container .item-content {
+  max-width: calc(100% - 41px);
+}
+
+.items-container .item-content {
+  max-width: calc(100% - 100px);
 }
 
 .draggable-list {

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

@@ -8,7 +8,7 @@
   /*@doc Define a cor de fundo do popover.*/
   --ez-popover__box--background-color: var(--background--xlight, #fff);
   /*@doc Define a camada de visibilidade do popover.*/
-  --ez-popover__box--z-index: var(--more-visible, 1);
+  --ez-popover__box--z-index: var(--more-visible, 2);
 
   /***************
      host style  

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

@@ -4,11 +4,15 @@
   /*@doc Define a família da fonte do label.*/
   --ez-radio-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o tamanho do label.*/
-  --ez-radio-button--font-size:  var(--text--large, 16px);
+  --ez-radio-button--font-size:  var(--text--medium, 14px);
   /*@doc Define o peso da fonte do label.*/
   --ez-radio-button--font-weight: var(--text-weight--large);
   /*@doc Define a cor do texto.*/
   --ez-radio-button--font-color: var(--title--primary, #2B3A54);
+  /*@doc Define o espaço superior e inferior da lista de opções.*/
+  --ez-radio-button--padding-vertical: var(--space--medium, 12px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button--padding-horizontal: var(--space--small, 6px);
   
   /* Label itens do radio */
   /*@doc Define a família da fonte do label. */
@@ -19,6 +23,8 @@
   --ez-radio-button__form-label--title-primary: var(--title--primary, #2B3A54);
   /*@doc Define o tamanho do label. */
   --ez-radio-button__form-label--font-size: var(--text--medium, 14px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button__form-label--padding-horizontal: var(--space--medium, 12px);
 
   /* Colors */
   /*@doc cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) */
@@ -53,9 +59,15 @@
   /*private*/
   display: flex;
   width: 100%;
-  margin: 10px;  
   flex-direction: column;
   align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.form {
+  /*public*/
+  padding: var(--ez-radio-button--padding-vertical) var(--ez-radio-button--padding-horizontal);
+  gap: var(--ez-radio-button__form-label--padding-horizontal);
 }
 
 .form--vertical {
@@ -74,7 +86,6 @@
   /*private*/
   display: flex;
   align-items: center;
-  margin-top: 15px;  
 }
 
 .label{
@@ -88,13 +99,13 @@
 .form__label{
   /*private*/
   cursor: pointer;
-  padding-left: 12px;
-  padding-right: 25px;
   /*public*/
   font-weight: var(--ez-radio-button__form-label--font-weight);  
   color: var(--ez-radio-button__form-label--title-primary);
   font-family: var(--ez-radio-button__form-label--font-family);
   font-size: var(--ez-radio-button__form-label--font-size);
+  padding-left: var(--ez-radio-button__form-label--padding-horizontal);
+  padding-right: var(--ez-radio-button__form-label--padding-horizontal);
 }
 
 .form__radio {

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

@@ -33,7 +33,7 @@ export class EzRadioButton {
   render() {
     return (h(Host, null,
       this.label && h("label", { class: "label" }, this.label),
-      h("div", { class: "form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
+      h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
         h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }),
         h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }

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

@@ -79,10 +79,10 @@ export class EzSearch {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "import",
             "path": "../ez-combo-box/ez-combo-box"
           }
@@ -252,10 +252,10 @@ export class EzSearch {
         "text": "Um evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
       },
       "complexType": {
-        "original": "Option",
-        "resolved": "Option",
+        "original": "IOption",
+        "resolved": "IOption",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "import",
             "path": "../ez-combo-box/ez-combo-box"
           }

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

@@ -12,6 +12,7 @@
   display: flex;
   position: relative;
   width: 100%;
+  /* border-bottom: 2px solid #dce0e8; */
   overflow: hidden;
   /* @doc Define a sombra do box da aba. */
   /* --tabselector__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); */
@@ -135,4 +136,12 @@
 
 .scroll::-webkit-scrollbar {
   display: none;
+}
+
+.left-icon {
+  padding-right: var(--space--small);
+}
+
+.right-icon {
+  padding-left: var(--space--small);
 }

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

@@ -72,13 +72,15 @@ export class EzTabselector {
       this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
         const tabKey = elem.getAttribute("tabKey");
         const label = elem.getAttribute("label");
-        const t = { label, tabKey, index: this._processedTabs.length };
+        const leftIcon = elem.getAttribute("leftIcon");
+        const rightIcon = elem.getAttribute("rightIcon");
+        const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
         const content = elem.firstChild;
         if (content) {
-          content.setAttribute("slot", "tab" + t.index);
+          content.setAttribute("slot", "tab" + tab.index);
           this._hostElem.appendChild(content);
         }
-        this._processedTabs.push(t);
+        this._processedTabs.push(tab);
       });
     }
   }
@@ -183,7 +185,9 @@ export class EzTabselector {
           this.selectedIndex = index;
         }
         return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
+          tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }),
           h("span", { class: "tab-label", title: tab.label }, tab.label),
+          tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }),
           h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
       })),
       h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));

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

@@ -57,6 +57,7 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
+
   /*public*/
   width: var(--text-area--width);
 }
@@ -65,14 +66,16 @@ textarea {
   box-sizing: border-box;
   border: none;
   resize: none;
-  margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
+  padding: 0;
+  background: none;
+
+  /*public*/
   font-weight: var(--text-area--font-weight);
   font-family: var(--text-area--font-family);
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);
-  padding: 0;
-  background: none;
+  margin-top: calc(var(--space--medium, 12px) + 4px);
 }
 
 textarea:focus {

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

@@ -19,15 +19,15 @@ export class EzTextArea {
     this.mode = "regular";
   }
   observeErrorMessage() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
     if (hasError) {
-      this._container.classList.add('hasError');
-      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
+      (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
+      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.add('hasError');
     }
     else {
-      this._container.classList.remove('hasError');
-      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove('hasError');
+      (_c = this._container) === null || _c === void 0 ? void 0 : _c.classList.remove('hasError');
+      (_d = this._messageBoxElem) === null || _d === void 0 ? void 0 : _d.classList.remove('hasError');
     }
   }
   observeValue(newValue, oldValue) {

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.text-edit__form-input {
+  width: auto;
+  --ez-text-input__input--padding: 0px;
+}
+
+.text-edit__hidden-value {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}