@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-76625.0 → 0.0.0-bugfix-dev-KB-83282.0

package/dist/collection/components/ez-search/ez-search.js

@@ -1,9 +1,8 @@
 import { h, Host } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
-import { ElementIDUtils, ObjectUtils, StringUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
 import { REQUIRED_INFO } from "../../utils/constants";
-import { replaceHighlight, replaceQuotes } from "./utils/searchFormatters";
 export class EzSearch {
   constructor() {
     this._changeDeboucingTimeout = null;
@@ -134,6 +133,20 @@ export class EzSearch {
   async clearValue() {
     this.clearSearch();
   }
+  scrollListener() {
+    var _a;
+    if (this._floatingID == undefined) {
+      return;
+    }
+    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
+      this.hideOptions();
+    }
+    else {
+      window.requestAnimationFrame(() => {
+        this.updateListPosition();
+      });
+    }
+  }
   async handleValueAsString(value) {
     if (this.getSelectedOption(value)) {
       this.setInputValue();
@@ -147,6 +160,49 @@ export class EzSearch {
     this.ezChange.emit(this.value);
     this._currentValue = this.value;
   }
+  updateListPosition() {
+    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
+    const elementRect = this._listWrapper.getBoundingClientRect();
+    const containerRect = this._listContainer.getBoundingClientRect();
+    const textInputRect = this._textInput.getBoundingClientRect();
+    const limitHeight = bottomLimit || window.innerHeight;
+    const neededHeight = containerRect.bottom + elementRect.height;
+    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
+      fromBottom = true;
+    }
+    if (!hardPosition) {
+      verticalPosition = verticalPosition || 0;
+      horizontalPosition = horizontalPosition || 0;
+      if (fromBottom) {
+        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
+      }
+      else {
+        verticalPosition += containerRect.top;
+      }
+      if (fromRight) {
+        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
+      }
+      else {
+        horizontalPosition += containerRect.left;
+      }
+    }
+    if (verticalPosition != undefined) {
+      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
+      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
+    }
+    if (horizontalPosition != undefined) {
+      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
+      this._listWrapper.style[fromRight ? "left" : "right"] = "";
+    }
+  }
+  getListPosition() {
+    if (this.listOptionsPosition) {
+      return this.listOptionsPosition;
+    }
+    return {
+      verticalPosition: 6
+    };
+  }
   isDifferentValues(firstValue, secondValue) {
     return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
   }
@@ -161,14 +217,24 @@ export class EzSearch {
   getText() {
     const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
-    return replaceQuotes(text);
+    return this.replaceQuotes(text);
+  }
+  replaceQuotes(text) {
+    if (text == undefined) {
+      return;
+    }
+    return String(text)
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"');
   }
   getSelectedOption(value) {
     if (typeof value === "string" || value instanceof String) {
       return this._visibleOptions.find(o => o.value === value);
     }
     if (value) {
-      return Object.assign(Object.assign({}, value), { value: replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
+      return Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
     }
     return value;
   }
@@ -206,19 +272,75 @@ export class EzSearch {
     }
     return 0;
   }
+  createOption(detail) {
+    let { key, title } = detail;
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = StringUtils.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  buildItem(opt, index) {
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: opt.value,
+      title: opt.label,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
   showOptions() {
     if (!this.enabled)
       return;
     if (this.isOptionsVisible()) {
       return;
     }
-    this._ezPopOverPlusElement.showUnder(this._textInput);
+    if (!!this._resizeObserver)
+      this._resizeObserver.observe(this._textInput);
+    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: false, isFixed: true, backClickListener: () => this.hideOptions() });
+    this.setFocus();
+    window.requestAnimationFrame(() => {
+      this.updateListPosition();
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    });
   }
   hideOptions() {
-    this._ezPopOverPlusElement.hide();
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+    if (!!this._resizeObserver)
+      this._resizeObserver.unobserve(this._textInput);
   }
   isOptionsVisible() {
-    return this._ezPopOverPlusElement.opened;
+    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
+  }
+  nextOption() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    this.showOptions();
+    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  previousOption() {
+    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  scrollToOption(opt) {
+    window.requestAnimationFrame(() => {
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
+        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
   }
   selectCurrentOption() {
     if (this._preSelection !== undefined) {
@@ -261,11 +383,17 @@ export class EzSearch {
     this._source = [];
     this.updateVisibleOptions();
   }
+  replaceHighlight(value) {
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    const newValue = String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+    return this.replaceQuotes(newValue);
+  }
   selectOption(newOption, focusOnInput = true) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
-    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
-    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) === null || _b === void 0 ? void 0 : _b.toString()))
       || (currentValue == undefined && newOptionsFormatted != undefined && "value" in newOptionsFormatted)) {
       const adjustedOpt = !(newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) ? undefined : newOptionsFormatted;
@@ -375,7 +503,7 @@ export class EzSearch {
       this.showNoResultMessage();
       return;
     }
-    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: replaceHighlight(value.value), label: replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
     this.value = this._currentValue;
     this.setTextInputValue();
   }
@@ -384,7 +512,7 @@ export class EzSearch {
       if (this.value === undefined || this.value === null)
         return;
       const textValue = (typeof this.value === 'string') ? this.value : this.getFormattedText(this.value);
-      this._textInput.value = replaceQuotes(textValue);
+      this._textInput.value = this.replaceQuotes(textValue);
     }
   }
   loadOptionValue(argument) {
@@ -421,7 +549,7 @@ export class EzSearch {
       return;
     }
     let text = this.getFormattedText(this.value);
-    text = replaceQuotes(text);
+    text = this.replaceQuotes(text);
     this._textInput.value = text;
   }
   //---------------------------------------------
@@ -448,6 +576,9 @@ export class EzSearch {
   }
   componentDidRender() {
     var _a;
+    if (this._floatingID === undefined) {
+      this._listWrapper.remove();
+    }
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemSearch");
     });
@@ -459,6 +590,10 @@ export class EzSearch {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
+        const { clientWidth } = this._listContainer;
+        if (clientWidth > 0 && !!this._listWrapper) {
+          this._listWrapper.style.width = `${clientWidth}px`;
+        }
       });
     });
     await this.handleInitialValue();
@@ -525,7 +660,7 @@ export class EzSearch {
       this._changeDeboucingTimeout = null;
     }
   }
-  async keyDownHandler(event) {
+  keyDownHandler(event) {
     this._tabPressed = false;
     if (event.ctrlKey) {
       if (event.key === "f" || event.key === "F") {
@@ -541,20 +676,15 @@ export class EzSearch {
     switch (event.key) {
       case "ArrowDown":
         event.stopPropagation();
-        if (this.canShowListOptions()) {
+        if (this.canShowListOptions())
           event.preventDefault();
-        }
-        if (!this.isOptionsVisible()) {
-          this.showOptions();
-        }
-        await this._searchList.nextOption();
+        this.nextOption();
         break;
       case "ArrowUp":
         event.stopPropagation();
-        if (this.canShowListOptions()) {
+        if (this.canShowListOptions())
           event.preventDefault();
-        }
-        await this._searchList.previousOption();
+        this.previousOption();
         break;
       case "Enter":
         this.handleEventPropagation(event);
@@ -576,7 +706,7 @@ export class EzSearch {
   }
   //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
   handleEventPropagation(event) {
-    if (this._ezPopOverPlusElement.opened && this.stopPropagateEnterKeyEvent) {
+    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
       event.stopPropagation();
     }
   }
@@ -588,17 +718,17 @@ export class EzSearch {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   canShowLoadSpinDescription() {
-    return this._showLoadingDescription && !this._ezPopOverPlusElement.opened;
-  }
-  onChangePreSelection(value) {
-    this._preSelection = value;
+    return this._showLoadingDescription && this._floatingID == undefined;
   }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
     return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+      && this._visibleOptions.length === 0
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem }), this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
   }
   static get is() { return "ez-search"; }
   static get encapsulation() { return "shadow"; }
@@ -1146,6 +1276,15 @@ export class EzSearch {
         "methodName": "observeOptions"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "scrollListener",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
 }
 var SearchMode;
 (function (SearchMode) {

package/dist/custom-elements/index.d.ts

@@ -86,6 +86,12 @@ export const EzComboBox: {
   new (): EzComboBox;
 };
 
+interface EzComboBoxList extends Components.EzComboBoxList, HTMLElement {}
+export const EzComboBoxList: {
+  prototype: EzComboBoxList;
+  new (): EzComboBoxList;
+};
+
 interface EzCustomFormInput extends Components.EzCustomFormInput, HTMLElement {}
 export const EzCustomFormInput: {
   prototype: EzCustomFormInput;
@@ -350,12 +356,6 @@ export const MultiSelectionBoxMessage: {
   new (): MultiSelectionBoxMessage;
 };
 
-interface SearchList extends Components.SearchList, HTMLElement {}
-export const SearchList: {
-  prototype: SearchList;
-  new (): SearchList;
-};
-
 /**
  * Utility to define all custom elements within this package using the tag name provided in the component's source. 
  * When defining each custom element, it will also check it's safe to define by: