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

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";
@@ -27,11 +28,13 @@ uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
 uiBuilders.set(UserInterface.IMAGE, buildImage);
-export const fieldBuilder = (field, customUiBuilders = new Map()) => {
+export const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = getI18n();
+  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 = field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
-  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  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/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-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-rich-text/ez-rich-text.js

@@ -9,7 +9,7 @@ export class EzRichText {
     this.historyIndex = -1;
     this.previewMode = false;
     this.showPreview = true;
-    this.value = '';
+    this.value = undefined;
     this.label = undefined;
     this.mode = "regular";
     this.enabled = true;
@@ -313,8 +313,7 @@ export class EzRichText {
           "text": "Define o valor HTML do campo."
         },
         "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
+        "reflect": true
       },
       "label": {
         "type": "string",

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
+import { ElementIDUtils, MaskFormatter as CoreMaskFormatter, MaskFormatter } from '@sankhyalabs/core';
 export class EzTextInput {
   constructor() {
     this._isOverflowing = false;
@@ -113,6 +113,42 @@ export class EzTextInput {
       this._inputElem.classList.add("input__slim--noborder");
     }
   }
+  buildMaskFormatter() {
+    if (this.mask) {
+      const maskToBuilder = this.getMaskToBuilder();
+      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
+    }
+  }
+  getMaskToBuilder() {
+    if (this.mask === 'cgc_cpf') {
+      return this.getCGCCpfMask();
+    }
+    if (this.mask === 'phone') {
+      return this.getPhoneMask();
+    }
+    if (this.mask in CoreMaskFormatter.DEFAULT_MASKS) {
+      return CoreMaskFormatter.DEFAULT_MASKS[this.mask];
+    }
+    return this.mask;
+  }
+  getPhoneMask() {
+    if (this.value && this.value.length === 10) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
+    }
+    if (this.value && this.value.length === 11) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
+    }
+    return undefined;
+  }
+  getCGCCpfMask() {
+    if (this.value && this.value.length === 11) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cpf : undefined;
+    }
+    if (this.value && this.value.length === 14) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cnpj : undefined;
+    }
+    return undefined;
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -336,6 +372,7 @@ export class EzTextInput {
   }
   componentDidRender() {
     this.adjustFloatingLabel();
+    this.buildMaskFormatter();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');

package/dist/collection/utils/form/DataBinder.js

@@ -250,8 +250,8 @@ export default class DataBinder {
     }
   }
   bindSearchOptionsLoader(fieldName, field) {
-    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
-      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-CLASSIC-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS" || field.nodeName === "EZ-CLASSIC-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = (field.nodeName === "EZ-SEARCH-PLUS" || field.nodeName === "EZ-CLASSIC-SEARCH-PLUS");
       const loader = isSearchPlus ? ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__") : ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
       if (loader) {
         field["optionLoader"] = (arg, ctxOptions) => {

package/dist/collection/utils/form/interfaces/FormLayout.js

@@ -1,5 +1,7 @@
 export var FormLayout;
 (function (FormLayout) {
   FormLayout[FormLayout["CASCADE"] = 0] = "CASCADE";
-  FormLayout[FormLayout["SIDE_BY_SIDE"] = 1] = "SIDE_BY_SIDE";
+  FormLayout[FormLayout["CLASSIC_CASCADE"] = 1] = "CLASSIC_CASCADE";
+  FormLayout[FormLayout["SIDE_BY_SIDE"] = 2] = "SIDE_BY_SIDE";
+  FormLayout[FormLayout["CLASSIC_SIDE_BY_SIDE"] = 3] = "CLASSIC_SIDE_BY_SIDE";
 })(FormLayout || (FormLayout = {}));

package/dist/collection/utils/i18n/locales/en-us.js

@@ -260,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader not defined",
       defaultCodeLabel: "Code",
     },
+    "ez-classic-search": {
+      emptyList: "No results found",
+      emptySearch: "No results for {{field}} found",
+      showMore: "Show more"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "No results found",
+      optionLoaderNotDefined: "optionLoader not defined",
+      defaultCodeLabel: "Code",
+    },
     "ez-sortable-list": {
       emptyMessage: "No items in the list",
       entityLabel: "item",

package/dist/collection/utils/i18n/locales/es-es.js

@@ -260,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader no definido",
       defaultCodeLabel: "Cód.",
     },
+    "ez-classic-search": {
+      emptyList: "No se encontraron resultados",
+      emptySearch: "No se encontraron resultados de {{field}}",
+      showMore: "Mostrar más"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "No se encontraron resultados",
+      optionLoaderNotDefined: "optionLoader no definido",
+      defaultCodeLabel: "Cód.",
+    },
     "ez-sortable-list": {
       emptyMessage: "No hay elementos en la lista",
       entityLabel: "elemento",

package/dist/collection/utils/i18n/locales/pt-br.js

@@ -260,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader não definido",
       defaultCodeLabel: "Cód.",
     },
+    "ez-classic-search": {
+      emptyList: "Nenhum resultado encontrado",
+      emptySearch: "Nenhum resultado de {{field}} encontrado",
+      showMore: "Mostrar mais"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "Nenhum resultado encontrado",
+      optionLoaderNotDefined: "optionLoader não definido",
+      defaultCodeLabel: "Cód.",
+    },
     "ez-sortable-list": {
       emptyMessage: "Nenhum item na lista",
       entityLabel: "item",

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface ClassicSearchList extends Components.ClassicSearchList, HTMLElement {}
+export const ClassicSearchList: {
+  prototype: ClassicSearchList;
+  new (): ClassicSearchList;
+};
+
 interface EzActionsButton extends Components.EzActionsButton, HTMLElement {}
 export const EzActionsButton: {
   prototype: EzActionsButton;
@@ -86,18 +92,60 @@ export const EzClassicComboBox: {
   new (): EzClassicComboBox;
 };
 
+interface EzClassicDateInput extends Components.EzClassicDateInput, HTMLElement {}
+export const EzClassicDateInput: {
+  prototype: EzClassicDateInput;
+  new (): EzClassicDateInput;
+};
+
+interface EzClassicDateTimeInput extends Components.EzClassicDateTimeInput, HTMLElement {}
+export const EzClassicDateTimeInput: {
+  prototype: EzClassicDateTimeInput;
+  new (): EzClassicDateTimeInput;
+};
+
 interface EzClassicInput extends Components.EzClassicInput, HTMLElement {}
 export const EzClassicInput: {
   prototype: EzClassicInput;
   new (): EzClassicInput;
 };
 
+interface EzClassicNumberInput extends Components.EzClassicNumberInput, HTMLElement {}
+export const EzClassicNumberInput: {
+  prototype: EzClassicNumberInput;
+  new (): EzClassicNumberInput;
+};
+
+interface EzClassicSearch extends Components.EzClassicSearch, HTMLElement {}
+export const EzClassicSearch: {
+  prototype: EzClassicSearch;
+  new (): EzClassicSearch;
+};
+
+interface EzClassicSearchPlus extends Components.EzClassicSearchPlus, HTMLElement {}
+export const EzClassicSearchPlus: {
+  prototype: EzClassicSearchPlus;
+  new (): EzClassicSearchPlus;
+};
+
+interface EzClassicSearchResultList extends Components.EzClassicSearchResultList, HTMLElement {}
+export const EzClassicSearchResultList: {
+  prototype: EzClassicSearchResultList;
+  new (): EzClassicSearchResultList;
+};
+
 interface EzClassicTextArea extends Components.EzClassicTextArea, HTMLElement {}
 export const EzClassicTextArea: {
   prototype: EzClassicTextArea;
   new (): EzClassicTextArea;
 };
 
+interface EzClassicTimeInput extends Components.EzClassicTimeInput, HTMLElement {}
+export const EzClassicTimeInput: {
+  prototype: EzClassicTimeInput;
+  new (): EzClassicTimeInput;
+};
+
 interface EzCollapsibleBox extends Components.EzCollapsibleBox, HTMLElement {}
 export const EzCollapsibleBox: {
   prototype: EzCollapsibleBox;