@sankhyalabs/sankhyablocks 1.4.0-beta.5 → 1.4.0-beta.7

package/dist/collection/components/snk-filter-bar/snk-filter-bar.css

@@ -46,7 +46,10 @@
 
 .snk-filter-item__editor-header-button{
   cursor: pointer;
-  flex-grow: 0;
+  background-color: transparent;
+  border: none;
+  padding: 3px;
+  outline-color: var(--color--primary);
 }
 
 .snk-filter-bar__divider{
@@ -62,6 +65,8 @@
 .snk-filter-bar__filter-list-item{
   cursor: pointer;
   border-radius: var(--border--radius-small, 6px);
+  border: none;
+  background-color: transparent;
 }
 
 .snk-filter-bar__filter-list-item__label{
@@ -80,8 +85,8 @@
   --ez-icon--color: var(--text--secondary);
 }
 
-.snk-filter-bar__filter-list-item.preselected {
- 
+.snk-filter-bar__filter-list-item:focus-visible {
+  outline: none;
   background-color: var(--background--medium);
 }
 
@@ -114,10 +119,19 @@
 }
 
 .snk-filter-bar__filter-modal-item{
+  --modal-item-border-width: 2px;
   display: flex;
   flex-direction: row;
+  margin-left: var(--modal-item-border-width);
   border-radius: var(--border--radius-medium, 12px);
   background-color: var(--background--medium, #f0f3f7);
+  border: none;
+  width: 100%;
+  
+}
+
+.snk-filter-bar__filter-modal-item:focus-visible{
+  outline: var(--color--primary) solid var(--modal-item-border-width);
 }
 
 .snk-filter-bar__filter-modal-item__check{
@@ -125,7 +139,6 @@
 }
 .snk-filter-bar__filter-modal-item__label{
   font-weight: var(--text-weight--medium);
-  width: 100%;
 }
 
 .snk-filter-bar__filter-modal-content{

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

@@ -6,6 +6,8 @@ import buildFilter from './filter-item/dataunitfilter/data-unit-filter-builder';
 const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
 const DEFAULT_FILTER = "DEFAULT_FILTER";
 const CLEAR_ALL_FILTERS = "CLEAR_ALL_FILTERS";
+const ADD_FILTER = "ADD_FILTER";
+const APPLIED_FILTERS = "APPLIED_FILTERS";
 export class SnkFilterBar {
   constructor() {
     this._updateSequence = [];
@@ -103,13 +105,26 @@ export class SnkFilterBar {
       this.dataUnit.loadData();
     }
   }
+  itemFocused(selectedItem) {
+    this._element.querySelectorAll("snk-filter-item,snk-filter-list").forEach(item => {
+      if (item.id === selectedItem) {
+        if (item.tagName.toLowerCase() === "snk-filter-item" && item.getClientRects()[0].x < 0) {
+          item.scrollIntoView({ behavior: "auto", inline: 'nearest' });
+        }
+      }
+      else {
+        item["hideDetail"]();
+      }
+    });
+  }
   getFilterItems() {
     const pinnedItems = [];
     const unpinnedItems = [];
     this.filterConfig
       .filter(item => item.visible)
       .forEach((item, index) => {
-      const filterItem = (h("snk-filter-item", { id: `filter-${item.id}`, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      const itemId = `filter-${item.id}`;
+      const filterItem = (h("snk-filter-item", { onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
       if (item.fixed || item.hardFixed) {
         pinnedItems.push(filterItem);
       }
@@ -313,13 +328,8 @@ export class SnkFilterBar {
       this.openDefaultFilterModal();
     }
     else if (filterItem) {
+      this._pendingFilters.push(itemName);
       this.updateFilter(Object.assign(Object.assign({}, filterItem), { visible: true }));
-      window.requestAnimationFrame(() => {
-        const filterItemElement = this._element.querySelector("#filter-" + itemName);
-        if (filterItemElement) {
-          filterItemElement.showUp();
-        }
-      });
     }
   }
   appliedFilterHandler(itemName) {
@@ -350,7 +360,7 @@ export class SnkFilterBar {
     if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
       return undefined;
     }
-    return (h(Host, null, h("ez-scroller", { direction: "horizontal" }, this.getFilterItems()), h("snk-filter-list", { items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail) }), h("snk-filter-list", { items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail) }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+    return (h(Host, null, h("ez-scroller", { direction: "horizontal" }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail) }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail) }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/lib/http/data-fetcher/fetchers/dataunit-fetcher.js

@@ -60,6 +60,17 @@ export default class DataUnitFetcher {
               }
             }
           }`);
+    this.templateByQuery.set("fetchDataRecord", gql `query($dataunit: String! $recordID: [String!]) {
+            $queryAlias$: fetchDataUnit(name: $dataunit){
+              record(id: $recordID){
+                id
+                fields {
+                  name
+                  value
+                }    
+              }
+            }
+          }`);
   }
   getDataUnit(entityName, resourceID) {
     const dataUnit = new DataUnit(`dd://${entityName}/${resourceID}`);
@@ -67,6 +78,7 @@ export default class DataUnitFetcher {
     dataUnit.dataLoader = (dataUnit, request) => this.loadData(dataUnit, request);
     dataUnit.saveLoader = (dataUnit, changes) => this.saveData(dataUnit, changes);
     dataUnit.removeLoader = (dataUnit, recordIds) => this.removeRecords(dataUnit, recordIds);
+    dataUnit.recordLoader = (dataUnit, recordIds) => this.loadRecord(dataUnit, recordIds);
     return dataUnit;
   }
   loadMetadata(dataUnit) {
@@ -235,4 +247,27 @@ export default class DataUnitFetcher {
       });
     });
   }
+  loadRecord(dataUnit, recordIds) {
+    return new Promise((resolve, reject) => {
+      DataFetcher.get()
+        .callGraphQL({
+        values: { recordID: recordIds, dataunit: dataUnit.name },
+        query: this.templateByQuery.get("fetchDataRecord"),
+      })
+        .then((response) => {
+        const dataUnitRecords = [];
+        response.record.forEach(responseRecord => {
+          const duRecord = { __record__id__: responseRecord.id };
+          responseRecord.fields.forEach(({ name, value }) => {
+            duRecord[name] = dataUnit.valueFromString(name, value);
+          });
+          dataUnitRecords.push(duRecord);
+        });
+        resolve(dataUnitRecords);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
 }

package/dist/components/snk-application2.js

@@ -6770,6 +6770,17 @@ class DataUnitFetcher {
               }
             }
           }`);
+    this.templateByQuery.set("fetchDataRecord", dist.gql `query($dataunit: String! $recordID: [String!]) {
+            $queryAlias$: fetchDataUnit(name: $dataunit){
+              record(id: $recordID){
+                id
+                fields {
+                  name
+                  value
+                }    
+              }
+            }
+          }`);
   }
   getDataUnit(entityName, resourceID) {
     const dataUnit = new DataUnit(`dd://${entityName}/${resourceID}`);
@@ -6777,6 +6788,7 @@ class DataUnitFetcher {
     dataUnit.dataLoader = (dataUnit, request) => this.loadData(dataUnit, request);
     dataUnit.saveLoader = (dataUnit, changes) => this.saveData(dataUnit, changes);
     dataUnit.removeLoader = (dataUnit, recordIds) => this.removeRecords(dataUnit, recordIds);
+    dataUnit.recordLoader = (dataUnit, recordIds) => this.loadRecord(dataUnit, recordIds);
     return dataUnit;
   }
   loadMetadata(dataUnit) {
@@ -6945,6 +6957,29 @@ class DataUnitFetcher {
       });
     });
   }
+  loadRecord(dataUnit, recordIds) {
+    return new Promise((resolve, reject) => {
+      DataFetcher.get()
+        .callGraphQL({
+        values: { recordID: recordIds, dataunit: dataUnit.name },
+        query: this.templateByQuery.get("fetchDataRecord"),
+      })
+        .then((response) => {
+        const dataUnitRecords = [];
+        response.record.forEach(responseRecord => {
+          const duRecord = { __record__id__: responseRecord.id };
+          responseRecord.fields.forEach(({ name, value }) => {
+            duRecord[name] = dataUnit.valueFromString(name, value);
+          });
+          dataUnitRecords.push(duRecord);
+        });
+        resolve(dataUnitRecords);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
 }
 
 var _a;
@@ -7277,7 +7312,7 @@ class SnkErrorHandler {
     return '<br><a href="#" onclick="' + onclick + '">Código: ' + exception.errorCode + '</a>';
   }
   processException(exception) {
-    if (exception.errorCode != "") {
+    if (exception.errorCode) {
       exception.message += this.buildErrorCodeHTML(exception);
     }
     if (exception instanceof WaitingChangeException) {
@@ -7953,7 +7988,7 @@ const SnkApplication = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     });
   }
   render() {
-    return (h("div", null, h("ez-loading-bar", { ref: (ref) => this._requestListener.loadingBar = ref }), h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() }), h("ez-modal", { opened: false, ref: (ref) => this._rightModal = ref, "modal-size": "col col--sd-3", closeOutsideClick: true })));
+    return (h("div", null, h("ez-loading-bar", { ref: (ref) => this._requestListener.loadingBar = ref }), h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() }), h("ez-modal", { opened: false, ref: (ref) => this._rightModal = ref, "modal-size": "col col--sd-3", closeOutsideClick: true, closeEsc: true })));
   }
   static get style() { return snkApplicationCss; }
 }, [2, "snk-application", {

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

@@ -105,11 +105,13 @@ function buildPersonalized(item) {
   };
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--more-visible, 1);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;flex-grow:0}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px)}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.preselected.sc-snk-filter-bar{background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{display:flex;flex-direction:row;border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium);width:100%}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:100%;height:100%}";
+const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--more-visible, 1);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:100%;height:100%}";
 
 const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
 const DEFAULT_FILTER = "DEFAULT_FILTER";
 const CLEAR_ALL_FILTERS = "CLEAR_ALL_FILTERS";
+const ADD_FILTER = "ADD_FILTER";
+const APPLIED_FILTERS = "APPLIED_FILTERS";
 const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -209,13 +211,26 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.dataUnit.loadData();
     }
   }
