@sankhyalabs/ezui 5.22.0-dev.11 → 5.22.0-dev.111

package/dist/collection/components/ez-double-list/ez-double-list.js

@@ -0,0 +1,440 @@
+import { h, Host } from '@stencil/core';
+import { moveItems, transferAll, transferItems } from './doubleListHelper';
+import { ArrayUtils, ObjectUtils } from '@sankhyalabs/core';
+import { isContinuousSequence } from '../ez-list/ezListHelper';
+import { EzScrollDirection } from '../ez-scroller/EzScrollDirection';
+export class EzDoubleList {
+  constructor() {
+    this.LEFT_LIST_ID = 'LEFT-LIST-ID';
+    this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
+    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
+    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
+    this.leftList = [];
+    this.leftTitle = undefined;
+    this.rightList = [];
+    this.entityLabel = 'item';
+    this.entityLabelPlural = 'itens';
+    this.leftListLabel = 'disponíveis';
+    this.rightListLabel = 'selecionados';
+    this.rightTitle = undefined;
+    this.leftFilteredList = [];
+    this.rightFilteredList = [];
+    this.selectedLeftList = [];
+    this.selectedRightList = [];
+    this.isFilteringLeft = false;
+    this.isFilteringRight = false;
+  }
+  async resetSelectedLists() {
+    this.selectedLeftList = [];
+    this.selectedRightList = [];
+  }
+  observeLeftList(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.ezLeftListChanged.emit(newValue);
+  }
+  observeRightList(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.ezRightListChanged.emit(newValue);
+  }
+  handleFilterChangeLeft(value) {
+    this.leftFilteredList = ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
+    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
+  }
+  handleFilterChangeRight(value) {
+    this.rightFilteredList = ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
+    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
+  }
+  async handleChangeLeft({ detail }) {
+    this.leftList = [...detail];
+    this.selectedLeftList = [...detail.filter(item => item.selected)];
+    await this.leftEzListInstance.clearHistory();
+  }
+  async handleChangeRight({ detail }) {
+    this.rightList = [...detail];
+    this.selectedRightList = [...detail.filter(item => item.selected)];
+    await this.rightEzListInstance.clearHistory();
+  }
+  enableTransferAllToRight() {
+    return this.leftList.length > 0;
+  }
+  enableTransferAllToLeft() {
+    return this.rightList.length > 0;
+  }
+  enableTransferToRight() {
+    return this.selectedLeftList.length > 0;
+  }
+  enableTransferToLeft() {
+    return this.selectedRightList.length > 0;
+  }
+  enableMoveUp(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(0)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  enableMoveDown(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    const lastIndex = this.rightList.length - 1;
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(lastIndex)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  getRightSelectedItemsIndex() {
+    return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
+  }
+  transferToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  transferToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  handleTransferAllToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  handleTransferAllToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  buildTransferToRightConfig() {
+    return {
+      from: this.leftList,
+      to: this.rightList,
+      selectedFrom: this.selectedLeftList,
+      selectedTo: this.selectedRightList,
+    };
+  }
+  buildTransferToLeftConfig() {
+    return {
+      from: this.rightList,
+      to: this.leftList,
+      selectedFrom: this.selectedRightList,
+      selectedTo: this.selectedLeftList,
+    };
+  }
+  handleMoveUp() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, false)];
+  }
+  handleMoveDown() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, true)];
+  }
+  handleMoveToTop() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToMove, ...itemsToKeep];
+  }
+  handleMoveToBottom() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToKeep, ...itemsToMove];
+  }
+  handleSelectLeftItem({ detail }) {
+    this.selectedLeftList = [...detail.map(({ id }) => id)];
+  }
+  handleSelectRightItem({ detail }) {
+    this.selectedRightList = [...detail.map(({ id }) => id)];
+  }
+  getItemsToKeepAndToMove() {
+    const itemsToKeep = this.rightList.filter(item => !this.selectedRightList.includes(item.id));
+    const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
+    return { itemsToKeep, itemsToMove };
+  }
+  handleTransferToRight() {
+    this.transferToRight();
+    this.leftFilteredList = [];
+    this.leftEzFilterInput.value = '';
+  }
+  handleTransferToLeft() {
+    this.transferToLeft();
+    this.rightFilteredList = [];
+    this.rightEzFilterInput.value = '';
+  }
+  buildTotalizer(list) {
+    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  }
+  renderLeftList() {
+    if (!this.leftList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  }
+  renderRightList() {
+    if (!this.rightList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.leftTitle), h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), h("div", { class: 'list__container' }, this.renderLeftList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.rightTitle), h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), h("div", { class: 'list__container' }, this.renderRightList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-up', enabled: this.enableMoveUp(true), title: 'Mover para primeira posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-up', enabled: this.enableMoveUp(), title: 'Mover para cima', size: 'small', onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-down', enabled: this.enableMoveDown(), title: 'Mover para baixo', size: 'small', onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-down', enabled: this.enableMoveDown(true), title: 'Mover para \u00FAltima posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToBottom.bind(this) }))));
+  }
+  static get is() { return "ez-double-list"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-double-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-double-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "leftList": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ListItem[]",
+          "resolved": "ListItem[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista origem."
+        },
+        "defaultValue": "[]"
+      },
+      "leftTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o t\u00EDtulo da lista origem."
+        },
+        "attribute": "left-title",
+        "reflect": false
+      },
+      "rightList": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ListItem[]",
+          "resolved": "ListItem[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista destino."
+        },
+        "defaultValue": "[]"
+      },
+      "entityLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade listada.\nExemplo: \"Campo\", \"Item\", \"Empresa\"."
+        },
+        "attribute": "entity-label",
+        "reflect": false,
+        "defaultValue": "'item'"
+      },
+      "entityLabelPlural": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Varia\u00E7\u00E3o plura do nome da entidade listada.\nExemplo: \"Campos\", \"Itens\", \"Empresas\"."
+        },
+        "attribute": "entity-label-plural",
+        "reflect": false,
+        "defaultValue": "'itens'"
+      },
+      "leftListLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "R\u00F3tulo da lista esquerda."
+        },
+        "attribute": "left-list-label",
+        "reflect": false,
+        "defaultValue": "'dispon\u00EDveis'"
+      },
+      "rightListLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "R\u00F3tulo da lista direita."
+        },
+        "attribute": "right-list-label",
+        "reflect": false,
+        "defaultValue": "'selecionados'"
+      },
+      "rightTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o t\u00EDtulo da lista destino."
+        },
+        "attribute": "right-title",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "leftFilteredList": {},
+      "rightFilteredList": {},
+      "selectedLeftList": {},
+      "selectedRightList": {},
+      "isFilteringLeft": {},
+      "isFilteringRight": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezLeftListChanged",
+        "name": "ezLeftListChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Array<ListItem>",
+          "resolved": "ListItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        }
+      }, {
+        "method": "ezRightListChanged",
+        "name": "ezRightListChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Array<ListItem>",
+          "resolved": "ListItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "resetSelectedLists": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "leftList",
+        "methodName": "observeLeftList"
+      }, {
+        "propName": "rightList",
+        "methodName": "observeRightList"
+      }];
+  }
+}

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

