@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-74246.1 → 0.0.0-bugfix-dev-KB-76362.0

package/dist/collection/components/snk-distinct-search/snk-distinct-search.js

@@ -0,0 +1,372 @@
+import { Host, h } from '@stencil/core';
+import DistinctSearchFetcher from "../../lib/http/data-fetcher/fetchers/distinct-search-fetcher";
+import { ApplicationContext } from '@sankhyalabs/core';
+export class SnkDistinctSearch {
+  constructor() {
+    this.onIconClick = () => {
+      this._searchModalElement.value = this.value || "";
+      this._searchModalElement.openModal();
+    };
+    this.distinctItems = undefined;
+    this.value = "";
+    this.label = "";
+    this.configSearch = undefined;
+    this.maxItems = 100;
+    this.debounceTime = 300;
+    this.canShowError = false;
+    this.mode = 'regular';
+    this.restrict = undefined;
+    this.errorMessage = undefined;
+  }
+  /**
+   * Método para limpa o campo de entrada de pesquisa
+   */
+  clearInput() {
+    this._inputDistinctSearch.clearInput();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  isInvalid() {
+    return this._inputDistinctSearch.isInvalid();
+  }
+  /**
+   * Remove o foco do campo
+   */
+  setBlur() {
+    this._inputDistinctSearch.setBlur();
+  }
+  /**
+   * Aplica o foco do campo
+   */
+  setFocus() {
+    this._inputDistinctSearch.setFocus();
+  }
+  /**
+   * Método para fechar o modal
+   */
+  closeModal() {
+    this._searchModalElement.closeModal();
+  }
+  /**
+   * Método para abrir o modal
+   */
+  openModal() {
+    this._searchModalElement.openModal();
+  }
+  async componentWillLoad() {
+    await this.fetchDistinctItems();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  async fetchDistinctItems() {
+    const distinctFetcher = new DistinctSearchFetcher();
+    const response = await distinctFetcher.fetchItens(this.configSearch.column, this.configSearch.instance);
+    this.distinctItems = [...response];
+  }
+  onChange(event) {
+    event.stopPropagation();
+    this.value = event.detail.value;
+    this._inputDistinctSearch.selectValue(event.detail.value, event.detail.isNewItem);
+    this.changeValue.emit(event.detail);
+  }
+  onPopupClose() {
+    this._inputDistinctSearch.setFocus();
+  }
+  getMessage(key) {
+    return this._application.messagesBuilder.getMessage(key, null);
+  }
+  renderEmptyMessage() {
+    return (h("span", { innerHTML: this.getMessage("snkDistinctSearch.emptyResult") }));
+  }
+  render() {
+    return (h(Host, null, h("input-distinct-search", { ref: (ref) => this._inputDistinctSearch = ref, application: this._application, label: this.label, distinctItems: this.distinctItems, onChangeValue: this.onChange.bind(this), debounceTime: this.debounceTime, value: this.value, onIconClick: this.onIconClick, maxItems: this.maxItems, canShowError: this.canShowError, mode: this.mode, restrict: this.restrict, errorMessage: this.errorMessage }), h("search-modal", { ref: (ref) => this._searchModalElement = ref, application: this._application, listItens: this.distinctItems, onChangeValue: this.onChange.bind(this), restrict: this.restrict, value: this.value, label: this.label, emptyMessage: this.renderEmptyMessage(), maxItens: this.maxItems, debounceTime: this.debounceTime, canShowError: this.canShowError, mode: this.mode, errorMessage: this.errorMessage, onPopupClose: this.onPopupClose.bind(this) })));
+  }
+  static get is() { return "snk-distinct-search"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-distinct-search.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-distinct-search.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Valor inicial do campo."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label apresentada no input."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "configSearch": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IConfigSearch",
+          "resolved": "IConfigSearch",
+          "references": {
+            "IConfigSearch": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dados para busca ao servi\u00E7o."
+        }
+      },
+      "maxItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "N\u00FAmero m\u00E1ximo de itens na lista."
+        },
+        "attribute": "max-items",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "debounceTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tempo em milissegundos para debouncing das chamadas de busca de sugest\u00F5es."
+        },
+        "attribute": "debounce-time",
+        "reflect": false,
+        "defaultValue": "300"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'slim' | 'regular'",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      },
+      "restrict": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Express\u00E3o que define os caracteres permitidos na entrada."
+        },
+        "attribute": "restrict",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "distinctItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "changeValue",
+        "name": "changeValue",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 uma altera\u00E7\u00E3o no valor do campo."
+        },
+        "complexType": {
+          "original": "IDistinctValue",
+          "resolved": "IDistinctValue",
+          "references": {
+            "IDistinctValue": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clearInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para limpa o campo de entrada de pesquisa",
+          "tags": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo",
+          "tags": []
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco do campo",
+          "tags": []
+        }
+      },
+      "closeModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para fechar o modal",
+          "tags": []
+        }
+      },
+      "openModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para abrir o modal",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-distinct-search/subcomponents/input-distinct-search/input-distinct-search.css

@@ -0,0 +1,110 @@
+:host {
+    /*@doc Define o tamanho máximo do popover.*/
+  --max-height-popover: 180px;
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --scrollbar--width: var(--space--medium, 12px);
+}
+
+.divider {
+  margin: var(--space--extra-small, 3px) 0;
+  border: var(--border--small, 1px solid) var(--color--disable-secondary, #F2F5F8);
+}
+
+.new-value {
+  color: var(--text--primary, #626e82);
+  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);
+  font-size: var(--text--medium, 14px);
+  font-family: var(--font-pattern, Roboto);
+  cursor: pointer;
+  border-radius: var(--border--radius-small, 6px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: none;
+  background: none;
+  width: 100%;
+  display: flex;
+  min-height: max-content;
+}
+
+.new-value-selected {
+  background-color: var(--color--primary-300, #E2F4EF);
+}
+
+.new-value:hover {
+  background-color: var(--background--medium, #e0e0e0);
+}
+
+.popover-content {
+  margin: var(--space--small, 6px);
+  max-height: calc(var(--max-height-popover) - (2 * var(--space--small, 6px)));
+  display: flex;
+  flex-direction: column;
+}
+
+.list-container {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar--color-clicked) var(--scrollbar--color-background);
+  padding-right: var(--space--small, 6px);
+}
+
+.list-container::-webkit-scrollbar {
+  background-color: var(--scrollbar--color-background);
+  width: var(--scrollbar--width);
+  max-width: var(--scrollbar--width);
+  min-width: var(--scrollbar--width);
+}
+
+.list-container::-webkit-scrollbar-track {
+  background-color: var(--scrollbar--color-background);
+  border-radius: var(--scrollbar--border-radius);
+}
+
+.list-container::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar--color-default);
+  border-radius: var(--scrollbar--border-radius);
+}
+
+.list-container::-webkit-scrollbar-thumb:vertical:hover,
+.list-container::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--scrollbar--color-hover);
+}
+
+.list-container::-webkit-scrollbar-thumb:vertical:active,
+.list-container::-webkit-scrollbar-thumb:horizontal:active {
+  background-color: var(--scrollbar--color-clicked);
+}
+
+ez-popover {
+  --ez-popover__box--z-index: 15;
+}
+
+.space-error {
+  --ez-popover__margin: -19px 0 0 0;
+}
+
+ez-list {
+  --ez-list__item--margin: 0;
+}
+
+ez-text-input {
+  --ez-text-input__icon--margin: var(--space--xs, 12px);
+}
+
+.badge-primary {
+  --ez-badge--background-color: var(--color--primary-300);
+  --ez-badge--color: var(--color--primary);
+}