@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.2

package/dist/collection/components/ez-split-button/ez-split-button.js

@@ -60,7 +60,11 @@ export class EzSplitButton {
         const spaceLeft = rightButtonRect.left;
         const shouldOpenUpward = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
         const shouldOpenLeftward = spaceRight < dropdownRect.width && spaceLeft > dropdownRect.width;
-        const styles = this.calculateDropdownPosition(rightButtonRect, dropdownRect, shouldOpenUpward, shouldOpenLeftward);
+        const styles = {
+          position: 'fixed',
+          top: shouldOpenUpward ? `${rightButtonRect.top - dropdownRect.height}px` : `${rightButtonRect.bottom}px`,
+          left: shouldOpenLeftward ? `${rightButtonRect.right - dropdownRect.width}px` : `${rightButtonRect.left}px`,
+        };
         Object.assign(dropdownParent.style, styles);
       });
     };
@@ -197,6 +201,9 @@ export class EzSplitButton {
       return;
     }
   }
+  onItemActionExecuted() {
+    this.closeDropdown();
+  }
   clickListener(evt) {
     const isDisabled = !this.enabled ||
       this.isDisabled === true ||
@@ -227,26 +234,18 @@ export class EzSplitButton {
     this.buttonClick.emit();
   }
   handleDropdownItemClick(evt) {
+    var _a;
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
-    this.closeDropdown();
+    if (!((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.disableCloseOnSelect)) {
+      this.closeDropdown();
+    }
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
     evt.stopPropagation();
     this.closeDropdown();
   }
-  calculateDropdownPosition(buttonRect, dropdownRect, openUpward, openLeftward) {
-    const baseOffset = this.offsetParentRect || { top: 0, left: 0 };
-    return {
-      top: openUpward ? 'auto' : `${buttonRect.bottom - baseOffset.top + window.scrollY}px`,
-      bottom: openUpward ? `${window.innerHeight - buttonRect.top - window.scrollY}px` : 'auto',
-      left: openLeftward
-        ? `${buttonRect.right - dropdownRect.width - baseOffset.left + window.scrollX}px`
-        : `${buttonRect.left - baseOffset.left + window.scrollX}px`,
-      maxHeight: openUpward ? `${buttonRect.top - baseOffset.top}px` : 'none'
-    };
-  }
   setupEventListeners() {
     const controller = new AbortController();
     const { signal } = controller;
@@ -835,6 +834,12 @@ export class EzSplitButton {
         "target": undefined,
         "capture": false,
         "passive": true
+      }, {
+        "name": "ezCloseSplitButtonDropdown",
+        "method": "onItemActionExecuted",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "click",
         "method": "clickListener",

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/FormMetadata.js

@@ -72,25 +72,56 @@ export const buildFormConfigFromDataUnit = (dataUnit) => {
       .filter(descriptor => descriptor.visible !== false)
       .map(descriptor => { return { name: descriptor.name, defaultValue: descriptor.defaultValue }; });
   }
-  const config = { emptyConfig: false, fields };
-  return config;
+  return { emptyConfig: false, fields };
 };
-export const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
-  var _a, _b;
-  if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
-    config = buildFormConfigFromDataUnit(dataUnit);
-  }
-  const sheets = new Map();
-  const hiddenTabs = new Map();
-  const requiredFields = [];
-  const cleanOnCopyFields = [];
-  const defaultValues = {};
-  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
-      hiddenTabs.set(tab.label, tab);
+function handleDetailTabs(dataUnit, config, sheets) {
+  const unitMD = dataUnit.metadata;
+  if (unitMD === undefined || unitMD.children === undefined)
+    return;
+  unitMD.children.forEach((child) => {
+    const tabConfig = getTabFromConfig(child.label, config);
+    if (tabConfig) {
+      sheets.set(Object.assign(tabConfig, { name: buildChildName(child), isDetail: true }), []);
+      return;
+    }
+    const { label, name, fields } = buildDetailSheet(child);
+    sheets.set({ name, label, isDetail: true }, fields);
+  });
+}
+function handleCustomTabs(customGuides, config, sheets) {
+  customGuides.forEach((guide) => {
+    const tabConfig = getTabFromConfig(guide.label, config);
+    const ctxProps = {};
+    Object.entries(guide).forEach(([key, value]) => {
+      if (!isReservedKey(key)) {
+        ctxProps[key] = value;
+      }
+    });
+    if (tabConfig) {
+      sheets.set(Object.assign(tabConfig, { name: guide.id, isCustom: true, ctxProps }), []);
+      return;
     }
+    const sheet = { label: guide.label, name: guide.id, isCustom: true, visible: true, ctxProps };
+    sheets.set(sheet, []);
   });
-  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+}
+function isReservedKey(key) {
+  return ['id', 'label'].includes(key);
+}
+function parseTabToFormSheet(key, fields) {
+  const i18n = getI18n();
+  return {
+    label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
+    name: key.name || key.label,
+    isCustom: key.isCustom,
+    isDetail: key.isDetail,
+    ctxProps: key.ctxProps,
+    fields
+  };
+}
+function handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues) {
+  var _a;
+  (_a = config === null || config === void 0 ? void 0 : config.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
     var _a, _b, _c;
     if (field.visible !== false) {
       const tabConfig = getTabConfig(field.tab || "__main", sheets, config);
@@ -129,7 +160,8 @@ export const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
                   defaultValue = value;
                 }
               }
-              catch (_d) { }
+              catch (_d) {
+              }
             }
           }
           defaultValues[field.name] = defaultValue;
