@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

package/dist/cjs/ez-form-view.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-2714478b.js');
+const constants = require('./constants-569271bc.js');
 const CheckMode = require('./CheckMode-ecb90b87.js');
 
 const buildSwitch = (field) => {
@@ -77,12 +77,6 @@ function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecisio
     index.h("ez-number-input", { class: "ez-input__no-margin", enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
-const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
-  var _a;
-  return (index.h("div", { class: "ez-col ez-col--sd-12" },
-    index.h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
-};
-
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
   return (index.h("div", { class: "ez-col ez-col--sd-12", key: name },
     index.h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
@@ -93,6 +87,18 @@ const buildTextInput = ({ name, label, readOnly, contextName, canShowError, prop
     index.h("ez-text-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
+const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+  const hasDescriptionField = !core.StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  return (index.h("div", { class: "ez-col ez-col--sd-12" },
+    index.h("ez-search-plus", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, hideDescriptionInput: !hasDescriptionField })));
+};
+
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (index.h("div", { class: "ez-col ez-col--sd-12" },
+    index.h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
+};
+
 const uiBuilders = new Map();
 uiBuilders.set(core.UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(core.UserInterface.SWITCH, buildSwitch);
@@ -105,6 +111,7 @@ uiBuilders.set(core.UserInterface.FILE, buildFile);
 uiBuilders.set(core.UserInterface.DECIMALNUMBER, buildDecimal);
 uiBuilders.set(core.UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(core.UserInterface.SEARCH, buildSearch);
+uiBuilders.set(core.UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(core.UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
@@ -150,7 +157,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--max-width:440px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.form-view__content--single-column.sc-ez-form-view{grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)))}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
@@ -160,6 +167,7 @@ const EzFormView = class {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
+    this.singleColumn = true;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -235,7 +243,7 @@ const EzFormView = class {
     let nonArrayGrup = [];
     let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, index.h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, index.h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
         nonArrayGrup.push(value);
@@ -243,7 +251,7 @@ const EzFormView = class {
     });
     // Filtra os elementos que não são arrays e os coloca dentro de uma única div
     let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
-    let groupedNonArrayElements = index.h("div", { class: "form-view__content" }, nonArrayElements);
+    let groupedNonArrayElements = index.h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, nonArrayElements);
     return (index.h(index.Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return index.getElement(this); }

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

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
-const DataBinder = require('./DataBinder-e92314c2.js');
+const searchColumn = require('./search-column-1d3c9fa5.js');
+const FormLayout = require('./FormLayout-18853e70.js');
 require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
+require('./CheckMode-ecb90b87.js');
 
 const DETAIL_PATTERN = /child\[([^\]]+)\]/;
 const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
@@ -110,7 +112,7 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         if (!sheets.has(tabConfig)) {
           sheets.set(tabConfig, []);
         }
-        const formField = DataBinder.buildFieldMetadata(descriptor, field);
+        const formField = searchColumn.buildFieldMetadata(descriptor, field);
         sheets.get(tabConfig).push(formField);
         if (formField.required) {
           requiredFields.push(field.name);
@@ -560,17 +562,21 @@ const EzForm = class {
     this.ezReady = index.createEvent(this, "ezReady", 7);
     this.formItemsReady = index.createEvent(this, "formItemsReady", 7);
     this._customEditors = new Map();
+    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
       if (action.type === core.Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
     this._fieldsProps = new Map();
+    this._singleColumn = true;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
     this.onlyStaticFields = false;
+    this.useSearchField = true;
+    this.elementFocusSearchField = undefined;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -628,7 +634,56 @@ const EzForm = class {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${core.StringUtils.replaceAccentuatedChars(core.StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (index.h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, index.h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (index.h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, index.h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), index.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() })));
+  }
+  renderFieldColumn() {
+    if (this._fieldSearch != undefined) {
+      return this._fieldSearch;
+    }
+    this._fieldSearch = searchColumn.buildFieldSearch({
+      value: core.StringUtils.generateUUID(),
+      label: searchColumn.LABEL_SEARCH_FIELD,
+    }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
+    return this._fieldSearch;
+  }
+  getFormFields() {
+    var _a;
+    return (_a = this.config) === null || _a === void 0 ? void 0 : _a.fields;
+  }
+  fieldsOptionLoader(argument) {
+    const searchTerm = argument === null || argument === void 0 ? void 0 : argument.toLowerCase();
+    const allFields = this.getFormFields().map(field => { var _a; return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field.name); });
+    const filteredFields = allFields.filter(field => {
+      var _a, _b;
+      return ((_a = field.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm)) ||
+        ((_b = field.label) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchTerm));
+    });
+    const options = filteredFields.map(field => ({ value: field.name, label: field.label }));
+    return Promise.resolve(options);
+  }
+  onSelectField(option) {
+    if (option == undefined || option.value == undefined) {
+      this.fieldToFocus = "";
+      return;
+    }
+    this.fieldToFocus = option.value;
+    this._ezPopoverSearchField.hide();
+  }
+  async initKeyboardManager() {
+    var _a, _b;
+    this._keyboardManager = new core.KeyboardManager({ propagate: false, element: (_a = this.elementFocusSearchField) !== null && _a !== void 0 ? _a : this._element });
+    if (this.useSearchField) {
+      this._keyboardManager.bind(searchColumn.SHORTCUT_SEARCH_FIELD, async () => {
+        if (!this._container || !this._ezPopoverSearchField)
+          return;
+        const container = this._container.getBoundingClientRect();
+        await searchColumn.focusOnFieldSerch(this._fieldSearch);
+        this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (searchColumn.SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
+      }, { description: searchColumn.LABEL_SEARCH_FIELD, element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
+    }
+  }
+  componentDidLoad() {
+    this.initKeyboardManager();
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -643,19 +698,42 @@ const EzForm = class {
   bindFields() {
     return !this.isStatic() || this.onlyStaticFields === false;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    var _a;
     if (this.dataUnit === undefined) {
       this.dataUnit = new core.DataUnit("ez-form");
     }
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
-    this._dataBinder = new DataBinder.DataBinder(this.dataUnit);
+    this._dataBinder = new searchColumn.DataBinder(this.dataUnit);
     this._store = createStore(formReducer);
     this._store.subscribe(() => index.forceUpdate(this));
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
     core.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.FormLayout.CASCADE ? true : false;
+  }
+  async registerNotifyListeners(layoutFormConfig) {
+    if (!layoutFormConfig)
+      return;
+    layoutFormConfig.onConfigChange((config) => {
+      if (config === FormLayout.FormLayout.CASCADE) {
+        this._singleColumn = true;
+      }
+      else {
+        this._singleColumn = false;
+      }
+    });
   }
   componentDidRender() {
     const metadata = selectFormMetadata(this._store.getState());
@@ -688,6 +766,7 @@ const EzForm = class {
     requestAnimationFrame(() => {
       this._dataBinder.setFocus(this.fieldToFocus);
       this.ezFormRequestClearFieldToFocus.emit();
+      this.fieldToFocus = null;
     });
   }
   setFieldsProps() {
@@ -702,8 +781,10 @@ const EzForm = class {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   buildIdTabSelector(tabs) {
     if (tabs) {