@sankhyalabs/ezui 7.2.0 → 7.3.0

package/dist/collection/components/ez-classic-search/subcomponent/classic-search-list/classic-search-list.css

@@ -1,227 +0,0 @@
-:host {
-  /* list */
-  /*@doc Define a cor do texto da lista de opções.*/
-  --ez-classic-search__list-title--primary: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do texto do value da lista de opções.*/
-  --ez-classic-search__list-text--primary: var(--text--primary, #626e82);
-  /*@doc Define a altura do box da lista de opções.*/
-  --ez-classic-search__list-height: calc(var(--ez-classic-search--font-size) + var(--ez-classic-search--space--medium) + 4px);
-  /*@doc Define a largura mínima da lista de opções.*/
-  --ez-classic-search__list-min-width: 64px;
-
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-classic-search__scrollbar--width: var(--space--small, 6px);
-
-    /* general */
-  /*@doc Define o raio da borda do input quando pequeno.*/
-  --ez-classic-search--border-radius-small: var(--border--radius-small, 6px);
-  /*@doc Define o tamanho da fonte dentro do input.*/
-  --ez-classic-search--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte dentro do input.*/
-  --ez-classic-search--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte dentro do input quando pesada.*/
-  --ez-classic-search--font-weight--large: var(--text-weight--large, 500);
-  /*@doc Define o peso da fonte dentro do input quando média.*/
-  --ez-classic-search--font-weight--medium: var(--text-weight--medium, 400);
-  /*@doc Define a cor de fundo dos itens da lista de opções.*/
-  --ez-classic-search--background-medium: var(--background--medium, #f0f3f7);
-  /*@doc Define a altura da linha do texto dentro do input.*/
-  --ez-classic-search--line-height: calc(var(--text--medium, 14px) + 4px);
-}
-
-.list-options {
-  position: relative;
-  z-index: var(--more-visible, 2);
-  margin: var(--space--small) 0px;
-  padding: 0px;
-  padding-inline-start: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  max-height: 350px;
-  min-width: 150px;
-  display: flex;
-  flex-direction: column;
-  scroll-behavior: smooth;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-
-  /*public*/
-  scrollbar-color: var(--ez-classic-search__scrollbar--color-clicked) var(--ez-classic-search__scrollbar--color-background);
-
-}
-
-.list-options::-webkit-scrollbar {
-  /*public*/
-  background-color: var(--scrollbar--background);
-  width: var(--space--small);
-  max-width: var(--space--small);
-  min-width: var(--space--small);
-  height: var(--space--small);
-  max-height: var(--space--small);
-  min-height: var(--space--small);
-}
-
-.list-options::-webkit-scrollbar-track {
-  /*public*/
-  background-color: var(--ez-classic-search__scrollbar--color-background);
-  border-radius: var(--ez-classic-search__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--ez-classic-search__scrollbar--color-default);
-  border-radius: var(--ez-classic-search__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:hover,
-.list-options::-webkit-scrollbar-thumb:horizontal:hover {
-  /*public*/
-  background-color: var(--ez-classic-search__scrollbar--color-hover);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:active,
-.list-options::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  background-color: var(--ez-classic-search__scrollbar--color-clicked);
-}
-
-.message {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  list-style-type: none;
-  margin: var(--space--medium) 0px;
-
-  /*public*/
-  min-height: var(--ez-classic-search__list-height);
-}
-
-.message__no-result {
-  /*public*/
-  color: var(--ez-classic-search__list-title--primary);
-  font-family: var(--ez-classic-search--font-family);
-  font-size: var(--ez-classic-search--font-size);
-}
-
-.message__loading {
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  -webkit-animation: spin 1s linear infinite;
-  animation: spin 1s linear infinite;
-
-  /*public*/
-  border: 3px solid var(--ez-classic-search__list-title--primary);
-  border-top: 3px solid transparent;
-}
-
-.item__value,
-.item__label {
-  flex-basis: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  /*public*/
-  color: var(--ez-classic-search__list-title--primary);
-  font-family: var(--ez-classic-search--font-family);
-  font-size: var(--ez-classic-search--font-size);
-  line-height: var(--ez-classic-search--line-height);
-}
-
-.item__label {
-  /*public*/
-  font-weight: var(--ez-classic-search--font-weight--medium);
-}
-
-.item__label--bold {
-  /*public*/
-  font-weight: var(--ez-classic-search--font-weight--large);
-}
-
-.item__value {
-  text-align: center;
-
-  /*public*/
-  color: var(--ez-classic-search__list-text--primary);
-  font-weight: var(--ez-classic-search--font-weight--large);
-}
-
-.item__value--hidden {
-  visibility: hidden;
-  position: absolute;
-  white-space: nowrap;
-  z-index: -1;
-  top: 0;
-  left: 0;
-}
-
-.item__label {
-  text-align: left;
-}
-
-.item__list>li:hover {
-  /*public*/
-  background-color: var(--ez-classic-search--background-medium);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  list-style-type: none;
-  cursor: pointer;
-
-  /*public*/
-  border-radius: var(--ez-classic-search--border-radius-small);
-  gap: var(--space--small, 6px);
-}
-
-.preselected {
-  /*public*/
-  background-color: var(--background--medium);
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@supports not (scrollbar-width: thin) {
-
-  /* Estilos para navegadores que NÃO suportam scrollbar-width */
-  .item {
-    /* Estilos alternativos, por exemplo, para navegadores que não suportam scrollbar-width */
-    padding-right: 8px;
-  }
-}

package/dist/collection/components/ez-classic-search/subcomponent/classic-search-list/classic-search-list.js

@@ -1,316 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { StringUtils } from '@sankhyalabs/core';
-import { replaceHighlight, replaceQuotes } from '../../utils/searchFormatters';
-export class ClassicSearchList {
-  constructor() {
-    this._startHighlightTag = "<span class='card-item__highlight'>";
-    this._endHighlightTag = "</span>";
-    this.MAX_HEIGHT = 350;
-    this.HEADER_MENU_HEIGHT = 60;
-    this.showLoading = undefined;
-    this.visibleOptions = [];
-    this.textEmptyList = undefined;
-    this.canShowListOptions = undefined;
-    this.value = undefined;
-    this.showOptionValue = true;
-    this.preSelection = undefined;
-  }
-  async nextOption() {
-    const newPreSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
-    this.changePreSelection.emit(newPreSelection);
-    this.scrollToOption(this.visibleOptions[newPreSelection]);
-  }
-  async previousOption() {
-    const newPreSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
-    this.changePreSelection.emit(newPreSelection);
-    this.scrollToOption(this.visibleOptions[newPreSelection]);
-  }
-  selectOption(newOption) {
-    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) });
-    this.changeValue.emit(newOptionsFormatted);
-  }
-  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);
-  }
-  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" });
-      }
-    });
-  }
-  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.changePreSelection.emit(index) }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
-  }
-  componentDidLoad() {
-    if (this._optionsList) {
-      this._optionsList.style.maxHeight = `${this.MAX_HEIGHT}px`;
-    }
-  }
-  componentDidUpdate() {
-    if (this._optionsList) {
-      const rect = this._optionsList.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      if (spaceBelow < 0) {
-        this.adjustMaxHeight(rect);
-      }
-    }
-  }
-  adjustMaxHeight(rect) {
-    if (this._optionsList) {
-      const spaceAbove = rect.top - this.HEADER_MENU_HEIGHT;
-      const maxHeight = this.MAX_HEIGHT;
-      const height = Math.min(spaceAbove, maxHeight);
-      this._optionsList.style.maxHeight = `${height}px`;
-    }
-  }
-  cleanEmptyObjectArray(arr) {
-    return arr.filter(item => ((item === null || item === void 0 ? void 0 : item.value) !== undefined));
-  }
-  render() {
-    return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
-      && this.cleanEmptyObjectArray(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" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
-  }
-  static get is() { return "classic-search-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["classic-search-list.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["classic-search-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "showLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-loading",
-        "reflect": false
-      },
-      "visibleOptions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<IOption>",
-          "resolved": "IOption[]",
-          "references": {
-            "Array": {
-              "location": "global"
-            },
-            "IOption": {
-              "location": "import",
-              "path": "../../ez-classic-search"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "textEmptyList": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text-empty-list",
-        "reflect": false
-      },
-      "canShowListOptions": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "can-show-list-options",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IOption | string",
-          "resolved": "IOption | string",
-          "references": {
-            "IOption": {
-              "location": "import",
-              "path": "../../ez-classic-search"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "showOptionValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-option-value",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "preSelection": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "pre-selection",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "changeValue",
-        "name": "changeValue",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "IOption",
-          "resolved": "IOption",
-          "references": {
-            "IOption": {
-              "location": "import",
-              "path": "../../ez-classic-search"
-            }
-          }
-        }
-      }, {
-        "method": "changePreSelection",
-        "name": "changePreSelection",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "nextOption": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "previousOption": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}

package/dist/collection/components/ez-classic-search/utils/searchFormatters.js

@@ -1,18 +0,0 @@
-const START_HIGH_LIGHT_TAG = "<span class='card-item__highlight'>";
-const END_HIGH_LIGHT_TAG = "</span>";
-export function replaceHighlight(value) {
-  const startHighlight = new RegExp(START_HIGH_LIGHT_TAG, 'g');
-  const endHighlight = new RegExp(END_HIGH_LIGHT_TAG, 'g');
-  const newValue = String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
-  return replaceQuotes(newValue);
-}
-export function replaceQuotes(text) {
-  if (text == undefined) {
-    return;
-  }
-  return String(text)
-    .replace(/&amp;/g, '&')
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"');
-}