@sankhyalabs/ezui 5.20.0-dev.1 → 5.20.0-dev.10

package/dist/ezui/p-baf80b13.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s}from"./p-23a36bb6.js";import{UserInterface as e}from"@sankhyalabs/core";const o=window,h=new CustomEvent("onSubmitFilter",{detail:{showToast:!0}}),l=class{constructor(s){t(this,s),this.applyFilterColumnOptions=i(this,"applyFilterColumnOptions",7),this.TOP_POSITION="65",this.TOP_POSITION_HEADER_HIDDEN="18",this.TOP_POSITION_NO_TASKBAR="32",this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN="20",this.DEFAULT_HEIGHT=430,this.FIX_MARGIN=60,this.FILTER_COLUMN_WIDTH=330,this.opened=!0,this.columnName=void 0,this.columnLabel=void 0,this.gridHeaderHidden=!1,this.noHeaderTaskBar=!1,this.dataSource=void 0,this.dataUnit=void 0,this.options=void 0,this.selectedItems=void 0,this.fieldDescriptor=void 0,this.useOptions=!1,this.isTextSearch=!1}async hide(){await this.ezPopoverElement.hide(),await this.clearConfigs()}async show(t){this.canShow(t)&&(await this.hide(),this.fieldDescriptor=this.dataUnit.getField(t.columnName),this.buildIsTextSearch(),this.columnName=t.columnName,this.columnLabel=t.columnLabel,await this.setOptions(t.filteredOptions),await this.ezPopoverElement.show(this.calcTopPosition(),this.calculateLeftPosition(t)))}calculateLeftPosition({leftPosition:t,fromIcon:i}){const s=this.calcFilterColumnLeftPosition(t);if(!i)return`${s}px`;const e=s+16-this.ezPopoverElement.getBoundingClientRect().left;return`${e>0?e:0}px`}calcFilterColumnLeftPosition(t){var i,s;const e=null===(i=this.ezPopoverElement.closest("ez-grid").getBoundingClientRect())||void 0===i?void 0:i.right,o=null===(s=this.ezPopoverElement.getBoundingClientRect())||void 0===s?void 0:s.left,h=e-(this.FILTER_COLUMN_WIDTH+o),l=t-(this.FIX_MARGIN+o);return l>h?h:l}buildIsTextSearch(){var t,i;const s=null!==(i=null===(t=this.fieldDescriptor)||void 0===t?void 0:t.userInterface)&&void 0!==i?i:e.SHORTTEXT;this.isTextSearch=!(s===e.DECIMALNUMBER||s===e.INTEGERNUMBER)}calcTopPosition(){const t=this.buildReferenceTopPosition(),i=parseInt(t)+this.DEFAULT_HEIGHT,s=Math.round(this.ezPopoverElement.getBoundingClientRect().top)+i,e=window.innerHeight;return e>s?`${t}px`:e-s+"px"}buildReferenceTopPosition(){return this.noHeaderTaskBar?this.gridHeaderHidden?this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN:this.TOP_POSITION_NO_TASKBAR:this.gridHeaderHidden?this.TOP_POSITION_HEADER_HIDDEN:this.TOP_POSITION}async clearConfigs(){var t;await(null===(t=this.ezMultiSelectionList)||void 0===t?void 0:t.clearFilteredOptions()),this.options=null,this.columnName=null}canShow(t){return!this.ezPopoverElement.opened||t.columnName!==this.columnName}submit(){this.applyFilterColumnOptions.emit({field:this.columnName,values:this.selectedItems}),o.dispatchEvent(h),this.hide()}changeSelectedItems(t){this.selectedItems=t}hasToUseOptions(){return this.fieldDescriptor.userInterface===e.OPTIONSELECTOR||this.fieldDescriptor.userInterface===e.SWITCH||this.fieldDescriptor.userInterface===e.CHECKBOX}isCheckBoxOrSwitch(){return this.fieldDescriptor.userInterface===e.SWITCH||this.fieldDescriptor.userInterface===e.CHECKBOX}async setOptions(t){const i=this.hasToUseOptions();if(i)return this.useOptions=i,void(this.options=i?this.buildOptions(t):null!=t?t:null);const s=await this.dataSource.getStaticOptions(this.columnName);if(null!=s){const i=new Set((t||[]).filter((t=>t.check)).map((t=>t.label)));return this.useOptions=!0,void(this.options=0===i.size?s:s.map((t=>Object.assign(Object.assign({},t),{check:i.has(t.label)}))))}this.useOptions=!1,this.options=null}buildOptions(t){var i,s;if(t&&t.length>0)return t;if(this.isCheckBoxOrSwitch())return[{label:"Sim",value:"true",check:!0},{label:"Não",value:"false",check:!0}];const e=JSON.parse(null===(s=null===(i=this.fieldDescriptor)||void 0===i?void 0:i.properties)||void 0===s?void 0:s.options);return Object.keys(e).map((t=>({label:e[t],value:t,check:!0})))}handleEzVisibilityChange(t){!1===t.detail&&this.clearConfigs()}render(){return s("ez-popover",{class:"filter-column__popover","overlay-type":"none",ref:t=>this.ezPopoverElement=t,autoClose:!0,onEzVisibilityChange:this.handleEzVisibilityChange.bind(this)},s("section",{class:"filter-column"},s("header",{class:"filter-column__header"},s("span",{class:"ez-text ez-text--medium filter-column__header-title"},"Filtro da coluna ",this.columnLabel),s("ez-button",{mode:"icon","icon-name":"close",class:"ez-button--tertiary",onClick:()=>this.hide()})),s("ez-multi-selection-list",{columnName:this.columnName,dataSource:this.dataSource,options:this.options,useOptions:this.useOptions,ref:t=>this.ezMultiSelectionList=t,onChangeFilteredOptions:t=>this.changeSelectedItems(t.detail),isTextSearch:this.isTextSearch}),s("footer",{class:"filter-column__footer"},s("ez-button",{label:"Aplicar",class:"ez-button--primary",onClick:this.submit.bind(this)}))))}};l.style=".filter-column{padding:var(--space--2xs, 8px);position:relative}.filter-column__header{margin-bottom:var(--space--2xs, 8px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:var(--space--xl, 32px)}.filter-column__footer{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;bottom:0;left:0;padding-top:var(--space--2xs, 8px);border-top:var(--border--medium) var(--color--disable-secondary)}.filter-column__popover{position:absolute}.filter-column__header-title{margin-left:8px}";export{l as filter_column}

