@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.121

package/dist/collection/components/ez-form-view/custom-input/ez-custom-form-input.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { CustomEditorSource } from '../../../utils/customEditor/interfaces/ICustomEditor';
-import { HTMLBuilder, StringUtils } from '@sankhyalabs/core';
+import { HTMLBuilder, ObjectUtils, StringUtils } from '@sankhyalabs/core';
 export class EzCustomFormInput {
   constructor() {
     this.gui = undefined;
@@ -32,8 +32,31 @@ export class EzCustomFormInput {
     var _a, _b;
     return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
   }
+  watchValue() {
+    this.handleValue(this.gui);
+  }
+  watchCustomEditor() {
+    this.getContent();
+  }
+  watchFormViewField(newValue, oldValue) {
+    if (!ObjectUtils.equals(newValue, oldValue))
+      this.getContent();
+  }
+  watchDetailContext() {
+    this.getContent();
+  }
+  watchBuilderFallback() {
+    this.getContent();
+  }
+  watchSelectedRecord(newValue, oldValue) {
+    const newRecordId = newValue === null || newValue === void 0 ? void 0 : newValue['__record__id__'];
+    const oldRecordId = oldValue === null || oldValue === void 0 ? void 0 : oldValue['__record__id__'];
+    if (newRecordId !== oldRecordId) {
+      this.getContent();
+    }
+  }
   getContent() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const fieldProps = new Map();
     for (const prop in this.formViewField.props) {
       fieldProps.set(prop, this.formViewField.props[prop]);
@@ -71,9 +94,8 @@ export class EzCustomFormInput {
     if (typeof gui === 'string') {
       gui = HTMLBuilder.parseElement(gui);
     }
-    if (this.value) {
-      gui.setAttribute('value', typeof this.value === 'object' ? this.value.value : this.value);
-    }
+    const value = (_e = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : this.value) !== null && _e !== void 0 ? _e : '';
+    gui.setAttribute('value', value);
     this.gui = h("div", { key: StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
   }
   setValue(value) {
@@ -89,7 +111,7 @@ export class EzCustomFormInput {
       child.$attrs$.value = this.value;
     });
   }
-  componentWillRender() {
+  componentWillLoad() {
     this.getContent();
   }
   render() {
@@ -275,4 +297,25 @@ export class EzCustomFormInput {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }, {
+        "propName": "customEditor",
+        "methodName": "watchCustomEditor"
+      }, {
+        "propName": "formViewField",
+        "methodName": "watchFormViewField"
+      }, {
+        "propName": "detailContext",
+        "methodName": "watchDetailContext"
+      }, {
+        "propName": "builderFallback",
+        "methodName": "watchBuilderFallback"
+      }, {
+        "propName": "selectedRecord",
+        "methodName": "watchSelectedRecord"
+      }];
+  }
 }

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -5,17 +5,28 @@
 
   /*@doc Define o tamanho mínimo dos itens do formulário.*/
   --ez-form-view__item--min-width: 220px;
+
+  /*@doc Define o tamanho máximo dos itens do formulário.*/
+  --ez-form-view__item--max-width: 440px;
+
   /*@doc Define o espaçamento entre itens do formulário.*/
-  --ez-form-view__item--sapce-width: 5px;
+  --ez-form-view__item--width: var(--space--small);
+  /*@doc Define o padding do formulário.*/
+  --ez-form-view__item--padding: var(--space--small);
 }
 
 .form-view__content{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));
-  gap: var(--ez-form-view__item--sapce-width);
+  gap: var(--ez-form-view__item--width);
+  padding-inline: var(--ez-form-view__item--padding);
   width: 100%;
 }
 
+.form-view__content--single-column {
+  grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)));
+}
+
 .input-full_width {
   grid-column: 1 / -1;
   width: 100%;

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

@@ -7,6 +7,7 @@ export class EzFormView {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
+    this.singleColumn = true;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -82,7 +83,7 @@ export class EzFormView {
     let nonArrayGrup = [];
     let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
         nonArrayGrup.push(value);
@@ -90,7 +91,7 @@ export class EzFormView {
     });
     // 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 = h("div", { class: "form-view__content" }, nonArrayElements);
+    let groupedNonArrayElements = h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, nonArrayElements);
     return (h(Host, null, groupedNonArrayElements, formContent));
   }
   static get is() { return "ez-form-view"; }
@@ -149,6 +150,24 @@ export class EzFormView {
           "tags": [],
           "text": "Define os registros da linha selecionada."
         }
+      },
+      "singleColumn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o formulario deve possuir apenas 1 coluna."
+        },
+        "attribute": "single-column",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -2,23 +2,26 @@ import { UserInterface } from "@sankhyalabs/core";
 import { REQUIRED_INFO } from "../../../utils/constants";
 import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
 import { buildComboBox } from "./templates/ComboBox.tpl";
-import { buildDate, buildTime, buildDateTime } from "./templates/DateInput.tpl";
+import { buildDate, buildTime, buildDateTime, buildTimeSeconds } from "./templates/DateInput.tpl";
 import { buildFile } from "./templates/FileInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
-import { buildSearch } from "./templates/SearchInput.tpl";
 import { buildTextArea } from "./templates/TextArea.tpl";
 import { buildTextInput } from "./templates/TextInput.tpl";
+import { buildSearchPlus } from "./templates/SearchInputPlus.tpl";
+import { buildSearch } from "./templates/SearchInput.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.DATE, buildDate);
 uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.ELAPSEDTIME, buildTimeSeconds);
 uiBuilders.set(UserInterface.DATETIME, buildDateTime);
 uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
 uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 export const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;

package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js

@@ -7,5 +7,5 @@ export const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 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, "data-context-name": contextName, key: fieldName })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js

@@ -9,5 +9,5 @@ export const buildComboBox = ({ name, label, readOnly, required, props, contextN
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-combo-box", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js

@@ -1,10 +1,14 @@
 import { h } from "@stencil/core";
 export const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-date-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
-export const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+export const buildTime = ({ name, label, readOnly, canShowError, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, "show-seconds": (_a = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _a !== void 0 ? _a : false })));
+};
+export const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, showSeconds: true })));
 };
 export const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-date-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.js

@@ -9,5 +9,5 @@ export const buildFile = ({ name, label, readOnly, contextName, props }) => {
       INTERNAL_FILENAME: props.INTERNAL_FILENAME
     })),
   });
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -9,5 +9,5 @@ export const buildInteger = ({ name, label, readOnly, contextName, canShowError
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, 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 })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
   var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, 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 })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInputPlus.tpl.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { StringUtils } from "@sankhyalabs/core";
+export const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+  const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  return (h("div", { class: "ez-col ez-col--sd-12" }, 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 })));
+};

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextArea.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
-  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, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name }, h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+export const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, 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 })));
 };