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

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

@@ -0,0 +1,205 @@
+:host {
+  /* general */
+  /*@doc Define o raio da borda do input. */
+  --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
+  /*@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);
+
+  /* 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);
+
+  /* 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--medium, 12px);
+
+  /* list-container */
+  /*@doc Define o padding do container da lista. */
+  --ez-combo-box__list-container--padding: var(--space--extra-small, 3px);
+}
+
+.list-container {
+  /*public*/
+  padding-top: var(--ez-combo-box__list-container--padding);
+}
+
+.list-wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 0;
+  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--medium, 0 8px 24px 0 rgba(43, 58, 84, 0.10));
+  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;
+  scrollbar-color: var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background);
+}
+
+.list-options::-webkit-scrollbar {
+  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 {
+  background-color: var(--ez-combo-box__scrollbar--color-background);
+  border-radius: var(--ez-combo-box__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb {
+  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 {
+  background-color: var(--ez-combo-box__scrollbar--color-hover);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:active,
+.list-options::-webkit-scrollbar-thumb:horizontal:active {
+  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;
+  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;
+  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 {
+  font-weight: var(--ez-combo-box--font-weight--medium);
+}
+
+.item__label--bold {
+  font-weight: var(--ez-combo-box--font-weight--large);
+}
+
+.item__value {
+  text-align: center;
+  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;
+  min-height: var(--ez-combo-box__list-height);
+}
+
+.message__no-result {
+  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;
+  border: 3px solid var(--ez-combo-box__list-title--primary);
+  border-top: 3px solid transparent;
+}
+
+li:hover {
+  background-color: var(--ez-combo-box--background-medium);
+}
+
+.preselected {
+  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); }
+}

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
+      }];
+  }
+}