+  itemFocused(selectedItem) {
+    this._element.querySelectorAll("snk-filter-item,snk-filter-list").forEach(item => {
+      if (item.id === selectedItem) {
+        if (item.tagName.toLowerCase() === "snk-filter-item" && item.getClientRects()[0].x < 0) {
+          item.scrollIntoView({ behavior: "auto", inline: 'nearest' });
+        }
+      }
+      else {
+        item["hideDetail"]();
+      }
+    });
+  }
   getFilterItems() {
     const pinnedItems = [];
     const unpinnedItems = [];
     this.filterConfig
       .filter(item => item.visible)
       .forEach((item, index) => {
-      const filterItem = (h("snk-filter-item", { id: `filter-${item.id}`, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      const itemId = `filter-${item.id}`;
+      const filterItem = (h("snk-filter-item", { onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
       if (item.fixed || item.hardFixed) {
         pinnedItems.push(filterItem);
       }
@@ -419,13 +434,8 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.openDefaultFilterModal();
     }
     else if (filterItem) {
+      this._pendingFilters.push(itemName);
       this.updateFilter(Object.assign(Object.assign({}, filterItem), { visible: true }));
-      window.requestAnimationFrame(() => {
-        const filterItemElement = this._element.querySelector("#filter-" + itemName);
-        if (filterItemElement) {
-          filterItemElement.showUp();
-        }
-      });
     }
   }
   appliedFilterHandler(itemName) {
@@ -456,7 +466,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
       return undefined;
     }
-    return (h(Host, null, h("ez-scroller", { direction: "horizontal" }, this.getFilterItems()), h("snk-filter-list", { items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail) }), h("snk-filter-list", { items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail) }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+    return (h(Host, null, h("ez-scroller", { direction: "horizontal" }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail) }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail) }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
   }
   get _element() { return this; }
   static get watchers() { return {

package/dist/components/snk-filter-binary-select.js

@@ -32,6 +32,9 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       this.value = undefined;
     }
   }
+  async show() {
+    this._checkOne.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
       return undefined;
@@ -41,7 +44,8 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
-    "config": [16]
+    "config": [16],
+    "show": [64]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -8,6 +8,9 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__registerHost();
     this.filterChange = createEvent(this, "filterChange", 7);
   }
+  async show() {
+    this._editor["show"]();
+  }
   changeConfig(newConfig) {
     this.filterChange.emit(newConfig);
   }
@@ -36,10 +39,13 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       return undefined;
     }
     return ([
-      h("ez-icon", { title: this.getMessage("snkFilterBar.removeFilter"), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", iconName: "delete", onClick: () => this.removeItem() }),
-      h("ez-icon", { title: this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), class: "ez-margin-left--small sc-snk-filter-bar snk-filter-item__editor-header-button", iconName: this.config.fixed ? "un-pin" : "push-pin", onClick: () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })) })
+      this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()),
+      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" }, h("ez-icon", { title: title, iconName: iconName })));
+  }
   apply() {
     var _a;
     let value = this._editor["value"];
@@ -83,13 +89,19 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   clear() {
     this.changeConfig(Object.assign(Object.assign({}, this.config), { value: undefined }));
   }
+  onKeyDonwListener(event) {
+    if (event.key === "Enter") {
+      this._applyButton.setFocus().then(() => this.apply());
+    }
+  }
   render() {
     const ContentEditor = 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(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
+    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(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt) }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, 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" }))));
   }
 }, [0, "snk-filter-detail", {
     "config": [1040],
-    "getMessage": [16]
+    "getMessage": [16],
+    "show": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -13,7 +13,6 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return true;
       }
       this.detailIsVisible = false;
-      this.executeCloseCallback();
       return false;
     };
   }
@@ -21,29 +20,36 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return new Promise(resolve => {
       this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
       if (open) {
+        this._closeCallback = resolve;
         window.requestAnimationFrame(() => {
-          this._closeCallback = resolve;
-          this.showDetail();
+          this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, {
+            autoClose: true,
+            innerClickTest: this.innerClickCheck,
+            backClickListener: () => this.onDetailCloseCallback(),
+            left: this.getScrollOffset(),
+            useOverlay: true
+          });
+          this._popover.show();
+          this.detailIsVisible = true;
         });
       }
     });
   }
