@sankhyalabs/ezui 7.1.0-dev.20 → 7.1.0-dev.22

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

@@ -4,10 +4,13 @@ import { ElementIDUtils, UserInterface } from '@sankhyalabs/core';
 import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
+    this.MAIN_GROUP_NAME = "__main";
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
     this.singleColumn = false;
+    this.formLayout = undefined;
+    this.customUiBuilders = new Map();
   }
   async showUp() {
     if (this.singleColumn)
@@ -35,10 +38,18 @@ export class EzFormView {
     });
     this.fields = [...fields];
   }
+  getGroupByField(field) {
+    var _a, _b;
+    const group = (_a = field.group) !== null && _a !== void 0 ? _a : (_b = field.props) === null || _b === void 0 ? void 0 : _b["UITabName"];
+    if (group && group !== this.MAIN_GROUP_NAME) {
+      return group;
+    }
+    return undefined;
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
-      const groupLabel = item.group;
+      const groupLabel = this.getGroupByField(item);
       if (groupLabel) {
         let groupFields = result.get(groupLabel);
         if (groupFields == undefined) {
@@ -71,12 +82,16 @@ export class EzFormView {
     if (this.isItemFullWidth(item.userInterface)) {
       classItem += " input-full_width";
     }
+    const context = {
+      formLayout: this.formLayout,
+      size: "xsmall",
+    };
     if (this._customEditors.has(item.name)) {
       const value = (_a = this._formElements.map(el => ({ name: el.dataset.fieldName, value: el['value'] })).find(field => field.name === item.name)) === null || _a === void 0 ? void 0 : _a.value;
       const customEditor = this._customEditors.get(item.name).customEditor;
-      return h("div", { class: classItem }, h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: fieldBuilder, value: value, selectedRecord: this.selectedRecord }));
+      return h("div", { class: classItem }, h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: (field) => fieldBuilder(field, this.customUiBuilders, context), value: value, selectedRecord: this.selectedRecord }));
     }
-    return h("div", { class: classItem }, fieldBuilder(item));
+    return h("div", { class: classItem }, fieldBuilder(item, this.customUiBuilders, context));
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
@@ -171,6 +186,49 @@ export class EzFormView {
         "attribute": "single-column",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "formLayout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "FormLayout",
+          "resolved": "FormLayout.CASCADE | FormLayout.CLASSIC_CASCADE | FormLayout.CLASSIC_SIDE_BY_SIDE | FormLayout.SIDE_BY_SIDE",
+          "references": {
+            "FormLayout": {
+              "location": "import",
+              "path": "../../utils/form/interfaces/FormLayout"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o layout do formul\u00E1rio."
+        },
+        "attribute": "form-layout",
+        "reflect": false
+      },
+      "customUiBuilders": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "UiFieldBuilders",
+          "resolved": "Map<UserInterface, (field: IFormViewField, context?: IFieldBuilderContext) => HTMLElement>",
+          "references": {
+            "UiFieldBuilders": {
+              "location": "import",
+              "path": "./fieldbuilder/FieldBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define construtores customizados para tipos de campos espec\u00EDficos"
+        },
+        "defaultValue": "new Map()"
       }
     };
   }

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

@@ -1,4 +1,5 @@
 import { UserInterface } from "@sankhyalabs/core";
+import { FormLayout } from "../../../utils/form/interfaces/FormLayout";
 import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
 import { buildComboBox } from "./templates/ComboBox.tpl";
 import { buildDate, buildTime, buildDateTime, buildTimeSeconds } from "./templates/DateInput.tpl";
@@ -10,6 +11,7 @@ import { buildSearchPlus } from "./templates/SearchInputPlus.tpl";
 import { buildSearch } from "./templates/SearchInput.tpl";
 import { buildRichText } from "./templates/RichText.tpl";
 import { getI18n } from "../../../utils/i18n";
+import { buildImage } from "./templates/ImageInput.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -25,11 +27,14 @@ uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
-export const fieldBuilder = (field) => {
+uiBuilders.set(UserInterface.IMAGE, buildImage);
+export const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = getI18n();
-  const builder = uiBuilders.get(field.userInterface) || buildTextInput;
-  const label = field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
-  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  const builder = (customUiBuilders.get(field.userInterface) || uiBuilders.get(field.userInterface)) || buildTextInput;
+  const label = !shouldUseClassic && field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }), context);
   //@ts-ignore
   builtElement.$attrs$['data-form-item'] = field.name;
   return builtElement;

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

@@ -1,11 +1,14 @@
 import { h } from "@stencil/core";
 import { CheckMode } from "../../../ez-check/CheckMode";
-export const buildSwitch = (field) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, true);
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildSwitch = (field, context) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, true, context);
 };
