@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-detail.js

@@ -0,0 +1,250 @@
+import { h, Host, Fragment } from '@stencil/core';
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
+import FilterItemType from './filter-item-type.enum';
+import { ElementIDUtils, ApplicationContext, ObjectUtils } from '@sankhyalabs/core';
+import FilterBarConfigFetcher from '../../../lib/http/data-fetcher/fetchers/filter-bar-config-fetcher';
+import { EPresentationMode } from './editors/enum/presentationMode';
+import { PersonalizedFilterUtils } from '../../snk-personalized-filter/subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+export class SnkFilterDetail {
+  constructor() {
+    this.config = undefined;
+    this.getMessage = undefined;
+  }
+  /**
+   * Exibe o componente snk-filter-detail.
+   */
+  async show() {
+    var _a, _b;
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  observeConfig(newValue) {
+    var _a, _b;
+    this._editor && (this._editor["config"] = newValue);
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["reloadList"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  componentDidLoad() {
+    if (this._element) {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.config.id}`;
+    }
+  }
+  changeConfig(newConfig) {
+    this.filterChange.emit(newConfig);
+  }
+  getContentEditor() {
+    switch (this.config.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select" };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period" };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        const snkFilterPersonalizedProps = {
+          tag: "snk-personalized-filter-editor", props: {
+            presentationMode: EPresentationMode.CHIP,
+            onValueChanged: evt => this.handleValueChanged(evt),
+          }
+        };
+        return snkFilterPersonalizedProps;
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list" };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  handleValueChanged({ detail }) {
+    const groupedItems = (detail === null || detail === void 0 ? void 0 : detail.items) || this.config.groupedItems;
+    this.config = Object.assign(Object.assign({}, this.config), { groupedItems, visible: (groupedItems || []).filter(item => item.visible).length > 0 });
+  }
+  removeItem() {
+    const hasMultiValues = this.config.type === FilterItemType.MULTI_LIST && Array.isArray(this.config.value);
+    const newValue = hasMultiValues ? this.config.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    const removedConfig = Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: newValue });
+    if (removedConfig.groupedItems != undefined) {
+      removedConfig.groupedItems = removedConfig.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined })));
+    }
+    this.changeConfig(removedConfig);
+  }
+  removeItemFromGroup(item) {
+    return Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined });
+  }
+  getPopUpHeaderButtons() {
+    return (h(Fragment, null, !this.config.removalBlocked && this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()), !this.config.hardFixed && this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))));
+  }
+  buildIcon(title, iconName, action) {
+    return (h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", ref: elem => elem && this.buildIdButton(elem, title) }, h("ez-icon", Object.assign({ title: title, iconName: iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`_${title}`)}` }))));
+  }
+  buildIdButton(buttonElement, title) {
+    if (!buttonElement)
+      return;
+    const dataElement = { id: title };
+    buttonElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+    ElementIDUtils.addIDInfoIfNotExists(buttonElement, "button", dataElement);
+  }
+  clearBinarySelectValues() {
+    var _a;
+    const editor = this._editor || {};
+    (_a = editor.resetValues) === null || _a === void 0 ? void 0 : _a.call(editor);
+    this.config = ObjectUtils.copy(this.originalConfig);
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+  }
+  apply() {
+    const isValid = PersonalizedFilterUtils.validateVariableValues(this.config, this._editor["value"]);
+    if (!isValid) {
+      return ApplicationUtils.alert(this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.title'), this.getMessage('snkFilterBar.filterModal.validations.notFullFilled.message'));
+    }
+    const valuesArray = this._editor["value"] !== undefined ? this._editor["value"] : this.config.value;
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { visible: this.isVisible(), value: valuesArray }));
+  }
+  isVisible() {
+    if (this.config.groupedItems && this.config.groupedItems.length > 0) {
+      return this.config.groupedItems.filter(item => item.visible).length > 0;
+    }
+    return true;
+  }
+  clear() {
+    var _a;
+    if (this.config.type === FilterItemType.BINARY_SELECT) {
+      this.clearBinarySelectValues();
+      return;
+    }
+    if (FilterItemType.MULTI_LIST === this.config.type) {
+      const configCopy = ObjectUtils.copy(this.config);
+      (_a = configCopy.value) === null || _a === void 0 ? void 0 : _a.forEach(value => !!value && (value.check = false));
+      this.config = ObjectUtils.copy(configCopy);
+      return;
+    }
+    this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
+  }
+  filterCanBeCleared() {
+    return this.config.type !== FilterItemType.PERSONALIZED;
+  }
+  onKeyDonwListener(event) {
+    if (event.key === "Enter") {
+      this._applyButton.setFocus().then(() => this.apply());
+    }
+  }
+  buildRightSlot(item) {
+    return h("ez-icon", { iconName: "delete", onClick: () => this.removeValueFromConfig(item) });
+  }
+  removeValueFromConfig(item) {
+    var _a, _b;
+    if (this.config) {
+      const configCopy = ObjectUtils.copy(this.config);
+      const index = (_a = configCopy.value) === null || _a === void 0 ? void 0 : _a.findIndex(i => (i === null || i === void 0 ? void 0 : i.id) === item.id);
+      (_b = configCopy.value) === null || _b === void 0 ? void 0 : _b.splice(index, 1);
+      this.config = ObjectUtils.copy(configCopy);
+    }
+  }
+  saveConfig(newConfig) {
+    var _a;
+    (_a = this._application) === null || _a === void 0 ? void 0 : _a.getResourceID().then(resourceId => {
+      const fetcher = new FilterBarConfigFetcher();
+      fetcher.saveEntityListConfig(newConfig, resourceId, this._application.configName);
+      this.config = newConfig;
+    });
+  }
+  componentWillLoad() {
+    this.originalConfig = ObjectUtils.copy(this.config);
+  }
+  render() {
+    const { tag: CustomElement, props } = this.getContentEditor();
+    return (h(Host, null, h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.config.detailTitle), this.getPopUpHeaderButtons()), h(CustomElement, Object.assign({ maxHeightList: '240px', ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor, getMessage: this.getMessage, onSaveConfig: evt => this.saveConfig(evt.detail), rightListSlotBuilder: item => this.buildRightSlot(item) }, props)), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, this.filterCanBeCleared() && (h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" })), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
+  }
+  static get is() { return "snk-filter-detail"; }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as configura\u00E7\u00F5es do componente snk-filter-detail."
+        }
+      },
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterChange",
+        "name": "filterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 uma altera\u00E7\u00E3o nos filtros."
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./snk-filter-item"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe o componente snk-filter-detail.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "config",
+        "methodName": "observeConfig"
+      }];
+  }
+}

