@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-pesquisa/snk-pesquisa.css

@@ -0,0 +1,151 @@
+:host {
+  /* general */
+  /*@doc Define o tamanho da fonte do componente.*/
+  --snk-pesquisa--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do componente.*/
+  --snk-pesquisa--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do componente.*/
+  --snk-pesquisa--font-weight: var(--text-weight--medium, 400);
+  
+  /* records */
+  /*@doc Define a cor da fonte do indicador de registros do componente.*/
+  --snk-pesquisa__records--color: var(--text--primary, #626e82);
+  /*@doc Define o espaçamento vertical do indicador de registros do componente.*/
+  --snk-pesquisa__records--padding-vertical: var(--space--medium, 12px);
+
+  /* content */
+  /*@doc Define o espaçamento da direita no conteúdo do componente.*/
+  --snk-pesquisa__content--padding-right: var(--space--small, 6px);
+
+  /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
+  --snk-pesquisa__btn--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
+  --snk-pesquisa__btn-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
+  --snk-pesquisa__btn-hover--color: var(--color--primary, #4e4e4e);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --snk-pesquisa__scrollbar--width: var(--space--medium, 12px);
+
+  max-height: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.snk-pesquisa {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.snk-pesquisa__input {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 4px;
+  padding-right: 4px;
+}
+
+.snk-pesquisa__input ez-icon {
+  --ez-icon--color: inherit;
+
+  /*public*/
+  font-weight: var(--text-weight--large, 600);
+}
+
+.snk-pesquisa__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--snk-pesquisa__scrollbar--color-clicked) var(--snk-pesquisa__scrollbar--color-background);
+  padding-right: var(--snk-pesquisa__content--padding-right);
+}
+
+.snk-pesquisa__content::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--snk-pesquisa__scrollbar--color-background);
+  width: var(--snk-pesquisa__scrollbar--width);
+  max-width: var(--snk-pesquisa__scrollbar--width);
+  min-width: var(--snk-pesquisa__scrollbar--width);
+}
+
+.snk-pesquisa__content::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--snk-pesquisa__scrollbar--color-background);
+  border-radius: var(--snk-pesquisa__scrollbar--border-radius);
+}
+
+.snk-pesquisa__content::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--snk-pesquisa__scrollbar--color-default);
+  border-radius: var(--snk-pesquisa__scrollbar--border-radius);
+}
+
+.snk-pesquisa__content::-webkit-scrollbar-thumb:vertical:hover,
+.snk-pesquisa__content::-webkit-scrollbar-thumb:horizontal:hover {
+    /*public*/
+    background-color: var(--snk-pesquisa__scrollbar--color-hover);
+}
+
+.snk-pesquisa__content::-webkit-scrollbar-thumb:vertical:active,
+.snk-pesquisa__content::-webkit-scrollbar-thumb:horizontal:active {
+    /*public*/
+    background-color: var(--snk-pesquisa__scrollbar--color-clicked);
+}
+
+.snk-pesquisa__records {
+  /*public*/
+  font-family: var(--snk-pesquisa--font-family);
+  font-weight: var(--snk-pesquisa--font-weight);
+  font-size: var(--snk-pesquisa--font-size);
+  color: var(--snk-pesquisa__records--color);
+  padding-bottom: var(--snk-pesquisa__records--padding-vertical);
+  padding-top: var(--snk-pesquisa__records--padding-vertical);
+}
+
+.snk-pesquisa__btn {
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn--color);
+}
+
+.snk-pesquisa__btn:disabled {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:disabled:hover {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:hover {
+  /*public*/
+  color: var(--snk-pesquisa__btn-hover--color);
+}

package/dist/collection/components/snk-pesquisa/snk-pesquisa.js

@@ -0,0 +1,394 @@
+import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+export class SnkPesquisa {
+  constructor() {
+    this._mdByName = {};
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this._specialCharsRegex = /[[.\-\$\+\*,_\&\(\)%\/\\#@!:\|\=\'\"]/gmi;
+    this._charsWithAccentuation = "ÁÉÍÓÚ_ÃÕ_ÂÊÎÔÛ_ÀÈÌÒÙ_Ü_Ç_áéíóú_ãõ_âêîôû_àèìòù_ü_ç";
+    this._charsWithoutAccentuation = "AEIOU_AO_AEIOU_AEIOU_U_C_aeiou_ao_aeiou_aeiou_u_c";
+    this._changeDeboucingTimeout = null;
+    this._limitCharsToSearch = 3;
+    this._deboucingTime = 450;
+    this._itemList = undefined;
+    this._startLoading = false;
+    this.searchLoader = undefined;
+    this.selectItem = undefined;
+    this.argument = undefined;
+  }
+  observeArgument() {
+    if (this._textInput) {
+      this._textInput.value = this.argument;
+    }
+  }
+  clearSearch() {
+    this.argument = "";
+    this._itemList = undefined;
+  }
+  buildDetails(fields, item) {
+    let details = {};
+    for (let index = 0; (index < fields.length); index++) {
+      const field = fields[index];
+      const itemValue = item[field.fieldName];
+      const optionValue = field.options ? field.options[itemValue] || itemValue : itemValue;
+      details[field.description] = this.highlightValue(item['__matchFields'], optionValue, fields, true);
+    }
+    return details;
+  }
+  buildFirstFields(matchFields, fields, qtyFields = 6) {
+    if (matchFields && Array.isArray(matchFields)) {
+      matchFields.forEach((matchField) => {
+        let fieldMD = this.removeReference(fields, this._mdByName[matchField]);
+        if (fieldMD) {
+          fields.unshift(fieldMD);
+        }
+      });
+    }
+    fields = fields.slice(0, qtyFields);
+    return fields;
+  }
+  doSearch(argument) {
+    if (this.searchLoader && typeof this.searchLoader === "function") {
+      this._startLoading = true;
+      this.searchLoader(argument)
+        .then((resp) => {
+        this._startLoading = false;
+        if (resp) {
+          resp = ObjectUtils.stringToObject(resp.json.$);
+          let descriptionField = resp.descriptionField;
+          let pkField = resp.pkField;
+          if (pkField) {
+            let newItemList = [];
+            resp.data.forEach((item) => {
+              var _a;
+              let fieldsMetadata = this.filterFieldsMetadata(resp, item);
+              let fields = this.buildFirstFields(item['__matchFields'], fieldsMetadata);
+              let exibitionItem = {
+                key: this.highlightValue(item['__matchFields'], (_a = item[pkField]) === null || _a === void 0 ? void 0 : _a.toString(), fields, true),
+                title: descriptionField ? this.highlightValue(item['__matchFields'], item[descriptionField], fields, true) : "",
+                details: this.buildDetails(fields, item)
+              };
+              newItemList.push(exibitionItem);
+            });
+            this._itemList = newItemList;
+          }
+        }
+      }).catch((error) => {
+        this._startLoading = false;
+        this._itemList = [];
+        console.warn(error);
+      });
+    }
+  }
+  filterFieldsMetadata(resp, item) {
+    let fieldsMetadata = resp.fieldsMetadata.filter((field) => {
+      let accept = !StringUtils.isEmpty(item[field.fieldName]) &&
+        field.visible !== false &&
+        field.type !== 'B' &&
+        resp.pkField !== field.fieldName &&
+        resp.descriptionField !== field.fieldName &&
+        (field.isPrimaryKey || !field.isLinkField) &&
+        !(field.type === 'S' && field.presentationType === 'H');
+      if (accept) {
+        this._mdByName[field.fieldName] = field;
+      }
+      //Condição que trata o problema de trazer imagem no entityCard na pesquisa de registros
+      if (typeof item[field.fieldName] === 'string' && (item[field.fieldName].indexOf('<img') > -1 || item[field.fieldName].indexOf('<svg') > -1)) {
+        return false;
+      }
+      return accept;
+    });
+    return fieldsMetadata;
+  }
+  removeAtIndex(array, index) {
+    if (index >= 0 && index < array.length) {
+      return array.splice(index, 1)[0];
+    }
+  }
+  removeReference(array, obj) {
+    let index = this.indexOf(array, obj);
+    return this.removeAtIndex(array, index);
+  }
+  indexOf(arr, obj) {
+    let index = -1;
+    if (Array.isArray(arr)) {
+      this.find(arr, (item, i) => {
+        index = i;
+        return this.equals(obj, item);
+      });
+    }
+    return index;
+  }
+  equals(obj1, obj2) {
+    return ObjectUtils.objectToString(obj1) === ObjectUtils.objectToString(obj2);
+  }
+  find(arr, checkerFn) {
+    if (arr) {
+      for (let i = 0, length = arr.length; i < length; i++) {
+        if (checkerFn(arr[i], i, arr)) {
+          return arr[i];
+        }
+      }
+    }
+    else {
+      return undefined;
+    }
+  }
+  /**
+    matchFields-> array __matchFields do data
+    value -> termo que está sendo pesquisao
+    fieldMD -> metadados retornados pelo serviço de pesquisa
+    forceMatch -> força a pesquisa mesmo que não tenha __matchFields no metadado
+  */
+  highlightValue(matchFields, value, fieldMD, forceMatch) {
+    let valueAux = this.replaceHtmlEntities(value);
+    if (this.argument && (forceMatch || this.isIn(matchFields, fieldMD.fieldName))) {
+      const argumentNumber = this.getArgumentNumber();
+      let replacements = (isNaN(argumentNumber) ? this.argument : argumentNumber.toString()).split(/%|,|\s+/);
+      let lastMatchIndex = 0;
+      let cleanText = this.replaceAccentuatedChars(valueAux);
+      replacements.forEach((r) => {
+        if (r) {
+          r = this.replaceAccentuatedChars(r);
+          let specialChars = this.getSpecialCharacters(r);
+          if (specialChars != undefined && specialChars.length > 0) {
+            r = this.removeSpecialCharacters(r);
+          }
+          if (fieldMD.mask || fieldMD.uiType === 'CGC_CPF' || fieldMD.uiType === 'Phone') {
+            //Fazemos isso para descondirerar os caracteres especiais de formatação da string
+            r = r.split('').join('\\.?\\-?\\/?\\(?\\)?');
+          }
+          let regex = new RegExp(r, "ig");
+          regex.lastIndex = lastMatchIndex;
+          let match = regex.exec(cleanText);
+          if (match && match.length > 0) {
+            lastMatchIndex = match.index;
+            let sizeMatch = match[0].length;
+            let txtToColor = valueAux.substring(lastMatchIndex, lastMatchIndex + sizeMatch);
+            let txtColored = (txtToColor === null || txtToColor === void 0 ? void 0 : txtToColor.trim()) ? this._startHighlightTag + txtToColor + this._endHighlightTag : '';
+            let start = valueAux.substring(0, lastMatchIndex);
+            let end = valueAux.substring(lastMatchIndex + sizeMatch);
+            valueAux = start + txtColored + end;
+            lastMatchIndex = lastMatchIndex + txtColored.length;
+            cleanText = this.replaceAccentuatedChars(valueAux);
+          }
+        }
+      });
+    }
+    return valueAux;
+  }
+  replaceHtmlEntities(source) {
+    if (source == undefined) {
+      return source;
+    }
+    return String(source)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+  replaceAccentuatedChars(source) {
+    if (source == undefined) {
+      return source;
+    }
+    const replaceList = ['&amp;', '&lt;', '&gt;', '&quot;'];
+    const sourceAux = this.replaceToSpace(source, replaceList);
+    return sourceAux.replace(/[^\w ]/g, (char) => {
+      let index = this._charsWithAccentuation.indexOf(char);
+      if (index > -1) {
+        char = this._charsWithoutAccentuation.charAt(index);
+      }
+      return char || '';
+    });
+  }
+  replaceToSpace(source, replaceList = []) {
+    if (source == undefined) {
+      return source;
+    }
+    replaceList.forEach((word) => {
+      const wordAux = new RegExp(word, 'g');
+      let whiteSpace = '';
+      for (let i = 0; i < word.length; i++) {
+        whiteSpace += ' ';
+      }
+      source = String(source).replace(wordAux, whiteSpace);
+    });
+    return source;
+  }
+  isIn(arr, obj) {
+    return this.indexOf(arr, obj) > -1;
+  }
+  getSpecialCharacters(str) {
+    let match;
+    let charList = [];
+    while ((match = this._specialCharsRegex.exec(str))) {
+      charList.push(str[match.index]);
+    }
+    return charList;
+  }
+  removeSpecialCharacters(str) {
+    let specialChars = this.getSpecialCharacters(str);
+    specialChars.forEach((ch) => {
+      str = this.replaceAll(str, ch, '');
+    });
+    return str;
+  }
+  replaceAll(str, strFrom, strTo) {
+    let pos = (str != undefined ? str : '').indexOf(strFrom);
+    while (pos > -1) {
+      str = str.replace(strFrom, strTo);
+      pos = str.indexOf(strFrom);
+    }
+    return (str);
+  }
+  getArgumentNumber() {
+    return Number(this.argument || undefined);
+  }
+  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.selectItem(option);
+  }
+  onChangeValue(event) {
+    this.clearDeboucingTimeout();
+    if (this._startLoading) {
+      this._changeDeboucingTimeout = setTimeout(() => {
+        this.onChangeValue(event);
+      }, this._deboucingTime);
+      return;
+    }
+    this.argument = (event.detail || "").trim();
+    const argumentNumber = this.getArgumentNumber();
+    if (this.argument && (!isNaN(argumentNumber) || this.argument.length >= this._limitCharsToSearch)) {
+      this._changeDeboucingTimeout = setTimeout(() => {
+        this.doSearch(isNaN(argumentNumber) ? this.argument : argumentNumber.toString());
+      }, this._deboucingTime);
+    }
+    else {
+      this._itemList = undefined;
+    }
+  }
+  clearDeboucingTimeout() {
+    if (this._changeDeboucingTimeout) {
+      clearTimeout(this._changeDeboucingTimeout);
+      this._changeDeboucingTimeout = undefined;
+    }
+  }
+  onClickSearch() {
+    this.doSearch((this.argument || "").trim());
+  }
+  getMessageView() {
+    return this._startLoading
+      ? 'Aguarde, buscando registros...'
+      : this._itemList
+        ? this._itemList.length >= 1
+          ? `${this._itemList.length} ${this._itemList.length > 1
+            ? 'registros encontrados'
+            : 'registro encontrado'}`
+          : 'Nenhum registro encontrado'
+        : 'Os resultados de sua pesquisa aparecerão aqui...';
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument, "data-element-id": "searchInput" }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
+      ? h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
+      : undefined), h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })), h("label", { class: "snk-pesquisa__records" }, this.getMessageView()), h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {
+      return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
+    })))));
+  }
+  static get is() { return "snk-pesquisa"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-pesquisa.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-pesquisa.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "searchLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(text: string) => Promise<any>",
+          "resolved": "(text: string) => Promise<any>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o respons\u00E1vel em carregar os itens do componente snk-pesquisa."
+        }
+      },
+      "selectItem": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(option: IOption) => void",
+          "resolved": "(option: IOption) => void",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-combo-box/ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o disparada ao selecionar um item."
+        }
+      },
+      "argument": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Argumentos que ser\u00E3o usados ao chamar a fun\u00E7\u00E3o searchLoader."
+        },
+        "attribute": "argument",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_itemList": {},
+      "_startLoading": {}
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "argument",
+        "methodName": "observeArgument"
+      }];
+  }
+}

package/dist/collection/components/snk-print-selector/snk-print-selector.css

@@ -0,0 +1,35 @@
+:host {
+    max-height: 100%;
+}
+
+ez-modal-container {
+    --ez-modal-container-overflow-y: hidden;
+}
+
+ez-list {
+    height: 100%;
+}
+
+.list-scroll {
+    height: 100%;
+    overflow-y: auto;
+    padding-right: var(--snk-grid-config__main--padding-right);
+}
+
+.with-header {
+    max-height: calc(100% - 125px);
+}
+
+.without-header {
+    max-height: calc(100% - 85px);
+}
+
+.list-scroll::-webkit-scrollbar {
+    width: var(--space--small);
+    min-width: var(--space--small);
+    max-width: var(--space--small);
+}
+
+.hidden {
+    display: none;
+}