@sankhyalabs/ezui 2.11.0 → 2.12.0

package/dist/esm/ez-form.entry.js

@@ -1,287 +1,8 @@
-import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-b77dcd0d.js';
-import { UserInterface, Action, WaitingChangeException, ApplicationContext, StringUtils, DataUnitAction, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { C as CheckMode } from './CheckMode-bdb2ec19.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-c5203f95.js';
+import { Action, WaitingChangeException, ApplicationContext, UserInterface, StringUtils, DataUnitAction, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-9fda4796.js';
 import './DialogType-54a62731.js';
 
-class FormMetadata {
-  constructor() {
-    this._sheets = new Map();
-    this._requiredFields = [];
-    this._cleanOnCopyFields = [];
-    this._defaultValues = {};
-  }
-  getSheet(name) {
-    return this._sheets.get(name);
-  }
-  getAllSheets() {
-    return this._sheets;
-  }
-  addSheet(sheet) {
-    this._sheets.set(sheet.name, sheet);
-    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
-    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
-    this._defaultValues = sheet.defaultValues;
-  }
-  getRequiredFields() {
-    return this._requiredFields;
-  }
-  getCleanOnCopyFields() {
-    return this._cleanOnCopyFields;
-  }
-  getDefaultValues() {
-    return this._defaultValues;
-  }
-}
-const isRequiredField = (descriptor, config) => {
-  if (descriptor.required) {
-    //Se for required pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.required;
-};
-const isReadOnlyField = (descriptor, config) => {
-  if (descriptor.readOnly) {
-    //Se for readOnly pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.readOnly;
-};
-const buildFromDataUnit = (dataUnit) => {
-  var _a, _b;
-  const unitMD = dataUnit.metadata;
-  const metadata = new FormMetadata();
-  if (unitMD) {
-    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
-    const items = new Map();
-    (_b = unitMD === null || unitMD === void 0 ? void 0 : unitMD.fields) === null || _b === void 0 ? void 0 : _b.forEach((descriptor) => {
-      if (descriptor.visible !== false) {
-        resolveFieldGroup(items, null, descriptor);
-      }
-    });
-    let defaultValues = {};
-    visibleFields
-      .filter(descriptor => descriptor.defaultValue)
-      .map((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
-    metadata.addSheet({
-      label: unitMD.label,
-      name: unitMD.name,
-      items: Array.from(items.values()),
-      requiredFields: visibleFields
-        .filter(descriptor => descriptor.required)
-        .map(descriptor => descriptor.name),
-      cleanOnCopyFields: visibleFields
-        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
-        .map(descriptor => descriptor.name),
-      defaultValues
-    });
-  }
-  return metadata;
-};
-function getTabConfig(tab, sheets) {
-  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
-  return tabConfig || { label: tab, visible: true };
-}
-function sortTabs(a, b) {
-  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
-}
-function resolveFieldGroup(items, field, descriptor) {
-  const fieldMD = { config: field, descriptor: descriptor };
-  let group = (field === null || field === void 0 ? void 0 : field.group) || descriptor.group;
-  if (group) {
-    const key = `group::${group}`;
-    if (!items.has(key)) {
-      items.set(key, { label: group, items: [fieldMD] });
-    }
-    else {
-      items.get(key).items.push(fieldMD);
-    }
-  }
-  else {
-    items.set((field === null || field === void 0 ? void 0 : field.name) || descriptor.name, fieldMD);
-  }
-}
-const buildFromConfig = (config, dataUnit) => {
-  var _a, _b;
-  const sheets = new Map();
-  const hiddenTabs = new Map();
-  const requiredFields = [];
-  const cleanOnCopyFields = [];
-  const defaultValues = {};
-  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
-      hiddenTabs.set(tab.label, tab);
-    }
-  });
-  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
-    var _a, _b, _c, _d;
-    if (field.visible !== false) {
-      const tabConfig = getTabConfig(field.tab || "__main", sheets);
-      if (hiddenTabs.has(tabConfig.label)) {
-        return;
-      }
-      const descriptor = dataUnit.getField(field.name);
-      if (descriptor && tabConfig.visible) {
-        if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, new Map());
-        }
-        const tabItens = sheets.get(tabConfig);
-        if (isRequiredField(descriptor, field)) {
-          requiredFields.push(field.name);
-        }
-        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
-        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
-          cleanOnCopyFields.push(field.name);
-        }
-        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
-        if (defaultValue) {
-          defaultValues[field.name] = field.defaultValue;
-        }
-        resolveFieldGroup(tabItens, field, descriptor);
-      }
-    }
-  });
-  const metadata = new FormMetadata();
-  Array.from(sheets.entries())
-    .sort(sortTabs)
-    .forEach(([key, value]) => {
-    metadata.addSheet({
-      label: (key.label === "__main") ? "Principal" : key.label,
-      name: key.label,
-      items: Array.from(value.values()),
-      requiredFields,
-      cleanOnCopyFields,
-      defaultValues
-    });
-  });
-  return metadata;
-};
-
-const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
-    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
-};
-
-const buildTextInput = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
-};
-
-const buildSwitch = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
-};
-const buildCheckBox = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
-};
-function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
-}
-
-const buildComboBox = ({ name, label, readOnly, required }, properties) => {
-  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
-  let options;
-  if (typeof prop === "string") {
-    const parsed = JSON.parse(prop);
-    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
-  }
-  else {
-    options = prop;
-  }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
-};
-
-const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
-};
-
-const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTime = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTimeDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDecimal = ({ name, label, readOnly }, properties) => {
-  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
-  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
-};
-const buildInteger = ({ name, label, readOnly }) => {
-  return buildNumeric(name, label, readOnly, 0, 0);
-};
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
-}
-
-const uiBuilders = new Map();
-uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
-uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
-uiBuilders.set(UserInterface.SWITCH, buildSwitch);
-uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
-uiBuilders.set(UserInterface.SEARCH, buildSearch);
-uiBuilders.set(UserInterface.FILE, buildFile);
-uiBuilders.set(UserInterface.DATE, buildDate);
-uiBuilders.set(UserInterface.TIME, buildTime);
-uiBuilders.set(UserInterface.DATETIME, buildTimeDate);
-uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
-uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
-const buildField = (field) => {
-  const descriptor = field.descriptor;
-  const config = Object.assign({}, field.config);
-  let builder;
-  let props;
-  if (descriptor) {
-    if (!config.label) {
-      config.label = descriptor.label;
-    }
-    if (!config.name) {
-      config.name = descriptor.name;
-    }
-    // Forçamos uma avaliação priorizando o descriptor.
-    config.required = isRequiredField(descriptor, config);
-    config.readOnly = isReadOnlyField(descriptor, config);
-    props = descriptor.properties;
-    builder = uiBuilders.get(descriptor.userInterface);
-  }
-  if (config.required) {
-    config.label = `${config.label} (obrigatório) *`;
-  }
-  if (!builder) {
-    builder = buildTextInput;
-  }
-  return builder(config, props);
-};
-
-const FormItem = ({ source }) => {
-  if ("items" in source) {
-    const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
-  }
-  else {
-    return buildField(source);
-  }
-};
-
-const FormSheet = ({ store, source, dataElementId }) => {
-  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
-    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
-};
-
 /**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
  *
@@ -605,45 +326,6 @@ function createStore(reducer, preloadedState, enhancer) {
   }, _ref2[$$observable] = observable, _ref2;
 }
 
-const inicialState = {};
-///////////////////////////////     REDUCERS     ///////////////////////////////
-function formReducer(state = inicialState, action) {
-  switch (action.type) {
-    case FormActions.METADATA_LOADED:
-      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
-    case FormActions.CHANGE_TAB:
-      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
-    default:
-      return state;
-  }
-}
-/////////////////////////////// ACTION CREATORS ///////////////////////////////
-function loadMetadata(formMetadata) {
-  return {
-    type: FormActions.METADATA_LOADED,
-    payload: formMetadata
-  };
-}
-function changeTab(currentSheet) {
-  return {
-    type: FormActions.CHANGE_TAB,
-    payload: currentSheet.tabKey
-  };
-}
-///////////////////////////////    SELECTORS    ///////////////////////////////
-function selectFormMetadata(state) {
-  return state.formMetadata;
-}
-function selectCurrentSheet(state) {
-  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
-}
-///////////////////////////////      TYPES      ///////////////////////////////
-var FormActions;
-(function (FormActions) {
-  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
-  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
-})(FormActions || (FormActions = {}));
-
 class DataBinder {
   constructor(dataUnit) {
     this._invalidFields = new Map();
@@ -850,7 +532,187 @@ class Bind {
   }
 }
 
-const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}.dynamic-content ez-collapsible-box{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}";
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
+function selectCurrentSheet(state) {
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));
+
+class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+    this._cleanOnCopyFields = [];
+    this._defaultValues = {};
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
+    this._defaultValues = sheet.defaultValues;
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+  getCleanOnCopyFields() {
+    return this._cleanOnCopyFields;
+  }
+  getDefaultValues() {
+    return this._defaultValues;
+  }
+}
+const buildFromDataUnit = (dataUnit) => {
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (unitMD.fields || []).filter(descriptor => descriptor.visible !== false);
+    const fields = visibleFields.map(descriptor => buildFormField(descriptor));
+    let defaultValues = {};
+    visibleFields
+      .filter(descriptor => descriptor.defaultValue)
+      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
+    metadata.addSheet({
+      name: unitMD.name,
+      label: unitMD.label,
+      fields,
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name),
+      cleanOnCopyFields: visibleFields
+        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
+        .map(descriptor => descriptor.name),
+      defaultValues
+    });
+  }
+  return metadata;
+};
+const buildFromConfig = (config, dataUnit) => {
+  var _a, _b;
+  const sheets = new Map();
+  const hiddenTabs = new Map();
+  const requiredFields = [];
+  const cleanOnCopyFields = [];
+  const defaultValues = {};
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+    var _a, _b, _c, _d;
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
+      if (descriptor && tabConfig.visible) {
+        if (!sheets.has(tabConfig)) {
+          sheets.set(tabConfig, []);
+        }
+        const formField = buildFormField(descriptor, field);
+        sheets.get(tabConfig).push(formField);
+        if (formField.required) {
+          requiredFields.push(field.name);
+        }
+        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
+          cleanOnCopyFields.push(field.name);
+        }
+        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
+        if (defaultValue) {
+          defaultValues[field.name] = field.defaultValue;
+        }
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  Array.from(sheets.entries())
+    .sort(sortTabs)
+    .forEach(([key, fields]) => {
+    metadata.addSheet({
+      label: (key.label === "__main") ? "Principal" : key.label,
+      name: key.label,
+      fields,
+      requiredFields,
+      cleanOnCopyFields,
+      defaultValues
+    });
+  });
+  return metadata;
+};
+const buildFormField = (descriptor, config) => {
+  let { name, label, group } = Object.assign({}, config);
+  let { readOnly, required } = Object.assign({}, config);
+  let props;
+  let userInterface;
+  if (descriptor) {
+    label = label || descriptor.label;
+    name = name || descriptor.name;
+    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
+    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
+    props = descriptor.properties;
+    userInterface = descriptor.userInterface;
+  }
+  return {
+    name, label, group,
+    readOnly, required,
+    props,
+    userInterface: userInterface || UserInterface.SHORTTEXT
+  };
+};
+const getTabConfig = (tab, sheets) => {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+};
+const sortTabs = (a, b) => {
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+};
+
+const ezFormCss = ".sc-ez-form-h{display:flex;flex-direction:column;width:100%}.dynamic-content.sc-ez-form ez-collapsible-box.sc-ez-form{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}.multi-level__container.sc-ez-form{display:grid;grid-template-columns:minmax(20%, 300px) auto;width:100%}";
 
 let EzForm = class {
   constructor(hostRef) {
@@ -933,17 +795,40 @@ let EzForm = class {
       }
     });
   }
+  resolveLevel(items) {
+    if (!this.levelResolver) {
+      return items;
+    }
+    return this.levelResolver(items);
+  }
+  getMultiLevelContent(sheets, currentSheet, currentSheetId) {
+    const treeItems = this.resolveLevel(sheets.map(sheet => {
+      const item = {
+        id: sheet.name,
+        label: sheet.label
+      };
+      return item;
+    }));
+    return (h("div", { class: "multi-level__container" }, h("div", null, h("ez-tree", { selectedId: currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name, items: treeItems, onEzChange: (evt) => {
+        var _a;
+        const selectedItem = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.id;
+        if (selectedItem && selectedItem !== (currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name)) {
+          this._store.dispatch(changeTab(selectedItem));
+        }
+      } })), h("div", null, this.buildFormContent(currentSheetId, currentSheet))));
+  }
   getDynamicContent() {
-    var _a;
+    var _a, _b;
     const formMD = selectFormMetadata(this._store.getState());
     if (!formMD)
       return null;
-    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
-    if (!currentSheet) {
-      return null;
-    }
     const allSheets = Array.from(formMD.getAllSheets().values());
-    const result = [];
+    const currentSheetId = selectCurrentSheetId((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    const currentSheet = selectCurrentSheet((_b = this._store) === null || _b === void 0 ? void 0 : _b.getState());
+    if (this.multiLevel) {
+      return this.getMultiLevelContent(allSheets, currentSheet, currentSheetId);
+    }
+    let result = [];
     if (allSheets.length > 1) {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
@@ -951,12 +836,25 @@ let EzForm = class {
       const idTabSelector = `selector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}_selectorContainer`;
-    result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
+    result = result.concat(this.buildFormContent(currentSheetId, currentSheet));
     return result;
   }
+  buildFormContent(sheetId, currentSheet) {
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
+    if (this.contentBuilder != undefined) {
+      const customContent = this.contentBuilder(sheetId, fields);
+      if (customContent != undefined) {
+        return h("div", { "innerHTML": customContent });
+      }
+    }
+    if (currentSheet == undefined) {
+      return;
+    }
+    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
+    return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+  }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit) {
+    if (!this.isStatic() && this.dataUnit && this._store) {
       const metadata = this.config != undefined && Object.values(this.config).length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -996,7 +894,7 @@ let EzForm = class {
     }
     if (action.type === Action.RECORDS_ADDED) {
       const metadata = selectFormMetadata(this._store.getState());
-      const defaultValues = metadata.getDefaultValues();
+      const defaultValues = metadata === null || metadata === void 0 ? void 0 : metadata.getDefaultValues();
       if (defaultValues) {
         const records = action.payload;
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {

package/dist/esm/ez-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b77dcd0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c5203f95.js';
 import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils } from '@sankhyalabs/core';
 
 /**

package/dist/esm/ez-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b77dcd0d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c5203f95.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-account-outline:before{content:\"\\ea03\"}.ez-icon-account:before{content:\"\\ea04\"}.ez-icon-actions-sprite-v1:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipação:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow_back:before{content:\"\\ea0d\"}.ez-icon-arrow_downward:before{content:\"\\ea0e\"}.ez-icon-baixa:before{content:\"\\ea0f\"}.ez-icon-balance:before{content:\"\\ea10\"}.ez-icon-bell-inverted:before{content:\"\\ea11\"}.ez-icon-bell:before{content:\"\\ea12\"}.ez-icon-boleto:before{content:\"\\ea13\"}.ez-icon-business-center:before{content:\"\\ea14\"}.ez-icon-calendar-clock:before{content:\"\\ea15\"}.ez-icon-calendar:before{content:\"\\ea16\"}.ez-icon-cash-remove:before{content:\"\\ea17\"}.ez-icon-check-circle-inverted:before{content:\"\\ea18\"}.ez-icon-check-circle:before{content:\"\\ea19\"}.ez-icon-check:before{content:\"\\ea1a\"}.ez-icon-chevron-down:before{content:\"\\ea1b\"}.ez-icon-chevron-left:before{content:\"\\ea1c\"}.ez-icon-chevron-right:before{content:\"\\ea1d\"}.ez-icon-chevron-up:before{content:\"\\ea1e\"}.ez-icon-circle--medium:before{content:\"\\ea1f\"}.ez-icon-circle:before{content:\"\\ea20\"}.ez-icon-cleaning:before{content:\"\\ea21\"}.ez-icon-clipboard:before{content:\"\\ea22\"}.ez-icon-close:before{content:\"\\ea23\"}.ez-icon-cobrar:before{content:\"\\ea24\"}.ez-icon-code:before{content:\"\\ea25\"}.ez-icon-configuration:before{content:\"\\ea26\"}.ez-icon-copy:before{content:\"\\ea27\"}.ez-icon-credit_card:before{content:\"\\ea28\"}.ez-icon-crop:before{content:\"\\ea29\"}.ez-icon-custom:before{content:\"\\ea2a\"}.ez-icon-delete:before{content:\"\\ea2b\"}.ez-icon-description:before{content:\"\\ea2c\"}.ez-icon-dividir:before{content:\"\\ea2d\"}.ez-icon-docx:before{content:\"\\ea2e\"}.ez-icon-dot-notification:before{content:\"\\ea2f\"}.ez-icon-dots-horizontal:before{content:\"\\ea30\"}.ez-icon-dots-vertical:before{content:\"\\ea31\"}.ez-icon-drag-indicator:before{content:\"\\ea32\"}.ez-icon-dual-chevron-down:before{content:\"\\ea33\"}.ez-icon-dual-chevron-up:before{content:\"\\ea34\"}.ez-icon-edit-file:before{content:\"\\ea35\"}.ez-icon-edit-table:before{content:\"\\ea36\"}.ez-icon-edit-time:before{content:\"\\ea37\"}.ez-icon-edit:before{content:\"\\ea38\"}.ez-icon-email:before{content:\"\\ea39\"}.ez-icon-estorno:before{content:\"\\ea3a\"}.ez-icon-exe:before{content:\"\\ea3b\"}.ez-icon-expand:before{content:\"\\ea3c\"}.ez-icon-expandir_card:before{content:\"\\ea3d\"}.ez-icon-extrato:before{content:\"\\ea3e\"}.ez-icon-eye-off:before{content:\"\\ea3f\"}.ez-icon-eye:before{content:\"\\ea40\"}.ez-icon-favorite:before{content:\"\\ea41\"}.ez-icon-figma:before{content:\"\\ea42\"}.ez-icon-file-download:before{content:\"\\ea43\"}.ez-icon-file-upload:before{content:\"\\ea44\"}.ez-icon-filter:before{content:\"\\ea45\"}.ez-icon-find-file:before{content:\"\\ea46\"}.ez-icon-find-page:before{content:\"\\ea47\"}.ez-icon-format-color-fill:before{content:\"\\ea48\"}.ez-icon-generic:before{content:\"\\ea49\"}.ez-icon-gif:before{content:\"\\ea4a\"}.ez-icon-graph_bar:before{content:\"\\ea4b\"}.ez-icon-handshake:before{content:\"\\ea4c\"}.ez-icon-help-inverted:before{content:\"\\ea4d\"}.ez-icon-help:before{content:\"\\ea4e\"}.ez-icon-hide_menu:before{content:\"\\ea4f\"}.ez-icon-home:before{content:\"\\ea50\"}.ez-icon-icons104:before{content:\"\\ea51\"}.ez-icon-language:before{content:\"\\ea52\"}.ez-icon-launch:before{content:\"\\ea53\"}.ez-icon-lightbulb:before{content:\"\\ea54\"}.ez-icon-list:before{content:\"\\ea55\"}.ez-icon-location:before{content:\"\\ea56\"}.ez-icon-lock-outline:before{content:\"\\ea57\"}.ez-icon-lock:before{content:\"\\ea58\"}.ez-icon-menu:before{content:\"\\ea59\"}.ez-icon-mid:before{content:\"\\ea5a\"}.ez-icon-minus:before{content:\"\\ea5b\"}.ez-icon-money-off:before{content:\"\\ea5c\"}.ez-icon-money:before{content:\"\\ea5d\"}.ez-icon-more:before{content:\"\\ea5e\"}.ez-icon-mp3:before{content:\"\\ea5f\"}.ez-icon-mp4:before{content:\"\\ea60\"}.ez-icon-north-west:before{content:\"\\ea61\"}.ez-icon-number:before{content:\"\\ea62\"}.ez-icon-ordem-ascendente:before{content:\"\\ea63\"}.ez-icon-ordem-descendente:before{content:\"\\ea64\"}.ez-icon-parcelar:before{content:\"\\ea65\"}.ez-icon-pause:before{content:\"\\ea66\"}.ez-icon-payments:before{content:\"\\ea67\"}.ez-icon-pdf:before{content:\"\\ea68\"}.ez-icon-play:before{content:\"\\ea69\"}.ez-icon-plus:before{content:\"\\ea6a\"}.ez-icon-png:before{content:\"\\ea6b\"}.ez-icon-power:before{content:\"\\ea6c\"}.ez-icon-pptx:before{content:\"\\ea6d\"}.ez-icon-print:before{content:\"\\ea6e\"}.ez-icon-push-pin:before{content:\"\\ea6f\"}.ez-icon-rateio:before{content:\"\\ea70\"}.ez-icon-receipt:before{content:\"\\ea71\"}.ez-icon-recolher_card:before{content:\"\\ea72\"}.ez-icon-restore:before{content:\"\\ea73\"}.ez-icon-return:before{content:\"\\ea74\"}.ez-icon-save:before{content:\"\\ea75\"}.ez-icon-search:before{content:\"\\ea76\"}.ez-icon-settings-inverted:before{content:\"\\ea77\"}.ez-icon-settings:before{content:\"\\ea78\"}.ez-icon-share:before{content:\"\\ea79\"}.ez-icon-shield:before{content:\"\\ea7a\"}.ez-icon-show_menu:before{content:\"\\ea7b\"}.ez-icon-south-east:before{content:\"\\ea7c\"}.ez-icon-sync:before{content:\"\\ea7d\"}.ez-icon-table:before{content:\"\\ea7e\"}.ez-icon-tag_code:before{content:\"\\ea7f\"}.ez-icon-text:before{content:\"\\ea80\"}.ez-icon-timeline:before{content:\"\\ea81\"}.ez-icon-timer-outline:before{content:\"\\ea82\"}.ez-icon-tune:before{content:\"\\ea83\"}.ez-icon-txt:before{content:\"\\ea84\"}.ez-icon-un-pin:before{content:\"\\ea85\"}.ez-icon-unfold_less:before{content:\"\\ea86\"}.ez-icon-unfold_more:before{content:\"\\ea87\"}.ez-icon-user-circle:before{content:\"\\ea88\"}.ez-icon-warning-outline:before{content:\"\\ea89\"}.ez-icon-warning_triangle:before{content:\"\\ea8a\"}.ez-icon-whatshot:before{content:\"\\ea8b\"}.ez-icon-xlsx:before{content:\"\\ea8c\"}.ez-icon-zip:before{content:\"\\ea8d\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";

package/dist/esm/ez-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b77dcd0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c5203f95.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;flex:1;width:100%;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:flex-start;align-items:center;width:100%}.group-container .item-content{max-width:calc(100% - 41px)}.items-container .item-content{max-width:calc(100% - 100px)}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{background-color:#fff;display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";

package/dist/esm/ez-loading-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-b77dcd0d.js';
+import { r as registerInstance, h, H as Host } from './index-c5203f95.js';
 
 const ezLoadingBarCss = ":host{position:fixed;top:0px;width:100%}.loading-bar{width:100%;margin:0 auto;position:absolute;background-color:var(--color--primary-300, #e2f4ef);height:5px}.loading-bar:before{content:'';position:absolute}.loading-bar__container{position:absolute;top:0;right:100%;bottom:0;left:0;background-color:var(--color--primary, #008561);width:0;animation:loading 2s linear infinite}@keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}@-webkit-keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}";