@sankhyalabs/sankhyablocks 9.1.0-dev.3 → 9.1.0-dev.5

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

@@ -7,6 +7,8 @@ import InMemoryLoader from '../../lib/dataUnit/InMemoryLoader';
 import { SaveErrorsEnum } from '../../lib/http/data-fetcher/fetchers/AttachFetcher/interfaces';
 const RESOURCE_ID = 'AnexoSistema';
 const DATA_UNIT_NAME = 'br.com.sankhya.core.v3.anexoSistema';
+const GRID_LEGACY_CONFIG_NAME = 'GrdCfgHtml5:grdcfg.dynaform.anexo';
+const LINKORFILE_COLUMN_NAME = "ARQUIVOOULINK";
 export class SnkAttach {
   constructor() {
     this.handleTaskbarClick = async ({ detail: taskbar }) => {
@@ -33,6 +35,7 @@ export class SnkAttach {
         this.back.emit();
       });
     };
+    this.gridLegacyConfigName = undefined;
     this.fetcherType = undefined;
     this.fetcher = undefined;
     this.dataUnit = undefined;
@@ -144,9 +147,11 @@ export class SnkAttach {
     var _a, _b;
     this._currentDataUnit = new DataUnitFetcher().getDataUnit(RESOURCE_ID, DATA_UNIT_NAME);
     this._currentFetcher = this.getAnexoSistemaFetcherInstance();
+    let gridValidateForm;
     if (!this._currentDataUnit.metadata) {
       await ((_a = this._currentDataUnit) === null || _a === void 0 ? void 0 : _a.loadMetadata());
-      this.crudConfig = Object.assign({}, anexoSistemaCrudConfig);
+      this.crudConfig = this.entityName ? { form: anexoSistemaCrudConfig === null || anexoSistemaCrudConfig === void 0 ? void 0 : anexoSistemaCrudConfig.form } : Object.assign({}, anexoSistemaCrudConfig);
+      gridValidateForm = { grid: anexoSistemaCrudConfig === null || anexoSistemaCrudConfig === void 0 ? void 0 : anexoSistemaCrudConfig.grid };
     }
     this.initDataUnitLoaders();
     this._currentDataUnit.addFilterProvider({
@@ -156,19 +161,21 @@ export class SnkAttach {
       interceptAction: (action) => this._currentDataUnitBuilder.getInterceptions(this._currentDataUnit, action, this._crudElement)
     });
     await ((_b = this._currentDataUnit) === null || _b === void 0 ? void 0 : _b.loadData());
-    this.disableEditFieldsNotInForm();
+    this.disableEditFieldsNotInForm(gridValidateForm);
   }
   async loadAttach() {
     var _a, _b;
     this._currentFetcher = new AttachFetcher();
     this._currentDataUnit = new DataUnit(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME);
     this._currentDataUnit.pageSize = 150;
+    let gridValidateForm;
     this.initDataUnitLoaders();
     this._currentDataUnit.addInterceptor({
       interceptAction: (action) => {
         var _a;
         if (action.type === Action.METADATA_LOADED) {
-          this.crudConfig = Object.assign({}, attachCrudConfig);
+          this.crudConfig = this.entityName ? { form: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.form } : Object.assign({}, attachCrudConfig);
+          gridValidateForm = { grid: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.grid };
           (_a = this._crudElement) === null || _a === void 0 ? void 0 : _a.updateConfig();
         }
         return this._currentDataUnitBuilder.getInterceptions(this._currentDataUnit, action, this._crudElement);
@@ -176,9 +183,10 @@ export class SnkAttach {
     });
     if (!this._currentDataUnit.metadata) {
       await ((_a = this._currentDataUnit) === null || _a === void 0 ? void 0 : _a.loadMetadata());
-      this.crudConfig = Object.assign({}, attachCrudConfig);
+      this.crudConfig = this.entityName ? { form: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.form } : Object.assign({}, attachCrudConfig);
+      gridValidateForm = { grid: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.grid };
       await ((_b = this._currentDataUnit) === null || _b === void 0 ? void 0 : _b.loadData(undefined, undefined, true, this.registerKey));
-      this.disableEditFieldsNotInForm();
+      this.disableEditFieldsNotInForm(gridValidateForm);
     }
   }
   initDataUnitLoaders() {
@@ -197,12 +205,16 @@ export class SnkAttach {
       });
     }
   }
-  disableEditFieldsNotInForm() {
-    var _a;
-    (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid.columns.forEach(column => {
-      var _a;
+  disableEditFieldsNotInForm(gridValidateForm) {
+    var _a, _b, _c, _d, _e;
+    const gridColumns = ((_b = (_a = this._crudElement) === null || _a === void 0 ? void 0 : _a.gridConfig) === null || _b === void 0 ? void 0 : _b.columns) || ((_c = gridValidateForm === null || gridValidateForm === void 0 ? void 0 : gridValidateForm.grid) === null || _c === void 0 ? void 0 : _c.columns) || ((_e = (_d = this.crudConfig) === null || _d === void 0 ? void 0 : _d.grid) === null || _e === void 0 ? void 0 : _e.columns);
+    if (!!this.getGridLegacyConfigName()) {
+      this._currentDataUnit.disableField(LINKORFILE_COLUMN_NAME);
+    }
+    gridColumns === null || gridColumns === void 0 ? void 0 : gridColumns.forEach(column => {
+      var _a, _b;
       const fieldName = column.name;
-      if (!((_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.form.fields.some(field => field.name === fieldName))) {
+      if (!((_b = (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.fields.some(field => (field === null || field === void 0 ? void 0 : field.name) === fieldName))) {
         this._currentDataUnit.disableField(fieldName);
       }
     });
@@ -252,11 +264,16 @@ export class SnkAttach {
     await this._currentDataUnit.loadMetadata();
   }
   ;
+  getGridLegacyConfigName() {
+    if (this.gridLegacyConfigName)
+      return this.gridLegacyConfigName;
+    return this.entityName ? GRID_LEGACY_CONFIG_NAME + "." + this.entityName : this.entityName;
+  }
   render() {
     var _a, _b;
     if (!this._currentDataUnit)
       return null;
-    return (h("main", { class: "snk-attach__main" }, h("header", { class: "snk-attach__header" }, h("snk-simple-bar", { onExit: this.handleBack, messagesBuilder: this.messagesBuilder }, h("div", { slot: "rightSlot" }, h("ez-button", { class: "ez-button--primary", label: this.getMessage("snkAttach.finish"), onClick: this.handleFinish })))), h("div", { class: "snk-attach__crud-section ez-size-height--full ez-size-width--full ez-flex ez-flex--column" }, h("div", { class: "ez-box__container" }, h("snk-simple-crud", { ref: (el) => this._crudElement = el, dataUnit: this._currentDataUnit, taskbarManager: buildTaskBarManager(), gridConfig: (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid, formConfig: (_b = this.crudConfig) === null || _b === void 0 ? void 0 : _b.form, useCancelConfirm: false, onActionClick: this.handleTaskbarClick, messagesBuilder: this.messagesBuilder, onDataStateChange: this.handleOnDataStateChange.bind(this), multipleSelection: true }, h("div", { slot: "snkSimpleCrudHeader" }, h("div", { class: "ez-flex ez-flex--column" }, h("span", { class: "ez-title--primary ez-text ez-text--large ez-text--bold ez-padding-bottom--medium" }, this.getMessage("snkAttach.title")), h("span", { class: "ez-text ez-text--medium ez-text--secondary ez-padding-bottom--medium" }, this.getMessage("snkAttach.description")))))))));
+    return (h("main", { class: "snk-attach__main" }, h("header", { class: "snk-attach__header" }, h("snk-simple-bar", { onExit: this.handleBack, messagesBuilder: this.messagesBuilder }, h("div", { slot: "rightSlot" }, h("ez-button", { class: "ez-button--primary", label: this.getMessage("snkAttach.finish"), onClick: this.handleFinish })))), h("div", { class: "snk-attach__crud-section ez-size-height--full ez-size-width--full ez-flex ez-flex--column" }, h("div", { class: "ez-box__container" }, h("snk-simple-crud", { ref: (el) => this._crudElement = el, dataUnit: this._currentDataUnit, taskbarManager: buildTaskBarManager(), gridConfig: (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid, formConfig: (_b = this.crudConfig) === null || _b === void 0 ? void 0 : _b.form, useCancelConfirm: false, onActionClick: this.handleTaskbarClick, messagesBuilder: this.messagesBuilder, onDataStateChange: this.handleOnDataStateChange.bind(this), multipleSelection: true, configName: this.entityName, ignoreReadOnlyFormFields: this.entityName ? true : false, gridLegacyConfigName: this.getGridLegacyConfigName() }, h("div", { slot: "snkSimpleCrudHeader" }, h("div", { class: "ez-flex ez-flex--column" }, h("span", { class: "ez-title--primary ez-text ez-text--large ez-text--bold ez-padding-bottom--medium" }, this.getMessage("snkAttach.title")), h("span", { class: "ez-text ez-text--medium ez-text--secondary ez-padding-bottom--medium" }, this.getMessage("snkAttach.description")))))))));
   }
   static get is() { return "snk-attach"; }
   static get encapsulation() { return "scoped"; }
@@ -272,6 +289,23 @@ export class SnkAttach {
   }
   static get properties() {
     return {
+      "gridLegacyConfigName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chave da configura\u00E7\u00E3o legado da grid."
+        },
+        "attribute": "grid-legacy-config-name",
+        "reflect": false
+      },
       "fetcherType": {
         "type": "string",
         "mutable": false,

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

@@ -1,6 +1,5 @@
 :host {
-  width: 32%;
-  min-width: 200px;
+  width: 100%;
   display: flex;
   padding: 12px 8px;
   border-radius: var(--border--radius-small, 4px);
@@ -12,25 +11,7 @@
   background: #FAFCFF;
 }
 
-:host.ghost{
-  width: 32% !important;
-}
-
-@container (max-width: 430px) {
-  :host,
-  :host.ghost{
-    width: 100% !important;
-  }
-}
-
-@container (min-width: 431px) and (max-width: 632px) {
-  :host,
-  :host.ghost {
-    width: 48% !important;
-  }
-}
-
-:host.full-width{
+:host.full-width {
   width: 100%;
 }
 
@@ -81,7 +62,6 @@ ez-icon {
   align-self: self-start;
 }
 
-
 .actions {
   display: flex;
   flex-direction: row;
@@ -105,4 +85,4 @@ ez-button {
 :host:hover .hiddeble {
   visibility: visible;
   opacity: 1;
-}
+}

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

@@ -15,9 +15,6 @@
   height: calc(100vh - 225px);
 }
 
-.groups-container {
-}
-
 .guide-header {
   display: flex;
   width: 100%;
@@ -51,15 +48,13 @@
   width: 100%;
 }
 
-
 .group-content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
   gap: 12px;
   min-height: 65px;
   width: 100%;
   padding: 6px 0;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
 .group-content.empty-content {
@@ -79,7 +74,6 @@
   justify-content: center;
   pointer-events: none;
   transition: opacity 0.3s;
-  width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding: 10px;
@@ -94,7 +88,7 @@
   border-bottom: 1px solid #dce0e8;
 }
 
-.no-group-container::before{
+.no-group-container::before {
   content: "Inclua estes campos nos grupos ou deixe-os separados no topo do formulário";
   width: 100%;
   display: block;
@@ -117,7 +111,6 @@
   height: 55px;
 }
 
-
 .no-guide-selected {
   display: block;
   margin: auto;
@@ -129,5 +122,4 @@
 .ghost {
   opacity: .5;
   background: #c8fbe2;
-}
-
+}

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

@@ -36,3 +36,7 @@
   background: #c8fbe2;
 }
 
+.filter-input {
+  padding-right: var(--space--2xs, 8px);
+}
+

package/dist/collection/components/snk-form-config/fields-selector/fields-selector.js

@@ -55,7 +55,7 @@ export class FieldsSelector {
     this.initializeDraggableContainer();
   }
   render() {
-    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   static get is() { return "fields-selector"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-simple-crud/snk-simple-crud.js

@@ -9,7 +9,7 @@ import InMemoryLoader from '../../lib/dataUnit/InMemoryLoader';
 import SnkMultiSelectionListDataSource from '../snk-grid/filtercolumn/SnkMultiSelectionListDataSource';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { SnkFormConfigManager } from '../snk-form-config/SnkFormConfigManager';
-import { REGULAR_DEFAULT_BTNS, REGULAR_SELECTED_BTNS } from './regular-buttons';
+import { REGULAR_DEFAULT_BTNS, REGULAR_SELECTED_BTNS } from './snk-simple-crud.constants';
 import RmPrecisionCustomValueFormatter from '../../lib/DefaultCustomFormatters/RmPrecisionCustomValueFormatter';
 import ClientSideExporterProvider from '../snk-data-exporter/providers/ClientSideExporterProvider';
 import store from '../../lib/store';
@@ -85,15 +85,15 @@ export class SnkSimpleCrud {
     newCustomRenders.set(fieldName, customRender);
     this._customRenders = newCustomRenders;
   }
-  handleResourceIDChanged(newValue, oldValue) {
+  async handleResourceIDChanged(newValue, oldValue) {
     if (StringUtils.isEmpty(newValue)) {
       return;
     }
     if (newValue === oldValue) {
       return;
     }
-    this.loadFormConfig(true);
-    this.loadGridConfig(true);
+    await this.loadFormConfig(true);
+    await this.loadGridConfig(true);
   }
   /**
    * Registra um formatador de valores para uma coluna da grid.
@@ -149,7 +149,7 @@ export class SnkSimpleCrud {
       .concat(extraButtons));
   }
   addConfigButton(buttons) {
-    if (this.configName === undefined) {
+    if (this.configName === undefined || (this.configName && this.gridLegacyConfigName)) {
       return buttons;
     }
     return buttons.concat(TaskbarElement.CONFIGURATOR);
@@ -260,7 +260,7 @@ export class SnkSimpleCrud {
     if (!this._formConfigAlreadyLoaded) {
       return;
     }
-    this.loadFormConfig(true);
+    await this.loadFormConfig(true);
   }
   openConfig(viewMode) {
     this._snkConfigurator.close();
@@ -345,8 +345,8 @@ export class SnkSimpleCrud {
       return;
     }
     await this.addGridLegacyConfigName();
-    this.loadGridConfig();
-    this.loadFormConfig();
+    await this.loadGridConfig();
+    await this.loadFormConfig();
   }
   componentDidRender() {
     this._rmPrecisionCustomValueFormatter.setGrid(this._grid);

package/dist/components/field-item2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate, Host } from '@stencil/core/internal/client';
 import { g as getIconName, d as defineCustomElement$1 } from './field-config2.js';
 
-const fieldItemCss = ".sc-field-item-h {\n  width: 32%;\n  min-width: 200px;\n  display: flex;\n  padding: 12px 8px;\n  border-radius: var(--border--radius-small, 4px);\n  border: 1px solid #dce0e8;\n  cursor: grab;\n  align-items: center;\n  height: 42px;\n  max-height: 42px;\n  background: #FAFCFF;\n}\n\n.ghost.sc-field-item-h{\n  width: 32% !important;\n}\n\n@container (max-width: 430px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost{\n    width: 100% !important;\n  }\n}\n\n@container (min-width: 431px) and (max-width: 632px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost {\n    width: 48% !important;\n  }\n}\n\n.full-width.sc-field-item-h{\n  width: 100%;\n}\n\nez-icon.sc-field-item {\n  --ez-icon--color: #A2ABB9;\n}\n\n.icons.sc-field-item {\n  display: flex;\n}\n\n.label.sc-field-item {\n  display: flex;\n  flex-grow: 1;\n  padding-left: 8px;\n  font-size: 14px;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n}\n\n.label-text.sc-field-item {\n  overflow: hidden;\n  -webkit-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  height: auto;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  display: -webkit-box;\n  -o-text-overflow: ellipsis;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.required-mark.sc-field-item {\n  color: #cf3105;\n  background: #F7E0E5;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 5px;\n  font-size: 16px;\n  align-self: self-start;\n}\n\n\n.actions.sc-field-item {\n  display: flex;\n  flex-direction: row;\n  align-content: center;\n  gap: 4px;\n}\n\nez-button.sc-field-item {\n  width: 24px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n\n.sc-field-item-h .hiddeble.sc-field-item {\n  transition: 0.2s ease-in-out;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.sc-field-item-h:hover .hiddeble.sc-field-item {\n  visibility: visible;\n  opacity: 1;\n}";
+const fieldItemCss = ".sc-field-item-h{width:100%;display:flex;padding:12px 8px;border-radius:var(--border--radius-small, 4px);border:1px solid #dce0e8;cursor:grab;align-items:center;height:42px;max-height:42px;background:#FAFCFF}.full-width.sc-field-item-h{width:100%}ez-icon.sc-field-item{--ez-icon--color:#A2ABB9}.icons.sc-field-item{display:flex}.label.sc-field-item{display:flex;flex-grow:1;padding-left:8px;font-size:14px;align-items:center;gap:4px;height:22px}.label-text.sc-field-item{overflow:hidden;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-word}.required-mark.sc-field-item{color:#cf3105;background:#F7E0E5;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:5px;font-size:16px;align-self:self-start}.actions.sc-field-item{display:flex;flex-direction:row;align-content:center;gap:4px}ez-button.sc-field-item{width:24px;align-items:center;justify-content:center;display:flex}.sc-field-item-h .hiddeble.sc-field-item{transition:0.2s ease-in-out;visibility:hidden;opacity:0}.sc-field-item-h:hover .hiddeble.sc-field-item{visibility:visible;opacity:1}";
 
 const FieldItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/fields-layout2.js

@@ -6,7 +6,7 @@ import { T as TAB_NAMES, G as GROUP_NAMES } from './constants.js';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { d as defineCustomElement$1 } from './field-item2.js';
 
-const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;min-height:65px;width:100%;padding:6px 0}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;width:100%;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
+const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
 
 const FieldLayoutComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/fields-selector2.js

@@ -4,7 +4,7 @@ import { I as ID_AVAILABLE_FIELDS, d as defineCustomElement$2 } from './field-co
 import { ArrayUtils } from '@sankhyalabs/core';
 import { d as defineCustomElement$1 } from './field-item2.js';
 
-const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}";
+const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}.filter-input.sc-fields-selector{padding-right:var(--space--2xs, 8px)}";
 
 const FieldsSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -62,7 +62,7 @@ const FieldsSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.initializeDraggableContainer();
   }
   render() {
-    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   get el() { return this; }
   static get style() { return fieldsSelectorCss; }

package/dist/components/snk-attach2.js

@@ -627,6 +627,8 @@ const snkAttachCss = ".snk-attach__header.sc-snk-attach,.snk-attach__crud-sectio
 
 const RESOURCE_ID = 'AnexoSistema';
 const DATA_UNIT_NAME = 'br.com.sankhya.core.v3.anexoSistema';
+const GRID_LEGACY_CONFIG_NAME = 'GrdCfgHtml5:grdcfg.dynaform.anexo';
+const LINKORFILE_COLUMN_NAME = "ARQUIVOOULINK";
 const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -656,6 +658,7 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.back.emit();
       });
     };
+    this.gridLegacyConfigName = undefined;
     this.fetcherType = undefined;
     this.fetcher = undefined;
     this.dataUnit = undefined;
@@ -767,9 +770,11 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a, _b;
     this._currentDataUnit = new DataUnitFetcher().getDataUnit(RESOURCE_ID, DATA_UNIT_NAME);
     this._currentFetcher = this.getAnexoSistemaFetcherInstance();
+    let gridValidateForm;
     if (!this._currentDataUnit.metadata) {
       await ((_a = this._currentDataUnit) === null || _a === void 0 ? void 0 : _a.loadMetadata());
-      this.crudConfig = Object.assign({}, anexoSistemaCrudConfig);
+      this.crudConfig = this.entityName ? { form: anexoSistemaCrudConfig === null || anexoSistemaCrudConfig === void 0 ? void 0 : anexoSistemaCrudConfig.form } : Object.assign({}, anexoSistemaCrudConfig);
+      gridValidateForm = { grid: anexoSistemaCrudConfig === null || anexoSistemaCrudConfig === void 0 ? void 0 : anexoSistemaCrudConfig.grid };
     }
     this.initDataUnitLoaders();
     this._currentDataUnit.addFilterProvider({
@@ -779,19 +784,21 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       interceptAction: (action) => this._currentDataUnitBuilder.getInterceptions(this._currentDataUnit, action, this._crudElement)
     });
     await ((_b = this._currentDataUnit) === null || _b === void 0 ? void 0 : _b.loadData());
-    this.disableEditFieldsNotInForm();
+    this.disableEditFieldsNotInForm(gridValidateForm);
   }
   async loadAttach() {
     var _a, _b;
     this._currentFetcher = new AttachFetcher();
     this._currentDataUnit = new DataUnit(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME);
     this._currentDataUnit.pageSize = 150;
+    let gridValidateForm;
     this.initDataUnitLoaders();
     this._currentDataUnit.addInterceptor({
       interceptAction: (action) => {
         var _a;
         if (action.type === Action.METADATA_LOADED) {
-          this.crudConfig = Object.assign({}, attachCrudConfig);
+          this.crudConfig = this.entityName ? { form: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.form } : Object.assign({}, attachCrudConfig);
+          gridValidateForm = { grid: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.grid };
           (_a = this._crudElement) === null || _a === void 0 ? void 0 : _a.updateConfig();
         }
         return this._currentDataUnitBuilder.getInterceptions(this._currentDataUnit, action, this._crudElement);
@@ -799,9 +806,10 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
     if (!this._currentDataUnit.metadata) {
       await ((_a = this._currentDataUnit) === null || _a === void 0 ? void 0 : _a.loadMetadata());
-      this.crudConfig = Object.assign({}, attachCrudConfig);
+      this.crudConfig = this.entityName ? { form: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.form } : Object.assign({}, attachCrudConfig);
+      gridValidateForm = { grid: attachCrudConfig === null || attachCrudConfig === void 0 ? void 0 : attachCrudConfig.grid };
       await ((_b = this._currentDataUnit) === null || _b === void 0 ? void 0 : _b.loadData(undefined, undefined, true, this.registerKey));
-      this.disableEditFieldsNotInForm();
+      this.disableEditFieldsNotInForm(gridValidateForm);
     }
   }
   initDataUnitLoaders() {
@@ -820,12 +828,16 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     }
   }
-  disableEditFieldsNotInForm() {
-    var _a;
-    (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid.columns.forEach(column => {
-      var _a;
+  disableEditFieldsNotInForm(gridValidateForm) {
+    var _a, _b, _c, _d, _e;
+    const gridColumns = ((_b = (_a = this._crudElement) === null || _a === void 0 ? void 0 : _a.gridConfig) === null || _b === void 0 ? void 0 : _b.columns) || ((_c = gridValidateForm === null || gridValidateForm === void 0 ? void 0 : gridValidateForm.grid) === null || _c === void 0 ? void 0 : _c.columns) || ((_e = (_d = this.crudConfig) === null || _d === void 0 ? void 0 : _d.grid) === null || _e === void 0 ? void 0 : _e.columns);
+    if (!!this.getGridLegacyConfigName()) {
+      this._currentDataUnit.disableField(LINKORFILE_COLUMN_NAME);
+    }
+    gridColumns === null || gridColumns === void 0 ? void 0 : gridColumns.forEach(column => {
+      var _a, _b;
       const fieldName = column.name;
-      if (!((_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.form.fields.some(field => field.name === fieldName))) {
+      if (!((_b = (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.fields.some(field => (field === null || field === void 0 ? void 0 : field.name) === fieldName))) {
         this._currentDataUnit.disableField(fieldName);
       }
     });
@@ -875,17 +887,23 @@ const SnkAttach = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     await this._currentDataUnit.loadMetadata();
   }
   ;
+  getGridLegacyConfigName() {
+    if (this.gridLegacyConfigName)
+      return this.gridLegacyConfigName;
+    return this.entityName ? GRID_LEGACY_CONFIG_NAME + "." + this.entityName : this.entityName;
+  }
   render() {
     var _a, _b;
     if (!this._currentDataUnit)
       return null;
-    return (h("main", { class: "snk-attach__main" }, h("header", { class: "snk-attach__header" }, h("snk-simple-bar", { onExit: this.handleBack, messagesBuilder: this.messagesBuilder }, h("div", { slot: "rightSlot" }, h("ez-button", { class: "ez-button--primary", label: this.getMessage("snkAttach.finish"), onClick: this.handleFinish })))), h("div", { class: "snk-attach__crud-section ez-size-height--full ez-size-width--full ez-flex ez-flex--column" }, h("div", { class: "ez-box__container" }, h("snk-simple-crud", { ref: (el) => this._crudElement = el, dataUnit: this._currentDataUnit, taskbarManager: buildTaskBarManager(), gridConfig: (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid, formConfig: (_b = this.crudConfig) === null || _b === void 0 ? void 0 : _b.form, useCancelConfirm: false, onActionClick: this.handleTaskbarClick, messagesBuilder: this.messagesBuilder, onDataStateChange: this.handleOnDataStateChange.bind(this), multipleSelection: true }, h("div", { slot: "snkSimpleCrudHeader" }, h("div", { class: "ez-flex ez-flex--column" }, h("span", { class: "ez-title--primary ez-text ez-text--large ez-text--bold ez-padding-bottom--medium" }, this.getMessage("snkAttach.title")), h("span", { class: "ez-text ez-text--medium ez-text--secondary ez-padding-bottom--medium" }, this.getMessage("snkAttach.description")))))))));
+    return (h("main", { class: "snk-attach__main" }, h("header", { class: "snk-attach__header" }, h("snk-simple-bar", { onExit: this.handleBack, messagesBuilder: this.messagesBuilder }, h("div", { slot: "rightSlot" }, h("ez-button", { class: "ez-button--primary", label: this.getMessage("snkAttach.finish"), onClick: this.handleFinish })))), h("div", { class: "snk-attach__crud-section ez-size-height--full ez-size-width--full ez-flex ez-flex--column" }, h("div", { class: "ez-box__container" }, h("snk-simple-crud", { ref: (el) => this._crudElement = el, dataUnit: this._currentDataUnit, taskbarManager: buildTaskBarManager(), gridConfig: (_a = this.crudConfig) === null || _a === void 0 ? void 0 : _a.grid, formConfig: (_b = this.crudConfig) === null || _b === void 0 ? void 0 : _b.form, useCancelConfirm: false, onActionClick: this.handleTaskbarClick, messagesBuilder: this.messagesBuilder, onDataStateChange: this.handleOnDataStateChange.bind(this), multipleSelection: true, configName: this.entityName, ignoreReadOnlyFormFields: this.entityName ? true : false, gridLegacyConfigName: this.getGridLegacyConfigName() }, h("div", { slot: "snkSimpleCrudHeader" }, h("div", { class: "ez-flex ez-flex--column" }, h("span", { class: "ez-title--primary ez-text ez-text--large ez-text--bold ez-padding-bottom--medium" }, this.getMessage("snkAttach.title")), h("span", { class: "ez-text ez-text--medium ez-text--secondary ez-padding-bottom--medium" }, this.getMessage("snkAttach.description")))))))));
   }
   static get watchers() { return {
     "registerKey": ["registerKeyWatcher"]
   }; }
   static get style() { return snkAttachCss; }
 }, [2, "snk-attach", {
+    "gridLegacyConfigName": [1, "grid-legacy-config-name"],
     "fetcherType": [1, "fetcher-type"],
     "fetcher": [16],
     "dataUnit": [16],

package/dist/components/snk-simple-crud2.js

@@ -110,15 +110,15 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     newCustomRenders.set(fieldName, customRender);
     this._customRenders = newCustomRenders;
   }
-  handleResourceIDChanged(newValue, oldValue) {
+  async handleResourceIDChanged(newValue, oldValue) {
     if (StringUtils.isEmpty(newValue)) {
       return;
     }
     if (newValue === oldValue) {
       return;
     }
-    this.loadFormConfig(true);
-    this.loadGridConfig(true);
+    await this.loadFormConfig(true);
+    await this.loadGridConfig(true);
   }
   /**
    * Registra um formatador de valores para uma coluna da grid.
@@ -174,7 +174,7 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       .concat(extraButtons));
   }
   addConfigButton(buttons) {
-    if (this.configName === undefined) {
+    if (this.configName === undefined || (this.configName && this.gridLegacyConfigName)) {
       return buttons;
     }
     return buttons.concat(TaskbarElement.CONFIGURATOR);
@@ -285,7 +285,7 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (!this._formConfigAlreadyLoaded) {
       return;
     }
-    this.loadFormConfig(true);
+    await this.loadFormConfig(true);
   }
   openConfig(viewMode) {
     this._snkConfigurator.close();
@@ -370,8 +370,8 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return;
     }
     await this.addGridLegacyConfigName();
-    this.loadGridConfig();
-    this.loadFormConfig();
+    await this.loadGridConfig();
+    await this.loadFormConfig();
   }
   componentDidRender() {
     this._rmPrecisionCustomValueFormatter.setGrid(this._grid);

package/dist/esm/field-config_2.entry.js

@@ -252,7 +252,7 @@ const FieldConfig = class {
 };
 FieldConfig.style = fieldConfigCss;
 
-const fieldItemCss = ".sc-field-item-h {\n  width: 32%;\n  min-width: 200px;\n  display: flex;\n  padding: 12px 8px;\n  border-radius: var(--border--radius-small, 4px);\n  border: 1px solid #dce0e8;\n  cursor: grab;\n  align-items: center;\n  height: 42px;\n  max-height: 42px;\n  background: #FAFCFF;\n}\n\n.ghost.sc-field-item-h{\n  width: 32% !important;\n}\n\n@container (max-width: 430px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost{\n    width: 100% !important;\n  }\n}\n\n@container (min-width: 431px) and (max-width: 632px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost {\n    width: 48% !important;\n  }\n}\n\n.full-width.sc-field-item-h{\n  width: 100%;\n}\n\nez-icon.sc-field-item {\n  --ez-icon--color: #A2ABB9;\n}\n\n.icons.sc-field-item {\n  display: flex;\n}\n\n.label.sc-field-item {\n  display: flex;\n  flex-grow: 1;\n  padding-left: 8px;\n  font-size: 14px;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n}\n\n.label-text.sc-field-item {\n  overflow: hidden;\n  -webkit-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  height: auto;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  display: -webkit-box;\n  -o-text-overflow: ellipsis;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.required-mark.sc-field-item {\n  color: #cf3105;\n  background: #F7E0E5;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 5px;\n  font-size: 16px;\n  align-self: self-start;\n}\n\n\n.actions.sc-field-item {\n  display: flex;\n  flex-direction: row;\n  align-content: center;\n  gap: 4px;\n}\n\nez-button.sc-field-item {\n  width: 24px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n\n.sc-field-item-h .hiddeble.sc-field-item {\n  transition: 0.2s ease-in-out;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.sc-field-item-h:hover .hiddeble.sc-field-item {\n  visibility: visible;\n  opacity: 1;\n}";
+const fieldItemCss = ".sc-field-item-h{width:100%;display:flex;padding:12px 8px;border-radius:var(--border--radius-small, 4px);border:1px solid #dce0e8;cursor:grab;align-items:center;height:42px;max-height:42px;background:#FAFCFF}.full-width.sc-field-item-h{width:100%}ez-icon.sc-field-item{--ez-icon--color:#A2ABB9}.icons.sc-field-item{display:flex}.label.sc-field-item{display:flex;flex-grow:1;padding-left:8px;font-size:14px;align-items:center;gap:4px;height:22px}.label-text.sc-field-item{overflow:hidden;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-word}.required-mark.sc-field-item{color:#cf3105;background:#F7E0E5;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:5px;font-size:16px;align-self:self-start}.actions.sc-field-item{display:flex;flex-direction:row;align-content:center;gap:4px}ez-button.sc-field-item{width:24px;align-items:center;justify-content:center;display:flex}.sc-field-item-h .hiddeble.sc-field-item{transition:0.2s ease-in-out;visibility:hidden;opacity:0}.sc-field-item-h:hover .hiddeble.sc-field-item{visibility:visible;opacity:1}";
 
 const FieldItem = class {
   constructor(hostRef) {

package/dist/esm/fields-layout.entry.js

@@ -5,7 +5,7 @@ import { S as SORTABLE_PATH, d as getFieldsStructure, I as ID_AVAILABLE_FIELDS }
 import { a as TAB_NAMES, G as GROUP_NAMES } from './constants-7b422de0.js';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 
-const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;min-height:65px;width:100%;padding:6px 0}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;width:100%;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
+const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
 
 const FieldLayoutComponent = class {
   constructor(hostRef) {

package/dist/esm/fields-selector.entry.js

@@ -4,7 +4,7 @@ import { I as ID_AVAILABLE_FIELDS } from './FormConfigHelper-49fe72ca.js';
 import { ArrayUtils } from '@sankhyalabs/core';
 import './constants-7b422de0.js';
 
-const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}";
+const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}.filter-input.sc-fields-selector{padding-right:var(--space--2xs, 8px)}";
 
 const FieldsSelector = class {
   constructor(hostRef) {
@@ -61,7 +61,7 @@ const FieldsSelector = class {
     this.initializeDraggableContainer();
   }
   render() {
-    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   get el() { return getElement(this); }
 };