@sankhyalabs/sankhyablocks 1.4.0-beta.4 → 1.4.0-beta.6

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

@@ -1,10 +1,13 @@
 import { h } from '@stencil/core';
-import { ModalButtonStatus } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
+import { ModalAction, ModalButtonStatus } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
 import { ArrayUtils } from '@sankhyalabs/core';
 export class SnkFilterModal {
-  updateValue(id, value) {
+  updateValue(id, value = undefined) {
     this.items = this.items.map(item => {
       if (item.id === id) {
+        if (value == undefined) {
+          value = !item.active;
+        }
         return Object.assign(Object.assign({}, item), { active: value });
       }
       return item;
@@ -17,12 +20,34 @@ export class SnkFilterModal {
     }
     return this.getMessage(activeFilters > 1 ? "snkFilterBar.activeFilters" : "snkFilterBar.activeFilter", { ACTIVE_FILTERS: activeFilters });
   }
-  getFilteredItems() {
-    return this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : [];
+  buildItems(list) {
+    return list.map(item => {
+      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: "-1", class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: "switch" }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
+    });
+  }
+  itemKeyBoardSelect(event, item) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.updateValue(item.id);
+    }
+  }
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    if (modalAction === ModalAction.LOAD) {
+      if (this._filterInput) {
+        this._filterInput.setFocus();
+      }
+    }
+    else {
+      this.processModalAction(modalAction);
+    }
   }
   render() {
     const allowCancel = this.items.filter(item => item.active).length > 0;
-    return (h("ez-modal-container", { modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.processModalAction(evt.detail), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ? h("ez-filter-input", { label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail }) : undefined), this.getFilteredItems().length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.getFilteredItems().map(item => h("div", { class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: "switch" }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)))), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
+    const items = (this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
+    return (h("ez-modal-container", { modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
+      h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
+      :
+        undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
   }
   static get is() { return "snk-filter-modal"; }
   static get properties() {

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/index.js

@@ -1 +1,2 @@
 export { DataFetcher } from './http/data-fetcher/DataFetcher';
+export { CrudUtils } from './utils/CrudUtils';

package/dist/collection/lib/message/SnkMessageBuilder.js

@@ -2,13 +2,15 @@ import snkDataUnitMessages from "./resources/snk-data-unit.msg.js";
 import snkFilterBarMessages from "./resources/snk-filter-bar.msg.js";
 import snkFormMessages from "./resources/snk-form.msg.js";
 import snkTaskbarMessages from "./resources/snk-taskbar.msg.js";
+import crudUtilsMessages from "./resources/crud-utils.msg.js";
 export class SnkMessageBuilder {
   constructor() {
     this._defaults = {
       snkDataUnit: snkDataUnitMessages,
       snkForm: snkFormMessages,
       snkTaskbar: snkTaskbarMessages,
-      snkFilterBar: snkFilterBarMessages
+      snkFilterBar: snkFilterBarMessages,
+      crudUtils: crudUtilsMessages
     };
     this._currentOperation = OperationMap.CLEAN;
     this.loadAppMessages().then((msgs) => {

package/dist/collection/lib/message/resources/crud-utils.msg.js

@@ -0,0 +1,4 @@
+const crudUtilsMessages = {
+  errorArray: "CrudUtils.find deve receber um array de fields, ou uma lista separada por virgula.",
+};
+export default crudUtilsMessages;

package/dist/collection/lib/utils/CrudUtils.js

@@ -0,0 +1,73 @@
+import { DataFetcher } from '../';
+import { ApplicationContext } from '@sankhyalabs/core';
+export class CrudUtils {
+  static find(entityName, fields, criteria, onlyFirst = true, criteriaExpression, orderBy) {
+    const SERVICE_CRUD_FIND = "mge@crud.find";
+    let parsedFields = [];
+    let parsedCriteria = [];
+    let literalCriteria = {};
+    let application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (fields) {
+      if (!Array.isArray(fields)) {
+        throw new Error(application.messagesBuilder.getMessage("crudUtils.errorArray", null));
+      }
+      fields.forEach((fieldName) => {
+        parsedFields.push({
+          name: fieldName
+        });
+      });
+    }
+    if (criteria) {
+      for (const key in criteria) {
+        if (criteria.hasOwnProperty(key)) {
+          parsedCriteria.push({ nome: key, valor: criteria[key] });
+        }
+      }
+    }
+    ;
+    if (criteriaExpression) {
+      literalCriteria = {
+        expression: {
+          $: criteriaExpression
+        }
+      };
+    }
+    let request = {
+      requestBody: {
+        entity: {
+          name: entityName,
+          criterio: parsedCriteria,
+          fields: {
+            field: parsedFields
+          },
+          literalCriteria: literalCriteria,
+          orderby: orderBy
+        }
+      }
+    };
+    return new Promise((resolve) => {
+      DataFetcher.get().callServiceBroker(SERVICE_CRUD_FIND, JSON.stringify(request)).then((result) => {
+        var _a;
+        let entities = (_a = result.entidades) === null || _a === void 0 ? void 0 : _a.entidade;
+        if (entities != undefined) {
+          let crudFindResult = {
+            fields: new Map()
+          };
+          for (let key in entities) {
+            let fieldValue = entities[key];
+            if (fieldValue.hasOwnProperty('$')) {
+              crudFindResult.fields.set(key, fieldValue.$);
+            }
+            if (onlyFirst) {
+              break;
+            }
+          }
+          resolve(crudFindResult);
+        }
+        else {
+          resolve(null);
+        }
+      });
+    });
+  }
+}

package/dist/components/SnkMessageBuilder.js

@@ -78,13 +78,18 @@ const snkTaskbarMessages = {
   forbidden: "Permissão não liberada"
 };
 
+const crudUtilsMessages = {
+  errorArray: "CrudUtils.find deve receber um array de fields, ou uma lista separada por virgula.",
+};
+
 class SnkMessageBuilder {
   constructor() {
     this._defaults = {
       snkDataUnit: snkDataUnitMessages,
       snkForm: snkFormMessages,
       snkTaskbar: snkTaskbarMessages,
-      snkFilterBar: snkFilterBarMessages
+      snkFilterBar: snkFilterBarMessages,
+      crudUtils: crudUtilsMessages
     };
     this._currentOperation = OperationMap.CLEAN;
     this.loadAppMessages().then((msgs) => {

package/dist/components/snk-application2.js

@@ -7541,10 +7541,14 @@ const SnkApplication = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   /**
    * Mostra o conteúdo passado em um Popup
    */
-  async showPopUp(content) {
+  async showPopUp(content, size = "full") {
     this.clearContent(this._popUp);
+    if (content.tagName === 'EZ-MODAL-CONTAINER') {
+      this._popUp.useHeader = false;
+    }
     this._popUp.appendChild(content);
     this._popUp.opened = true;
+    this._popUp.heightMode = size;
   }
   async showModal(content) {
     this.clearContent(this._rightModal);
@@ -7561,6 +7565,8 @@ const SnkApplication = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async closePopUp() {
     this.clearContent(this._popUp);
     this._popUp.opened = false;
+    this._popUp.useHeader = true;
+    this._popUp.heightMode = "full";
   }
   /**
    * Verifica se a licença do cliente tem determinado opcional (produto)
@@ -7947,7 +7953,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") {