@sankhyalabs/ezui 0.0.0-feat-dev-kb-4158.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,335 @@
+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 = '65px';
+    this.TOP_POSITION_HEADER_HIDDEN = '18';
+    this.DEFAULT_HEIGHT = 430;
+    this.opened = true;
+    this.columnName = undefined;
+    this.columnLabel = undefined;
+    this.gridHeaderHidden = false;
+    this.dataSource = undefined;
+    this.dataUnit = undefined;
+    this.options = undefined;
+    this.selectedItems = undefined;
+    this.fieldDescriptor = undefined;
+    this.useOptions = 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.setOptions(configs.filteredOptions);
+      this.columnName = configs.columnName;
+      this.columnLabel = configs.columnLabel;
+      await this.ezPopoverElement.show(this.calcTopPosition(), configs.leftPosition);
+    }
+  }
+  calcTopPosition() {
+    const referencePosition = this.gridHeaderHidden
+      ? this.TOP_POSITION_HEADER_HIDDEN
+      : this.TOP_POSITION.replace('px', '');
+    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;
+    }
+    const differenceBetween = windowHeight - popoverBottomPosition;
+    return `${differenceBetween}px`;
+  }
+  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) }), 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"
+      },
+      "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": {}
+    };
+  }
+  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-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;
+}