@@ -137,34 +169,38 @@ export const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
       }
     }
   });
+}
+export const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuides) => {
+  var _a;
+  if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
+    config = buildFormConfigFromDataUnit(dataUnit);
+  }
+  const sheets = new Map();
+  const hiddenTabs = new Map();
+  const requiredFields = [];
+  const cleanOnCopyFields = [];
+  const defaultValues = {};
+  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : [];
+  tabs.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues);
   const metadata = new FormMetadata();
   metadata.setDefaultVars(config.defaultVars);
   if (includeDetails) {
-    const unitMD = dataUnit.metadata;
-    if (unitMD != undefined && unitMD.children != undefined) {
-      unitMD.children.forEach((child) => {
-        if (hiddenTabs.has(child.label)) {
-          return;
-        }
-        const tabConfig = getTabFromConfig(child.label, config);
-        if (tabConfig) {
-          sheets.set(Object.assign(tabConfig, { name: buildChildName(child) }), []);
-          return;
-        }
-        const { label, name, fields } = buildDetailSheet(child);
-        sheets.set({ name, label }, fields);
-      });
-    }
+    handleDetailTabs(dataUnit, config, sheets);
+  }
+  if (customGuides) {
+    handleCustomTabs(customGuides, config, sheets);
   }
-  const i18n = getI18n();
   Array.from(sheets.entries())
     .sort(sortTabs)
-    .forEach(([key, fields]) => {
-    metadata.addSheet({
-      label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
-      name: key.name || key.label,
-      fields
-    });
+    .forEach(([tab, fields]) => {
+    if (!hiddenTabs.has(tab.label)) {
+      metadata.addSheet(parseTabToFormSheet(tab, fields));
+    }
   });
   metadata.addRequiredFields(requiredFields);
   metadata.addCleanOnCopyFields(cleanOnCopyFields);

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

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Uploading file",
       uploadingMessage: "Files are being uploaded. Please wait for completion or cancel the upload."
     },
+    "ez-image-input": {
+      defaultLabel: "Upload Image",
+      imageAlt: "Uploaded image",
+      removeImage: "Remove image",
+      invalidFileType: "The selected file is not a valid image.",
+      fileTooLarge: "The image must be less than {{maxSize}}.",
+      imagePreview: "Image Preview",
+    },
     "ez-calendar": {
       month: {
         0: "January",
@@ -245,12 +253,23 @@ export default {
     "ez-search": {
       emptyList: "No results found",
       emptySearch: "No results for {{field}} found",
+      showMore: "Show more"
     },
     "ez-search-plus": {
       emptyList: "No results found",
       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

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Subiendo archivo",
       uploadingMessage: "Se están subiendo archivos. Por favor, espere a que se complete o cancele la subida.",
     },
+    "ez-image-input": {
+      defaultLabel: "Subir Imagen",
+      imageAlt: "Imagen cargada",
+      removeImage: "Eliminar imagen",
+      invalidFileType: "El archivo seleccionado no es una imagen válida.",
+      fileTooLarge: "La imagen debe tener menos de {{maxSize}}.",
+      imagePreview: "Vista Previa de Imagen",
+    },
     "ez-calendar": {
       month: {
         0: "Enero",
@@ -245,12 +253,23 @@ export default {
     "ez-search": {
       emptyList: "No se encontraron resultados",
       emptySearch: "No se encontraron resultados de {{field}}",
+      showMore: "Mostrar más"
     },
     "ez-search-plus": {
       emptyList: "No se encontraron resultados",
       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

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Enviando arquivo",
       uploadingMessage: "Há arquivos sendo enviados. Por favor aguarde a conclusão ou cancele o envio.",
     },
+    "ez-image-input": {
+      defaultLabel: "Enviar Imagem",
+      imageAlt: "Imagem carregada",
+      removeImage: "Remover imagem",
+      invalidFileType: "O arquivo selecionado não é uma imagem válida.",
+      fileTooLarge: "A imagem deve ter menos de {{maxSize}}.",
+      imagePreview: "Visualizar Imagem",
+    },
     "ez-calendar": {
       month: {
         0: "Janeiro",
@@ -245,12 +253,23 @@ export default {
     "ez-search": {
       emptyList: "Nenhum resultado encontrado",
       emptySearch: "Nenhum resultado de {{field}} encontrado",
+      showMore: "Mostrar mais"
     },
     "ez-search-plus": {
       emptyList: "Nenhum resultado encontrado",
       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/collection/utils/searchColumn/search-column.js

@@ -7,7 +7,12 @@ export const buildFieldSearch = (action, optionLoader, onSelectField) => {
   return h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
       "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
       "--ez-search--width": SEARCH_FIELD_WIDTH
-    }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+    }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => {
+      window.dispatchEvent(new CustomEvent('ezCloseSplitButtonDropdown', { detail: { action, value: evt.detail } }));
+      requestAnimationFrame(() => {
+        onSelectField(evt.detail);
+      });
+    }, ignoreLimitCharsToSearch: true });
 };
 export const openFieldSearch = async (splitButton, field) => {
   if (!splitButton) {

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;
@@ -206,6 +254,12 @@ export const EzIcon: {
   new (): EzIcon;
 };
 
+interface EzImageInput extends Components.EzImageInput, HTMLElement {}
+export const EzImageInput: {
+  prototype: EzImageInput;
+  new (): EzImageInput;
+};
+
 interface EzLinkBuilder extends Components.EzLinkBuilder, HTMLElement {}
 export const EzLinkBuilder: {
   prototype: EzLinkBuilder;