@sankhyalabs/sankhyablocks 5.5.0 → 5.7.0

package/dist/components/snk-filter-field-search.js

@@ -1,203 +1,4 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { UserInterface, JSUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
-
-var SelectedItemType;
-(function (SelectedItemType) {
-  SelectedItemType["LINK"] = "LINK";
-  SelectedItemType["FIELD"] = "FIELD";
-})(SelectedItemType || (SelectedItemType = {}));
-
-const ICON_MODES = {
-  [UserInterface.SHORTTEXT]: 'text',
-  [UserInterface.LONGTEXT]: 'text',
-  [UserInterface.INTEGERNUMBER]: 'number',
-  [UserInterface.DECIMALNUMBER]: 'number',
-  [UserInterface.DATE]: 'calendar',
-  [UserInterface.DATETIME]: 'calendar',
-  [UserInterface.SWITCH]: 'boolean',
-  [UserInterface.CHECKBOX]: 'check-circle-inverted',
-  [UserInterface.OPTIONSELECTOR]: 'list',
-  [UserInterface.SEARCH]: 'search',
-  [UserInterface.HTML]: 'tag_code',
-  [UserInterface.IMAGE]: 'png',
-  [UserInterface.FILE]: 'edit-file',
-  [UserInterface.TIME]: 'timer-outline',
-  [UserInterface.ELAPSEDTIME]: 'timer',
-  [UserInterface.MASKEDTEXT]: 'text',
-  [UserInterface.PASSWORD]: 'email',
-};
-const ListItem = ({ userInterface, description }) => {
-  return (h("ez-icon", { iconName: ICON_MODES[userInterface], className: "ez-padding-left--small", title: description }));
-};
-
-const snkFilterFieldSearchCss = ".sc-snk-filter-field-search-h{--snk-filter-field-search--container-width:468px;--snk-filter-field-search--container-height:322px}.snk-filter-field-search__container.sc-snk-filter-field-search{display:flex;flex-direction:column;padding:var(--space--medium);width:var(--snk-filter-field-search--container-width);height:var(--snk-filter-field-search--container-height)}.snk-filter-field-search__section.sc-snk-filter-field-search{display:grid;grid-template-columns:1fr 1fr;place-items:flex-start;overflow:hidden;gap:var(--space--small)}.snk-filter-field-search__input.sc-snk-filter-field-search{margin-bottom:var(--space--medium)}.snk-filter-field-search__list_container.sc-snk-filter-field-search{display:flex;flex-direction:column}.snk-filter-field-search__list.sc-snk-filter-field-search{overflow-y:auto}";
-
-const SNK_CONTEXT_KEY = "__SNK__APPLICATION__";
-const SnkFilterFieldSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.ezSelectFilterItem = createEvent(this, "ezSelectFilterItem", 7);
-    this._filterMetadataStorage = new Map();
-    this._dataSource = null;
-    this._filterText = "";
-    this._isLoading = false;
-    this.searchable = true;
-    this.breadcrumbItems = [];
-    this.linkItems = [];
-    this.fieldItems = [];
-  }
-  /**
-   * Define a fonte de dados do componente.
-   * @param {IFilterLink} currentLink - Link atual da entidade.
-   * @param {IFilterMetadata} fetchData - callback que executa a busca de dados.
-   * @throws {Error} - Quando os metadados não forem válidos.
-   * @throws {Error} - Quando o link atual não for do tipo link.
-  */
-  async setDataSource(currentLink, fetchData) {
-    var _a;
-    this._isLoading = true;
-    let metadata = this._filterMetadataStorage.get(currentLink.uri);
-    if (!metadata) {
-      metadata = await fetchData(currentLink);
-      this._filterMetadataStorage.set(currentLink.uri, metadata);
-    }
-    const { fields, links } = metadata || {};
-    if (!Array.isArray(fields) || !Array.isArray(links))
-      throw new Error('Invalid metadata');
-    if (currentLink.type !== SelectedItemType.LINK)
-      throw new Error('The current link must be a link type');
-    this._dataSource = metadata;
-    this._currentLink = currentLink;
-    this.mapDataSourceToLinkItems();
-    this.mapDataSourceToFieldItems();
-    this._isLoading = false;
-    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
-    this._ezFieldList.scrollToTop();
-    this._ezLinkList.scrollToTop();
-  }
-  /**
-   * Filtra a fonte de dados do componente.
-   * @param {string} filterText - Texto para filtrar a fonte de dados.
-   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
-  */
-  async filterDataSource(filterText) {
-    if (this.searchable)
-      throw new Error('This method is not available when searchable is true');
-    this.handleFilterChange(filterText);
-  }
-  mapDataSourceToLinkItems() {
-    var _a;
-    const { links } = this._dataSource;
-    const filterLinkLabelMessage = this.getMessage('snkFilterFieldSearch.linkLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
-    const items = links.map(link => (Object.assign({ label: link.description }, link)));
-    this.linkItems = [{
-        group: filterLinkLabelMessage,
-        items
-      }];
-    if (this.breadcrumbItems.length === 0) {
-      this.breadcrumbItems = [Object.assign({ id: JSUtils.generateUUID(), label: this._currentLink.description }, this._currentLink)];
-    }
-  }
-  mapDataSourceToFieldItems() {
-    var _a;
-    const { fields } = this._dataSource;
-    const filterFieldLabelMessage = this.getMessage('snkFilterFieldSearch.fieldLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
-    const filteredFields = fields.filter(field => {
-      if (!this._currentLink)
-        return true;
-      const searchableByDescription = field.description.toLowerCase().includes(this._filterText.toLowerCase());
-      const searchableByName = field.name.toLowerCase().includes(this._filterText.toLowerCase());
-      return searchableByDescription || searchableByName;
-    });
-    const items = filteredFields.map(field => (Object.assign({ label: field.description }, field)));
-    this.fieldItems = [{
-        group: filterFieldLabelMessage,
-        items
-      }];
-  }
-  handleFilterChange(filterText) {
-    if (this._isLoading)
-      return;
-    this._filterText = filterText;
-    this.mapDataSourceToFieldItems();
-  }
-  handleSelectLink({ detail: item }) {
-    if (this._isLoading)
-      return;
-    const breadcrumbByIndex = this.breadcrumbItems.findIndex(breadcrumbItem => breadcrumbItem.id === item.id);
-    item.cache = this._filterMetadataStorage.has(item.uri);
-    if (breadcrumbByIndex > -1) {
-      this.breadcrumbItems = this.breadcrumbItems.slice(0, (breadcrumbByIndex + 1));
-    }
-    else {
-      this.breadcrumbItems = [...this.breadcrumbItems, Object.assign({ id: JSUtils.generateUUID(), label: item.description }, item)];
-    }
-    this.ezSelectFilterItem.emit(Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK }));
-  }
-  handleSelectField({ detail: item }) {
-    var _a;
-    const breadcrumbPath = this.breadcrumbItems.map(breadcrumbItem => breadcrumbItem.label).join('>>');
-    const selectedField = Object.assign(Object.assign({}, item), { type: SelectedItemType.FIELD, path: `${breadcrumbPath} >> ${item.description}` });
-    this.ezSelectFilterItem.emit(selectedField);
-    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.hide();
-  }
-  getElementID(sufix) {
-    return {
-      [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
-    };
-  }
-  /**
-   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
-   * através de um pequeno modulo na estrutura da aplicação:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-filter-field-search.msg.ts"
-  */
-  getMessage(key, params) {
-    var _a, _b, _c;
-    if (!this._application)
-      this._application = ApplicationContext.getContextValue(SNK_CONTEXT_KEY);
-    return (_c = (_b = (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder) === null || _b === void 0 ? void 0 : _b.getMessage) === null || _c === void 0 ? void 0 : _c.call(_b, key, params);
-  }
-  ;
-  componentWillLoad() {
-    this._application = ApplicationContext.getContextValue(SNK_CONTEXT_KEY);
-  }
-  componentDidLoad() {
-    ElementIDUtils.addIDInfoIfNotExists(this._ezPopover, 'popover');
-  }
-  disconnectedCallback() {
-    var _a;
-    this._filterMetadataStorage.clear();
-    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.hide();
-  }
-  render() {
-    var _a;
-    const searchLabelMessage = this.getMessage('snkFilterFieldSearch.searchLabel');
-    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
-  }
-  static get style() { return snkFilterFieldSearchCss; }
-}, [2, "snk-filter-field-search", {
-    "searchable": [4],
-    "breadcrumbItems": [32],
-    "linkItems": [32],
-    "fieldItems": [32],
-    "setDataSource": [64],
-    "filterDataSource": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["snk-filter-field-search"];
-  components.forEach(tagName => { switch (tagName) {
-    case "snk-filter-field-search":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SnkFilterFieldSearch$1);
-      }
-      break;
-  } });
-}
+import { S as SnkFilterFieldSearch$1, d as defineCustomElement$1 } from './snk-filter-field-search2.js';
 
 const SnkFilterFieldSearch = SnkFilterFieldSearch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/snk-filter-field-search.entry.js → components/snk-filter-field-search2.js}

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent } from './index-cfd4bb13.js';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { UserInterface, JSUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 
 var SelectedItemType;
@@ -33,66 +33,69 @@ const ListItem = ({ userInterface, description }) => {
 const snkFilterFieldSearchCss = ".sc-snk-filter-field-search-h{--snk-filter-field-search--container-width:468px;--snk-filter-field-search--container-height:322px}.snk-filter-field-search__container.sc-snk-filter-field-search{display:flex;flex-direction:column;padding:var(--space--medium);width:var(--snk-filter-field-search--container-width);height:var(--snk-filter-field-search--container-height)}.snk-filter-field-search__section.sc-snk-filter-field-search{display:grid;grid-template-columns:1fr 1fr;place-items:flex-start;overflow:hidden;gap:var(--space--small)}.snk-filter-field-search__input.sc-snk-filter-field-search{margin-bottom:var(--space--medium)}.snk-filter-field-search__list_container.sc-snk-filter-field-search{display:flex;flex-direction:column}.snk-filter-field-search__list.sc-snk-filter-field-search{overflow-y:auto}";
 
 const SNK_CONTEXT_KEY = "__SNK__APPLICATION__";
-const SnkFilterFieldSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const SnkFilterFieldSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.ezSelectFilterItem = createEvent(this, "ezSelectFilterItem", 7);
     this._filterMetadataStorage = new Map();
-    this._dataSource = null;
+    this._currentMetadata = null;
     this._filterText = "";
     this._isLoading = false;
     this.searchable = true;
+    this.fieldsDataSource = undefined;
     this.breadcrumbItems = [];
     this.linkItems = [];
     this.fieldItems = [];
   }
   /**
-   * Define a fonte de dados do componente.
-   * @param {IFilterLink} currentLink - Link atual da entidade.
-   * @param {IFilterMetadata} fetchData - callback que executa a busca de dados.
-   * @throws {Error} - Quando os metadados não forem válidos.
-   * @throws {Error} - Quando o link atual não for do tipo link.
-  */
-  async setDataSource(currentLink, fetchData) {
+   * Realiza a abertura do componente e faz a primeira carga
+   * de dados.
+   * */
+  async show() {
     var _a;
+    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
+    return this.loadData();
+  }
+  /**
+   * Filtra a fonte de dados do componente.
+   * @param {string} filterText - Texto para filtrar a fonte de dados.
+   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
+  */
+  async applyFilter(filterText) {
+    if (this.searchable)
+      throw new Error('This method is not available when searchable is true');
+    this.handleFilterChange(filterText);
+  }
+  async loadData() {
     this._isLoading = true;
-    let metadata = this._filterMetadataStorage.get(currentLink.uri);
+    let metadata;
+    if (this._currentLink != undefined) {
+      metadata = this._filterMetadataStorage.get(this._currentLink.uri);
+    }
     if (!metadata) {
-      metadata = await fetchData(currentLink);
-      this._filterMetadataStorage.set(currentLink.uri, metadata);
+      metadata = await this.fieldsDataSource.fetchData(this._currentLink);
+      this._currentLink = metadata.currentLink;
+      this._filterMetadataStorage.set(this._currentLink.uri, metadata);
     }
     const { fields, links } = metadata || {};
     if (!Array.isArray(fields) || !Array.isArray(links))
       throw new Error('Invalid metadata');
-    if (currentLink.type !== SelectedItemType.LINK)
-      throw new Error('The current link must be a link type');
-    this._dataSource = metadata;
-    this._currentLink = currentLink;
+    this._currentMetadata = metadata;
     this.mapDataSourceToLinkItems();
     this.mapDataSourceToFieldItems();
     this._isLoading = false;
-    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
     this._ezFieldList.scrollToTop();
     this._ezLinkList.scrollToTop();
   }
-  /**
-   * Filtra a fonte de dados do componente.
-   * @param {string} filterText - Texto para filtrar a fonte de dados.
-   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
-  */
-  async filterDataSource(filterText) {
-    if (this.searchable)
-      throw new Error('This method is not available when searchable is true');
-    this.handleFilterChange(filterText);
-  }
   mapDataSourceToLinkItems() {
     var _a;
-    const { links } = this._dataSource;
+    const { links } = this._currentMetadata;
     const filterLinkLabelMessage = this.getMessage('snkFilterFieldSearch.linkLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
     const items = links.map(link => (Object.assign({ label: link.description }, link)));
     this.linkItems = [{
         group: filterLinkLabelMessage,
-        items
+        items,
       }];
     if (this.breadcrumbItems.length === 0) {
       this.breadcrumbItems = [Object.assign({ id: JSUtils.generateUUID(), label: this._currentLink.description }, this._currentLink)];
@@ -100,7 +103,7 @@ const SnkFilterFieldSearch = class {
   }
   mapDataSourceToFieldItems() {
     var _a;
-    const { fields } = this._dataSource;
+    const { fields } = this._currentMetadata;
     const filterFieldLabelMessage = this.getMessage('snkFilterFieldSearch.fieldLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
     const filteredFields = fields.filter(field => {
       if (!this._currentLink)
@@ -132,7 +135,10 @@ const SnkFilterFieldSearch = class {
     else {
       this.breadcrumbItems = [...this.breadcrumbItems, Object.assign({ id: JSUtils.generateUUID(), label: item.description }, item)];
     }
-    this.ezSelectFilterItem.emit(Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK }));
+    const selectedItem = Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK });
+    this._currentLink = selectedItem;
+    this.ezSelectFilterItem.emit(selectedItem);
+    this.loadData();
   }
   handleSelectField({ detail: item }) {
     var _a;
@@ -173,9 +179,30 @@ const SnkFilterFieldSearch = class {
   render() {
     var _a;
     const searchLabelMessage = this.getMessage('snkFilterFieldSearch.searchLabel');
-    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
+    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", overlayType: "none", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
   }
-};
-SnkFilterFieldSearch.style = snkFilterFieldSearchCss;
+  static get style() { return snkFilterFieldSearchCss; }
+}, [2, "snk-filter-field-search", {
+    "searchable": [4],
+    "fieldsDataSource": [16],
+    "breadcrumbItems": [32],
+    "linkItems": [32],
+    "fieldItems": [32],
+    "show": [64],
+    "applyFilter": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-field-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-field-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterFieldSearch);
+      }
+      break;
+  } });
+}
 
-export { SnkFilterFieldSearch as snk_filter_field_search };
+export { SnkFilterFieldSearch as S, SelectedItemType as a, defineCustomElement as d };

package/dist/components/snk-filter-list.js

@@ -1,4 +1,174 @@
-import { S as SnkFilterList$1, d as defineCustomElement$1 } from './snk-filter-list2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { FloatingManager, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
+
+const SHOW_MORE_ITEM_NAME = "__SHOWMORE__";
+const MAX_FILTERS = 5;
+const SnkFilterList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.snkItemSelected = createEvent(this, "snkItemSelected", 7);
+    this._preselection = -1;
+    this.innerClickCheck = (_floatingContainer, node) => {
+      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
+        return true;
+      }
+      this._detailIsVisible = false;
+      return false;
+    };
+    this._filterArgument = undefined;
+    this._showAll = undefined;
+    this.label = undefined;
+    this.iconName = undefined;
+    this.items = undefined;
+    this.getMessage = undefined;
+    this.emptyText = undefined;
+    this.findFilterText = undefined;
+    this.buttonClass = undefined;
+  }
+  showDetail() {
+    this._preselection = -1;
+    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      backClickListener: () => this.onListCloseCallback(),
+      useOverlay: true
+    });
+    this._detailIsVisible = true;
+    this._showAll = false;
+    this._filterArgument = "";
+    this._filterInput.setFocus();
+  }
+  /**
+   * Oculta os detalhes do componente snk-filter-list.
+   */
+  async hideDetail() {
+    if (this._floatingID != undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+  }
+  onListCloseCallback() {
+    this._floatingID = undefined;
+    this._detailIsVisible = false;
+  }
+  buttonClick() {
+    if (this._detailIsVisible) {
+      this.hideDetail();
+    }
+    else {
+      this.showDetail();
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  componentDidRender() {
+    if (this._floatingID == undefined) {
+      if (this._popover) {
+        this._popover.remove();
+      }
+    }
+  }
+  buildIdElement(buttonElement, name) {
+    if (!buttonElement)
+      return;
+    const dataElement = { id: name };
+    buttonElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+    ElementIDUtils.addIDInfoIfNotExists(buttonElement, "filterItemList", dataElement);
+  }
+  buildItemElement(item) {
+    const itemId = ++this._selectableItemsCount;
+    return (h("button", { ref: elem => elem && this.buildIdElement(elem, item.label), id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), name: item.label, key: itemId }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
+  }
+  itemSelected(itemName) {
+    if (itemName === SHOW_MORE_ITEM_NAME) {
+      this._showAll = true;
+    }
+    else {
+      this.hideDetail();
+      this.snkItemSelected.emit(itemName);
+    }
+  }
+  getFilterItems() {
+    const items = this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items.filter(item => item.kind === "FILTER")) : [];
+    if (items.length === 0) {
+      return h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-items-container--empty" }, this.emptyText);
+    }
+    const hideItems = !this._filterArgument && !this._showAll && (items.length > MAX_FILTERS + 1);
+    if (hideItems) {
+      items.splice(MAX_FILTERS);
+      items.push({ kind: "INTERNAL", label: "Mostrar mais", iconName: "dots-horizontal", name: SHOW_MORE_ITEM_NAME, iconClass: "snk-filter-bar__filter-list-item__icon--secondary", labelClass: "snk-filter-bar__filter-list-item__label--secondary" });
+    }
+    this._selectableItemsCount = 0;
+    return h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-list-items-container" }, items.map(item => this.buildItemElement(item)));
+  }
+  getFooterItems() {
+    return this.items.filter(item => item.kind === "FOOTER");
+  }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        this.changePreselection(this._preselection + 1);
+        //Paramos a propagação do evento para evitar scroll indesejado
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        this.changePreselection(this._preselection - 1);
+        //Paramos a propagação do evento para evitar scroll indesejado
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+    }
+  }
+  changePreselection(newSelection) {
+    if (newSelection < 0) {
+      newSelection = this._selectableItemsCount;
+    }
+    this._preselection = newSelection > this._selectableItemsCount ? 0 : newSelection;
+    if (this._preselection === 0) {
+      this._filterInput.setFocus();
+    }
+    else {
+      const item = this._element.querySelector(`#filter-item${this._preselection}`);
+      if (item) {
+        item.focus();
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+  }
+  get _element() { return this; }
+}, [4, "snk-filter-list", {
+    "label": [1],
+    "iconName": [1, "icon-name"],
+    "items": [16],
+    "getMessage": [16],
+    "emptyText": [1, "empty-text"],
+    "findFilterText": [1, "find-filter-text"],
+    "buttonClass": [1, "button-class"],
+    "_filterArgument": [32],
+    "_showAll": [32],
+    "hideDetail": [64]
+  }, [[2, "keydown", "keyDownHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterList$1);
+      }
+      break;
+  } });
+}
 
 const SnkFilterList = SnkFilterList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/snk-filter-modal-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkFilterModalItem extends Components.SnkFilterModalItem, HTMLElement {}