-export const buildCheckBox = (field) => {
-  return buildField(field.name, field.label, field.readOnly, field.contextName, false);
+export const buildCheckBox = (field, context) => {
+  return buildField(field.name, field.label, field.readOnly, field.contextName, false, context);
 };
-function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-top--medium ez-padding-bottom--medium" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
+function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode, context) {
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  return (h("div", { class: `ez-col ez-col--sd-12 ez-align--middle ez-padding-top--medium ez-padding-bottom--medium ez-size-height--full ${shouldUseClassic ? "ez-margin-top--small" : ""}` }, 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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
-export const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildComboBox = ({ name, label, readOnly, required, props, contextName, canShowError }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
   const prop = props === null || props === void 0 ? void 0 : props.options;
   let options;
   if (typeof prop === "string") {
@@ -9,5 +13,8 @@ export const buildComboBox = ({ name, label, readOnly, required, props, contextN
   else {
     options = prop;
   }
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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,14 +1,38 @@
 import { h } from "@stencil/core";
-export const buildDate = ({ name, label, readOnly, canShowError }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildDate = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-date-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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, 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 buildTime = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a, _b, _c;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-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, size: (_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "small", required: required })));
+  }
+  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": (_c = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _c !== void 0 ? _c : false })));
 };
-export const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
+export const buildTimeSeconds = ({ name, label, readOnly, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, showSeconds: true, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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 }) => {
+export const buildDateTime = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-date-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ObjectUtils } from "@sankhyalabs/core";
-export const buildFile = ({ name, label, readOnly, contextName, props }) => {
+export const buildFile = ({ name, label, readOnly, contextName, props }, context) => {
   const uploadProps = ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
     requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const buildImage = ({ name, label, readOnly, contextName, props }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-image-input", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, maxFileSize: Infinity }, props))));
+};

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

@@ -1,13 +1,20 @@
 import { h } from "@stencil/core";
-export const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError, required }, context) => {
   var _a, _b;
   const precision = Number((_a = props === null || props === void 0 ? void 0 : props.precision) !== null && _a !== void 0 ? _a : 2);
   const prettyPrecision = Number((_b = props === null || props === void 0 ? void 0 : props.prettyPrecision) !== null && _b !== void 0 ? _b : precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError, props, required, context);
 };
-export const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
-  return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
+export const buildInteger = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError, props, required, context);
 };
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError, props, required, context) {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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/RichText.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+export const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }, context) => {
   return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-rich-text", { key: name, 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/SearchInput.tpl.js

@@ -1,7 +1,13 @@
 import { h } from "@stencil/core";
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
 import { StringUtils } from "@sankhyalabs/core";
-export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
-  var _a;
+export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }, context) => {
+  var _a, _b, _c;
   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", { 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, hideDescriptionInput: !hasDescriptionField })));
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-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, hideDescriptionInput: !hasDescriptionField, size: (_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "small", required: required })));
+  }
+  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: (_c = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _c !== void 0 ? _c : false, hideDescriptionInput: !hasDescriptionField })));
 };

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

@@ -1,6 +1,13 @@
 import { h } from "@stencil/core";
 import { StringUtils } from "@sankhyalabs/core";
-export const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
   const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-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, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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,10 @@
 import { h } from "@stencil/core";
-export const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildTextArea = ({ name, label, readOnly, rows, contextName, canShowError, props, required }, context) => {
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12", key: name }, h("ez-classic-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows })));
+  }
   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,11 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+import { FormLayout } from "../../../../utils/form/interfaces/FormLayout";
+export const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props, required }, context) => {
+  var _a;
+  const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
+    (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_SIDE_BY_SIDE;
+  if (shouldUseClassic) {
+    return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-classic-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask, size: (_a = context === null || context === void 0 ? void 0 : context.size) !== null && _a !== void 0 ? _a : "small", required: required })));
+  }
   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 })));
 };

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

