@sankhyalabs/ezui 0.0.0-feat-dev-KB-32089.0 → 0.0.0-feat-dev-KB-32137.2

package/dist/cjs/ez-card-item.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+
+const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
+
+const EzCardItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezClick = index.createEvent(this, "ezClick", 7);
+    this.item = undefined;
+  }
+  componentWillRender() {
+    this.createDetailList();
+  }
+  componentDidLoad() {
+    var _a, _b;
+    const dataInfo = { id: core.StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  createDetailList() {
+    var _a, _b, _c;
+    this._details = { detailsLeft: [], detailsRight: [] };
+    let cont = 0;
+    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
+      for (const attribute in this.item.details) {
+        cont < 3 ?
+          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
+          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
+        cont++;
+      }
+    }
+  }
+  buildDetailContent(detail) {
+    return index.h("div", { class: "card-item__detail" }, index.h("label", { class: "card-item__detail-label" }, detail.label), ": ", index.h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+  }
+  render() {
+    return (index.h(index.Host, null, this.item &&
+      index.h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, index.h("label", { class: "card-item__title" }, index.h("span", { class: "card-item__key", innerHTML: this.item.key }), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: "card-item__details" }, index.h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+        return this.buildDetailContent(detail);
+      })), index.h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+        return this.buildDetailContent(detail);
+      }))))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzCardItem.style = ezCardItemCss;
+
+exports.ez_card_item = EzCardItem;

package/dist/cjs/ez-collapsible-box.cjs.entry.js

