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

package/dist/esm/snk-filter-bar_5.entry.js

@@ -102,11 +102,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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -205,13 +207,26 @@ const SnkFilterBar = class {
       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);
       }
@@ -415,13 +430,8 @@ const SnkFilterBar = class {
       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) {
@@ -452,7 +462,7 @@ const SnkFilterBar = class {
     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 getElement(this); }
   static get watchers() { return {
@@ -470,7 +480,6 @@ const SnkFilterItem = class {
         return true;
       }
       this.detailIsVisible = false;
-      this.executeCloseCallback();
       return false;
     };
   }
@@ -478,29 +487,36 @@ const SnkFilterItem = class {
     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;
@@ -519,7 +535,7 @@ const SnkFilterItem = class {
           this.hideDetail();
         }
         else {
-          this.showDetail();
+          this.showUp(true);
         }
       }
       evt.preventDefault();
@@ -624,6 +640,7 @@ const SnkFilterList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.snkItemSelected = createEvent(this, "snkItemSelected", 7);
+    this._preselection = -1;
     this.innerClickCheck = (_floatingContainer, node) => {
       if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
         return true;
@@ -632,25 +649,34 @@ const SnkFilterList = class {
       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() {
@@ -661,14 +687,15 @@ const SnkFilterList = class {
     }
   }
   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);
     }
   }
@@ -682,13 +709,47 @@ const SnkFilterList = class {
       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 getElement(this); }
 };
@@ -697,9 +758,12 @@ const SnkFilterModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
-  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;
@@ -712,12 +776,34 @@ const SnkFilterModal = class {
     }
     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))));
   }
 };
 

package/dist/esm/snk-filter-binary-select.entry.js

@@ -31,6 +31,9 @@ const SnkFilterBinarySelect = class {
       this.value = undefined;
     }
   }
+  async show() {
+    this._checkOne.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
       return undefined;

package/dist/esm/snk-filter-detail.entry.js

@@ -7,6 +7,9 @@ const SnkFilterDetail = class {
     registerInstance(this, hostRef);
     this.filterChange = createEvent(this, "filterChange", 7);
   }
+  async show() {
+    this._editor["show"]();
+  }
   changeConfig(newConfig) {
     this.filterChange.emit(newConfig);
   }
@@ -35,10 +38,13 @@ const SnkFilterDetail = class {
       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"];
@@ -82,9 +88,14 @@ const SnkFilterDetail = class {
   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" }))));
   }
 };
 

package/dist/esm/snk-filter-multi-select.entry.js

@@ -8,11 +8,14 @@ const SnkFilterMultiSelect = class {
   ezChangeListener(evt) {
     this.value = evt.detail.value;
   }
+  async show() {
+    this._comboElement.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.MULTI_SELECT) {
       return undefined;
     }
-    return (h("ez-combo-box", { label: this.config.label, value: this.config.value, options: this.config.props.options }));
+    return (h("ez-combo-box", { ref: ref => this._comboElement = ref, label: this.config.label, value: this.config.value, options: this.config.props.options }));
   }
 };
 

package/dist/esm/snk-filter-number.entry.js

@@ -8,12 +8,15 @@ const SnkFilterPeriod = class {
   ezChangeListener(evt) {
     this.value = evt.detail;
   }
+  async show() {
+    this._numberElement.setFocus();
+  }
   render() {
     var _a;
     if (!this.config || this.config.type !== FilterItemType.NUMBER) {
       return undefined;
     }
-    return (h("ez-number-input", { label: this.config.label, value: this.config.value, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision }));
+    return (h("ez-number-input", { ref: ref => this._numberElement = ref, label: this.config.label, value: this.config.value, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision }));
   }
 };
 

package/dist/esm/snk-filter-period.entry.js

@@ -22,6 +22,9 @@ const SnkFilterPeriod = class {
     }
     return null;
   }
+  async show() {
+    this._startDate.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;

package/dist/esm/snk-filter-personalized.entry.js

@@ -45,27 +45,34 @@ const SnkFilterPersonalized = class {
     const params = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.personalizedFilter) === null || _c === void 0 ? void 0 : _c.parameters;
     return params.map((param, index) => {
       var _a;
+      const elemId = 'param_' + index;
       switch (param.type) {
         case UserInterface.SEARCH:
-          return h("ez-search", { suppressEmptyOption: true, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail), label: param.label, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, param) });
+          return h("ez-search", { id: elemId, suppressEmptyOption: true, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail), label: param.label, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, param) });
         case UserInterface.SWITCH:
         case UserInterface.CHECKBOX:
           const mode = UserInterface.SWITCH === param.type ? "switch" : "regular";
