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

package/dist/cjs/filter-column.cjs.entry.js

@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const filterColumnCss = ".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}";
+
+const windowInstace = window;
+const onSubmitFilter = new CustomEvent('onSubmitFilter', {
+  detail: {
+    showToast: true,
+  },
+});
+const FilterColumn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.applyFilterColumnOptions = index.createEvent(this, "applyFilterColumnOptions", 7);
+    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 : core.UserInterface.SHORTTEXT;
+    this.isTextSearch = !(userInterface === core.UserInterface.DECIMALNUMBER || userInterface === core.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 === core.UserInterface.OPTIONSELECTOR
+      || this.fieldDescriptor.userInterface === core.UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === core.UserInterface.CHECKBOX;
+  }
+  isCheckBoxOrSwitch() {
+    return this.fieldDescriptor.userInterface === core.UserInterface.SWITCH
+      || this.fieldDescriptor.userInterface === core.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 (index.h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, index.h("section", { class: 'filter-column' }, index.h("header", { class: 'filter-column__header' }, index.h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), index.h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), index.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 }), index.h("footer", { class: 'filter-column__footer' }, index.h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+  }
+};
+FilterColumn.style = filterColumnCss;
+
+exports.filter_column = FilterColumn;