@@ -8,7 +8,7 @@ const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--subtitle--font-size:var(--text--medium, 14px);--ez-collapsible-box--subtitle--font-family:var(--font-pattern, 'Roboto');--ez-collapsible-box--subtitle--font-weight:var(--text-weight--medium, 400);--ez-collapsible-box--subtitle--color:var(--text--primary);--ez-collapsible-box--subtitle--margin-bottom:var(--space--medium, 12px);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsable-box--bordered{border:var(--border--small);border-color:var(--color--strokes);border-radius:var(--border--radius-medium);padding:var(--space--xs)}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.subtitle-box__label{display:flex;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;font-family:var(--ez-collapsible-box--subtitle--font-family);font-size:var(--ez-collapsible-box--subtitle--font-size);font-weight:var(--ez-collapsible-box--subtitle--font-weight);color:var(--ez-collapsible-box--subtitle--color);margin-bottom:var(--ez-collapsible-box--subtitle--margin-bottom)}.subtitle-box__content{width:100%}.collapsible-box__label ez-icon{visibility:hidden;transition:2s all ease-in-out}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+const ezCollapsibleBoxCss = ":host {\n  /*@doc Define o tamanho da fonte do header.*/\n  --ez-collapsible-box--font-size: var(--title--medium, 14px);\n  /*@doc Define a família da fonte do header.*/\n  --ez-collapsible-box--font-family: var(--font-pattern, Arial);\n  /*@doc Define o peso da fonte do header.*/\n  --ez-collapsible-box--font-weight: var(--text-weight--large, 600);\n  /*@doc Define a cor da fonte do header.*/\n  --ez-collapsible-box--color: var(--title--primary);\n  /*@doc Define o tamanho da fonte do header.*/\n  --ez-collapsible-box--subtitle--font-size: var(--text--medium, 14px);\n  /*@doc Define a família da fonte do header.*/\n  --ez-collapsible-box--subtitle--font-family: var(--font-pattern, 'Roboto');\n  /*@doc Define o peso da fonte do header.*/\n  --ez-collapsible-box--subtitle--font-weight: var(--text-weight--medium, 400);\n  /*@doc Define a cor da fonte do header.*/\n  --ez-collapsible-box--subtitle--color: var(--text--primary);\n  /*@doc Define a cor da fonte do header.*/\n  --ez-collapsible-box--subtitle--margin-bottom: var(--space--medium, 12px);\n   /*@doc Define a cor do texto e do ícone quando o componente está focado.*/\n   --ez-collapsible-box--focus--color: var(--color--primary-600);\n  /*@doc Define a cor do chevron.*/\n  --ez-collapsible-box__icon--color: var(--ez-collapsible-box--color);\n  /*@doc Define o espaçamento superior ao header.*/\n  --ez-collapsible-box__header--padding-top: 0px;\n  /*@doc Define o espaçamento inferior ao header.*/\n  --ez-collapsible-box__header--padding-bottom: 0px;\n  /*@doc Define o espaçamento à direita do header.*/\n  --ez-collapsible-box__header--padding-right: 0px;\n  /*@doc Define o espaçamento à esquerda do header.*/\n  --ez-collapsible-box__header--padding-left: 0px;\n\n  /***************\n     host style  \n  ***************/\n  /*private*/\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  container-name: body;\n  container-type: inline-size;\n}\n\nez-icon {\n  --ez-icon--color: inherit;\n}\n\n.collapsible-box {\n  /*private*/\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n\n.collapsable-box--bordered {\n  border: var(--border--small);\n  border-color: var(--color--strokes);\n  border-radius: var(--border--radius-medium);\n  padding: var(--space--xs);\n}\n\n.collapsible-box__header {\n  /*private*/\n  display: flex;\n  box-sizing: border-box;\n  \n  /*public*/\n  padding-top: var(--ez-collapsible-box__header--padding-top);\n  padding-bottom: var(--ez-collapsible-box__header--padding-bottom);\n  padding-right: var(--ez-collapsible-box__header--padding-right);\n  padding-left: var(--ez-collapsible-box__header--padding-left);\n}\n\n.collapsible-box__title {\n  /*private*/\n  position: relative;\n  width: auto;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  outline: none;\n  border: none;\n  background-color: unset;\n  cursor: pointer;\n  padding: 0px;\n  text-align: left;\n\n  /*public*/\n  color: var(--ez-collapsible-box--color);\n  --ez-icon--color: var(--ez-collapsible-box__icon--color);\n  margin-bottom: var(--space--medium, 12px);\n}\n\n.collapsible-box__title:focus {\n  /*public*/\n  color: var(--ez-collapsible-box--focus--color);\n  --ez-icon--color: var(--ez-collapsible-box--focus--color);\n}\n\n.collapsible-box__label {\n  /*private*/\n  display: flex;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  margin-left: 6px;\n  gap: 6px;\n\n  /*public*/\n  font-family: var(--ez-collapsible-box--font-family);\n  font-size: var(--ez-collapsible-box--font-size);\n  font-weight: var(--ez-collapsible-box--font-weight);\n}\n\n.subtitle-box__label {\n  /*private*/\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  /*public*/\n  font-family: var(--ez-collapsible-box--subtitle--font-family);\n  font-size: var(--ez-collapsible-box--subtitle--font-size);\n  font-weight: var(--ez-collapsible-box--subtitle--font-weight);\n  color: var(--ez-collapsible-box--subtitle--color);\n  margin-bottom: var(--ez-collapsible-box--subtitle--margin-bottom);\n}\n\n.subtitle-box__content{\n  /*private*/\n  width: 100%;\n}\n\n.collapsible-box__label ez-icon {\n  visibility: hidden;\n  transition: 2s all ease-in-out;\n}\n\n.collapsible-box__label:hover ez-icon {\n  visibility: visible;\n}\n\n.collapsible-box__text-edit {\n  /*private*/\n  margin-left: 6px;\n}\n\n.collapsible-box__icon {\n  /*private*/\n  transform: rotate(90deg) translate(0px, 14%);\n\n  /*public*/\n  transition: transform var(--transition);\n}\n\n.collapsible-box__icon--collapsed {\n  /*private*/\n  transform: rotate(0deg) translate(-14%, 0px);\n}\n\n.collapsible-box__title--icon-right {\n  /*private*/\n  flex-direction: row-reverse;\n}\n\n.collapsible-box__title--icon-right .collapsible-box__icon {\n  /*private*/\n  transform: rotate(90deg) translate(0px, -14%);\n}\n\n.collapsible-box__title--icon-right .collapsible-box__icon--collapsed {\n  /*private*/\n  transform: rotate(0deg) translate(14%, 0px);\n}\n\n.collapsible-box__title--icon-right .collapsible-box__label {\n  /*private*/\n  margin-left: 0px;\n  margin-right: 6px;\n}\n\n.collapsible-box__title--left {\n  margin-right: auto;\n}\n\n.collapsible-box__title--right {\n  margin-left: auto;\n}\n\n.collapsible-box__title--center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.collapsible-box__title--stretch {\n  justify-content: space-between;\n  width: 100%;\n}\n\n.collapsible-box__title--no-margin {\n  margin-bottom: 0;\n}\n\n.collapsible-box__content {\n  /*private*/\n  display: flex;\n  flex-wrap: wrap;\n  \n  width: 100%;\n  height: 0px;\n  max-height: 0px;\n  opacity: 0;\n  overflow: hidden;\n\n  /*public*/\n  transition: all var(--transition, 0.5s);\n}\n\n.collapsible-box__content--show {\n  /*private*/\n  height: 100%;\n  max-height: none;\n  opacity: 1;\n  overflow: visible;\n\n  /*public*/\n  transition: all var(--transition, 0.5s);\n}\n\n.font--x-small {\n  /*private*/\n  font-size: 10px;\n}\n\n.font--small {\n  /*private*/\n  font-size: 12px;\n}\n\n.font--medium {\n  /*private*/\n  font-size: 14px;\n}\n\n.font--large {\n  /*private*/\n  font-size: 16px;\n}\n\n.font--x-large {\n  /*private*/\n  font-size: 20px;\n}\n\n@container body (min-width: 881px) {\n  .collapsible-box__content > * {\n    width: 25%;\n  }\n}\n\n@container body (min-width: 659px) and (max-width: 880px) {\n  .collapsible-box__content > * {\n    width: 33%;\n  }\n}\n\n@container body (min-width: 440px) and (max-width: 658px) {\n  .collapsible-box__content > * {\n    width: 50%;\n  }\n}\n\n@container body (max-width: 439px) {\n  .collapsible-box__content > * {\n    width: 100%;\n  }\n}";
 
 const EzCollapsibleBox = class {
   constructor(hostRef) {

package/dist/cjs/ez-combo-box.cjs.entry.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-require('./ApplicationUtils-c9d1205c.js');
+const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
+const constants = require('./constants-2714478b.js');
 
 const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box__list-min-width:64px;--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-combo-box__list-min-width);position:relative;width:100%}.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, 0px 0px 16px 0px #000);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)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
