@sankhyalabs/sankhyablocks 8.16.0-dev.97 → 8.16.0-dev.99

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

@@ -18,6 +18,8 @@ import { SnkErrorHandler } from "./errorhandler/snk-error-handler";
 import RequestListenerFactory from "./request-listener/RequestListenerFactory";
 import PreloadManager from "../../lib/http/data-fetcher/fetchers/data-unit/cache/PreloadManager";
 import { TEMPLATES_SKELETON } from "../../lib/utils/constants";
+import { LayoutFormConfig } from "../../lib/configs/LayoutFormConfig";
+import { FormConfigFetcher } from "../../lib";
 /**
  * É possível customizar as mensagens dos blocos de construção através de um pequeno modulo na estrutura da aplicação:
  * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
@@ -37,6 +39,8 @@ export class SnkApplication {
     this._pendingActions = new Map;
     this._loadPkParameter = null;
     this._isLoadedByPk = false;
+    this._formConfigFetcher = new FormConfigFetcher();
+    this._LayoutFormConfigSingleton = LayoutFormConfig.getInstance();
     this._applicationReady = false;
     this._templateSkeleton = TEMPLATES_SKELETON.GRID;
     this._activeScrimWindow = false;
@@ -111,6 +115,14 @@ export class SnkApplication {
   async getKeyboardManager() {
     return Promise.resolve(this._keyboardManager);
   }
+  /**
+   * Obtém o notificador de Layout de formulario.
+   *
+   * @return {LayoutFormConfig} the Configurador de Layout do Formulario
+   */
+  async getLayoutFormConfig() {
+    return Promise.resolve(this._LayoutFormConfigSingleton);
+  }
   /**
    * Obtém `true` caso o usuário logado seja o SUP.
    */
@@ -1026,6 +1038,12 @@ export class SnkApplication {
     ConfigStorage.preload(this.applicationResourceID, this.configName, legacyConfig);
     document.addEventListener("click", () => Workspace.applicationClick());
     this._waitingAppReady.forEach(resolve => resolve());
+    this.setLayoutFormConfig();
+  }
+  async setLayoutFormConfig() {
+    const response = await this._formConfigFetcher.fetchLayoutFormConfig('formColCfg.' + this.applicationResourceID);
+    const config = isNaN(Number(response === null || response === void 0 ? void 0 : response.config)) ? null : Number(response === null || response === void 0 ? void 0 : response.config);
+    this._LayoutFormConfigSingleton.setConfig(config);
   }
   connectedCallback() {
     this._isBrowserTypeElectron = UserAgentUtils.isElectron();
@@ -1379,6 +1397,29 @@ export class SnkApplication {
             }]
         }
       },
