@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.2

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

@@ -0,0 +1,221 @@
+: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);
+}
+
+.loading__container {
+  display: flex;
+  flex-direction: column;
+  margin: var(--space--small);
+}
+
+.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-plus/subcomponent/ez-search-result-list/ez-classic-search-result-list.js

@@ -0,0 +1,298 @@
+import { Host, h } from '@stencil/core';
+import { StringUtils } from '@sankhyalabs/core';
+import initI18n from '../../../../utils/i18n';
+export class EzClassicSearchResultList {
+  constructor() {
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this.showLoading = undefined;
+    this.visibleOptions = [];
+    this.value = undefined;
+    this.showOptionValue = true;
+    this._preSelection = undefined;
+  }
+  observerVisivleOptions(newValue) {
+    if (newValue.length) {
+      this.preSelectItemByIndex(0);
+    }
+  }
+  async nextOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this.visibleOptions.length - 1);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  async previousOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  preSelectItemByIndex(newIndex) {
+    this._preSelection = newIndex;
+    const option = this.visibleOptions[newIndex];
+    this.scrollToOption(option);
+  }
+  selectOption(newOption) {
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: newOption === null || newOption === void 0 ? void 0 : newOption.value, label: newOption === null || newOption === void 0 ? void 0 : newOption.label });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    this.changeValue.emit(newOptionsFormatted);
+  }
+  removeHighLight(text) {
+    if (!text || typeof text !== 'string') {
+      return text;
+    }
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    return text.replace(startHighlight, '').replace(endHighlight, '');
+  }
+  createAndSelectOption(detail) {
+    let { key, title } = detail;
+    key = String(key !== null && key !== void 0 ? key : "");
+    title = StringUtils.decodeHtmlEntities(title);
+    const option = {
+      value: this.removeHighLight(key),
+      label: this.removeHighLight(title)
+    };
+    this.selectOption(option);
+  }
+  scrollToOption(opt) {
+    if (!(opt === null || opt === void 0 ? void 0 : opt.value) || !this._optionsList)
+      return;
+    window.requestAnimationFrame(() => {
+      var _a;
+      const currentValue = String((_a = opt === null || opt === void 0 ? void 0 : opt.value) !== null && _a !== void 0 ? _a : "");
+      const liElem = currentValue
+        ? this._optionsList.querySelector(`div#item_${currentValue.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
+  }
+  buildItem(opt, index) {
+    var _a;
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: String((_a = opt.presentationValue) !== null && _a !== void 0 ? _a : ""),
+      title: opt.presentationLabel,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createAndSelectOption(card), onMouseOver: () => { this._preSelection = index; } }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
+  async selectCurrentItem() {
+    this.selectOption(this.visibleOptions[this._preSelection]);
+  }
+  async cancelSelection() {
+    this.cancelPreselection();
+  }
+  cancelPreselection() {
+    this._preSelection = undefined;
+  }
+  canShowListOptions() {
+    return !this.showLoading && this.visibleOptions.length > 0;
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
+  render() {
+    return (h(Host, null, 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.i18n("ez-classic-search-plus.emptyList"))), this.showLoading && (h("div", { class: "loading__container" }, h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+  }
+  static get is() { return "ez-classic-search-result-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-classic-search-result-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-classic-search-result-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-plus"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IOption | string",
+          "resolved": "IOption | string",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../../ez-classic-search-plus"
+            }
+          }
+        },
+        "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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_preSelection": {}
+    };
+  }
+  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-plus"
+            }
+          }
+        }
+      }];
+  }
+  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": []
+        }
+      },
+      "selectCurrentItem": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "cancelSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "visibleOptions",
+        "methodName": "observerVisivleOptions"
+      }];
+  }
+}

package/dist/collection/components/ez-classic-text-area/ez-classic-text-area.css

@@ -8,6 +8,7 @@
   color: var(--color--ocean-green-1000, #00281D);
   border: none;
   padding: 0;
+  width: 100%;
 
   /* public */
   --ez-classic-text-area--label-color: var(--color--ocean-green-1000, #00281D);

package/dist/collection/components/ez-classic-text-area/ez-classic-text-area.js

@@ -7,6 +7,7 @@ export class EzClassicTextArea {
     this.placeholder = '';
     this.value = '';
     this.helpText = undefined;
+    this.errorMessage = undefined;
     this.state = "default";
     this.enabled = true;
     this.readonly = false;
@@ -34,6 +35,13 @@ export class EzClassicTextArea {
   async setBlur() {
     this._textAreaElem.blur();
   }
+  async observeErrorMessage(newValue) {
+    if (newValue && newValue.trim() !== '') {
+      this.state = "error";
+      return;
+    }
+    this.state = "default";
+  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -66,7 +74,7 @@ export class EzClassicTextArea {
     this.addInfoId();
   }
   render() {
-    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (h("span", { id: "textArea_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
   }
   static get is() { return "ez-classic-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -171,6 +179,23 @@ export class EzClassicTextArea {
         "attribute": "help-text",
         "reflect": false
       },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "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
+      },
       "state": {
         "type": "string",
         "mutable": false,
@@ -476,4 +501,10 @@ export class EzClassicTextArea {
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }];
+  }
 }

package/dist/collection/components/ez-classic-time-input/ez-classic-time-input.css

@@ -0,0 +1,14 @@
+:host {
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
+}
+
+.time__input {
+  height: 100%;
+}