@sankhyalabs/ezui 5.22.0-dev.90 → 5.22.0-dev.92

package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.js

@@ -0,0 +1,405 @@
+import { h } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+export class EzComboBoxList {
+  constructor() {
+    this.showLoading = undefined;
+    this.visibleOptions = undefined;
+    this.textEmptyList = "Nenhum resultado encontrado";
+    this.showOptionValue = undefined;
+    this.preSelection = undefined;
+    this.maxWidth = undefined;
+    this.width = undefined;
+    this.onOptionSelect = undefined;
+    this.onOptionHover = undefined;
+  }
+  /**
+   * Move a seleção para a próxima opção na lista.
+   */
+  async nextOption() {
+    this.preSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
+    this.scrollToOption(this.visibleOptions[this.preSelection]);
+  }
+  /**
+   * Move a seleção para a opção anterior na lista.
+   */
+  async previousOption() {
+    this.preSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
+    this.scrollToOption(this.visibleOptions[this.preSelection]);
+  }
+  /**
+   * Seleciona a opção atualmente pré-selecionada.
+   */
+  async selectCurrentOption() {
+    if (this.preSelection !== undefined) {
+      this.onOptionSelect(this.visibleOptions[this.preSelection]);
+      this.preSelection = undefined;
+    }
+  }
+  /**
+   * Observa mudanças na propriedade `width` e ajusta a largura da lista.
+   *
+   * @param newValue O novo valor da largura.
+   * @param oldValue O valor anterior da largura.
+   */
+  observeWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.width = `${this.width}px`;
+  }
+  /**
+   * Observa mudanças na propriedade `maxWidth` e ajusta a largura máxima da lista.
+   *
+   * @param newValue O novo valor da largura máxima.
+   * @param oldValue O valor anterior da largura máxima.
+   */
+  observeMaxWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  /**
+   * Gerencia a navegação por teclado na lista do combo box.
+   *
+   * - `ArrowDown`: Move para a próxima opção.
+   * - `ArrowUp`: Move para a opção anterior.
+   * - `Enter`: Seleciona a opção atual.
+   * - `Escape`: Limpa a pré-seleção.
+   *
+   * @param event O evento de teclado.
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        event.stopPropagation();
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        event.stopPropagation();
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+      case "Escape":
+        this.preSelection = undefined;
+        break;
+    }
+  }
+  buildItem(opt, index) {
+    const widthValue = this.showOptionValue && this.maxWidth > 0 ? `${this.maxWidth}px` : '';
+    opt.label = opt.label || opt.value;
+    return h("li", { class: index === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.onOptionSelect(opt), onMouseOver: () => this.preSelection = index }, this.showOptionValue
+      ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
+      : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
+  }
+  scrollToOption(opt) {
+    window.requestAnimationFrame(() => {
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[ <>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
+      if (liElem)
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    });
+  }
+  componentDidLoad() {
+    this._listWrapper.style.width = `${this.width}px`;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
+    });
+  }
+  render() {
+    return (h("section", { class: "list-container" }, 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" }))), this.showOptionValue && (h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
+      this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  static get is() { return "ez-combo-box-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-combo-box-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-combo-box-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "showLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{boolean}"
+            }],
+          "text": "Indica se o indicador de carregamento deve ser exibido."
+        },
+        "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-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{Array<IOption>}"
+            }],
+          "text": "Lista de op\u00E7\u00F5es vis\u00EDveis que ser\u00E3o exibidas no componente."
+        }
+      },
+      "textEmptyList": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "padr\u00E3o",
+              "text": "\"Nenhum resultado encontrado\""
+            }, {
+              "name": "tipo",
+              "text": "{string}"
+            }],
+          "text": "Mensagem exibida quando a lista de op\u00E7\u00F5es est\u00E1 vazia."
+        },
+        "attribute": "text-empty-list",
+        "reflect": false,
+        "defaultValue": "\"Nenhum resultado encontrado\""
+      },
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{boolean}"
+            }],
+          "text": "Indica se o valor de cada op\u00E7\u00E3o deve ser exibido junto com o r\u00F3tulo."
+        },
+        "attribute": "show-option-value",
+        "reflect": false
+      },
+      "preSelection": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{number}"
+            }],
+          "text": "\u00CDndice da op\u00E7\u00E3o pr\u00E9-selecionada na lista."
+        },
+        "attribute": "pre-selection",
+        "reflect": false
+      },
+      "maxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{number}"
+            }],
+          "text": "Largura m\u00E1xima da lista, em pixels."
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "tipo",
+              "text": "{number}"
+            }],
+          "text": "Largura fixa da lista, em pixels."
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "onOptionSelect": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(option: IOption) => void",
+          "resolved": "(option: IOption) => void",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "option A op\u00E7\u00E3o selecionada."
+            }, {
+              "name": "tipo",
+              "text": "{(option: IOption) => void}"
+            }],
+          "text": "Callback chamado quando uma op\u00E7\u00E3o \u00E9 selecionada."
+        }
+      },
+      "onOptionHover": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(index: number) => void",
+          "resolved": "(index: number) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "index O \u00EDndice da op\u00E7\u00E3o em foco."
+            }, {
+              "name": "tipo",
+              "text": "{(index: number) => void}"
+            }],
+          "text": "Callback chamado quando o mouse passa sobre uma op\u00E7\u00E3o."
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "nextOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Move a sele\u00E7\u00E3o para a pr\u00F3xima op\u00E7\u00E3o na lista.",
+          "tags": []
+        }
+      },
+      "previousOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Move a sele\u00E7\u00E3o para a op\u00E7\u00E3o anterior na lista.",
+          "tags": []
+        }
+      },
+      "selectCurrentOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Seleciona a op\u00E7\u00E3o atualmente pr\u00E9-selecionada.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "width",
+        "methodName": "observeWidth"
+      }, {
+        "propName": "maxWidth",
+        "methodName": "observeMaxWidth"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -1,105 +1,27 @@
 :host {
-
   /* dimensions */