+      "getLayoutFormConfig": {
+        "complexType": {
+          "signature": "() => Promise<LayoutFormConfig>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "LayoutFormConfig": {
+              "location": "import",
+              "path": "../../lib/configs/LayoutFormConfig"
+            }
+          },
+          "return": "Promise<LayoutFormConfig>"
+        },
+        "docs": {
+          "text": "Obt\u00E9m o notificador de Layout de formulario.",
+          "tags": [{
+              "name": "return",
+              "text": "the Configurador de Layout do Formulario"
+            }]
+        }
+      },
       "isUserSup": {
         "complexType": {
           "signature": "() => Promise<boolean>",

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

@@ -11,6 +11,7 @@ export class SnkConfigurator {
     this.resourceID = undefined;
     this.viewMode = VIEW_MODE.GRID;
     this.customContainerId = undefined;
+    this.layoutFormConfig = false;
     this.messagesBuilder = undefined;
   }
   /**
@@ -71,6 +72,12 @@ export class SnkConfigurator {
     var _a;
     return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, {});
   }
+  handleSave() {
+    if (this.layoutFormConfig) {
+      this._snkLayoutFormConfig.save();
+    }
+    this.save.emit();
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
     if (this._application) {
@@ -94,7 +101,7 @@ export class SnkConfigurator {
     insideCustomElementsContainer === null || insideCustomElementsContainer === void 0 ? void 0 : insideCustomElementsContainer.appendChild(configuratorCustomElement);
   }
   render() {
-    return (h("ez-modal", { ref: (element) => (this.modal = element), opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small", scrim: "light" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage('snkConfigurator.titleConfigurations')), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-collapsible-box", { boxBordered: true, label: "Modo de visualiza\u00E7\u00E3o ", headerSize: "medium", class: "snk-configurator__collapsable-box" }, h("ez-radio-button", { value: this.getViewModeValue().toString(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelGrid'), value: VIEW_MODE.GRID }), h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelForm'), value: VIEW_MODE.FORM })), h("div", { class: "snk-configurator__collsable-box-action" }, h("ez-button", { label: this.viewMode === VIEW_MODE.GRID ? this.getMessage('snkConfigurator.labelConfigGrid') : this.getMessage('snkConfigurator.labelConfigForm'), class: "snk-configurator__button-config ez-button--secondary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }))), h("div", { id: "slotContainer", class: "snk-configurator__outline" })), this.showActionButtons && (h("div", { class: "snk-configurator__action-buttons" }, h("ez-button", { label: "Cancelar", onClick: () => this.cancel.emit() }), h("ez-button", { label: "Salvar", onClick: () => this.save.emit(), class: "ez-button--primary" }))))));
+    return (h("ez-modal", { ref: (element) => (this.modal = element), opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small", scrim: "light" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage('snkConfigurator.titleConfigurations')), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-collapsible-box", { boxBordered: true, label: "Modo de visualiza\u00E7\u00E3o ", headerSize: "medium", class: "snk-configurator__collapsable-box" }, h("ez-radio-button", { value: this.getViewModeValue().toString(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelGrid'), value: VIEW_MODE.GRID }), h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelForm'), value: VIEW_MODE.FORM })), h("div", { class: "snk-configurator__collsable-box-action" }, h("ez-button", { label: this.viewMode === VIEW_MODE.GRID ? this.getMessage('snkConfigurator.labelConfigGrid') : this.getMessage('snkConfigurator.labelConfigForm'), class: "snk-configurator__button-config ez-button--secondary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }))), this.layoutFormConfig && h("ez-collapsible-box", { boxBordered: true, value: true, label: "Layout do formul\u00E1rio", headerSize: "medium", class: "snk-configurator__collapsable-box  ez-margin-top--medium" }, h("div", { class: 'ez-flex ez-flex--column ez-size-width--full' }, h("snk-layout-form-config", { ref: (ref) => this._snkLayoutFormConfig = ref }))), h("div", { id: "slotContainer", class: "snk-configurator__outline" })), this.showActionButtons && (h("div", { class: "snk-configurator__action-buttons" }, h("ez-button", { label: "Cancelar", onClick: () => this.cancel.emit() }), h("ez-button", { label: "Salvar", onClick: () => this.handleSave(), class: "ez-button--primary" }))))));
   }
   static get is() { return "snk-configurator"; }
   static get encapsulation() { return "scoped"; }
@@ -202,6 +209,24 @@ export class SnkConfigurator {
         "attribute": "custom-container-id",
         "reflect": false
       },
+      "layoutFormConfig": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o LayoutFormConfig ser\u00E1 exibido no configurador."
+        },
+        "attribute": "layout-form-config",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "messagesBuilder": {
         "type": "unknown",
         "mutable": true,

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

@@ -47,6 +47,7 @@ export class SnkCrud {
     this.ignoreReadOnlyFormFields = undefined;
     this.setCustomFormTitle = undefined;
     this.strategyExporter = ExporterStrategy.SERVER_SIDE;
+    this.layoutFormConfig = false;
     this.customContainerId = `SNK-CRUD-CUSTOM-CONTAINER-${StringUtils.generateUUID()}`;
   }
   /**
@@ -382,7 +383,7 @@ export class SnkCrud {
       return;
     }
     this._snkDataUnit.ignoreSaveMessage = (this._currentViewMode === VIEW_MODE.GRID && !this.enableGridInsert);
-    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full ez-padding--medium' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full ez-padding--medium' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -864,6 +865,24 @@ export class SnkCrud {
         "attribute": "strategy-exporter",
         "reflect": false,
         "defaultValue": "ExporterStrategy.SERVER_SIDE"
+      },
+      "layoutFormConfig": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o LayoutFormConfig ser\u00E1 exibido no configurador."
+        },
+        "attribute": "layout-form-config",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -24,10 +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;
-        this._chipElement.blur();
+        (_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();

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,73 @@
+import { h } from '@stencil/core';
+import { FormConfigFetcher } from '../../lib';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+const FORM_COL_CONFIG_PREFIX = 'formColCfg.';
+export class SnkLayoutFormConfig {
+  constructor() {
+    this._formConfigFetcher = new FormConfigFetcher();
+    this.layoutType = FormLayout.CASCADE;
+  }
+  /**
+   * Salva o tipo de layout escolhido. Sem retorno.
+   */
+  async save() {
+    this._LayoutFormConfigSingleton.setConfig(this.layoutType);
+    this._formConfigFetcher.saveLayoutFormConfig(FORM_COL_CONFIG_PREFIX + this._resourceID, { config: this.layoutType, newConfig: true });
+  }
+  async componentWillLoad() {
+    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._LayoutFormConfigSingleton = await (_application === null || _application === void 0 ? void 0 : _application.getLayoutFormConfig());
+    this._resourceID = await (_application === null || _application === void 0 ? void 0 : _application.getResourceID());
+    this.setLayoutInit();
+  }
+  setLayoutInit() {
+    if (!this._LayoutFormConfigSingleton)
+      return;
+    const { config } = this._LayoutFormConfigSingleton;
+    this.layoutType = Number(config) in FormLayout ? Number(config) : FormLayout.CASCADE;
+  }
+  toggleLayout(key) {
+    this.layoutType = key;
+  }
+  render() {
+    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: "Layout em cascata", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o organizados em uma coluna \u00FAnica.")), h("div", null, h("ez-check", { label: "Layout lado a lado", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o dispostos lado a lado, ajustando-se automaticamente \u00E0 largura da tela."))));
+  }
+  static get is() { return "snk-layout-form-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-layout-form-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-layout-form-config.css"]
+    };
+  }
+  static get states() {
+    return {
+      "layoutType": {}
+    };
+  }
+  static get methods() {
+    return {
+      "save": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Salva o tipo de layout escolhido. Sem retorno.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+}
+
+.svg-container {
+    display: flex;
+    width: 185px;
+    height: 125px;
+    border-radius: 8px;
+    background-color: #f7f7f7;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    position: relative;
+  }
+  
+  .svg-container__background{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .svg-container__header {
+    display: flex;
+    gap: 2px;
+    margin-bottom: 12px;
+  }
+  
+  .svg-container__circle {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+  }
+  
+  .svg-container__circle--red {
+    background-color: #ed7678;
+  }
+  
+  .svg-container__circle--yellow {
+    background-color: #eddb76;
+  }
+  
+  .svg-container__circle--green {
+    background-color: #7ad08e;
+  }
+  
+  .svg-container__section{
+    width: 100%;
+  }
+  
+  .svg-container__collumn {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .svg-container__inline {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+  }
+  
+  .svg-container__line {
+    height: 13px;
+    border-radius: 4px;
+    background-color: #d9d9d9;
+    margin-bottom: 4px;
+  }
+  
+  .svg-container__line--short {
+    width: 39.68px;
+    height: 7px;
+    border-radius: 3.5px;
+  }
+  
+  .svg-container__line--long {
+    width: 100%;
+  }
+  

package/dist/collection/components/snk-layout-form-config/snk-view-representation/snk-view-representation.js

@@ -0,0 +1,57 @@
+import { h } from '@stencil/core';
+import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+export class SnkViewRepresentation {
+  constructor() {
+    this.mode = FormLayout.SIDE_BY_SIDE;
+  }
+  renderCascadeLayout() {
+    return (h("div", { class: "svg-container__collumn" }, [...Array(3)].map(() => (h("div", { class: "svg-container__section" }, h("div", { class: "svg-container__line svg-container__line--short" }), h("div", { class: "svg-container__line svg-container__line--long" }))))));
+  }
+  renderSideBySideLayout() {
+    return (h("div", { class: "svg-container__inline" }, [...Array(2)].map(() => this.renderCascadeLayout())));
+  }
+  render() {
+    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), this.mode === FormLayout.CASCADE
+      ? this.renderCascadeLayout()
+      : this.renderSideBySideLayout())));
+  }
+  static get is() { return "snk-view-representation"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-view-representation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-view-representation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "FormLayout",
+          "resolved": "FormLayout",
+          "references": {
+            "FormLayout": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/collection/utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o layout do componente: 'CASCADE' ou 'SIDE_BY_SIDE'"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "FormLayout.SIDE_BY_SIDE"
+      }
+    };
+  }
+}

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

