@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/collection/components/ez-grid/interfaces/ISelection.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-grid/interfaces/ISelectionToastConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-grid/interfaces/index.js

@@ -0,0 +1,2 @@
+export * from './ISelection';
+export * from './ISelectionToastConfig';

package/dist/collection/components/ez-grid/subcomponents/filter-column.css

@@ -0,0 +1,34 @@
+.filter-column {
+  padding: var(--space--2xs, 8px);
+  position: relative;
+}
+
+.filter-column__header {
+  margin-bottom: var(--space--2xs, 8px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--space--xl, 32px);
+}
+
+.filter-column__footer {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  padding-top: var(--space--2xs, 8px);
+  border-top: var(--border--medium) var(--color--disable-secondary);
+}
+
+.filter-column__popover {
+  position: absolute;
+}
+
+.filter-column__header-title {
+  margin-left: 8px;
+}

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -0,0 +1,377 @@
+import { UserInterface } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+const windowInstace = window;
+const onSubmitFilter = new CustomEvent('onSubmitFilter', {
+  detail: {
+    showToast: true,
+  },
+});
+export class FilterColumn {
+  constructor() {
+    this.TOP_POSITION = '65';
+    this.TOP_POSITION_HEADER_HIDDEN = '18';
+    this.TOP_POSITION_NO_TASKBAR = '32';
+    this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
+    this.DEFAULT_HEIGHT = 430;
+    this.opened = true;
+    this.columnName = undefined;
+    this.columnLabel = undefined;
+    this.gridHeaderHidden = false;
+    this.noHeaderTaskBar = false;
+    this.dataSource = undefined;
+    this.dataUnit = undefined;
+    this.options = undefined;
+    this.selectedItems = undefined;
+    this.fieldDescriptor = undefined;
+    this.useOptions = false;
+    this.isTextSearch = false;
+  }
+  async hide() {
+    await this.ezPopoverElement.hide();
+    await this.clearConfigs();
+  }
+  /**
+   * Abre o filtro de coluna.
+   * @Params IFilterColumnConfigs informações para configurar o filtro
+   */
+  async show(configs) {
+    if (this.canShow(configs)) {
+      await this.hide();
+      this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.buildIsTextSearch();
+      this.setOptions(configs.filteredOptions);
+      this.columnName = configs.columnName;
+      this.columnLabel = configs.columnLabel;
+      await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
+    }
+  }
+  calculateLeftPosition(configs) {
+    if (!configs.fromIcon) {
+      return configs.leftPosition;
+    }
+    const difference = this.ezPopoverElement.getBoundingClientRect().left;
+    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
+    const leftResolved = (leftReference + 16) - difference;
+    return `${(leftResolved > 0 ? leftResolved : 0)}px`;
+  }
+  buildIsTextSearch() {
+    var _a, _b;
+    const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
+    this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
+  }
+  calcTopPosition() {
+    const referencePosition = this.buildReferenceTopPosition();
+    const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
+    const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
+    const popoverBottomPosition = popoverPosition + totalPopoverHeight;
+    const windowHeight = window.innerHeight;
+    if (windowHeight > popoverBottomPosition) {
+      return `${referencePosition}px`;
+    }
+    const differenceBetween = windowHeight - popoverBottomPosition;
+    return `${differenceBetween}px`;
+  }
+  buildReferenceTopPosition() {
+    if (this.noHeaderTaskBar) {
+      return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
+    }
+    return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
+  }
+  async clearConfigs() {
+    var _a;
+    await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
+    this.options = null;
+    this.columnName = null;
+  }
+  canShow(configs) {
+    return !this.ezPopoverElement.opened || configs.columnName !== this.columnName;
+  }
+  submit() {
+    this.applyFilterColumnOptions.emit({
+      field: this.columnName,
+      values: this.selectedItems,
+    });
+    windowInstace.dispatchEvent(onSubmitFilter);
+    this.hide();
+  }
+  changeSelectedItems(items) {
+    this.selectedItems = items;
+  }
+  hasToUseOptions() {
+    return this.fieldDescriptor.userInterface === UserInterface.OPTIONSELECTOR
+      || this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  isCheckBoxOrSwitch() {
+    return this.fieldDescriptor.userInterface === UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === UserInterface.CHECKBOX;
+  }
+  setOptions(selectedItems) {
+    const validateFieldUserInterfaceOptionSelector = this.hasToUseOptions();
+    this.useOptions = validateFieldUserInterfaceOptionSelector;
+    this.options = validateFieldUserInterfaceOptionSelector ? this.buildOptions(selectedItems) : (selectedItems !== null && selectedItems !== void 0 ? selectedItems : null);
+  }
+  buildOptions(selectedItems) {
+    var _a, _b;
+    if (selectedItems && selectedItems.length > 0) {
+      return selectedItems;
+    }
+    if (this.isCheckBoxOrSwitch()) {
+      return [
+        { label: 'Sim', value: 'true', check: true },
+        { label: 'Não', value: 'false', check: true },
+      ];
+    }
+    const optionsObject = JSON.parse((_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options);
+    const objectKeys = Object.keys(optionsObject);
+    return objectKeys.map(key => {
+      return { label: optionsObject[key], value: key, check: true };
+    });
+  }
+  handleEzVisibilityChange(event) {
+    if (event.detail === false) {
+      this.clearConfigs();
+    }
+  }
+  render() {
+    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+  }
+  static get is() { return "filter-column"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["filter-column.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["filter-column.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "opened": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "columnName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-name",
+        "reflect": false
+      },
+      "columnLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-label",
+        "reflect": false
+      },
+      "gridHeaderHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "grid-header-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noHeaderTaskBar": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-header-task-bar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMultiSelectionListDataSource",
+          "resolved": "IMultiSelectionListDataSource",
+          "references": {
+            "IMultiSelectionListDataSource": {
+              "location": "import",
+              "path": "../../ez-multi-selection-list/interfaces/IMultiSelectionListDataSource"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IMultiSelectionOption[]",
+          "resolved": "IMultiSelectionOption[]",
+          "references": {
+            "IMultiSelectionOption": {
+              "location": "import",
+              "path": "../../ez-multi-selection-list/interfaces/IMultiSelectionOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedItems": {},
+      "fieldDescriptor": {},
+      "useOptions": {},
+      "isTextSearch": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "applyFilterColumnOptions",
+        "name": "applyFilterColumnOptions",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IAppliedFilterColumnOptions",
+          "resolved": "IAppliedFilterColumnOptions",
+          "references": {
+            "IAppliedFilterColumnOptions": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "(configs: IFilterColumnConfigs) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IFilterColumnConfigs": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre o filtro de coluna.",
+          "tags": [{
+              "name": "Params",
+              "text": "IFilterColumnConfigs informa\u00E7\u00F5es para configurar o filtro"
+            }]
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -0,0 +1,29 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export const SelectionCounter = (props) => {
+  const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
+  const { total, hasMore } = paginationInfo || {};
+  const shouldRenderSelectionButton = () => {
+    if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
+      return false;
+    if (canSelectAll !== undefined)
+      return canSelectAll;
+    return !!paginationInfo && (currentPageSelected || allRecordSelected);
+  };
+  return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, shouldRenderSelectionButton() &&
+    h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+};
+function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  else {
+    const pluralChar = selectionCount > 1 ? "s" : "";
+    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
+  }
+}
+function getElementID(sufix) {
+  return {
+    [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
+  };
+}

package/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource.js

@@ -0,0 +1,78 @@
+import { Action, DataType, DateUtils, UserInterface } from '@sankhyalabs/core';
+export default class InMemoryFilterColumnDataSource {
+  constructor(dataUnit) {
+    var _a;
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
+        this.originalRecords = this.dataUnit.records;
+      }
+    };
+    this.dataUnit = dataUnit;
+    this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
+    this.dataUnit.subscribe(this.onDataUnitAction);
+  }
+  fetchData(filterTerm, fieldName) {
+    return new Promise(resolve => {
+      const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
+      const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
+  buildFieldOption(item, fieldName) {
+    return {
+      value: this.buildValue(item, fieldName),
+      label: this.formatLabel(fieldName, item[fieldName]),
+      check: true,
+    };
+  }
+  buildValue(item, fieldName) {
+    var _a;
+    let value = item[fieldName];
+    if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
+      value = value.value;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  removeDuplicatedOptions(options) {
+    const noDuplicatedOptions = [];
+    options.forEach(option => {
+      if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
+        noDuplicatedOptions.push(option);
+      }
+    });
+    return noDuplicatedOptions;
+  }
+  includesSearchTerm(record, fieldName, filterTerm) {
+    let label = this.buildLabel(fieldName, record[fieldName]);
+    return label.toLowerCase().includes(filterTerm.toLowerCase());
+  }
+  buildLabel(fieldName, value) {
+    var _a;
+    const { dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.NUMBER) {
+      return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
+    }
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? (_a = DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.OBJECT) {
+      return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  formatLabel(fieldName, value) {
+    var _a, _b;
+    const { userInterface, dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
+      return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
+  }
+}

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

@@ -0,0 +1,66 @@
+:host {
+	/* Label Container */
+	/*@doc Define o espaçamento da esquerda do container*/
+	--ez-guide-navigator--padding-left: var(--space--large);
+	/*@doc Define o espaçamento da direita do container*/
+	--ez-guide-navigator--padding-right: var(--space--small);
+	/*@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--large) 0 var(--space--medium);
+	/*@doc Define o espaçamento da direita do elemento*/
+	--ez-guide-navigator--actions-padding-right: calc(var(--space--medium, 12px) + var(--space--small, 6px));
+}
+
+.inverted {
+	/* private */
+	transform: rotate(180deg);
+}
+
+.ez-guide-navigator {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	height: 100%;
+
+	/* public */
+	padding-left: var(--ez-guide-navigator--padding-left);
+	padding-right: var(--ez-guide-navigator--padding-right);
+	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 {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	
+	/* public */
+	gap: var(--ez-guide-navigator--actions-gap);
+	margin: var(--ez-guide-navigator--actions-margin);
+	padding-right: var(--ez-guide-navigator--actions-padding-right);
+}
+
+.hidden {
+	/* private */
+	display: none;
+}