+export const SnkFilterModalItem: {
+  prototype: SnkFilterModalItem;
+  new (): SnkFilterModalItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-filter-modal-item.js

@@ -0,0 +1,6 @@
+import { S as SnkFilterModalItem$1, d as defineCustomElement$1 } from './snk-filter-modal-item2.js';
+
+const SnkFilterModalItem = SnkFilterModalItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkFilterModalItem, defineCustomElement };

package/dist/components/snk-filter-modal-item2.js

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { F as FilterItemType } from './filter-item-type.enum.js';
+import { E as EPresentationMode } from './presentationMode.js';
+
+var FilterType;
+(function (FilterType) {
+  FilterType["QUICK_FILTER"] = "QUICK_FILTER";
+  FilterType["CUSTOM_FILTER"] = "CUSTOM_FILTER";
+  FilterType["OTHER_FILTERS"] = "OTHER_FILTERS";
+})(FilterType || (FilterType = {}));
+const FilterType$1 = FilterType;
+
+const snkFilterModalItemCss = ".grow{flex-grow:1}";
+
+const SnkFilterModalItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.filterChange = createEvent(this, "filterChange", 7);
+    this.filterItem = undefined;
+  }
+  observeFilterItem(newValue) {
+    this.filterChange.emit(newValue);
+  }
+  getContentEditorConfig() {
+    const variations = { presentationMode: EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", variations };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", variations };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        return { tag: "snk-filter-personalized" };
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list" };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  updateFilterValue(newValue) {
+    this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue });
+  }
+  canShowDetailModal() {
+    return this.filterItem.filterType !== FilterType$1.OTHER_FILTERS && this.filterItem.type !== FilterItemType.BINARY_SELECT;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+    }
+  }
+  render() {
+    const { tag: ContentEditor, variations } = this.getContentEditorConfig();
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (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.filterItem.detailModal))), h(ContentEditor, Object.assign({ config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "filterItem": ["observeFilterItem"]
+  }; }
+  static get style() { return snkFilterModalItemCss; }
+}, [0, "snk-filter-modal-item", {
+    "filterItem": [1040]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-modal-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-modal-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterModalItem);
+      }
+      break;
+  } });
+}
+
+export { FilterType$1 as F, SnkFilterModalItem as S, defineCustomElement as d };