@@ -61,6 +61,7 @@ export class SnkSimpleCrud {
     this.ignoreReadOnlyFormFields = false;
     this.autoFocus = true;
     this.domainMessagesBuilder = undefined;
+    this.layoutFormConfig = false;
     this.autoLoad = undefined;
     this.outlineMode = false;
   }
@@ -753,7 +754,7 @@ export class SnkSimpleCrud {
     }
     return (h("snk-data-unit", { ref: ref => this._snkDataUnit = ref, class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), pageSize: this.getPageSize(), onInsertionMode: this.handleDataUnitOnInsertionMode.bind(this), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail, onDataUnitFieldsHidded: this.updateFormConfig.bind(this), domainMessagesBuilder: this.domainMessagesBuilder }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: `ez-box ${this.outlineMode ? 'ez-box--outline' : 'ez-box--shadow'} simple-crud__container-section` }, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { class: "ez-margin-bottom--large", ref: ref => this._grid = ref, dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), onConfigChange: evt => this.gridConfigChangeHandler(evt), columnfilterDataSource: this.dataUnit.name && this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
         ? undefined
-        : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode }, this.renderTaskbarContent(), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this) }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._showPopUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this.gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resolveResourceID() }))));
+        : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode }, this.renderTaskbarContent(), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this) }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._showPopUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this.gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resolveResourceID() }))));
   }
   static get is() { return "snk-simple-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -1233,6 +1234,24 @@ export class SnkSimpleCrud {
         "attribute": "domain-messages-builder",
         "reflect": false
       },