@@ -4,7 +4,7 @@ class FormItem {
   }
   addRightElement(el) {
     this.removeRightElement();
-    el.classList.add('ez-padding-left--small');
+    el.classList.add('ez-padding-left--small', 'ez-margin-top--auto', 'ez-margin-bottom--extra-small');
     el.setAttribute('data-custom-item', 'true');
     this.elem.classList.add('ez-col--nowrap');
     this.elem.appendChild(el);

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -250,6 +250,9 @@ export default class DataSource {
         });
         this._dataUnit.metadata.fields.forEach(f => {
           var _a, _b, _c, _d, _e, _f;
+          if (f.userInterface === UserInterface.IMAGE) {
+            return;
+          }
           if (f.visible !== false && f.name !== this.RECORD_ARCHIVE) {
             const props = new Map();
             const properties = this._dataUnit.getField(f.name).properties;

package/dist/collection/components/ez-icon/ez-icon.css

@@ -2,6 +2,7 @@
   display: flex;
   overflow: hidden;
   position: relative;
+  justify-content: center;
   /* @doc Define a cor do ícone. */
   --ez-icon--color: var(--icon--color, var(--color--gray-70, #ffffff));
 }

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

@@ -0,0 +1,173 @@
+:host {
+  display: block;
+  
+  /*@doc Define a altura do container de imagem.*/
+  --ez-image-input--container-height: 200px;
+  
+  /*@doc Define a largura do container de imagem.*/
+  --ez-image-input--container-width: 280px;
+  
+  /*@doc Define a cor de fundo do container.*/
+  --ez-image-input--background-color: var(--color--gray-80);
+  
+  /*@doc Define a cor da borda do container.*/
+  --ez-image-input--border-color: var(--color--gray-200);
+  
+  /*@doc Define a cor da borda no estado de hover.*/
+  --ez-image-input--border-color-hover: var(--color--ocean-green-600);
+  
+  /*@doc Define a cor da borda quando está sendo arrastado.*/
+  --ez-image-input--border-color-dragging: var(--color--ocean-green-500);
+  
+  /*@doc Define a cor da borda quando está desabilitado.*/
+  --ez-image-input--border-color-disabled: var(--color--gray-200);
+  
+  /*@doc Define a cor do texto do label.*/
+  --ez-image-input--label-color: var(--color--petroleum-900);
+  
+  /*@doc Define a cor do ícone.*/
+  --ez-image-input--icon-color: var(--color--gray-400);
+  
+  /*@doc Define o raio da borda do container.*/
+  --ez-image-input--border-radius: var(--border--radius-24);
+  
+  /*@doc Define a largura da borda.*/
+  --ez-image-input--border-width: 2px;
+  
+  /*@doc Define a cor de fundo do botão de remover.*/
+  --ez-image-input--remove-button-bg: var(--color--red-600);
+  
+  /*@doc Define a cor de fundo do botão de remover no hover.*/
+  --ez-image-input--remove-button-bg-hover: var(--color--red-700);
+  
+  /*@doc Define a cor do ícone do botão de remover.*/
+  --ez-image-input--remove-button-color: var(--color--gray-70);
+
+  /*@doc Define a borda do botão de remover.*/
+  --ez-image-input--remove-button-border: 1px solid var(--color--red-700);
+}
+
+.image-input__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--ez-image-input--container-height);
+  width: var(--ez-image-input--container-width);
+  border: var(--ez-image-input--border-width) dashed var(--ez-image-input--border-color);
+  border-radius: var(--ez-image-input--border-radius);
+  background-color: var(--ez-image-input--background-color);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.image-input__container:hover:not(.image-input__container--disabled) {
+  border-color: var(--ez-image-input--border-color-hover);
+}
+
+.image-input__container--dragging {
+  border-color: var(--ez-image-input--border-color-dragging);
+  background-color: var(--color--ocean-green-90);
+}
+
+.image-input__container--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  border-color: var(--ez-image-input--border-color-disabled);
+}
+
+.image-input__container--has-image {
+  border-style: solid;
+  padding: var(--space--0);
+}
+
+.image-input__file-input {
+  display: none;
+}
+
+.image-input__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space--16);
+  padding: var(--space--24);
+  text-align: center;
+}
+
+.image-input__dropzone ez-icon {
+  color: var(--ez-image-input--icon-color);
+}
+
+.image-input__label {
+  font-family: var(--font--pattern);
+  font-size: var(--font-size--default);
+  font-weight: var(--font-weight--medium);
+  color: var(--ez-image-input--label-color);
+  line-height: var(--line-height--20);
+}
+
+.image-input__preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-input__image {
+  height: 100%;
+  object-fit: cover;
+  border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
+}
+
+ez-button {
+  --ez-button--background-color: var(--ez-image-input--remove-button-bg);
+  --ez-button--hover--background-color: var(--ez-image-input--remove-button-bg-hover);
+  --ez-button--color: var(--ez-image-input--remove-button-color);
+  --ez-button--border: var(--ez-image-input--remove-button-border);
+  --ez-button--hover--border: var(--ez-image-input--remove-button-border);
+}
+
+.image-input__remove-button {
+  position: absolute;
+  top: var(--space--8);
+  right: var(--space--8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-input__popup-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space--16);
+  height: 100%;
+}
+
+.image-input__popup-image {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: var(--border--radius-8);
+}
+
+.image-input__image {
+  height: 100%;
+  object-fit: cover;
+  border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.image-input__image:hover {
+  transform: scale(1.02);
+}
+
+ez-skeleton {
+  --skeleton-width: var(--ez-image-input--container-width);
+  --skeleton-height: var(--ez-image-input--container-height);
+}