@sankhyalabs/sankhyablocks 8.16.0-dev.11 → 8.16.0-dev.110

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-personalized-filter-editor/snk-personalized-filter-editor.css

@@ -48,6 +48,7 @@
 .SnkFilterPersonalized_list-actions {
     display: none;
     align-items: center;
+    gap: var(--space--3xs);
 }
 
 .SnkFilterPersonalized_list-item--modal:hover .SnkFilterPersonalized_list-actions {
@@ -64,3 +65,15 @@
 .SnkFilterPersonalized_list-item--chip :first-of-type {
     gap: var(--space--3xs);
 }
+
+.SnkFilterPersonalized_list-icon {
+    --ez-icon--color: var(--title--primary, #2B3A54);
+    cursor: pointer;
+}
+
+.SnkFilterPersonalized_list-icon:hover {
+    outline: none;
+    color: var(--color--primary-600, #007a5a);
+    fill: var(--color--primary-600, #007a5a);
+    --ez-icon--color: var(--color--primary-600, #007a5a);
+}

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-personalized-filter-editor/snk-personalized-filter-editor.js

@@ -39,15 +39,15 @@ export class SnkFilterPersonalized {
   }
   getItemContent(item) {
     var _a, _b;
-    const CheckboxElement = () => (h("ez-check", Object.assign({ class: "SnkFilterPersonalized_checkbox", id: `param_${item.id}`, key: item.id, compact: true, value: item.visible, label: item.label, onEzChange: ({ detail: visible }) => this.handleItemChange.bind(this)(visible, item.id) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`checkboxFilter_${item.id}`)}` })));
+    const CheckboxElement = () => (h("ez-check", Object.assign({ class: "SnkFilterPersonalized_checkbox", id: `param_${item.id}`, key: item.id, value: item.visible, label: item.label, onEzChange: ({ detail: visible }) => this.handleItemChange.bind(this)(visible, item.id) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`checkboxFilter_${item.id}`)}` })));
     const isVariable = !!((_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.personalizedFilter) === null || _b === void 0 ? void 0 : _b.parameters.length);
-    return (h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, h("div", { class: "ez-flex ez-flex--align-items-center ez-margin-right--small ez-size-width--full" }, h(CheckboxElement, null), this.buildModalListActions(item, isVariable))), (item.visible && isVariable) && (h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+    return (h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, h("div", { class: "ez-flex ez-flex--align-items-center ez-flex--justify-between ez-size-width--full" }, h(CheckboxElement, null), this.buildModalListActions(item, isVariable))), (item.visible && isVariable) && (h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
   }
   buildModalListActions(item, isVariable) {
     if (!this.isModalMode())
       return;
     return (this.isModalMode() ?
-      h("div", { class: "SnkFilterPersonalized_list-actions" }, h("ez-button", { size: "small", mode: "icon", iconName: "edit", title: this.getMessage('snkPersonalizedFilter.listActions.edit'), onClick: () => this.editFilter.emit(item.id) }), h("ez-button", { size: "small", mode: "icon", iconName: "delete", title: this.getMessage('snkPersonalizedFilter.listActions.delete'), onClick: this.handleDeleteFilter.bind(this, item) }))
+      h("div", { class: "SnkFilterPersonalized_list-actions" }, h("ez-icon", { class: 'SnkFilterPersonalized_list-icon', iconName: "edit", title: this.getMessage('snkPersonalizedFilter.listActions.edit'), onClick: () => this.editFilter.emit(item.id) }), h("ez-icon", { class: 'SnkFilterPersonalized_list-icon', iconName: "delete", title: this.getMessage('snkPersonalizedFilter.listActions.delete'), onClick: this.handleDeleteFilter.bind(this, item) }))
       :
         isVariable && (h("ez-badge", Object.assign({ class: "ez-badge--warning-subtle ez-margin-right--small", label: this.getMessage('snkPersonalizedFilter.info.badgeVariable'), size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`variableBadge_${item.id}`)}` }))));
   }

package/dist/collection/components/snk-filter-bar/filter-item/filter-item-type-mask.enum.js

@@ -0,0 +1,8 @@
+var FilterItemTypeMask;
+(function (FilterItemTypeMask) {
+  FilterItemTypeMask["CEP"] = "#####-###";
+  FilterItemTypeMask["TELEFONE"] = "(##) ####-####";
+  FilterItemTypeMask["CPF"] = "###.###.###-##";
+  FilterItemTypeMask["CNPJ"] = "##.###.###/####-##";
+})(FilterItemTypeMask || (FilterItemTypeMask = {}));
+export default FilterItemTypeMask;

package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-item.js

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, FloatingManager, DateUtils, MaskFormatter } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 import { FilterNumberVariation } from './editors/enum/filterNumberVariation';
@@ -24,9 +24,11 @@ export class SnkFilterItem {
    */
   async showUp(open = false) {
     return new Promise(resolve => {
+      var _a;
       this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
       if (open) {
         this._closeCallback = resolve;
+        (_a = this._chipElement) === null || _a === void 0 ? void 0 : _a.blur();
         window.requestAnimationFrame(() => {
           this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, this.getFloatOptions());
           this._popover.show();
@@ -201,16 +203,20 @@ export class SnkFilterItem {
       }
       if (type === FilterItemType.NUMBER && props.variation === FilterNumberVariation.INTERVAL) {
         const { start, end } = value;
-        if (start && end) {
+        if (!isNaN(start) && !isNaN(end)) {
           return this.getMessage('snkFilterBar.fullIntervalTooltip', { LABEL: label, START_LABEL: start, END_LABEL: end });
         }
-        if (start) {
+        if (!isNaN(start)) {
           return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${Number(start)}`;
         }
-        if (end) {
+        if (!isNaN(end)) {
           return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${Number(end)}`;
         }
       }
+      if (this.config.mask) {
+        const _maskFormatter = new MaskFormatter(this.config.mask);
+        return `${label}: ${_maskFormatter.format(value)}`;
+      }
       return `${label}: ${value}`;
     }
     return label;

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.css

@@ -24,7 +24,7 @@ ez-modal {
 
 .snk-filter-modal__rendered-items {
   max-height: 760px;
-  overflow-x: clip;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.js

@@ -144,7 +144,9 @@ export class SnkFilterModal {
       this.filters = ObjectUtils.copy(filterListCopy);
       return;
     }
-    this.filters.find(filter => filter.id === filterItem.id).value = undefined;
+    const filter = this.filters.find(filter => filter.id === filterItem.id);
+    filter.value = undefined;
+    this.filters = ObjectUtils.copy(this.filters);
   }
   uncheckFilterValues(valueList) {
     valueList.forEach(value => {

package/dist/collection/components/snk-filter-bar/snk-filter-bar.css

@@ -18,7 +18,7 @@
   font-family: var(--font-pattern, Arial);
   font-weight: var(--text-weight--large, 600);
   color: var(--color--title-primary, #2B3A54);
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 :host([data-mode="hidden"]) {
@@ -99,13 +99,9 @@
   margin-bottom: var(--space--small);
 }
 
-.snk-filter-bar__scroller {
-  height: calc(100% + var(--space-extra-small, 3px));
-}
-
 .snk-filter-bar__filter-item-container {
   display: flex;
-  align-self: center;
+  align-items: start;
 }
 
 .snk-filter-bar__scroller :first-child {

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -1,4 +1,4 @@
-import { ApplicationContext, ElementIDUtils, ErrorException, ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, ObjectUtils, ErrorException, LockManager, LockManagerOperation } from '@sankhyalabs/core';
 import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
 import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
@@ -14,19 +14,22 @@ export class SnkFilterBar {
     this._firstLoad = true;
     this._pendingVariables = false;
     this._customfiltersToBeUpdated = [];
+    this._resolveLoading = undefined;
     this._calculateSortIndex = (item) => {
-      let index = item.hardFixed ? 1000000 : 0;
-      //campos Hard Fixed não variam a ordem
-      if (!item.hardFixed) {
-        index += item.fixed ? 100000 : 0;
-        index += item.value == undefined ? 0 : 10000;
-        index += this._updateSequence.lastIndexOf(item.id) + 1;
-      }
+      if (!item.visible)
+        return 0;
+      if (item.hardFixed)
+        return 1000000; //campos Hard Fixed não variam a ordem
+      let index = item.fixed ? 100000 : 0;
+      index += this.hasValidValue(item) ? 10000 : 0;
+      index += this._updateSequence.lastIndexOf(item.id) + 1;
       return index;
     };
     this._filtersComparator = (a, b) => {
       return this._calculateSortIndex(b) - this._calculateSortIndex(a);
     };
+    this.enableLockManagerLoadingComp = false;
+    this.customFilterBarConfig = undefined;
     this.dataUnit = undefined;
     this.title = undefined;
     this.configName = undefined;
@@ -37,11 +40,19 @@ export class SnkFilterBar {
     this.disablePersonalizedFilter = undefined;
     this.filterBarLegacyConfigName = undefined;
     this.autoLoad = undefined;
+    this.afterApplyConfig = undefined;
     this.allowDefault = undefined;
     this.scrollerLocked = false;
     this.showPersonalizedFilter = false;
     this.personalizedFilterId = undefined;
   }
+  hasValidValue(item) {
+    if (item.value === undefined || item.value === null)
+      return false;
+    if (!Array.isArray(item.value))
+      return true;
+    return item.value.some(filterItem => filterItem.check === true);
+  }
   observeFilterConfig(newValue, oldValue) {
     if (ObjectUtils.equals(newValue, oldValue))
       return;
@@ -166,6 +177,7 @@ export class SnkFilterBar {
     return this.filterConfig.find(item => item.type === FilterItemType.PERSONALIZED);
   }
   async processAfterUpdateConfig() {
+    var _a;
     if (this._loadingPending) {
       if (await this._application.isLoadedByPk() && !this._configUpdated)
         return;
@@ -180,6 +192,7 @@ export class SnkFilterBar {
     if (this._configUpdated) {
       this._configUpdated = false;
       ConfigStorage.saveFilterBarConfig(this.filterConfig, this.configName, this.resourceID);
+      (_a = this.afterApplyConfig) === null || _a === void 0 ? void 0 : _a.call(this);
     }
   }
   async doLoadData(forceReload = false) {
@@ -268,7 +281,7 @@ export class SnkFilterBar {
   getFilterItems() {
     const pinnedItems = [];
     const unpinnedItems = [];
-    this.filterConfig
+    this.filterConfig.sort((a, b) => this._filtersComparator(a, b))
       .filter(this.filterActiveFilter)
       .forEach((item, index) => {
       item = ObjectUtils.copy(item);
@@ -330,19 +343,23 @@ export class SnkFilterBar {
     }
   }
   async loadConfigFromStorage(clearCache) {
-    if (clearCache) {
-      await ConfigStorage.deleteFilterBarConfigCache(this.configName, this.resourceID);
+    try {
+      if (clearCache) {
+        await ConfigStorage.deleteFilterBarConfigCache(this.configName, this.resourceID);
+      }
+      let config;
+      if (this.customFilterBarConfig) {
+        config = await this.customFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name });
+      }
+      else {
+        config = await ConfigStorage.loadFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name });
+      }
+      this.filterConfig = config.map(item => this.normalizeItem(item));
+      this.filterConfig.sort((a, b) => this._filtersComparator(a, b));
+    }
+    catch (e) {
+      throw new ErrorException(this.getMessage("snkFilterBar.failToLoadConfig"), e);
     }
-    return new Promise(accept => {
-      ConfigStorage.loadFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name })
-        .then((filters) => {
-        accept();
-        this.filterConfig = filters.map(item => this.normalizeItem(item));
-      })
-        .catch(reason => {
-        throw new ErrorException(this.getMessage("snkFilterBar.failToLoadConfig"), reason);
-      });
-    });
   }
   attachDataUnit() {
     if (this.dataUnit == undefined) {
@@ -380,7 +397,9 @@ export class SnkFilterBar {
   */
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
+      var _a;
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
+      (_a = this.afterApplyConfig) === null || _a === void 0 ? void 0 : _a.call(this);
     };
     let filtersConfigCopy = ObjectUtils.copy(this.filterConfig);
     filtersConfigCopy = filtersConfigCopy.sort((itemA, itemB) => {
@@ -431,14 +450,26 @@ export class SnkFilterBar {
     this.personalizedFilterId = undefined;
     this.showPersonalizedFilter = false;
   }
-  componentWillLoad() {
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (this._application) {
-      this.loadPermitions();
-      this.addFilterBarLegacyConfigName();
-      this.loadConfigFromStorage();
+  async componentWillLoad() {
+    var _a;
+    try {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      await this.attachDataUnit();
+      if (this._application) {
+        if (this._application.enableLockManagerLoadingApp && this.enableLockManagerLoadingComp) {
+          const appLoadLockerID = LockManager.addLockManagerCtxId(this._element);
+          this._resolveLoading = LockManager.lock(appLoadLockerID, LockManagerOperation.APP_LOADING);
+        }
+        await Promise.all([
+          this.loadPermitions(),
+          this.addFilterBarLegacyConfigName(),
+          this.loadConfigFromStorage(),
+        ]);
+      }
+    }
+    finally {
+      (_a = this._resolveLoading) === null || _a === void 0 ? void 0 : _a.call(this);
     }
-    this.attachDataUnit();
   }
   componentDidRender() {
     this.processPendingFilter();
@@ -453,7 +484,7 @@ export class SnkFilterBar {
     if (this.mode !== "regular") {
       return (h(Host, { "data-mode": this.mode }, this.getPersonalizedFilterVariableItems(), this.mode === 'button' && (h("ez-button", { class: "ez-margin-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }))));
     }
-    return (h(Host, null, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
+    return (h(Host, null, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium ez-margin-top--extra-small", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }
@@ -469,6 +500,50 @@ export class SnkFilterBar {
   }
   static get properties() {
     return {
+      "enableLockManagerLoadingComp": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente deve usar o LockManager para controle de carregamento"
+        },
+        "attribute": "enable-lock-manager-loading-comp",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customFilterBarConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(configName: string, resourceId: string, options: any) => Promise<Array<SnkFilterItemConfig>>",
+          "resolved": "(configName: string, resourceId: string, options: any) => Promise<SnkFilterItemConfig[]>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Loader customizado para carregar as configura\u00E7\u00F5es"
+        }
+      },
       "dataUnit": {
         "type": "unknown",
         "mutable": true,
@@ -651,6 +726,21 @@ export class SnkFilterBar {
         },
         "attribute": "auto-load",
         "reflect": false
+      },
+      "afterApplyConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o chamada depois de aplicar os filtros."
+        }
       }
     };
   }

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

@@ -87,7 +87,7 @@ export class SnkForm {
     if (this.resourceID == undefined) {
       this.resourceID = await ResourceIDUtils.getResourceID();
     }
-    this._configManager = new SnkFormConfigManager(this.configName, this.resourceID);
+    this._configManager = new SnkFormConfigManager(this.configName, this.resourceID, undefined, this._dataUnit);
     this.addFormLegacyConfig();
     await this._configManager.loadConfig();
   }
@@ -117,7 +117,7 @@ export class SnkForm {
     if (!this._dataUnit || !this._dataState) {
       return undefined;
     }
-    return (h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { ref: (ref) => this._form = ref, key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this._configManager.getConfig(this._dataState.insertionMode, this._dataUnit), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+    return (h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { ref: (ref) => this._form = ref, key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this._configManager.getConfig(this._dataUnit), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
       h("snk-form-config", { messagesBuilder: this.messagesBuilder, dataUnit: this._dataUnit, configManager: this._configManager, onConfigClose: () => this.closeConfig() })))));
   }
   static get is() { return "snk-form"; }

package/dist/collection/components/snk-form-config/SnkFormConfigManager.js

@@ -1,11 +1,13 @@
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { FormConfigFetcher } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
+import { TAB_NAMES } from "../../lib/utils/constants";
 export class SnkFormConfigManager {
-  constructor(configName, resourceID, onConfigChange) {
+  constructor(configName, resourceID, onConfigChange, dataUnit) {
     this._resourceID = resourceID;
     this._configName = configName;
     this._onConfigChange = onConfigChange;
+    this._dataUnit = dataUnit;
   }
   addFormLegacyConfig(legacyConfigName) {
     if (this._configName) {
@@ -16,6 +18,7 @@ export class SnkFormConfigManager {
     return new Promise(resolve => {
       ConfigStorage.loadFormConfig(this._configName, this._resourceID)
         .then((config) => {
+        config = this.buildFormMetadataUITabs(config);
         this.setConfig(config);
         resolve(config);
       })
@@ -24,6 +27,10 @@ export class SnkFormConfigManager {
       });
     });
   }
+  getEmptyConfig() {
+    const config = this.buildFormMetadataUITabs({ fields: [], emptyConfig: true }, true);
+    return config;
+  }
   saveConfig(config) {
     const configToSave = ObjectUtils.copy(config);
     return new Promise(accept => {
@@ -67,28 +74,41 @@ export class SnkFormConfigManager {
     }
     return updatingCardConfig;
   }
-  getFieldsList(dataUnit, descriptionFilter) {
+  hasConfig(config) {
+    var _a;
+    const currentConfig = config !== null && config !== void 0 ? config : this._config;
+    if (currentConfig && ((_a = currentConfig.fields) === null || _a === void 0 ? void 0 : _a.length)) {
+      return true;
+    }
+    return false;
+  }
+  getFieldsList(descriptionFilter, forceEmptyConfig = false) {
     var _a;
     const fields = (_a = this._config) === null || _a === void 0 ? void 0 : _a.fields;
-    if (fields != undefined && fields.length > 0) {
-      return fields.map(({ label, name, readOnly, visible, required }) => {
+    const hasConfig = this.hasConfig();
+    if (hasConfig && !forceEmptyConfig) {
+      return fields.map(({ label, name, readOnly, visible, required, tab, group }) => {
+        var _a;
         if (label == undefined) {
-          const currentField = dataUnit.getField(name);
-          return Object.assign(Object.assign({}, currentField), { name: name !== null && name !== void 0 ? name : currentField.name, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : currentField.readOnly, visible: visible !== null && visible !== void 0 ? visible : currentField.visible, required: required !== null && required !== void 0 ? required : currentField.required });
+          const currentField = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(name);
+          if (!currentField)
+            return;
+          return Object.assign(Object.assign({}, currentField), { name: name !== null && name !== void 0 ? name : currentField.name, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : currentField.readOnly, visible: visible !== null && visible !== void 0 ? visible : currentField.visible, required: required !== null && required !== void 0 ? required : currentField.required, tab: tab, group: group });
         }
-        return { name, label, readOnly, visible, required };
+        return { name, label, readOnly, visible, required, tab, group };
       })
         .filter(field => this.isFieldVisible(field, descriptionFilter));
     }
-    if (dataUnit != undefined) {
-      return dataUnit.metadata.fields
-        .filter(field => this.isFieldVisible(field, descriptionFilter))
-        .map(({ label, name, readOnly }) => { return { label, name, readOnly }; });
+    if (!this._dataUnit) {
+      return [];
     }
-    return [];
+    const filteredFields = this._dataUnit.metadata.fields
+      .filter(field => this.isFieldVisible(field, descriptionFilter))
+      .map(({ label, name, readOnly, visible, required, properties }) => ({ label, name, readOnly, visible, required, tab: properties === null || properties === void 0 ? void 0 : properties.UITabName }));
+    return filteredFields;
   }
   isFieldVisible(field, descriptionFilter) {
-    if (field.visible === false) {
+    if (field === undefined || field.visible === false) {
       return false;
     }
     if (descriptionFilter == undefined) {
@@ -98,8 +118,8 @@ export class SnkFormConfigManager {
     const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(descriptionFilter.toLocaleLowerCase());
     return normalizedText.includes(normalizedFilter);
   }
-  getFormConfig(dataUnit, ignoreReadOnlyFormFields) {
-    let fields = this.getFieldsList(dataUnit);
+  getFormConfig(dataUnit, ignoreReadOnlyFormFields, forceEmptyConfig = false) {
+    let fields = this.getFieldsList(undefined, forceEmptyConfig);
     if (ignoreReadOnlyFormFields) {
       fields = fields.filter(field => {
         if (dataUnit) {
@@ -152,4 +172,42 @@ export class SnkFormConfigManager {
   async fetchDefaultConfig() {
     return this.getFormConfigFetcher().fetchDefaultConfig(this._configName, this._resourceID);
   }
+  parseObjectList(object) {
+    if (!object) {
+      return [];
+    }
+    return Array.isArray(object) ? object : [object];
+  }
+  buildFormMetadataUITabs(config, forceEmptyConfig = false) {
+    var _a;
+    const hasConfig = this.hasConfig(config);
+    if (!forceEmptyConfig && (!this._dataUnit || hasConfig)) {
+      return config;
+    }
+    config = this.getFormConfig(this._dataUnit, false, true);
+    config.tabs = this.parseObjectList(config.tabs);
+    config.emptyConfig = false;
+    config.defaultConfiguration = true;
+    const fields = this._dataUnit.metadata.fields;
+    for (const currentField of fields) {
+      const field = config.fields.find(field => field.name === currentField.name);
+      const uiTabName = (_a = currentField.properties) === null || _a === void 0 ? void 0 : _a.UITabName;
+      if (!uiTabName || uiTabName === TAB_NAMES.main) {
+        continue;
+      }
+      const haveTab = config.tabs.some((tab) => tab.label === uiTabName);
+      if (!haveTab) {
+        config.tabs.push({
+          label: uiTabName,
+          name: uiTabName,
+          order: 0,
+          visible: true,
+        });
+      }
+      if (field) {
+        field.tab = uiTabName;
+      }
+    }
+    return config;
+  }
 }

package/dist/collection/components/snk-form-config/snk-form-config.css

@@ -44,6 +44,11 @@
   background-color: var(--snk-form-config--background-color);
 }
 
+div:focus-visible,
+div:focus {
+  outline: none;
+}
+
 .form-config__header-container {
   /*private*/
   display: flex;
@@ -58,7 +63,7 @@
 .form-config__hide-content {
   /*private*/
   display: none;
-} 
+}
 
 ez-icon .left-icon {
   /*public*/
@@ -229,9 +234,9 @@ ez-collapsible-box{
     /*private*/
     left: calc(100% / 1 * -1);
   }
-  
+
   .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
     /*private*/
     left: calc(100% / 1 * -2);
   }
-}
+}