-  /*@doc Define altura do input.*/
   --ez-combo-box--height: 42px;
-  /*@doc Define largura do input.*/
   --ez-combo-box--width: 100%;
-  /*@doc Define largura do slot do ícone do input.*/
-  --ez-combo-box__icon--width: 48px;
-
-  /*@doc Define a largura maxima do componente.*/
-  --ez-combo-box__min-width: 0px;
-  /*@doc Define a largura minima do componente.*/
-  --ez-combo-box__max-width: 100%;
 
   /* general */
-  /*@doc Define o raio da borda do input.*/
   --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o raio da borda do input quando pequeno.*/
-  --ez-combo-box--border-radius-small: var(--border--radius-small, 6px);
-  /*@doc Define o tamanho da fonte dentro do input.*/
   --ez-combo-box--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte dentro do input.*/
   --ez-combo-box--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte dentro do input quando pesada.*/
-  --ez-combo-box--font-weight--large: var(--text-weight--large, 500);
-  /*@doc Define o peso da fonte dentro do input quando média.*/
-  --ez-combo-box--font-weight--medium: var(--text-weight--medium, 400);
-  /*@doc Define a cor de fundo da lista de opções.*/
   --ez-combo-box--background-color--xlight: var(--background--xlight, #fff);
-  /*@doc Define a cor de fundo dos itens da lista de opções.*/
-  --ez-combo-box--background-medium: var(--background--medium, #f0f3f7);
-  /*@doc Define a altura da linha do texto dentro do input.*/
-  --ez-combo-box--line-height: calc(var(--text--medium, 14px) + 4px);
 
   /* input */
-  /*@doc Define a cor de fundo do input.*/
   --ez-combo-box__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define o estilo da borda do input.*/
   --ez-combo-box__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
   --ez-combo-box__input--border-color: var(--ez-combo-box__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
-  /*@doc Define a cor da borda do input quando focado.*/
   --ez-combo-box__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
   --ez-combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor do texto dentro do input quando desabilitado.*/
   --ez-combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --ez-combo-box__input--error--border-color: #CC2936;
 
   /* buttons */
-  /*@doc Define a cor do botão de pesquisa do componente.*/
   --ez-combo-box__btn--color: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
   --ez-combo-box__btn-disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
   --ez-combo-box__btn-hover--color: var(--color--primary, #4e4e4e);
 
-  /* label */
-  /*@doc Define a cor do label.*/
-  --ez-combo-box__label--color: var(--title--primary, #2B3A54);
-
-  /* list */
-  /*@doc Define a cor do texto da lista de opções.*/
-  --ez-combo-box__list-title--primary: var(--title--primary, #2B3A54);
-  /*@doc Define a cor do texto do value da lista de opções.*/
-  --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
-  /*@doc Define a altura do box da lista de opções.*/
-  --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);
-  /*@doc Define a largura mínima da lista de opções.*/
-  --ez-combo-box__list-min-width: 64px;
-
-  /* espaçamento */
-  /*@doc Define um espaçamento mediano entre elementos do componente.*/
-  --ez-combo-box--space--medium: var(--space--medium, 12px);
-  /*@doc Define um espaçamento pequeno entre elementos do componente.*/
-  --ez-combo-box--space--small: var(--space--small, 6px);
-
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-combo-box__scrollbar--width: var(--space--small, 6px);
-
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-
   /*public*/
   width: var(--ez-combo-box--width);
 }
@@ -118,178 +40,6 @@ ez-icon {
   --ez-text-input__input--disabled--color: var(--title--primary, #2B3A54);
 }
 
-.list-container {
-  /*public*/
-  min-width: var(--ez-combo-box__list-min-width);
-
-  /*private*/
-  position: relative;
-  width: 100%;
-}
-
-.list-wrapper {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 0;
-
-  /*public*/
-  z-index: var(--more-visible, 2);
-  max-height: calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);
-  background-color: var(--ez-combo-box--background-color--xlight);
-  border-radius: var(--ez-combo-box--border-radius);
-  box-shadow: var(--shadow, 0px 0px 16px 0px #000);
-  padding: var(--ez-combo-box--space--small);
-}
-
-.list-options {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  display: flex;
-  flex-direction: column;  
-  scroll-behavior: smooth;
-  overflow: auto;
-  scrollbar-width: thin;
-  gap: 3px;
-
-  /*public*/
-  scrollbar-color: var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background);
-}
-
-.list-options::-webkit-scrollbar {
-  /*public*/
-  background-color: var(--ez-combo-box__scrollbar--color-background);
-  width: var(--ez-combo-box__scrollbar--width);
-  max-width: var(--ez-combo-box__scrollbar--width);
-  min-width: var(--ez-combo-box__scrollbar--width);
-}
-
-.list-options::-webkit-scrollbar-track {
-  /*public*/
-  background-color: var(--ez-combo-box__scrollbar--color-background);
-  border-radius: var(--ez-combo-box__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--ez-combo-box__scrollbar--color-default);
-  border-radius: var(--ez-combo-box__scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:hover,
-.list-options::-webkit-scrollbar-thumb:horizontal:hover {
-  /*public*/
-  background-color: var(--ez-combo-box__scrollbar--color-hover);
-}
-
-.list-options::-webkit-scrollbar-thumb:vertical:active,
-.list-options::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  background-color: var(--ez-combo-box__scrollbar--color-clicked);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  list-style-type: none;
-  cursor: pointer;
-
-  /*public*/
-  border-radius: var(--ez-combo-box--border-radius-small);
-  padding: var(--ez-combo-box--space--small);
-  min-height: var(--ez-combo-box__list-height);
-  gap: var(--space--small, 6px);
-}
-
-.item__value,
-.item__label {
-  flex-basis: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  /*public*/
-  color: var(--ez-combo-box__list-title--primary);
-  font-family: var(--ez-combo-box--font-family);
-  font-size: var(--ez-combo-box--font-size);
-  line-height: var(--ez-combo-box--line-height);
-}
-
-.item__label {
-  /*public*/
-  font-weight: var(--ez-combo-box--font-weight--medium);
-}
-
-.item__label--bold {
-  /*public*/
-  font-weight: var(--ez-combo-box--font-weight--large);
-}
-
-.item__value {
-  text-align: center;
-
-  /*public*/
-  color: var(--ez-combo-box__list-text--primary);
-  font-weight: var(--ez-combo-box--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;
-}
-
-.message {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  list-style-type: none;
-  
-  /*public*/
-  min-height: var(--ez-combo-box__list-height);
-}
-
-.message__no-result {
-  /*public*/
-  color: var(--ez-combo-box__list-title--primary);
-  font-family: var(--ez-combo-box--font-family);
-  font-size: var(--ez-combo-box--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-combo-box__list-title--primary);
-  border-top: 3px solid transparent;
-}
-
-li:hover {
-  /*public*/
-  background-color: var(--ez-combo-box--background-medium);
-}
-
-.preselected {
-  /*public*/
-  background-color: var(--background--medium);
-}
-
 .btn {
   outline: none;
   border: none;