package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-item.js

@@ -0,0 +1,415 @@
+import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import FilterItemType from './filter-item-type.enum';
+export class SnkFilterItem {
+  constructor() {
+    this.innerClickCheck = (_floatingContainer, node) => {
+      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
+        return true;
+      }
+      this.detailIsVisible = false;
+      return false;
+    };
+    this.detailIsVisible = undefined;
+    this.config = undefined;
+    this.getMessage = undefined;
+  }
+  observeDetailIsVisible(value) {
+    this.visibleChanged.emit(value);
+  }
+  /**
+   * Exibe os detalhes de um item da lista.
+   */
+  async showUp(open = false) {
+    return new Promise(resolve => {
+      this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+      if (open) {
+        this._closeCallback = resolve;
+        window.requestAnimationFrame(() => {
+          this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, this.getFloatOptions());
+          this._popover.show();
+          this.detailIsVisible = true;
+        });
+      }
+    });
+  }
+  updatePosition() {
+    if (this._floatingID == undefined) {
+      return;
+    }
+    FloatingManager.updateFloatPosition(this._popover, this._popoverContainer, this.getFloatOptions());
+  }
+  getFloatOptions() {
+    return {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      backClickListener: () => this.onDetailCloseCallback(),
+      left: this.getScrollOffsetLeft(),
+      top: this.getScrollOffsetTop(),
+      useOverlay: true,
+      overlayClassName: 'ez-scrim ez-scrim--light',
+      isFixed: true
+    };
+  }
+  getScrollOffsetLeft() {
+    const padding = getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");
+    const rect = this._filterItemElement.getBoundingClientRect();
+    return `calc(${rect.x}px + ${padding})`;
+  }
+  getScrollOffsetTop() {
+    const rect = this._filterItemElement.getBoundingClientRect();
+    return (rect.y + rect.height) + "px";
+  }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.updatePosition.bind(this));
+    window.addEventListener("scroll", this.updatePosition.bind(this));
+  }
+  getConfigChanges() {
+    var _a;
+    const configToBeCleared = this.config;
+    if (!!((_a = configToBeCleared.groupedItems) === null || _a === void 0 ? void 0 : _a.length)) {
+      configToBeCleared.visible = false;
+      configToBeCleared.groupedItems = configToBeCleared.groupedItems.map(item => (Object.assign(Object.assign({}, item), { visible: false })));
+    }
+    const hasMultiValues = configToBeCleared.type === FilterItemType.MULTI_LIST && Array.isArray(configToBeCleared.value);
+    const newValue = hasMultiValues ? configToBeCleared.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
+    return Object.assign(Object.assign({}, configToBeCleared), { value: newValue });
+  }
+  /**
+   * Oculta os detalhes de um item da lista.
+   */
+  async hideDetail() {
+    if (this.detailIsVisible) {
+      if (this._floatingID != undefined) {
+        FloatingManager.close(this._floatingID);
+      }
+    }
+  }
+  onDetailCloseCallback() {
+    this._floatingID = undefined;
+    this.detailIsVisible = false;
+    if (this._closeCallback) {
+      this._closeCallback();
+      this._closeCallback = undefined;
+    }
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  clickListener(evt) {
+    if ([this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
+      if (evt.target === this._rightIconElement && this.canClearFilter()) {
+        const configChanged = this.getConfigChanges();
+        this.filterChange.emit(configChanged);
+      }
+      else {
+        if (this.detailIsVisible) {
+          this.hideDetail();
+        }
+        else {
+          this.showUp(true);
+        }
+      }
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      evt.stopPropagation();
+    }
+  }
+  mouseDownListener(evt) {
+    if (this.detailIsVisible && [this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      evt.stopPropagation();
+    }
+  }
+  getLabel(isTooltipLabel = false) {
+    var _a;
+    const { type, value, label, props, groupedItems = [] } = this.config;
+    if (value || groupedItems.length) {
+      if (type === FilterItemType.BINARY_SELECT) {
+        const [optOne, optTwo] = props.options;
+        const tooltip = this.getMessage('snkFilterBar.binarySelectTooltip');
+        if (optOne.name === value) {
+          return isTooltipLabel ? `${tooltip} ${String(optOne.label).toLowerCase()}` : optOne.label;
+        }
+        if (optTwo.name === value) {
+          return isTooltipLabel ? `${tooltip} ${String(optTwo.label).toLowerCase()}` : optTwo.label;
+        }
+      }
+      if (type === FilterItemType.MULTI_SELECT) {
+        const opt = props.options.find(opt => opt.value === value);
+        return `${label}: ${opt.label}`;
+      }
+      if (type === FilterItemType.PERIOD) {
+        let { end, start } = value;
+        if (typeof end === "string") {
+          end = new Date(end);
+          end.setMinutes(end.getMinutes() + end.getTimezoneOffset());
+        }
+        if (typeof start === "string") {
+          start = new Date(start);
+          start.setMinutes(start.getMinutes() + start.getTimezoneOffset());
+        }
+        const dateFormater = new Intl.DateTimeFormat("pt-BR");
+        if (end && start) {
+          const isSameYear = start.getFullYear() === end.getFullYear();
+          const formatOptions = Object.assign({ day: '2-digit', month: '2-digit' }, ((!isSameYear || isTooltipLabel) && { year: '2-digit' }));
+          const startLabel = DateUtils.formatDate(start, formatOptions);
+          const endLabel = DateUtils.formatDate(end, formatOptions);
+          if (isTooltipLabel) {
+            return this.getMessage('snkFilterBar.fullPeriodTooltip', { LABEL: label, START_LABEL: startLabel, END_LABEL: endLabel });
+          }
+          return `${label}: ${startLabel} \u2192 ${endLabel}`;
+        }
+        else {
+          if (start) {
+            return `${label}: ${this.getMessage('snkFilterBar.onlyStartPeriodToltip')} ${dateFormater.format(start)}`;
+          }
+          else if (end) {
+            return `${label}: ${this.getMessage('snkFilterBar.onlyEndPeriodToltip')} ${dateFormater.format(end)}`;
+          }
+          else {
+            return label;
+          }
+        }
+      }
+      if (type === FilterItemType.SEARCH) {
+        return `${label}: ${value.value} - ${value.label}`;
+      }
+      if (type === FilterItemType.PERSONALIZED) {
+        const activeCount = this.calculateActiveCount(groupedItems);
+        if (activeCount <= 0)
+          return label;
+        return `${label}: ${this.getMessage('snkFilterBar.personalizedCount', { activeCount })}`;
+      }
+      if (type === FilterItemType.MULTI_LIST) {
+        const selectedOptions = ((_a = value.elements) !== null && _a !== void 0 ? _a : value).filter(item => item === null || item === void 0 ? void 0 : item.check);
+        const checkedAmount = selectedOptions.length;
+        if (checkedAmount === 0) {
+          return `${label}`;
+        }
+        if (checkedAmount > 1) {
+          if (isTooltipLabel) {
+            const selectedOptionsDescrptions = selectedOptions.map(item => item.label);
+            return `${label}: ${selectedOptionsDescrptions.join(',')}`;
+          }
+          return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
+        }
+        return `${label}: ${selectedOptions[0].label}`;
+      }
+      return `${label}: ${value}`;
+    }
+    return label;
+  }
+  calculateActiveCount(groupedItems) {
+    return groupedItems.reduce((total, item) => {
+      if (!!item.visible)
+        return total + 1;
+      return total;
+    }, 0);
+  }
+  componentDidLoad() {
+    if (this._filterItemElement) {
+      ElementIDUtils.addIDInfo(this._filterItemElement);
+      this._idSnkFilterDetail = `filterDetail_${this.config.id}`;
+    }
+    this.controlScrollPage();
+  }
+  componentDidRender() {
+    if (this._floatingID == undefined) {
+      if (this._popover) {
+        this._popover.remove();
+      }
+    }
+  }
+  /**
+   * Emitido quando o estado do filtro é alterado.
+   */
+  filterChangeListener() {
+    this.hideDetail();
+  }
+  canClearFilter() {
+    const { value, groupedItems = [] } = this.config;
+    return value !== undefined || groupedItems.some(item => item.visible);
+  }
+  getRightIconName() {
+    if (this.canClearFilter())
+      return "close";
+    return this.detailIsVisible ? "chevron-up" : "chevron-down";
+  }
+  getLeftIconName() {
+    switch (this.config.type) {
+      case FilterItemType.PERIOD:
+        return "calendar";
+      case FilterItemType.PERSONALIZED:
+        return "tune";
+    }
+    return undefined;
+  }
+  hasActiveElements(value) {
+    var _a, _b, _c;
+    return ((_c = (_b = ((_a = value === null || value === void 0 ? void 0 : value.elements) !== null && _a !== void 0 ? _a : value)) === null || _b === void 0 ? void 0 : _b.filter(val => val === null || val === void 0 ? void 0 : val.check)) === null || _c === void 0 ? void 0 : _c.length) > 0;
+  }
+  hasActiveValue(config) {
+    return (config.type !== FilterItemType.MULTI_LIST && config.value !== undefined) || this.hasActiveElements(config.value);
+  }
+  getEnabledChip() {
+    if (this.config.type === FilterItemType.PERSONALIZED) {
+      const { groupedItems = [] } = this.config;
+      return groupedItems.some(item => item.visible);
+    }
+    return this.hasActiveValue(this.config);
+  }
+  render() {
+    const leftIcon = this.getLeftIconName();
+    return (h(Host, null, h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip() }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+  }
+  static get is() { return "snk-filter-item"; }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as configura\u00E7\u00F5es do componente snk-filter-item."
+        }
+      },
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "detailIsVisible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "visibleChanged",
+        "name": "visibleChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o detalhe de um item da lista \u00E9 aberto ou fechado."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "filterChange",
+        "name": "filterChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 uma altera\u00E7\u00E3o nos filtros."
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showUp": {
+        "complexType": {
+          "signature": "(open?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe os detalhes de um item da lista.",
+          "tags": []
+        }
+      },
+      "hideDetail": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Oculta os detalhes de um item da lista.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_filterItemElement"; }
+  static get watchers() {
+    return [{
+        "propName": "detailIsVisible",
+        "methodName": "observeDetailIsVisible"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "mousedown",
+        "method": "mouseDownListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "filterChange",
+        "method": "filterChangeListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}