@@ -20,6 +21,7 @@ const EzComboBox = class {
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
+    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._lookupMode = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
@@ -32,6 +34,7 @@ const EzComboBox = class {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
+    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -55,7 +58,7 @@ const EzComboBox = class {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (typeof newValue === "string") {
+        if (this.searchMode && typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -218,7 +221,7 @@ const EzComboBox = class {
   }
   updateVisibleOptions() {
     let opts = this._source || [];
-    if (this._criteria) {
+    if (!this.searchMode && this._criteria) {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
@@ -293,7 +296,7 @@ const EzComboBox = class {
     return this._floatingID !== undefined && core.FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (!this.isOptionsVisible()) {
+    if (this.searchMode && !this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -316,6 +319,9 @@ const EzComboBox = class {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -334,6 +340,7 @@ const EzComboBox = class {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
+          this.controlEmptySearch();
         }
       }
       else {
@@ -341,6 +348,10 @@ const EzComboBox = class {
       }
     }
   }
+  clearSource() {
+    this._source = [];
+    this.updateVisibleOptions();
+  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -352,6 +363,10 @@ const EzComboBox = class {
     else {
       this.resetOptions();
     }
+    if (this.searchMode) {
+      this._visibleOptions = [];
+      this.clearSource();
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -370,7 +385,7 @@ const EzComboBox = class {
     }
     else {
       window.setTimeout(() => {
-        this.setInputValue(false);
+        this.setInputValue();
       }, this._deboucingTime);
     }
     this.resetOptions();
@@ -387,6 +402,93 @@ const EzComboBox = class {
   clearSearch() {
     this.value = null;
   }
+  controlListWithOnlyOne() {
+    var _a;
+    if (this.searchMode) {
+      const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
+      if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
+        this.selectOption(source[0]);
+      }
+    }
+  }
+  controlEmptySearch() {
+    var _a;
+    if (this.searchMode) {
+      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+        this.clearSearch();
+        ApplicationUtils.ApplicationUtils.info(this._textEmptyList);
+      }
+      else {
+        this.controlListWithOnlyOne();
+      }
+    }
+  }
+  validateDescriptionValue() {
+    if (!this.searchMode || core.StringUtils.isEmpty(this.value)) {
+      return;
+    }
+    let value = this.value;
+    if (typeof value === "object") {
+      return;
+    }
+    if (core.StringUtils.isEmpty(value)) {
+      return;
+    }
+    this.loadDescriptionValue(value);
+  }
+  async loadDescriptionValue(argument) {
+    var _a, _b;
+    if (argument == undefined) {
+      return;
+    }
+    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.loadOptionValue(argument);
+      return;
+    }
+    const searchArgument = {
+      mode: SearchMode.PREDICTIVE,
+      argument
+    };
+    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
+    if (source == undefined) {
+      return;
+    }
+    if (source instanceof Promise) {
+      source.then((result) => {
+        this.setDescriptionValue(result);
+      });
+    }
+    else {
+      this.setDescriptionValue(source);
+    }
+  }
+  setDescriptionValue(source) {
+    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
+    if (value == undefined || !Object.keys(value).length) {
+      this.showNoResultMessage();
+      return;
+    }
+    this._lookupMode = true;
+    this.value = value;
+  }
+  loadOptionValue(argument) {
+    var _a;
+    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
+    if (source != undefined) {
+      this.selectOption(source);
+    }
+    else {
+      this.showNoResultMessage();
+    }
+  }
+  async showNoResultMessage() {
+    this.clearSearch();
+    ApplicationUtils.ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
+  }
+  getFieldLabel() {
+    var _a;
+    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(constants.REQUIRED_INFO, "").toUpperCase();
+  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -412,7 +514,12 @@ const EzComboBox = class {
         });
       }
     }
-    this.loadOptions(SearchMode.PRELOAD);
+    if (this.searchMode) {
+      this.updateSource([]);
+    }
+    else {
+      this.loadOptions(SearchMode.PRELOAD);
+    }
   }
   componentDidRender() {
     var _a;
@@ -422,6 +529,7 @@ const EzComboBox = class {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
+    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -441,7 +549,13 @@ const EzComboBox = class {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.showOptions();
+    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
+  }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -458,12 +572,36 @@ const EzComboBox = class {
     }
     this._criteria = argument;
     if (argument) {
-      this.updateVisibleOptions();
-      this.showOptions();
+      if (this.searchMode) {
+        this._showLoading = false;
+        this.clearSource();
+        const enoughChars = argument.length >= this.limitCharsToSearch;
+        const argumentNumber = this.buildNumberArgument(argument);
+        if (enoughChars || !isNaN(argumentNumber)) {
+          this._showLoading = true;
+          this._changeDeboucingTimeout = window.setTimeout(() => {
+            this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
+          }, this._deboucingTime);
+          this.showOptions();
+        }
+        else {
+          this.hideOptions();
+        }
+      }
+      else {
+        this.updateVisibleOptions();
+        this.showOptions();
+      }
     }
     else {
       this.hideOptions();
-      this.updateVisibleOptions();
+      if (this.searchMode) {
+        this._showLoading = false;
+        this.clearSource();
+      }
+      else {
+        this.updateVisibleOptions();
+      }
     }
   }
   clearDeboucingTimeout() {
@@ -473,7 +611,9 @@ const EzComboBox = class {
     }
   }
   onTextInputClickHandler() {
-    this.showOptions();
+    if (!this.searchMode) {
+      this.showOptions();
+    }
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -505,6 +645,7 @@ const EzComboBox = class {
         break;
       case "Tab":
         this._tabPressed = true;
+        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -521,8 +662,11 @@ const EzComboBox = class {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
+    var _a;
     core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.h("ez-icon", { iconName: "chevron-down" }))), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.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)
+      ? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
+      : undefined), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
       && index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
       && index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.showOptionValue

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -111,9 +111,6 @@ const EzDateInput = class {
     this._calendar.hide();
   }
   handleBlur() {
-    if (!this._changePending) {
-      return;
-    }
     try {
       const strValue = this._textInput.value;
       const newValue = core.DateUtils.strToDate(strValue);

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -163,9 +163,6 @@ const EzDateTimeInput = class {
   }
   handleBlur() {
     var _a, _b;
-    if (!this._changePending) {
-      return;
-    }
     try {
       const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
       const newValue = this.getParsedDateTime();

package/dist/cjs/ez-filter-input_2.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezSearching = index.createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    this._textInput.setFocus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+const multiSelectionBoxMessageCss = ".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";
+
+const MultiSelectionBoxMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.message = undefined;
+  }
+  render() {
+    return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
+  }
+};
+MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
+
+exports.ez_filter_input = EzFilterInput;
+exports.multi_selection_box_message = MultiSelectionBoxMessage;