@@ -124,14 +124,19 @@ export class EzDropdown {
     }
     return groupItems.map((item) => {
       var _a;
-      return (item.type !== "divider"
-        ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
-          : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-          !isLockedLevels &&
-          hasChildren &&
-          h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
-        : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+      switch (item.type) {
+        case "loading":
+          return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
+        case "divider":
+          return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+        case "item":
+          return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
+            ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
+            : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            !isLockedLevels &&
+            hasChildren &&
+            h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel))));
+      }
     });
   }
   renderDropdown(branchItems = this.items, level = 1) {
@@ -370,6 +375,26 @@ export class EzDropdown {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "ezHover",
+        "name": "ezHover",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer o ponteiro do mouse \u00E9 colocado sobre um item."
+        },
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "_element"; }

package/dist/collection/components/ez-filter-input/ez-filter-input.css

@@ -1,4 +1,4 @@
 :host {
   display: block;
   width: 100%;
-}
+}

package/dist/collection/components/ez-filter-input/ez-filter-input.js

@@ -21,6 +21,7 @@ export class EzFilterInput {
     this.mode = "regular";
     this.asyncSearch = false;
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -41,8 +42,8 @@ export class EzFilterInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -95,6 +96,11 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -253,6 +259,24 @@ export class EzFilterInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -308,11 +332,18 @@ export class EzFilterInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

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

@@ -1,18 +1,21 @@
-import { Action, DataUnit, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Action, DataUnit, ElementIDUtils, StringUtils, ApplicationContext } from "@sankhyalabs/core";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createStore } from "redux";
 import DataBinder from "../../utils/form/DataBinder";
 import { buildFormMetadata } from "../../utils/form/FormMetadata";
+import { FormLayout } from '../../utils/form/interfaces';
 import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
 export class EzForm {
   constructor() {
     this._customEditors = new Map();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
     this._fieldsProps = new Map();
+    this._singleColumn = true;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -75,7 +78,7 @@ export class EzForm {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -90,10 +93,12 @@ export class EzForm {
   bindFields() {
     return !this.isStatic() || this.onlyStaticFields === false;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    var _a;
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);
@@ -102,6 +107,28 @@ export class EzForm {
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
+    this.setSingleColumn(layoutFormConfig);
+    this.registerNotifyListeners(layoutFormConfig);
+  }
+  async setSingleColumn(layoutFormConfig) {
+    if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {
+      this._singleColumn = true;
+      return;
+    }
+    this._singleColumn = layoutFormConfig.config === FormLayout.CASCADE ? true : false;
+  }
+  async registerNotifyListeners(layoutFormConfig) {
+    if (!layoutFormConfig)
+      return;
+    layoutFormConfig.onConfigChange((config) => {
+      if (config === FormLayout.CASCADE) {
+        this._singleColumn = true;
+      }
+      else {
+        this._singleColumn = false;
+      }
+    });
   }
   componentDidRender() {
     const metadata = selectFormMetadata(this._store.getState());
@@ -273,7 +300,8 @@ export class EzForm {
   }
   static get states() {
     return {
-      "_fieldsProps": {}
+      "_fieldsProps": {},
+      "_singleColumn": {}
     };
   }
   static get events() {