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

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

@@ -4,11 +4,14 @@ export class SnkFilterMultiSelect {
   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 }));
   }
   static get is() { return "snk-filter-multi-select"; }
   static get properties() {
@@ -52,6 +55,26 @@ export class SnkFilterMultiSelect {
       }
     };
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get listeners() {
     return [{
         "name": "ezChange",

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

@@ -4,12 +4,15 @@ export class SnkFilterPeriod {
   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 }));
   }
   static get is() { return "snk-filter-number"; }
   static get properties() {
@@ -53,6 +56,26 @@ export class SnkFilterPeriod {
       }
     };
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get listeners() {
     return [{
         "name": "ezChange",

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

@@ -18,6 +18,9 @@ export class SnkFilterPeriod {
     }
     return null;
   }
+  async show() {
+    this._startDate.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
@@ -66,6 +69,26 @@ export class SnkFilterPeriod {
       }
     };
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get listeners() {
     return [{
         "name": "ezChange",

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

@@ -41,27 +41,34 @@ export class SnkFilterPersonalized {
     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;
@@ -119,4 +126,24 @@ export class SnkFilterPersonalized {
       }
     };
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -16,6 +16,9 @@ export class SnkFilterSearch {
       });
     });
   }
+  async show() {
+    this._searchInput.setFocus();
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.SEARCH) {
       return undefined;
@@ -67,6 +70,26 @@ export class SnkFilterSearch {
       }
     };
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get listeners() {
     return [{
         "name": "ezChange",

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

@@ -7,7 +7,7 @@ export class SnkFilterText {
     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 }));
   }
   static get is() { return "snk-filter-text"; }
   static get properties() {

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

@@ -2,6 +2,9 @@ import { h, Host } from '@stencil/core';
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
 export class SnkFilterDetail {
+  async show() {
+    this._editor["show"]();
+  }
   changeConfig(newConfig) {
     this.filterChange.emit(newConfig);
   }
@@ -30,10 +33,13 @@ export class SnkFilterDetail {
       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"];
@@ -77,9 +83,14 @@ export class SnkFilterDetail {
   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" }))));
   }
   static get is() { return "snk-filter-detail"; }
   static get properties() {
@@ -144,4 +155,24 @@ export class SnkFilterDetail {
         }
       }];
   }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -8,7 +8,6 @@ export class SnkFilterItem {
         return true;
       }
       this.detailIsVisible = false;
-      this.executeCloseCallback();
       return false;
     };
   }
@@ -16,29 +15,36 @@ export class SnkFilterItem {
     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;
@@ -57,7 +63,7 @@ export class SnkFilterItem {
           this.hideDetail();
         }
         else {
-          this.showDetail();
+          this.showUp(true);
         }
       }
       evt.preventDefault();
@@ -239,6 +245,22 @@ export class SnkFilterItem {
           "text": "",
           "tags": []
         }
+      },
+      "hideDetail": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -4,6 +4,7 @@ const SHOW_MORE_ITEM_NAME = "__SHOWMORE__";
 const MAX_FILTERS = 5;
 export class SnkFilterList {
   constructor() {
+    this._preselection = -1;
     this.innerClickCheck = (_floatingContainer, node) => {
       if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
         return true;
@@ -12,25 +13,34 @@ export class SnkFilterList {
       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() {
@@ -41,14 +51,15 @@ export class SnkFilterList {
     }
   }
   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);
     }
   }
@@ -62,13 +73,47 @@ export class SnkFilterList {
       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))));
   }
   static get is() { return "snk-filter-list"; }
   static get properties() {
@@ -221,5 +266,34 @@ export class SnkFilterList {
         }
       }];
   }
+  static get methods() {
+    return {
+      "hideDetail": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }

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{