@sankhyalabs/ezui 2.12.0 → 2.14.0-develop.1

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

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 import { CheckMode } from "../../../ez-check/CheckMode";
-export const buildSwitch = (field) => {
-  return buildField(field.name, field.label, field.readOnly, true);
+export const buildSwitch = (fieldConfig) => {
+  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
 };
-export const buildCheckBox = (field) => {
-  return buildField(field.name, field.label, field.readOnly, false);
+export const buildCheckBox = (fieldConfig) => {
+  return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-export const buildComboBox = ({ name, label, readOnly, required, props }) => {
-  const prop = props === null || props === void 0 ? void 0 : props.options;
+export const buildComboBox = ({ name, label, readOnly, required }, properties) => {
+  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
   let options;
   if (typeof prop === "string") {
     const parsed = JSON.parse(prop);

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

@@ -7,7 +7,7 @@ export const buildTime = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
-export const buildDateTime = ({ name, label, readOnly }) => {
+export const buildTimeDate = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-export const buildDecimal = ({ name, label, readOnly, props }) => {
-  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
-  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+export const buildDecimal = ({ name, label, readOnly }, properties) => {
+  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
   return buildNumeric(name, label, readOnly, precision, prettyPrecision);
 };
 export const buildInteger = ({ name, label, readOnly }) => {

package/dist/collection/components/ez-form/structure/FormItem.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import { buildField } from "../fieldbuilder/FieldBuilder";
+export const FormItem = ({ source }) => {
+  if ("items" in source) {
+    const fieldSet = source;
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
+  }
+  else {
+    return buildField(source);
+  }
+};

package/dist/collection/components/ez-form/{FormMetadata.js → structure/FormMetadata.js}

@@ -1,4 +1,3 @@
-import { UserInterface } from "@sankhyalabs/core";
 export class FormMetadata {
   constructor() {
     this._sheets = new Map();
@@ -28,20 +27,40 @@ export class FormMetadata {
     return this._defaultValues;
   }
 }
+export const isRequiredField = (descriptor, config) => {
+  if (descriptor.required) {
+    //Se for required pelo descritor não olha pra configuração.
+    return true;
+  }
+  return config === null || config === void 0 ? void 0 : config.required;
+};
+export const isReadOnlyField = (descriptor, config) => {
+  if (descriptor.readOnly) {
+    //Se for readOnly pelo descritor não olha pra configuração.
+    return true;
+  }
+  return config === null || config === void 0 ? void 0 : config.readOnly;
+};
 export const buildFromDataUnit = (dataUnit) => {
+  var _a, _b;
   const unitMD = dataUnit.metadata;
   const metadata = new FormMetadata();
   if (unitMD) {
-    const visibleFields = (unitMD.fields || []).filter(descriptor => descriptor.visible !== false);
-    const fields = visibleFields.map(descriptor => buildFormField(descriptor));
+    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
+    const items = new Map();
+    (_b = unitMD === null || unitMD === void 0 ? void 0 : unitMD.fields) === null || _b === void 0 ? void 0 : _b.forEach((descriptor) => {
+      if (descriptor.visible !== false) {
+        resolveFieldGroup(items, null, descriptor);
+      }
+    });
     let defaultValues = {};
     visibleFields
       .filter(descriptor => descriptor.defaultValue)
       .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
     metadata.addSheet({
-      name: unitMD.name,
       label: unitMD.label,
-      fields,
+      name: unitMD.name,
+      items: Array.from(items.values()),
       requiredFields: visibleFields
         .filter(descriptor => descriptor.required)
         .map(descriptor => descriptor.name),
@@ -53,6 +72,29 @@ export const buildFromDataUnit = (dataUnit) => {
   }
   return metadata;
 };
+function getTabConfig(tab, sheets) {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+}
+function sortTabs(a, b) {
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+}
+function resolveFieldGroup(items, field, descriptor) {
+  const fieldMD = { config: field, descriptor: descriptor };
+  let group = (field === null || field === void 0 ? void 0 : field.group) || descriptor.group;
+  if (group) {
+    const key = `group::${group}`;
+    if (!items.has(key)) {
+      items.set(key, { label: group, items: [fieldMD] });
+    }
+    else {
+      items.get(key).items.push(fieldMD);
+    }
+  }
+  else {
+    items.set((field === null || field === void 0 ? void 0 : field.name) || descriptor.name, fieldMD);
+  }
+}
 export const buildFromConfig = (config, dataUnit) => {
   var _a, _b;
   const sheets = new Map();
@@ -75,11 +117,10 @@ export const buildFromConfig = (config, dataUnit) => {
       const descriptor = dataUnit.getField(field.name);
       if (descriptor && tabConfig.visible) {
         if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, []);
+          sheets.set(tabConfig, new Map());
         }
-        const formField = buildFormField(descriptor, field);
-        sheets.get(tabConfig).push(formField);
-        if (formField.required) {
+        const tabItens = sheets.get(tabConfig);
+        if (isRequiredField(descriptor, field)) {
           requiredFields.push(field.name);
         }
         const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
@@ -90,17 +131,18 @@ export const buildFromConfig = (config, dataUnit) => {
         if (defaultValue) {
           defaultValues[field.name] = field.defaultValue;
         }
+        resolveFieldGroup(tabItens, field, descriptor);
       }
     }
   });
   const metadata = new FormMetadata();
   Array.from(sheets.entries())
     .sort(sortTabs)
-    .forEach(([key, fields]) => {
+    .forEach(([key, value]) => {
     metadata.addSheet({
       label: (key.label === "__main") ? "Principal" : key.label,
       name: key.label,
-      fields,
+      items: Array.from(value.values()),
       requiredFields,
       cleanOnCopyFields,
       defaultValues
@@ -108,30 +150,3 @@ export const buildFromConfig = (config, dataUnit) => {
   });
   return metadata;
 };
-const buildFormField = (descriptor, config) => {
-  let { name, label, group } = Object.assign({}, config);
-  let { readOnly, required } = Object.assign({}, config);
-  let props;
-  let userInterface;
-  if (descriptor) {
-    label = label || descriptor.label;
-    name = name || descriptor.name;
-    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
-    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
-    props = descriptor.properties;
-    userInterface = descriptor.userInterface;
-  }
-  return {
-    name, label, group,
-    readOnly, required,
-    props,
-    userInterface: userInterface || UserInterface.SHORTTEXT
-  };
-};
-const getTabConfig = (tab, sheets) => {
-  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
-  return tabConfig || { label: tab, visible: true };
-};
-const sortTabs = (a, b) => {
-  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
-};

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { FormItem } from "./FormItem";
+export const FormSheet = ({ store, source, dataElementId }) => {
+  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
+    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
+};

package/dist/collection/components/ez-guide-navigator/Guide.js

@@ -0,0 +1,200 @@
+import { ObjectUtils } from '@sankhyalabs/core';
+export const HIERARCHY_SEPARATOR = '>>';
+export class Guide {
+  constructor(list) {
+    this.originalList = [];
+    this.guideMap = new Map();
+    this.hierarchiesAlreadyLoaded = new Set();
+    if (list === null || list === void 0 ? void 0 : list.length)
+      this.setList(list);
+  }
+  /**
+    * Converte uma lista de objetos IGuideItem em um objeto IGuideMap com sua hierarquia.
+    * @param list Uma lista de objetos IGuideItem representando a lista de itens.
+    * @param hierarquiaList Uma lista opcional de strings que representa a hierarquia dos itens pai.
+    * @param indexReferences Uma lista opcional de números que representa as referências de índice da lista original.
+    * @returns Uma Promise que resolve para um objeto IGuideMap com os itens e sua hierarquia.
+  */
+  convertArrayToMap(list, hierarchyList = [], indexReferences = []) {
+    return new Promise(resolve => {
+      list.forEach(async (item, index) => {
+        const updatedHierarchyList = [...hierarchyList, item.id];
+        const key = updatedHierarchyList.join(HIERARCHY_SEPARATOR);
+        const currentIndexReferences = [...indexReferences, index];
+        const children = Array.isArray(item.children) ? item.children : [];
+        item = Object.assign(Object.assign({}, item), { parentId: hierarchyList[hierarchyList.length - 1], indexReferences: currentIndexReferences, hierarchy: updatedHierarchyList, hierarchyId: key });
+        delete item.children;
+        this.guideMap.set(key, item);
+        if (children.length)
+          await this.convertArrayToMap(children, updatedHierarchyList, currentIndexReferences);
+      });
+      resolve(this.guideMap);
+    });
+  }
+  /**
+    * Converte um objeto IGuideMap em uma lista de objetos IGuideItem com sua hierarquia.
+    * @param map Um objeto IGuideMap opcional que representa o mapa de itens com sua hierarquia.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  convertMapToArray(map = this.guideMap) {
+    return new Promise(resolve => {
+      const array = [];
+      const itemsById = {};
+      map.forEach(value => {
+        var _a;
+        const item = Object.assign({}, value);
+        if (((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+          delete item.children;
+        }
+        itemsById[item.id] = item;
+      });
+      Object.values(itemsById).forEach(item => {
+        if (item.parentId) {
+          const parent = itemsById[item.parentId];
+          if (Array.isArray(parent.children)) {
+            parent.children.push(item);
+          }
+          else {
+            parent.children = [item];
+          }
+        }
+        else {
+          array.push(item);
+        }
+      });
+      resolve(array);
+    });
+  }
+  /**
+    * Obtém a lista selecionada de itens com base na lista original e na lista de índice selecionada.
+    * @param originalList Uma lista de objetos IGuideItem representando a lista original de itens.
+    * @param selectedIndexList Uma matriz representando a lista de índices selecionada.
+    * @returns Uma lista de objetos IGuideItem representando a lista selecionada de itens.
+  */
+  getSelectedList(originalList, selectedIndexList) {
+    const selectedList = [];
+    selectedIndexList.forEach(selectedIndex => {
+      if (!selectedIndex.length)
+        return;
+      const [parentIndex, childIndex] = selectedIndex;
+      if (childIndex === undefined) {
+        selectedList.push(originalList[parentIndex]);
+      }
+      else {
+        const parent = originalList[parentIndex];
+        const child = parent.children[childIndex];
+        const selectedParent = selectedList.find(item => item.id === parent.id);
+        if (selectedParent) {
+          selectedParent.children.push(child);
+        }
+        else {
+          selectedList.push(Object.assign(Object.assign({}, parent), { children: [child] }));
+        }
+      }
+    });
+    return selectedList;
+  }
+  /**
+    * Define a lista de itens para o Map guideMap.
+    * @param list Uma lista de objetos IGuideItem representando a lista de itens.
+    * @returns Uma Promise que resolve quando a lista é convertida para o Map.
+  */
+  setList(list) {
+    return new Promise(async (resolve) => {
+      this.guideMap.clear();
+      if (!this.originalList.length) {
+        this.originalList = ObjectUtils.copy(list);
+      }
+      await this.convertArrayToMap(list);
+      resolve();
+    });
+  }
+  /**
+    * Obtém a lista de itens com sua hierarquia.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  getList() {
+    return this.convertMapToArray();
+  }
+  /**
+    * Adiciona filhos a um item pai no guia.
+    * @param parent Um objeto IGuideItem que representa o item pai.
+    * @param children Uma lista de objetos IGuideItem representando os itens filhos.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  addChildren(parent, children) {
+    return new Promise(async (resolve, reject) => {
+      if (parent.disabled)
+        return reject('Parent is disabled');
+      if (!parent.hierarchy || !parent.hierarchyId)
+        return reject('Hierarchy not found');
+      if (this.hierarchiesAlreadyLoaded.has(parent.hierarchyId))
+        return resolve([]);
+      await this.convertArrayToMap(children, parent.hierarchy);
+      const list = await this.getList();
+      this.originalList = ObjectUtils.copy(list);
+      this.hierarchiesAlreadyLoaded.add(parent.hierarchyId);
+      resolve(list);
+    });
+  }
+  /**
+      * Obtém os itens a partir de um campo corresponde à string de consulta.
+      * @param query Uma string que representa a consulta para corresponder ao rótulo.
+      * @param fieldName Uma string opcional que representa o nome do campo para corresponder à consulta.
+      * @returns Uma Promise que resolve para um objeto com o primeiro item encontrado e uma matriz de itens correspondentes com sua hierarquia.
+     */
+  getItemsByLabel(query, fieldName = 'label', selectedItem) {
+    return new Promise(async (resolve) => {
+      var _a;
+      const mapResults = [];
+      let firstOcorrence;
+      const itemFromMap = this.guideMap.get(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.hierarchyId);
+      if (itemFromMap)
+        itemFromMap.expanded = true;
+      for (const item of this.guideMap.values()) {
+        const label = ((_a = item === null || item === void 0 ? void 0 : item[fieldName]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        if (label.includes(query.toLowerCase())) {
+          if (!firstOcorrence)
+            firstOcorrence = item;
+          mapResults.push(item.indexReferences);
+        }
+      }
+      const updatedList = this.getSelectedList(this.originalList, mapResults);
+      resolve({
+        first: firstOcorrence,
+        list: updatedList,
+      });
+    });
+  }
+  /**
+    * Habilita todos os objetos IGuideItem.
+    * @returns Uma Promise que resolve com o array atualizado de objetos IGuideItem.
+  */
+  enableAllItems() {
+    return new Promise(async (resolve) => {
+      for (const item of this.guideMap.values())
+        item.disabled = false;
+      const list = await this.getList();
+      this.originalList = ObjectUtils.copy(list);
+      resolve(list);
+    });
+  }
+  /**
+    * Ativa somente objetos IGuideItem com base em uma matriz de IDs.
+    * @param ids Um array de IDs para habilitar.
+    * @param customTooltip Uma string para definir o tooltip de itens desabilitados.
+    * @returns Uma Promise que resolve com o array atualizado de objetos IGuideItem.
+  */
+  enableItemsById(ids = [], customTooltip = '') {
+    return new Promise(async (resolve) => {
+      for (const item of this.guideMap.values()) {
+        const isEnabled = ids.includes(item.id);
+        item.disabled = !isEnabled;
+        item.tooltip = isEnabled ? item.tooltip : customTooltip;
+      }
+      const list = await this.getList();
+      this.originalList = ObjectUtils.copy(list);
+      resolve(list);
+    });
+  }
+}

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.css

@@ -0,0 +1,53 @@
+:host {
+	/* Label Container */
+	/*@doc Define o espaçamento interno do container de label*/
+	--ez-guide-navigator--padding: 0 var(--space--large);
+	/*@doc Define a cor de shadow box do container de label*/
+	--ez-guide-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
+	/*@doc Define a cor de fundo do container de label*/
+	--ez-guide-navigator--background-color: var(--color--inverted);
+	/*@doc Define o border radius do container de label*/
+	--ez-guide-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
+	
+	
+	/*Labels Actions */
+	/*@doc Define o espaçamento entre as ações*/
+	--ez-guide-navigator--actions-gap: var(--space--medium);
+	/*@doc Define a margem vertical do elemento*/
+	--ez-guide-navigator--actions-margin: var(--space--medium) 0 var(--space--medium);
+}
+
+.inverted {
+	transform: rotate(180deg);
+}
+
+.ez-guide-navigator {
+	/* public */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	/* private */
+	padding: var(--ez-guide-navigator--padding);
+	background-color: var(--ez-guide-navigator--background-color);
+	-webkit-box-shadow: var(--ez-guide-navigator--box-shadow);
+	box-shadow: var(--ez-guide-navigator--box-shadow);
+	border-radius: var(--ez-guide-navigator--border-radius);
+
+}
+
+.ez-guide-navigator__actions {
+	/* public */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	/* private */
+	gap: var(--ez-guide-navigator--actions-gap);
+	margin: var(--ez-guide-navigator--actions-margin)
+}