package/dist/ezui/p-cd0499a2.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e}from"./p-23a36bb6.js";const i=class{constructor(e){t(this,e),this.label=void 0,this.enableExpand=!0,this._expanded=!1}toggleExpandItem(){this._expanded=!this._expanded}render(){return e("div",{class:"box_split-item "+(this._expanded?"expanded__item":""),ref:t=>this._element=t},e("div",{class:"ez-split-item--header"},e("div",null,this.label&&e("div",{class:"ez-margin--small"},e("h3",{class:" ez-title ez-title--small"},this.label))),e("div",{class:"ez-split-item--header-buttons"},this.enableExpand&&e("ez-button",{size:"medium",mode:"icon",iconName:"expand",class:"ez-button--tertiary",onClick:()=>this.toggleExpandItem(),title:this._expanded?"Resumir":"Expandir"}),e("slot",{name:"rightButtons"}))),e("div",{class:"ez-split-item--content"},e("slot",null)))}};i.style=".box_split-item{background-color:var(--background--xlight);padding:var(--space--nano);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-buttons{display:flex;align-items:center}.ez-split-item--content{display:block;height:-webkit-fill-available}";export{i as ez_split_item}

package/dist/ezui/p-e52cbcc7.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as i,H as n,g as a}from"./p-23a36bb6.js";import{StringUtils as o,ElementIDUtils as r}from"@sankhyalabs/core";import{C as s}from"./p-7eb3e1a5.js";const l=class{constructor(i){e(this,i),this.ezClick=t(this,"ezClick",7),this.item=void 0}componentWillRender(){this.createDetailList()}componentDidLoad(){var e,t;const i={id:o.toCamelCase((null===(e=this.item)||void 0===e?void 0:e.key)||(null===(t=this.item)||void 0===t?void 0:t.title)||"")};r.addIDInfo(this._element,null,i)}createDetailList(){var e,t,i;this._details={detailsLeft:[],detailsRight:[]};let n=0;if(null===(e=this.item)||void 0===e?void 0:e.details)for(const e in this.item.details)n<3?this._details.detailsLeft.push({label:e,value:null===(t=this.item.details[e])||void 0===t?void 0:t.toString()}):this._details.detailsRight.push({label:e,value:null===(i=this.item.details[e])||void 0===i?void 0:i.toString()}),n++}buildDetailContent(e){return i("div",{class:"card-item__detail"},i("label",{class:"card-item__detail-label"},e.label),": ",i("label",{class:"card-item__detail-value",innerHTML:e.value}))}render(){return i(n,null,this.item&&i("div",{class:"card-item",onClick:()=>{this.ezClick.emit(this.item)}},i("label",{class:"card-item__title"},i("span",{class:"card-item__key",innerHTML:this.item.key}),i("span",{innerHTML:this.item.title})),i("div",{class:"card-item__details"},i("div",{class:"card-item__details-left"},this._details.detailsLeft.map((e=>this.buildDetailContent(e)))),i("div",{class:"card-item__details-right"},this._details.detailsRight.map((e=>this.buildDetailContent(e)))))))}get _element(){return a(this)}};l.style=":host {\n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--title--primary, #2B3A54);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  padding: 12px;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  cursor: pointer;\n  justify-content: space-between;\n  gap: var(--space--small, 6px);\n}\n\n.card-item__details-left {\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-right {\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail:not(:last-child) {\n  cursor: pointer;\n  white-space: pre-line;\n\n  /*public*/\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-label--color);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-left {\n    width: 100%;\n  }\n  \n  .card-item__details-right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";const d=class{constructor(i){e(this,i),this.ezChange=t(this,"ezChange",7),this.ezSearching=t(this,"ezSearching",7),this.ezFocusIn=t(this,"ezFocusIn",7),this._searchingText="",this.handleFocus=()=>{this._textInput.value=""===this._searchingText?"":this._searchingText,this.ezFocusIn.emit()},this.label=void 0,this.value=void 0,this.enabled=!0,this.errorMessage=void 0,this.restrict=void 0,this.mode="regular",this.asyncSearch=!1,this.canShowError=!0}observeLabel(){this._textInput&&(this._textInput.label=this.label)}observeErrorMessage(){this._textInput&&(this._textInput.errorMessage=this.errorMessage)}observeValue(e,t){this._textInput&&e!=t&&(this._textInput.value=e,this.ezChange.emit(e))}async setFocus(){this._textInput.setFocus()}async setBlur(){this._textInput.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}async setValue(e){this.asyncSearch&&null!=this._textInput&&(e!==this.value?(this.value=e,this._searchingText=""):this._textInput.value=e)}async endSearch(){this.asyncSearch&&null!=this._textInput&&this._textInput.value!==this.value&&(this._textInput.value=this.value)}handleChange(e){const t=e.detail;this.errorMessage="",this.asyncSearch?(this._searchingText=t,this.ezSearching.emit(t)):t!==this.value&&(this.value=t)}componentDidLoad(){s.applyVarsTextInput(this._elem,this._textInput)}render(){return r.addIDInfoIfNotExists(this._elem,"input"),i("ez-text-input",{"data-element-id":r.getInternalIDInfo("textInput"),ref:e=>this._textInput=e,label:this.label,onEzChange:e=>this.handleChange(e),value:this.value,enabled:this.enabled,errorMessage:this.errorMessage,restrict:this.restrict,mode:this.mode,onFocusin:this.handleFocus,canShowError:this.canShowError},i("ez-icon",{slot:"leftIcon",iconName:"search"}))}get _elem(){return a(this)}static get watchers(){return{label:["observeLabel"],errorMessage:["observeErrorMessage"],value:["observeValue"]}}};d.style=":host{display:block;width:100%}";const c=class{constructor(t){e(this,t),this.message=void 0}render(){return i("div",{class:"multi-selection__message"},i("span",{class:"multi-selection__text-message"},this.message))}};c.style=".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)}";export{l as ez_card_item,d as ez_filter_input,c as multi_selection_box_message}