+      "layoutFormConfig": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o LayoutFormConfig ser\u00E1 exibido no configurador."
+        },
+        "attribute": "layout-form-config",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "autoLoad": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/lib/configs/LayoutFormConfig.js

@@ -0,0 +1,25 @@
+export class LayoutFormConfig {
+  constructor() {
+    this._config = null;
+    this.listeners = [];
+  }
+  static getInstance() {
+    if (!LayoutFormConfig.instance) {
+      LayoutFormConfig.instance = new LayoutFormConfig();
+    }
+    return LayoutFormConfig.instance;
+  }
+  get config() {
+    return this._config;
+  }
+  setConfig(newConfig) {
+    this._config = newConfig;
+    this.notifyListeners();
+  }
+  onConfigChange(listener) {
+    this.listeners.push(listener);
+  }
+  notifyListeners() {
+    this.listeners.forEach(listener => listener(this._config));
+  }
+}

package/dist/collection/lib/http/data-fetcher/fetchers/form-config-fetcher.js

@@ -220,6 +220,20 @@ export class FormConfigFetcher extends ResourceFetcher {
     const rawFields = (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.formConfig) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : [];
     return { emptyConfig: false, fields: Array.isArray(rawFields) ? rawFields : [rawFields] };
   }
+  async fetchLayoutFormConfig(configName) {
+    const payload = { 'requestBody': { 'config': { 'chave': configName, 'tipo': 'T' } } };
+    const response = await DataFetcher.get().callServiceBroker('SystemUtilsSP.getConf', JSON.stringify(payload));
+    if (ObjectUtils.isEmpty(response))
+      return undefined;
+    return response.config;
+  }
+  async saveLayoutFormConfig(configName, config) {
+    const payload = { 'requestBody': { 'config': Object.assign(Object.assign({}, config), { 'chave': configName, 'tipo': 'T' }) } };
+    const response = await DataFetcher.get().callServiceBroker('SystemUtilsSP.saveConf', JSON.stringify(payload));
+    if (ObjectUtils.isEmpty(response))
+      return undefined;
+    return response;
+  }
 }
 export var UserConfigType;
 (function (UserConfigType) {

package/dist/components/form-config-fetcher.js

@@ -282,6 +282,20 @@ class FormConfigFetcher extends ResourceFetcher {
     const rawFields = (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.formConfig) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : [];
     return { emptyConfig: false, fields: Array.isArray(rawFields) ? rawFields : [rawFields] };
   }
+  async fetchLayoutFormConfig(configName) {
+    const payload = { 'requestBody': { 'config': { 'chave': configName, 'tipo': 'T' } } };
+    const response = await DataFetcher.get().callServiceBroker('SystemUtilsSP.getConf', JSON.stringify(payload));
+    if (ObjectUtils.isEmpty(response))
+      return undefined;
+    return response.config;
+  }
+  async saveLayoutFormConfig(configName, config) {
+    const payload = { 'requestBody': { 'config': Object.assign(Object.assign({}, config), { 'chave': configName, 'tipo': 'T' }) } };
+    const response = await DataFetcher.get().callServiceBroker('SystemUtilsSP.saveConf', JSON.stringify(payload));
+    if (ObjectUtils.isEmpty(response))
+      return undefined;
+    return response;
+  }
 }
 var UserConfigType;
 (function (UserConfigType) {

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export { SnkFormView as SnkFormView } from '../types/components/snk-crud/subcomp
 export { SnkGrid as SnkGrid } from '../types/components/snk-grid/snk-grid';
 export { SnkGridConfig as SnkGridConfig } from '../types/components/snk-grid-config/snk-grid-config';
 export { SnkGuidesViewer as SnkGuidesViewer } from '../types/components/snk-crud/subcomponents/snk-guides-viewer';
+export { SnkLayoutFormConfig as SnkLayoutFormConfig } from '../types/components/snk-layout-form-config/snk-layout-form-config';
 export { SnkPersonalizedFilter as SnkPersonalizedFilter } from '../types/components/snk-personalized-filter/snk-personalized-filter';
 export { SnkFilterPersonalized as SnkPersonalizedFilterEditor } from '../types/components/snk-filter-bar/filter-item/editors/snk-personalized-filter-editor/snk-personalized-filter-editor';
 export { SnkPesquisa as SnkPesquisa } from '../types/components/snk-pesquisa/snk-pesquisa';
@@ -52,6 +53,7 @@ export { SnkSimpleCrud as SnkSimpleCrud } from '../types/components/snk-simple-c
 export { SnkSimpleFormConfig as SnkSimpleFormConfig } from '../types/components/snk-simple-form-config/snk-simple-form-config';
 export { SnkTabConfig as SnkTabConfig } from '../types/components/snk-form-config/subcomponents/snk-tab-config/snk-tab-config';
 export { SnkTaskbar as SnkTaskbar } from '../types/components/snk-taskbar/snk-taskbar';
+export { SnkViewRepresentation as SnkViewRepresentation } from '../types/components/snk-layout-form-config/snk-view-representation/snk-view-representation';
 export { TaskbarActionsButton as TaskbarActionsButton } from '../types/components/snk-taskbar/elements/taskbar-actions-button/taskbar-actions-button';
 export { TestePesquisa as TestePesquisa } from '../types/components/teste-pesquisa/teste-pesquisa';
 

package/dist/components/index.js

@@ -42,6 +42,7 @@ export { SnkFormView, defineCustomElement as defineCustomElementSnkFormView } fr
 export { SnkGrid, defineCustomElement as defineCustomElementSnkGrid } from './snk-grid.js';
 export { SnkGridConfig, defineCustomElement as defineCustomElementSnkGridConfig } from './snk-grid-config.js';
 export { SnkGuidesViewer, defineCustomElement as defineCustomElementSnkGuidesViewer } from './snk-guides-viewer.js';
+export { SnkLayoutFormConfig, defineCustomElement as defineCustomElementSnkLayoutFormConfig } from './snk-layout-form-config.js';
 export { SnkPersonalizedFilter, defineCustomElement as defineCustomElementSnkPersonalizedFilter } from './snk-personalized-filter.js';
 export { SnkPersonalizedFilterEditor, defineCustomElement as defineCustomElementSnkPersonalizedFilterEditor } from './snk-personalized-filter-editor.js';
 export { SnkPesquisa, defineCustomElement as defineCustomElementSnkPesquisa } from './snk-pesquisa.js';
@@ -52,5 +53,6 @@ export { SnkSimpleCrud, defineCustomElement as defineCustomElementSnkSimpleCrud
 export { SnkSimpleFormConfig, defineCustomElement as defineCustomElementSnkSimpleFormConfig } from './snk-simple-form-config.js';
 export { SnkTabConfig, defineCustomElement as defineCustomElementSnkTabConfig } from './snk-tab-config.js';
 export { SnkTaskbar, defineCustomElement as defineCustomElementSnkTaskbar } from './snk-taskbar.js';
+export { SnkViewRepresentation, defineCustomElement as defineCustomElementSnkViewRepresentation } from './snk-view-representation.js';
 export { TaskbarActionsButton, defineCustomElement as defineCustomElementTaskbarActionsButton } from './taskbar-actions-button.js';
 export { TestePesquisa, defineCustomElement as defineCustomElementTestePesquisa } from './teste-pesquisa.js';