-  showDetail() {
-    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, { autoClose: true, innerClickTest: this.innerClickCheck, left: this.getScrollOffset(), useOverlay: true });
-    this.detailIsVisible = true;
-  }
   getScrollOffset() {
-    return `${this._filterItemElement.getBoundingClientRect().left + 12}px`;
+    const padding = getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");
+    const rect = this._filterItemElement.getBoundingClientRect();
+    return `calc(${rect.left}px + ${padding})`;
   }
-  hideDetail() {
-    if (this._floatingID != undefined) {
-      FloatingManager.close(this._floatingID);
+  async hideDetail() {
+    if (this.detailIsVisible) {
+      if (this._floatingID != undefined) {
+        FloatingManager.close(this._floatingID);
+      }
     }
+  }
+  onDetailCloseCallback() {
     this._floatingID = undefined;
     this.detailIsVisible = false;
-    this.executeCloseCallback();
-  }
-  executeCloseCallback() {
     if (this._closeCallback) {
       this._closeCallback();
       this._closeCallback = undefined;
@@ -62,7 +68,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           this.hideDetail();
         }
         else {
-          this.showDetail();
+          this.showUp(true);
         }
       }
       evt.preventDefault();
@@ -163,7 +169,8 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "config": [1040],
     "getMessage": [16],
     "detailIsVisible": [32],
-    "showUp": [64]
+    "showUp": [64],
+    "hideDetail": [64]
   }, [[2, "click", "clickListener"], [2, "mousedown", "mouseDownListener"], [0, "filterChange", "filterChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -8,6 +8,7 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -16,25 +17,34 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return false;
     };
   }
-  showList() {
-    this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, { autoClose: true, innerClickTest: this.innerClickCheck, useOverlay: true });
+  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();
   }
-  hideList() {
+  async hideDetail() {
     if (this._floatingID != undefined) {
       FloatingManager.close(this._floatingID);
     }
+  }
+  onListCloseCallback() {
     this._floatingID = undefined;
     this._detailIsVisible = false;
   }
   buttonClick() {
     if (this._detailIsVisible) {
-      this.hideList();
+      this.hideDetail();
     }
     else {
-      this.showList();
+      this.showDetail();
     }
   }
   componentDidRender() {
@@ -45,14 +55,15 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   buildItemElement(item) {
-    return (h("div", { 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) }, 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)));
+    const itemId = ++this._selectableItemsCount;
+    return (h("button", { 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) }, 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.hideList();
+      this.hideDetail();
       this.snkItemSelected.emit(itemName);
     }
   }
@@ -66,13 +77,47 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+    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, 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", {
@@ -84,8 +129,9 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "findFilterText": [1, "find-filter-text"],
     "buttonClass": [1, "button-class"],
     "_filterArgument": [32],
-    "_showAll": [32]
-  }]);
+    "_showAll": [32],
+    "hideDetail": [64]
+  }, [[2, "keydown", "keyDownHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;