package/dist/types/components/ez-alert-list/ez-alert-list.d.ts

@@ -66,7 +66,7 @@ export declare class EzAlertList {
    */
   private getBoundingBottom;
   private dataElementId;
-  componentDidRender(): void;
+  componentDidLoad(): void;
   componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/ez-combo-box/ez-combo-box.d.ts

@@ -12,7 +12,6 @@ export declare class EzComboBox {
   private _maxWidthValue;
   private _tabPressed;
   private _textEmptyList;
-  private _textEmptySearch;
   private _lookupMode;
   private _resizeObserver;
   private el;
@@ -46,10 +45,6 @@ export declare class EzComboBox {
    * Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido.
    */
   errorMessage: string;
-  /**
-   * Se true ativa o modo pesquisa do ez-combo-box.
-   */
-  searchMode: boolean;
   /**
    * Se true a opção selecionada exibe o `value` junto com `label`.
    */
@@ -133,26 +128,16 @@ export declare class EzComboBox {
   private scrollToOption;
   private selectCurrentOption;
   private updateSource;
-  private clearSource;
   private selectOption;
   private loadOptions;
   private cancelPreselection;
   private setInputValue;
   private clearSearch;
-  private controlListWithOnlyOne;
-  private controlEmptySearch;
-  private validateDescriptionValue;
-  private loadDescriptionValue;
-  private setDescriptionValue;
-  private loadOptionValue;
-  private showNoResultMessage;
-  private getFieldLabel;
   private resetOptions;
   componentWillLoad(): void;
   componentDidRender(): void;
   componentDidLoad(): void;
   private handlerIconClick;
-  private buildNumberArgument;
   private onTextInputChangeHandler;
   private clearDeboucingTimeout;
   private onTextInputClickHandler;

package/dist/types/components/ez-grid/controller/ag-grid/DataSource.d.ts

@@ -1,5 +1,5 @@
 import { IServerSideDatasource, IServerSideGetRowsParams } from "ag-grid-community";
-import { DataUnit, QuickFilter } from "@sankhyalabs/core";
+import { DataUnit, QuickFilter } from '@sankhyalabs/core';
 import EzGridController, { EzGridColumn, EzGridOptions } from "../EzGridController";
 export default class DataSource implements IServerSideDatasource {
   private _controller;
@@ -10,6 +10,7 @@ export default class DataSource implements IServerSideDatasource {
   quickFilter: QuickFilter;
   readonly RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
   private duObserver;
+  private updateLoadedRecords;
   private isSilentChange;
   constructor(dataUnit: DataUnit, controller: EzGridController, options: EzGridOptions);
   private updateSelection;

package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.d.ts

@@ -2,7 +2,7 @@ import { IHeaderParams } from 'ag-grid-community';
 export interface IEzGridCustomHeaderParams {
   tooltip?: string;
   hasFilter?: () => boolean;
-  showColumnFilter?: (leftPosition: string, fromIcon: boolean) => void;
+  showColumnFilter?: (leftPosition: number) => void;
 }
 export declare class EzGridCustomHeader {
   private params;

package/dist/types/components/ez-grid/subcomponents/filter-column.d.ts

@@ -8,6 +8,8 @@ export declare class FilterColumn {
   private readonly TOP_POSITION_NO_TASKBAR;
   private readonly TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN;
   private readonly DEFAULT_HEIGHT;
+  private readonly FIX_MARGIN;
+  private readonly FILTER_COLUMN_WIDTH;
   private ezPopoverElement;
   private ezMultiSelectionList;
   applyFilterColumnOptions: EventEmitter<IAppliedFilterColumnOptions>;
@@ -30,6 +32,7 @@ export declare class FilterColumn {
    */
   show(configs: IFilterColumnConfigs): Promise<void>;
   private calculateLeftPosition;
+  private calcFilterColumnLeftPosition;
   private buildIsTextSearch;
   private calcTopPosition;
   private buildReferenceTopPosition;
@@ -47,7 +50,7 @@ export declare class FilterColumn {
 export interface IFilterColumnConfigs {
   columnName: string;
   columnLabel: string;
-  leftPosition: string;
+  leftPosition: number;
   filteredOptions?: IMultiSelectionOption[];
   fromIcon?: boolean;
 }

package/dist/types/components/ez-search/ez-search.d.ts

@@ -1,8 +1,30 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IEzCheckBoxListPosition, IOption, ISearchArgument } from '../ez-combo-box/ez-combo-box';
+import { IEzCheckBoxListPosition } from '../ez-combo-box/ez-combo-box';
 export declare class EzSearch {
-  private _elem;
-  private _comboElement;
+  private _textInput;
+  private _optionsList;
+  private _listContainer;
+  private _listWrapper;
+  private _itemValueBasis;
+  private _floatingID;
+  private _source;
+  private _changeDeboucingTimeout;
+  private _limitCharsToSearch;
+  private _deboucingTime;
+  _maxWidthValue: number;
+  private _tabPressed;
+  private _textEmptyList;
+  private _textEmptySearch;
+  private _lookupMode;
+  private _resizeObserver;
+  private _startHighlightTag;
+  private _endHighlightTag;
+  private el;
+  private _preSelection;
+  private _visibleOptions;
+  private _startLoading;
+  private _showLoading;
+  private _criteria;
   /**
    * Define o valor do campo.
    */
@@ -63,15 +85,26 @@ export declare class EzSearch {
    * Emitido quando acontece a alteração de valor do campo.
    */
   ezChange: EventEmitter<IOption>;
+  /**
+   * Array com as opções do ez-combo-box. Os elementos devem obedecer
+   * o formato: `{value: string, label: string}`.
+   */
+  options: Array<IOption>;
+  /**
+   * Se true desabilita a digitação dentro do componente.
+   */
+  suppressSearch: boolean;
   observeErrorMessage(): void;
-  observeValue(): void;
+  observeValue(newValue: IOption | string, oldValue: IOption | string): void;
+  observeOptions(newOptions: IOption[], oldOptions: IOption[]): void;
+  getValueAsync(): Promise<unknown>;
   /**
-    * Aplica o foco no campo.
-    */
+   * Aplica o foco no campo.
+   */
   setFocus(): Promise<void>;
   /**
-    * Remove o foco do campo.
-    */
+   * Remove o foco do campo.
+   */
   setBlur(): Promise<void>;
   /**
    * Retorna se o conteúdo é inválido.
@@ -81,8 +114,65 @@ export declare class EzSearch {
    * Limpa o valor do campo de pesquisa
    */
   clearValue(): Promise<void>;
-  getValueAsync(): Promise<unknown>;
-  onComboChange(event: any): void;
+  scrollListener(): void;
+  private updateListPosition;
+  private getListPosition;
+  private isDifferentValues;
+  private getFormattedText;
+  private getText;
+  private getSelectedOption;
+  private updateVisibleOptions;
+  private getMaxWidthValue;
+  private getWidthValue;
+  private createOption;
+  private buildItem;
+  private showOptions;
+  private hideOptions;
+  private isOptionsVisible;
+  private nextOption;
+  private previousOption;
+  private scrollToOption;
+  private selectCurrentOption;
+  private updateSource;
+  private clearSource;
+  private selectOption;
+  private loadOptions;
+  private cancelPreselection;
+  private setInputValue;
+  private clearSearch;
+  private controlListWithOnlyOne;
+  private controlEmptySearch;
+  private validateDescriptionValue;
+  private loadDescriptionValue;
+  private setDescriptionValue;
+  private loadOptionValue;
+  private showNoResultMessage;
+  private getFieldLabel;
+  private resetOptions;
+  componentWillLoad(): void;
+  componentDidRender(): void;
   componentDidLoad(): void;
+  private handlerIconClick;
+  private buildNumberArgument;
+  private onTextInputChangeHandler;
+  private clearDeboucingTimeout;
+  private keyDownHandler;
+  private onTextInputFocusOutHandler;
+  private canShowListOptions;
   render(): any;
 }
+export interface IOption {
+  value: string;
+  label: string;
+  details?: any;
+}
+export interface ISearchArgument {
+  mode: SearchMode;
+  argument: string;
+}
+declare enum SearchMode {
+  ADVANCED = "ADVANCED",
+  PRELOAD = "PRELOAD",
+  PREDICTIVE = "PREDICTIVE"
+}
+export {};

package/dist/types/components/ez-split-panel/ez-split-panel.d.ts

@@ -0,0 +1,23 @@
+import { SplitOptions } from 'split-grid';
+export declare class SplitPanel {
+  direction: 'row' | 'column';
+  /**
+   * Responsável por definir o painel que limita o tamanho do item expandido.
+   */
+  anchorToExpand: boolean;
+  _element: HTMLElement;
+  _items: HTMLEzSplitItemElement[];
+  _panelID: string;
+  componentDidLoad(): void;
+  initSplit(): void;
+  getGutters(): SplitOptions;
+  addItemGutter(item: HTMLEzSplitItemElement): void;
+  getElementStyle(): {
+    display: string;
+    height: string;
+    width: string;
+    position: string;
+  };
+  getGridTemplate(): string;
+  render(): any;
+}

package/dist/types/components/ez-split-panel/structure/item/ez-split-item.d.ts

@@ -1,3 +1,20 @@
 export declare class SplitItem {
+  _element: HTMLElement;
+  /**
+   * Define um título para o painel.
+   */
+  label: string;
+  /**
+   * Define se o item pode ser expandido
+   */
+  enableExpand: boolean;
+  /**
+   * Define se o item está expandido
+   */
+  private _expanded;
+  /**
+   * Alterna a visibilidade do painel.
+   */
+  toggleExpandItem(): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -30,7 +30,8 @@ import { TFocusOptions } from "./components/ez-text-input/ez-text-input";
 import { IEzPopoverAnchorOptions } from "./components/ez-popover/ez-popover";
 import { Radio } from "./components/ez-radio-button/ez-radio-button";
 import { EzScrollDirection } from "./components/ez-scroller/EzScrollDirection";
-import { IEzCheckBoxListPosition as IEzCheckBoxListPosition1, IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-combo-box/ez-combo-box";
+import { IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-search/ez-search";
+import { IEzCheckBoxListPosition as IEzCheckBoxListPosition1 } from "./components/ez-combo-box/ez-combo-box";
 import { Tab } from "./components/ez-tabselector/ez-tabselector";
 import { IStyled } from "./components/ez-text-edit/ez-text-edit";
 import { TFocusOptions as TFocusOptions1 } from "./components/ez-text-input/ez-text-input";
@@ -413,10 +414,6 @@ export namespace Components {
           * Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
          */
         "options": Array<IOption>;
-        /**
-          * Se true ativa o modo pesquisa do ez-combo-box.
-         */
-        "searchMode": boolean;
         /**
           * Remove o foco do campo.
          */
@@ -1172,7 +1169,11 @@ export namespace Components {
         /**
           * Carrega as opções dinamicamente.
          */
-        "optionLoader": (argument: ISearchArgument1) => Promise<Array<IOption1>> | Array<IOption1> | IOption1;
+        "optionLoader": (argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption;
+        /**
+          * Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
+         */
+        "options": Array<IOption>;
         /**
           * Remove o foco do campo.
          */
@@ -1193,10 +1194,14 @@ export namespace Components {
           * Se true remove a opção vazia da lista.
          */
         "suppressEmptyOption": boolean;
+        /**
+          * Se true desabilita a digitação dentro do componente.
+         */
+        "suppressSearch": boolean;
         /**
           * Define o valor do campo.
          */
-        "value": IOption1 | string;
+        "value": IOption | string;
     }
     interface EzSidebarButton {
     }
@@ -1238,8 +1243,20 @@ export namespace Components {
         "width": string;
     }
     interface EzSplitItem {
+        /**
+          * Define se o item pode ser expandido
+         */
+        "enableExpand": boolean;
+        /**
+          * Define um título para o painel.
+         */
+        "label": string;
     }
     interface EzSplitPanel {
+        /**
+          * Responsável por definir o painel que limita o tamanho do item expandido.
+         */
+        "anchorToExpand": boolean;
         "direction": 'row' | 'column';
     }
     interface EzTabselector {
@@ -2450,10 +2467,6 @@ declare namespace LocalJSX {
           * Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
          */
         "options"?: Array<IOption>;
-        /**
-          * Se true ativa o modo pesquisa do ez-combo-box.
-         */
-        "searchMode"?: boolean;
         /**
           * Se true cada opção na lista exibe o `value` junto com `label`.
          */
@@ -3165,11 +3178,15 @@ declare namespace LocalJSX {
         /**
           * Emitido quando acontece a alteração de valor do campo.
          */
-        "onEzChange"?: (event: EzSearchCustomEvent<IOption1>) => void;
+        "onEzChange"?: (event: EzSearchCustomEvent<IOption>) => void;
         /**
           * Carrega as opções dinamicamente.
          */
-        "optionLoader"?: (argument: ISearchArgument1) => Promise<Array<IOption1>> | Array<IOption1> | IOption1;
+        "optionLoader"?: (argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption;
+        /**
+          * Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
+         */
+        "options"?: Array<IOption>;
         /**
           * Se false cada opção na lista deve exibir somente o `label`.
          */
@@ -3182,10 +3199,14 @@ declare namespace LocalJSX {
           * Se true remove a opção vazia da lista.
          */
         "suppressEmptyOption"?: boolean;
+        /**
+          * Se true desabilita a digitação dentro do componente.
+         */
+        "suppressSearch"?: boolean;
         /**
           * Define o valor do campo.
          */
-        "value"?: IOption1 | string;
+        "value"?: IOption | string;
     }
     interface EzSidebarButton {
         /**
@@ -3231,8 +3252,20 @@ declare namespace LocalJSX {
         "width"?: string;
     }
     interface EzSplitItem {
+        /**
+          * Define se o item pode ser expandido
+         */
+        "enableExpand"?: boolean;
+        /**
+          * Define um título para o painel.
+         */
+        "label"?: string;
     }
     interface EzSplitPanel {
+        /**
+          * Responsável por definir o painel que limita o tamanho do item expandido.
+         */
+        "anchorToExpand"?: boolean;
         "direction"?: 'row' | 'column';
     }
     interface EzTabselector {

package/dist/types/utils/form/test/DataBinder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/interfaces/AbstractFieldMetadata.d.ts

@@ -1,5 +1,6 @@
 import { FieldDescriptor, UserInterface } from "@sankhyalabs/core";
-import { IOption, ISearchArgument } from "../../components/ez-combo-box/ez-combo-box";
+import { ISearchArgument } from "../../components/ez-combo-box/ez-combo-box";
+import { IOption } from "../../components/ez-search/ez-search";
 import { IFieldConfig } from "./IFieldConfig";
 export default interface IAbstractFieldMetadata {
   userInterface: UserInterface;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "5.20.0-dev.1",
+  "version": "5.20.0-dev.10",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
@@ -21,8 +21,7 @@
     "build.prod": "stencil build --docs --prod",
     "build.with.peerdeps": "stencil build --docs --prod --force-peer-deps",
     "start": "stencil build --dev --watch --serve --force-peer-deps",
-    "test": "stencil test --spec --e2e --logHeapUsage --runInBand",
-    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test": "stencil test --spec --e2e --logHeapUsage --runInBand --coverage --silent --testResultsProcessor jest-sonar-reporter",
     "generate": "stencil generate",
     "storybook": "npm run start.storybook",
     "build.watch": "stencil build --dev --watch --force-peer-deps",
@@ -53,7 +52,6 @@
     "@sankhyalabs/docscss": "^1.0.4",
     "@sankhyalabs/ez-design": "^4.0.0",
     "@sankhyalabs/skippeerdeps": "^1.0.2",
-    "split-grid": "^1.0.11",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@stencil/core": "^2.13.0",
     "@stencil/react-output-target": "0.0.9",
@@ -72,18 +70,27 @@
     "husky": "^8.0.3",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
+    "jest-sonar-reporter": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "puppeteer": "^5.5.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "redux-undo": "^1.0.1",
     "run-p": "0.0.0",
+    "split-grid": "^1.0.11",
     "storybook-addon-preview": "^2.2.0",
     "uuid": "^9.0.0",
     "ws": "^7.5.6"
   },
   "jest": {
-    "verbose": true
+    "verbose": true,
+    "testResultsProcessor": "jest-sonar-reporter"
+  },
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "test-report.xml",
+    "indent": 4
   },
   "peerDependencies": {
     "@sankhyalabs/core": "^5.0.0"

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

@@ -1,52 +0,0 @@
-'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;