@sankhyalabs/ezui 3.0.1 → 3.0.2

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

@@ -1,5 +1,5 @@
 import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
-import { Component, h, Host, Prop, State, Event, Element, Watch, Method } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { ApplicationUtils, CSSVarsUtils } from "../../utils";
 export class EzComboBox {
   constructor() {
@@ -9,35 +9,23 @@ export class EzComboBox {
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
+    this._preSelection = undefined;
+    this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
-    /**
-     * Se false o usuário não pode interagir com o campo.
-     */
+    this._criteria = undefined;
+    this.value = undefined;
+    this.label = undefined;
     this.enabled = true;
-    /**
-     * Se true a opção selecionada exibe o `value` junto com `label`.
-     */
+    this.options = undefined;
+    this.errorMessage = undefined;
+    this.searchMode = undefined;
     this.showSelectedValue = false;
-    /**
-     * Se true cada opção na lista exibe o `value` junto com `label`.
-     */
     this.showOptionValue = false;
-    /**
-     * Se true desabilita a digitação dentro do componente.
-     */
     this.suppressSearch = false;
-    /**
-     * Se true remove a opção vazia da lista.
-     */
+    this.optionLoader = undefined;
     this.suppressEmptyOption = false;
-    /**
-     * Se false deixa de exibir a mensagem de erro dentro do campo.
-     */
     this.canShowError = true;
-    /**
-     * Define o tamanho do campo.
-     */
     this.mode = "regular";
   }
   observeErrorMessage() {
@@ -151,11 +139,9 @@ export class EzComboBox {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(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));
+    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(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));
   }
   showOptions() {
     if (!this.enabled) {
@@ -446,369 +432,370 @@ export class EzComboBox {
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null,
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode },
-        h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() },
-          h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })),
-        this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
-          ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() },
-            h("ez-icon", { iconName: "close" }))
-          : undefined),
-      h("section", { class: "list-container", ref: elem => this._listContainer = elem },
-        h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem },
-          h("div", { class: "list-options", ref: elem => this._optionsList = elem },
-            this._visibleOptions.length === 0
-              && h("div", { class: "message" },
-                !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList),
-                this._showLoading && h("div", { class: "message__loading" })),
-            this.showOptionValue
-              ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
-              : undefined,
-            this._visibleOptions.length > 0 && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+      ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
+      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
+      && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
+      ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
+      : undefined, this._visibleOptions.length > 0 && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-combo-box.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-combo-box.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "IOption | string",
-        "resolved": "IOption | string",
-        "references": {
-          "IOption": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-combo-box.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-combo-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IOption | string",
+          "resolved": "IOption | string",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o valor do campo."
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
       },
-      "attribute": "enabled",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "options": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<IOption>",
-        "resolved": "IOption[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "IOption": {
-            "location": "local"
+      "options": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<IOption>",
+          "resolved": "IOption[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IOption": {
+              "location": "local"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array com as op\u00E7\u00F5es do ez-combo-box. Os elementos devem obedecer\no formato: `{value: string, label: string}`."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Array com as op\u00E7\u00F5es do ez-combo-box. Os elementos devem obedecer\no formato: `{value: string, label: string}`."
-      }
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": true,
-      "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": true
-    },
-    "searchMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true ativa o modo pesquisa do ez-combo-box."
-      },
-      "attribute": "search-mode",
-      "reflect": false
-    },
-    "showSelectedValue": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true a op\u00E7\u00E3o selecionada exibe o `value` junto com `label`."
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "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": true
       },
-      "attribute": "show-selected-value",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showOptionValue": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "searchMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true ativa o modo pesquisa do ez-combo-box."
+        },
+        "attribute": "search-mode",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true cada op\u00E7\u00E3o na lista exibe o `value` junto com `label`."
+      "showSelectedValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true a op\u00E7\u00E3o selecionada exibe o `value` junto com `label`."
+        },
+        "attribute": "show-selected-value",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "show-option-value",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "suppressSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true cada op\u00E7\u00E3o na lista exibe o `value` junto com `label`."
+        },
+        "attribute": "show-option-value",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true desabilita a digita\u00E7\u00E3o dentro do componente."
+      "suppressSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true desabilita a digita\u00E7\u00E3o dentro do componente."
+        },
+        "attribute": "suppress-search",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "suppress-search",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "optionLoader": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption",
-        "resolved": "(argument: ISearchArgument) => IOption | IOption[] | Promise<IOption[]>",
-        "references": {
-          "ISearchArgument": {
-            "location": "local"
-          },
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          },
-          "IOption": {
-            "location": "local"
+      "optionLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption",
+          "resolved": "(argument: ISearchArgument) => IOption | IOption[] | Promise<IOption[]>",
+          "references": {
+            "ISearchArgument": {
+              "location": "local"
+            },
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "IOption": {
+              "location": "local"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Carrega as op\u00E7\u00F5es dinamicamente."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Carrega as op\u00E7\u00F5es dinamicamente."
-      }
-    },
-    "suppressEmptyOption": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true remove a op\u00E7\u00E3o vazia da lista."
-      },
-      "attribute": "suppress-empty-option",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "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": true,
-      "defaultValue": "true"
-    },
-    "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": true,
-      "defaultValue": "\"regular\""
-    }
-  }; }
-  static get states() { return {
-    "_preSelection": {},
-    "_visibleOptions": {},
-    "_startLoading": {},
-    "_showLoading": {},
-    "_criteria": {}
-  }; }
-  static get events() { return [{
-      "method": "ezChange",
-      "name": "ezChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+      "suppressEmptyOption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true remove a op\u00E7\u00E3o vazia da lista."
+        },
+        "attribute": "suppress-empty-option",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "IOption",
-        "resolved": "IOption",
-        "references": {
-          "IOption": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
       },
-      "docs": {
-        "text": "Aplica o foco no campo.",
-        "tags": []
+      "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": true,
+        "defaultValue": "\"regular\""
       }
-    },
-    "setBlur": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "_preSelection": {},
+      "_visibleOptions": {},
+      "_startLoading": {},
+      "_showLoading": {},
+      "_criteria": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Remove o foco do campo.",
-        "tags": []
-      }
-    },
-    "isInvalid": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
-        "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": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "errorMessage",
-      "methodName": "observeErrorMessage"
-    }, {
-      "propName": "value",
-      "methodName": "observeValue"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
 }
 var SearchMode;
 (function (SearchMode) {