-          return h("ez-check", { class: "ez-padding-bottom--medium", mode: mode, value: this.getValue(param, index), label: param.label, onEzChange: evt => this.setValue(index, evt.detail) });
+          return h("ez-check", { id: elemId, class: "ez-padding-bottom--medium", mode: mode, value: this.getValue(param, index), label: param.label, onEzChange: evt => this.setValue(index, evt.detail) });
         case UserInterface.DECIMALNUMBER:
         case UserInterface.INTEGERNUMBER:
-          return h("ez-number-input", { label: param.label, value: this.getValue(param, index), precision: (_a = param.props) === null || _a === void 0 ? void 0 : _a.precision, onEzChange: evt => this.setValue(index, evt.detail) });
+          return h("ez-number-input", { id: elemId, label: param.label, value: this.getValue(param, index), precision: (_a = param.props) === null || _a === void 0 ? void 0 : _a.precision, onEzChange: evt => this.setValue(index, evt.detail) });
         case UserInterface.OPTIONSELECTOR:
-          return h("ez-combo-box", { label: param.label, value: this.getValue(param, index), options: param.options, onEzChange: evt => { var _a; return this.setValue(index, (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); } });
+          return h("ez-combo-box", { id: elemId, label: param.label, value: this.getValue(param, index), options: param.options, onEzChange: evt => { var _a; return this.setValue(index, (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); } });
         case UserInterface.DATE:
-          return h("ez-date-input", { label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
+          return h("ez-date-input", { id: elemId, label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
         case UserInterface.DATETIME:
-          return h("ez-date-time-input", { label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
+          return h("ez-date-time-input", { id: elemId, label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
         default:
-          return h("ez-text-input", { label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
+          return h("ez-text-input", { id: elemId, label: param.label, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail) });
       }
     });
   }
+  async show() {
+    const elem = document.querySelector("#param_0");
+    if (elem) {
+      elem["setFocus"]();
+    }
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERSONALIZED) {
       return undefined;

package/dist/esm/snk-filter-search.entry.js

@@ -20,6 +20,9 @@ const SnkFilterSearch = class {
       });
     });
   }
+  async show() {
+    this._searchInput.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.SEARCH) {
       return undefined;

package/dist/esm/snk-filter-text.entry.js

@@ -11,7 +11,7 @@ const SnkFilterText = class {
     if (!this.config) {
       return undefined;
     }
-    return (h("ez-text-input", { label: this.config.label, value: this.config.value }));
+    return (h("ez-text-input", { ref: ref => this._textInputElement = ref, label: this.config.label, value: this.config.value }));
   }
 };
 

package/dist/sankhyablocks/{p-01823784.entry.js → p-0ea25487.entry.js}

@@ -1 +1 @@
-import{r as s,h as r}from"./p-fac2b6a9.js";import{ApplicationContext as t}from"@sankhyalabs/core";import{F as e}from"./p-9dd2b8cb.js";const i=class{constructor(r){s(this,r)}ezChangeListener(s){this.value=this._searchInput.value}doSearch(s,r){const e=t.getContextValue("__SNK__APPLICATION__");return new Promise(((t,i)=>{e.executePreparedSearch(s,r,this.config.props.searchContext).then((s=>{t(s)})).catch((s=>{i(s)}))}))}render(){if(this.config&&this.config.type===e.SEARCH)return r("ez-search",{suppressEmptyOption:!0,value:this.config.value,label:this.config.label,ref:s=>this._searchInput=s,optionLoader:({mode:s,argument:r})=>this.doSearch(s,r)})}};export{i as snk_filter_search}
+import{r as s,h as r}from"./p-fac2b6a9.js";import{ApplicationContext as t}from"@sankhyalabs/core";import{F as e}from"./p-9dd2b8cb.js";const i=class{constructor(r){s(this,r)}ezChangeListener(s){this.value=this._searchInput.value}doSearch(s,r){const e=t.getContextValue("__SNK__APPLICATION__");return new Promise(((t,i)=>{e.executePreparedSearch(s,r,this.config.props.searchContext).then((s=>{t(s)})).catch((s=>{i(s)}))}))}async show(){this._searchInput.setFocus()}render(){if(this.config&&this.config.type===e.SEARCH)return r("ez-search",{suppressEmptyOption:!0,value:this.config.value,label:this.config.label,ref:s=>this._searchInput=s,optionLoader:({mode:s,argument:r})=>this.doSearch(s,r)})}};export{i as snk_filter_search}

package/dist/sankhyablocks/p-21e940aa.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e,H as i,g as s,c as r}from"./p-fac2b6a9.js";import{DataType as l,ObjectUtils as n,StringUtils as a,ErrorException as o,ApplicationContext as h,FloatingManager as c,ArrayUtils as d}from"@sankhyalabs/core";import{F as m}from"./p-9dd2b8cb.js";import{ModalAction as f,ModalButtonStatus as u}from"@sankhyalabs/ezui/dist/collection/components/ez-modal-container";import{toString as b}from"@sankhyalabs/core/dist/dataunit/metadata/DataType";import{T as k,V as p,A as _,b as v,a as g}from"./p-86f15ffe.js";const F=class{constructor(e){t(this,e),this._updateSequence=[],this._loadingPending=!1,this._configUpdated=!1,this._pendingFilters=[],this._calculateSortIndex=t=>{let e=t.hardFixed?1e6:0;return t.hardFixed||(e+=t.fixed?1e5:0,e+=null==t.value?0:1e4,e+=this._updateSequence.lastIndexOf(t.id)+1),e},this._filtersComparator=(t,e)=>this._calculateSortIndex(e)-this._calculateSortIndex(t)}observeFilterConfig(t,e){if(null!=e&&null==t)this._loadingPending=!0,this._configUpdated=!0;else{const i=new Map(e?e.map((t=>[t.id,t])):void 0);t.forEach((t=>{const e=i.get(t.id);null!=e?(this._configUpdated=this._configUpdated||n.objectToString(e)!=n.objectToString(t),this._loadingPending=this._loadingPending||n.objectToString(e.value)!==n.objectToString(t.value)):(this._configUpdated=!0,this._loadingPending=this._loadingPending||null!=t.value)}))}this.processAfterUpdateConfig()}processPendingFilter(){this._pendingFilters.length>0&&null==this._currentPendingFilter&&(this._currentPendingFilter=this._element.querySelector("#filter-"+this._pendingFilters.pop()),this._currentPendingFilter&&this._currentPendingFilter.showUp(!0).then((()=>{this._currentPendingFilter=void 0,this.processPendingFilter()}))),null==this._currentPendingFilter&&this.processAfterUpdateConfig()}processAfterUpdateConfig(){this._pendingFilters.length>0||(this._loadingPending&&(this._loadingPending=!1,this.dataUnit.loadData()),this._configUpdated&&(this._configUpdated=!1,this._application.saveFilterBarConfig(this.filterConfig,this.configName)))}getMessage(t,e){return this._application.messagesBuilder.getMessage(t,e)}getFilter(t){var e;const i=[];return null===(e=this.filterConfig)||void 0===e||e.filter((t=>this.isActiveFilter(t))).forEach((t=>{const e=(t=>{switch(t.type){case m.DEFAULT_FILTER:return function(t){return{name:t.id,expression:t.props.expression,params:[]}}(t);case m.BINARY_SELECT:return function(t){const{id:e,value:i,props:s}=t;return{name:e,expression:s.options.find((t=>t.name===i)).expression,params:[]}}(t);case m.MULTI_SELECT:return function(t){const{id:e,value:i,props:s}=t;return{name:e,expression:s.expression,params:[{name:e,dataType:l.TEXT,value:i}]}}(t);case m.PERIOD:return function(t){const{id:e,value:i,props:s}=t;let{end:r,start:n}=i;"string"==typeof r&&(r=new Date(r)),"string"==typeof n&&(n=new Date(n));const a=[];let o;return r&&n?(o=s.expression.fullfill,a.push({name:`${e}.START`,dataType:l.DATE,value:b(l.DATE,n)},{name:`${e}.END`,dataType:l.DATE,value:b(l.DATE,r)})):n?(o=s.expression.onlystart,a.push({name:e,dataType:l.DATE,value:b(l.DATE,n)})):(o=s.expression.onlyend,a.push({name:e,dataType:l.DATE,value:b(l.DATE,r)})),{name:e,expression:o,params:a}}(t);case m.SEARCH:return function(t){const{id:e,value:i,props:s}=t;return{name:e,expression:s.expression,params:[{name:e,dataType:l.TEXT,value:b(l.TEXT,i.value)}]}}(t);case m.TEXT:return function(t){const{id:e,value:i,props:s}=t;return{name:e,expression:s.expression,params:[{name:e,dataType:l.TEXT,value:b(l.TEXT,i)}]}}(t);case m.NUMBER:return function(t){const{id:e,value:i,props:s}=t;return{name:e,expression:s.expression,params:[{name:e,dataType:l.NUMBER,value:b(l.NUMBER,i)}]}}(t);case m.PERSONALIZED:return function(t){var e;const{id:i,value:s,props:r}=t;return{name:i,expression:r.expression,params:((null===(e=r.personalizedFilter)||void 0===e?void 0:e.parameters)||[]).map(((t,e)=>{const i=Array.from(s),r=t.dataType;let n=e>=0&&e<i.length?i[e]:null;return null!=n&&"object"==typeof n&&"value"in n&&(n=n.value),null==n&&r===l.BOOLEAN&&(n=!1),{name:t.name,dataType:r,value:"string"==typeof n?n:b(r,n)}}))}}(t);default:return}})(t);e&&i.push(e)})),i}isActiveFilter(t){return t.visible&&null!=t.value||t.type===m.DEFAULT_FILTER}registryFilterProvider(){this.dataUnit.addFilterProvider(this),this.filterConfig&&this.dataUnit.loadData()}itemFocused(t){this._element.querySelectorAll("snk-filter-item,snk-filter-list").forEach((e=>{e.id===t?"snk-filter-item"===e.tagName.toLowerCase()&&e.getClientRects()[0].x<0&&e.scrollIntoView({behavior:"auto",inline:"nearest"}):e.hideDetail()}))}getFilterItems(){const t=[],i=[];this.filterConfig.filter((t=>t.visible)).forEach(((s,r)=>{const l=`filter-${s.id}`,n=e("snk-filter-item",{onFocusin:()=>this.itemFocused(l),id:l,config:s,class:r>0?"ez-padding-left--medium":"",getMessage:(t,e)=>this.getMessage(t,e),key:s.id});return s.fixed||s.hardFixed?t.push(n):i.push(n),n}));const s=[];return s.push(...t),t.length>0&&i.length>0&&s.push(e("hr",{class:"ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-filter-bar__divider"})),s.push(...i),s}calculateUpdateSequence(t){t&&(this._updateSequence=this._updateSequence.filter((e=>t.id!==e)),this._updateSequence.push(t.id))}normalizeItem(t){const e=Object.assign({},t);return["props","value","hardFixed","fixed"].forEach((t=>{null==e[t]&&delete e[t]})),""===t.value&&delete t.value,e}updateFilter(t){this.filterConfig=this.filterConfig.map((e=>(t=this.normalizeItem(t),e.id===t.id?(n.objectToString(e)!=n.objectToString(t)&&this.calculateUpdateSequence(t),t):e))).sort(((t,e)=>this._filtersComparator(t,e)))}getAddListItems(){const t=this.filterConfig.filter((t=>!t.visible&&this.isListable(t))),e=[{name:"PERSONALIZED_FILTER",label:this.getMessage("snkFilterBar.customFilter"),iconName:"tune",kind:"FOOTER"}];return this.allowDefault&&e.push({name:"DEFAULT_FILTER",label:this.getMessage("snkFilterBar.defaultFilter"),iconName:"configuration",kind:"FOOTER"}),t.map((t=>({name:t.id,label:t.label,kind:"FILTER",iconName:null}))).concat(e)}getActiveClass(){return this.filterConfig.filter((t=>null!=t.value)).length>0?"sc-snk-filter-bar snk-filter-bar__filter-list-items-button--active":""}isListable(t,e=!1){return t.type!==m.DEFAULT_FILTER&&(e||t.type!==m.PERSONALIZED)}getAppliedListItems(){return this.filterConfig.filter((t=>this.isActiveFilter(t)&&this.isListable(t,!0))).map((t=>({name:t.id,label:t.label,kind:"FILTER",iconName:null}))).concat([{name:"CLEAR_ALL_FILTERS",label:this.getMessage("snkFilterBar.clearAllFilters"),iconName:"cleaning",kind:"FOOTER"}])}addPersonalizedFilters(t){const e={};t.forEach((t=>{t.active&&(e[t.id]=!0)})),this.filterConfig=this.filterConfig.map((t=>{var i,s;if(t.type===m.PERSONALIZED){const r=e[t.id];return!t.visible&&r&&(this.calculateUpdateSequence(t),null!=(null===(s=null===(i=t.props)||void 0===i?void 0:i.personalizedFilter)||void 0===s?void 0:s.parameters)&&this._pendingFilters.push(t.id)),this.normalizeItem(Object.assign(Object.assign({},t),r?{visible:r}:{visible:r,value:void 0,fixed:void 0}))}return t})).sort(((t,e)=>this._filtersComparator(t,e)))}openDefaultFilterModal(){const t=document.createElement("snk-filter-modal"),e=this.filterConfig.filter((t=>t.type===m.DEFAULT_FILTER));t.getMessage=(t,e)=>this.getMessage(t,e),t.modalTitle=this.getMessage("snkFilterBar.modalDefaultFilterTitle"),t.infoText=this.getMessage(0==e.length?"snkFilterBar.modalInfoTextCreateDefault":"snkFilterBar.modalInfoTextEditDefault"),t.items=e.map((t=>({id:t.id,active:!0,enabled:!1,label:t.label}))),t.processModalAction=()=>{this._application.closeModal()},this._application.showModal(t)}openPersonalizedModal(){const t=document.createElement("snk-filter-modal"),e=this.filterConfig.filter((t=>t.type===m.PERSONALIZED)).sort(((t,e)=>a.compare(t.label,e.label)));t.getMessage=(t,e)=>this.getMessage(t,e),t.modalTitle=this.getMessage("snkFilterBar.modalPersonalizedFilterTitle"),t.modalSubTitle=this.getMessage("snkFilterBar.modalPersonalizedFilterSubTitle"),t.okButtonLabel=this.getMessage("snkFilterBar.modalOkButtonLabel"),t.cancelButtonLabel=this.getMessage("snkFilterBar.modalCancelButtonLabel"),t.infoText=this.getMessage("snkFilterBar.modalInfoTextCreateEditPersonalized"),t.useSearch=!0,t.items=e.map((t=>({id:t.id,active:t.visible,enabled:!0,label:t.label}))),t.processModalAction=e=>{e===f.CANCEL?t.items=t.items.map((t=>Object.assign(Object.assign({},t),{active:!1}))):(e===f.OK&&this.addPersonalizedFilters(t.items),this._application.closeModal())},this._application.showModal(t)}clearFilters(){let t=!1;return this.filterConfig=this.filterConfig.map((e=>(null!=e.value&&(t=!0),Object.assign(Object.assign({},e),{value:void 0})))).sort(((t,e)=>this._filtersComparator(t,e))),t}loadPermitions(){this._application.isUserSup().then((t=>this.allowDefault=t))}loadConfigFromApplication(){this._application.getFilterBarConfig(this.configName).then((t=>{this.filterConfig=t.map((t=>this.normalizeItem(t))),this.dataUnit&&this.dataUnit.loadData()})).catch((t=>{throw new o(this.getMessage("snkFilterBar.failToLoadConfig"),t)}))}attachDataUnit(){if(null==this.dataUnit){let t=this._element.parentElement;for(;t;)if("SNK-DATA-UNIT"===t.tagName.toUpperCase()){const e=t;this.dataUnit=e.dataUnit,this.dataUnit?this.registryFilterProvider():e.addEventListener("dataUnitReady",(t=>{this.dataUnit=t.detail,this.registryFilterProvider()}));break}t=t.parentElement}else this.registryFilterProvider()}filterChangeListener(t){this.updateFilter(t.detail)}addFilterHandler(t){const e=this.filterConfig.find((e=>e.id===t));"PERSONALIZED_FILTER"===t?this.openPersonalizedModal():"DEFAULT_FILTER"===t?this.openDefaultFilterModal():e&&(this._pendingFilters.push(t),this.updateFilter(Object.assign(Object.assign({},e),{visible:!0})))}appliedFilterHandler(t){if("CLEAR_ALL_FILTERS"===t)this.clearFilters()&&this._application.info(this.getMessage("snkFilterBar.successfullyCleaned"),{iconName:"check"});else{const e=this._element.querySelector("#filter-"+t);e&&e.showUp(!0)}}componentWillLoad(){this._application=h.getContextValue("__SNK__APPLICATION__"),this._application&&(this.loadPermitions(),this.loadConfigFromApplication()),this.attachDataUnit()}componentDidRender(){this.processPendingFilter()}render(){if(this.dataUnit&&this.filterConfig&&0!==this.filterConfig.length)return e(i,null,e("ez-scroller",{direction:"horizontal"},this.getFilterItems()),e("snk-filter-list",{id:"APPLIED_FILTERS",onFocusin:()=>this.itemFocused("APPLIED_FILTERS"),items:this.getAppliedListItems(),getMessage:(t,e)=>this.getMessage(t,e),emptyText:this.getMessage("snkFilterBar.emptyAppliedFiltersList"),findFilterText:this.getMessage("snkFilterBar.findFilter"),iconName:"filter",class:"ez-padding-left--medium",buttonClass:this.getActiveClass(),onSnkItemSelected:t=>this.appliedFilterHandler(t.detail)}),e("snk-filter-list",{id:"ADD_FILTER",onFocusin:()=>this.itemFocused("ADD_FILTER"),items:this.getAddListItems(),label:this.getMessage("snkFilterBar.addFilter"),getMessage:(t,e)=>this.getMessage(t,e),emptyText:this.getMessage("snkFilterBar.emptyFiltersList"),findFilterText:this.getMessage("snkFilterBar.findField"),class:"ez-padding-left--medium",onSnkItemSelected:t=>this.addFilterHandler(t.detail)},e("ez-icon",{slot:"leftIcon",class:"ez-padding-right--small",iconName:"plus"})))}get _element(){return s(this)}static get watchers(){return{filterConfig:["observeFilterConfig"]}}};F.style='.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 x=class{constructor(e){t(this,e),this.filterChange=r(this,"filterChange",7),this.innerClickCheck=(t,e)=>e.id!=c.MODAL_ELEMENT_ID||(this.detailIsVisible=!1,!1)}async showUp(t=!1){return new Promise((e=>{this._filterItemElement.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"}),t&&(this._closeCallback=e,window.requestAnimationFrame((()=>{this._floatingID=c.float(this._popover,this._popoverContainer,{autoClose:!0,innerClickTest:this.innerClickCheck,backClickListener:()=>this.onDetailCloseCallback(),left:this.getScrollOffset(),useOverlay:!0}),this._popover.show(),this.detailIsVisible=!0})))}))}getScrollOffset(){const t=getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");return`calc(${this._filterItemElement.getBoundingClientRect().left}px + ${t})`}async hideDetail(){this.detailIsVisible&&null!=this._floatingID&&c.close(this._floatingID)}onDetailCloseCallback(){this._floatingID=void 0,this.detailIsVisible=!1,this._closeCallback&&(this._closeCallback(),this._closeCallback=void 0)}clickListener(t){[this._chipElement,this._leftIconElement,this._rightIconElement].includes(t.target)&&(t.target===this._rightIconElement&&null!=this.config.value?this.filterChange.emit(Object.assign(Object.assign({},this.config),{value:void 0})):this.detailIsVisible?this.hideDetail():this.showUp(!0),t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation())}mouseDownListener(t){this.detailIsVisible&&[this._chipElement,this._leftIconElement,this._rightIconElement].includes(t.target)&&(t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation())}getLabel(){const{type:t,value:e,label:i,props:s}=this.config;if(e){if(t===m.BINARY_SELECT){const[t,i]=s.options;if(t.name===e)return t.label;if(i.name===e)return i.label}if(t===m.MULTI_SELECT)return`${i}: ${s.options.find((t=>t.value===e)).label}`;if(t===m.PERIOD){let{end:t,start:s}=e;"string"==typeof t&&(t=new Date(t),t.setMinutes(t.getMinutes()+t.getTimezoneOffset())),"string"==typeof s&&(s=new Date(s),s.setMinutes(s.getMinutes()+s.getTimezoneOffset()));const r=new Intl.DateTimeFormat("pt-BR");return t&&s?`${i}: ${r.format(s)} a ${r.format(t)}`:s?`${i}: A partir de ${r.format(s)}`:t?`${i}: Até ${r.format(t)}`:i}return t===m.SEARCH?`${i}: ${e.value} - ${e.label}`:t===m.PERSONALIZED?i:`${i}: ${e}`}return i}componentDidRender(){null==this._floatingID&&this._popover&&this._popover.remove()}filterChangeListener(){this.hideDetail()}getRightIconName(){return null!=this.config.value?"close":this.detailIsVisible?"chevron-up":"chevron-down"}getLeftIconName(){switch(this.config.type){case m.PERIOD:return"calendar";case m.PERSONALIZED:return"tune"}}render(){const t=this.getLeftIconName();return e(i,null,e("ez-chip",{ref:t=>this._chipElement=t,label:this.getLabel(),value:null!=this.config.value},t?e("ez-icon",{ref:t=>this._leftIconElement=t,iconName:t,class:"ez-padding-right--small",slot:"leftIcon"}):void 0,e("ez-icon",{ref:t=>this._rightIconElement=t,iconName:this.getRightIconName(),class:"ez-padding-left--small",slot:"rightIcon"})),e("section",{class:"ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container",ref:t=>this._popoverContainer=t},e("snk-filter-detail",{config:this.config,getMessage:this.getMessage,class:"sc-snk-filter-bar snk-filter__popover ez-padding--small",ref:t=>this._popover=t,key:this.config.id})))}get _filterItemElement(){return s(this)}},z=class{constructor(e){t(this,e),this.snkItemSelected=r(this,"snkItemSelected",7),this._preselection=-1,this.innerClickCheck=(t,e)=>e.id!=c.MODAL_ELEMENT_ID||(this._detailIsVisible=!1,!1)}showDetail(){this._preselection=-1,this._floatingID=c.float(this._popover,this._popoverContainer,{autoClose:!0,innerClickTest:this.innerClickCheck,backClickListener:()=>this.onListCloseCallback(),useOverlay:!0}),this._detailIsVisible=!0,this._showAll=!1,this._filterArgument="",this._filterInput.setFocus()}async hideDetail(){null!=this._floatingID&&c.close(this._floatingID)}onListCloseCallback(){this._floatingID=void 0,this._detailIsVisible=!1}buttonClick(){this._detailIsVisible?this.hideDetail():this.showDetail()}componentDidRender(){null==this._floatingID&&this._popover&&this._popover.remove()}buildItemElement(t){const i=++this._selectableItemsCount;return e("button",{id:`filter-item${i}`,onFocusin:()=>this._preselection=i,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(t.name)},t.iconName?e("ez-icon",{iconName:t.iconName,size:"small",class:`ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${t.iconClass||""}`}):void 0,e("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 ${t.labelClass||""}`},t.label))}itemSelected(t){"__SHOWMORE__"===t?this._showAll=!0:(this.hideDetail(),this.snkItemSelected.emit(t))}getFilterItems(){const t=this.items?d.applyStringFilter(this._filterArgument,this.items.filter((t=>"FILTER"===t.kind))):[];return 0===t.length?e("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):(!this._filterArgument&&!this._showAll&&t.length>6&&(t.splice(5),t.push({kind:"INTERNAL",label:"Mostrar mais",iconName:"dots-horizontal",name:"__SHOWMORE__",iconClass:"snk-filter-bar__filter-list-item__icon--secondary",labelClass:"snk-filter-bar__filter-list-item__label--secondary"})),this._selectableItemsCount=0,e("div",{class:"sc-snk-filter-bar snk-filter-bar__filter-list-items-container"},t.map((t=>this.buildItemElement(t)))))}getFooterItems(){return this.items.filter((t=>"FOOTER"===t.kind))}keyDownHandler(t){switch(t.key){case"ArrowDown":this.changePreselection(this._preselection+1),t.stopImmediatePropagation(),t.stopPropagation(),t.preventDefault();break;case"ArrowUp":this.changePreselection(this._preselection-1),t.stopImmediatePropagation(),t.stopPropagation(),t.preventDefault()}}changePreselection(t){if(t<0&&(t=this._selectableItemsCount),this._preselection=t>this._selectableItemsCount?0:t,0===this._preselection)this._filterInput.setFocus();else{const t=this._element.querySelector(`#filter-item${this._preselection}`);t&&t.focus()}}render(){return e(i,{class:"ez-flex ez-flex--column"},e("ez-button",{class:this.buttonClass,label:this.label,onClick:()=>this.buttonClick(),mode:this.iconName?"icon":void 0,iconName:this.iconName,size:"small"},e("slot",{name:"leftIcon"})),e("section",{class:"ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container",ref:t=>this._popoverContainer=t},e("div",{class:"sc-snk-filter-bar snk-filter__popover ez-padding--small",ref:t=>this._popover=t},e("ez-filter-input",{ref:t=>this._filterInput=t,mode:"slim",label:this.findFilterText,value:this._filterArgument,onEzChange:t=>this._filterArgument=t.detail,onFocus:()=>this._preselection=0}),this.getFilterItems(),e("hr",{class:"sc-snk-filter-bar snk-filter__popover-rule"}),this.items?this.getFooterItems().map((t=>this.buildItemElement(t))):void 0)))}get _element(){return s(this)}},y=class{constructor(e){t(this,e)}updateValue(t,e){this.items=this.items.map((i=>i.id===t?(null==e&&(e=!i.active),Object.assign(Object.assign({},i),{active:e})):i))}getActiveFiltersMsg(){const t=this.items.filter((t=>t.active)).length;return 0===t?this.getMessage("snkFilterBar.noActiveFilters"):this.getMessage(t>1?"snkFilterBar.activeFilters":"snkFilterBar.activeFilter",{ACTIVE_FILTERS:t})}buildItems(t){return t.map((t=>e("button",{onClick:()=>this.updateValue(t.id),class:"ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small"},e("ez-check",{id:`checkbox_${t.id}`,tabIndex:"-1",class:"sc-snk-filter-bar snk-filter-bar__filter-modal-item__check",onEzChange:e=>this.updateValue(t.id,e.detail),enabled:t.enabled,value:t.active,mode:"switch"}),e("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"},t.label))))}itemKeyBoardSelect(t,e){"Enter"!==t.key&&" "!==t.key||this.updateValue(e.id)}modalActionListener(t){const e=t.detail;e===f.LOAD?this._filterInput&&this._filterInput.setFocus():this.processModalAction(e)}render(){const t=this.items.filter((t=>t.active)).length>0,i=this.items?d.applyStringFilter(this._filterArgument,this.items):[];return e("ez-modal-container",{modalTitle:this.modalTitle,modalSubTitle:this.modalSubTitle,cancelButtonLabel:this.cancelButtonLabel,okButtonLabel:this.okButtonLabel,onEzModalAction:t=>this.modalActionListener(t),cancelButtonStatus:t?u.ENABLED:u.DISABLED},e("div",{class:"sc-snk-filter-bar snk-filter-bar__filter-modal-content"},e("div",null,this.useSearch?e("ez-filter-input",{ref:t=>this._filterInput=t,label:this.getMessage("snkFilterBar.modalFindFilter"),onEzChange:t=>this._filterArgument=t.detail}):void 0),i.length>0?e("div",{class:"ez-text ez-text--medium ez-text--primary ez-padding-bottom--small"},this.getActiveFiltersMsg()):void 0,e("div",null,this.buildItems(i)),e("div",{class:"ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large"},this.infoText)))}},T=class{constructor(e){t(this,e),this.actionClick=r(this,"actionClick",7),this._titleKeyByElement={[k.UPDATE]:"snkTaskbar.titleUpdate",[k.PREVIOUS]:"snkTaskbar.titlePrevious",[k.NEXT]:"snkTaskbar.titleNext",[k.REFRESH]:"snkTaskbar.titleRefresh",[k.CLONE]:"snkTaskbar.titleClone",[k.REMOVE]:"snkTaskbar.titleRemove",[k.MORE_OPTIONS]:"snkTaskbar.titleMoreOptions",[k.INSERT]:"snkTaskbar.titleInsert",[k.CANCEL]:"snkTaskbar.titleCancel",[k.SAVE]:"snkTaskbar.titleSave",[k.GRID_MODE]:"snkTaskbar.titleGridMode",[k.CONFIG_GRID]:"snkTaskbar.titleConfigGrid",[k.FORM_MODE]:"snkTaskbar.titleFormMode"}}observeButtons(){this._definitions=void 0}elementsFromString(t){const e=[];return t&&t.split(",").forEach((t=>{t=t.trim(),(p[t]||this.isAllowed(t))&&e.push(t.trim())})),e}isAllowed(t){return!_[t]||!!this._permissions&&(this._permissions.isSup||this._permissions[t])}getTitle(t){let e;return e=this.isAllowed(t)?this._titleKeyByElement[t]:"snkTaskbar.forbidden",e?this._application.messagesBuilder.getMessage(e,{}):""}elementClick(t){if(this.dataUnit)switch(t){case k.PREVIOUS:this.dataUnit.previousRecord();break;case k.NEXT:this.dataUnit.nextRecord();break;case k.REFRESH:this.dataUnit.loadData();break;case k.CLONE:this.dataUnit.copySelected();break;case k.REMOVE:this.dataUnit.removeSelectedRecords();break;case k.INSERT:this.dataUnit.addRecord();break;case k.CANCEL:this.dataUnit.cancelEdition();break;case k.SAVE:this.dataUnit.saveData()}this.actionClick.emit(t)}isEnabled(t){return!(!this.isAllowed(t)||this.disabledButtons&&this.disabledButtons.includes(t))}getElement(t,e){let i=e===this.primaryButton?"ez-button--primary ":"";return t>1&&(i+="ez-padding-left--medium"),k[e.toString()]?v(e,i,(t=>this.getTitle(t)),(t=>this.elementClick(t)),(t=>this.isEnabled(t)),this.actionsList):g(e,i,(t=>this.elementClick(t)),(t=>this.isEnabled(t)))}componentWillLoad(){this._application=h.getContextValue("__SNK__APPLICATION__"),this._application?this._application.getAllAccess().then((t=>this._permissions=t)):this._permissions={}}componentWillRender(){null==this._definitions&&this._permissions&&(this._definitions=this.elementsFromString(this.buttons))}render(){if(void 0===this._definitions)return;let t=0;return e(i,null,this._definitions.map((i=>(i===k.DIVIDER?t=0:t++,k[i]?this.getElement(t,k[i]):this.customButtons.has(i)?this.getElement(t,this.customButtons.get(i)):e("slot",{name:i})))))}static get watchers(){return{buttons:["observeButtons"]}}};T.style=".sc-snk-taskbar-h{display:flex}";export{F as snk_filter_bar,x as snk_filter_item,z as snk_filter_list,y as snk_filter_modal,T as snk_taskbar}

package/dist/sankhyablocks/p-40b27004.entry.js

@@ -0,0 +1 @@
+import{r as s,h as t,H as e}from"./p-fac2b6a9.js";import{F as i}from"./p-9dd2b8cb.js";const h=class{constructor(t){s(this,t)}isSelected(s){return null==this.value||this.value===s}ezChangeListener(s){s.detail||this.assertCheckedOption(s.target),this.updateValue()}assertCheckedOption(s){s===this._checkOne?this._checkTwo.value=!0:this._checkOne.value=!0}updateValue(){if(this._checkOne.value&&this._checkTwo.value)this.value=void 0;else{const[s,t]=this.config.props.options;this.value=this._checkOne.value?s.name:t.name}}async show(){this._checkOne.setFocus()}render(){if(!this.config||this.config.type!==i.BINARY_SELECT)return;const[s,h]=this.config.props.options;return t(e,null,t("ez-check",{label:s.label,class:"sc-snk-filter-bar editor__ez-check",ref:s=>this._checkOne=s,value:this.isSelected(s.name)}),t("ez-check",{label:h.label,class:"sc-snk-filter-bar editor__ez-check",ref:s=>this._checkTwo=s,value:this.isSelected(h.name)}))}};export{h as snk_filter_binary_select}