@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-52057.0 → 0.0.0-bugfix-dev-59880.0

package/dist/cjs/ez-grid.cjs.entry.js

@@ -8,6 +8,7 @@ const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
 const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
+const ICustomRender = require('./ICustomRender-6fafffce.js');
 const constants = require('./constants-2714478b.js');
 const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
 
@@ -119414,9 +119415,9 @@ class EzCellEditor {
   init(params) {
     const fieldName = params.column.getColId();
     const dataUnit = params.context.dataUnit;
-    const fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
-    const builder = uiBuilders.get(fieldMetadata.userInterface) || buildTextInput;
-    this._gui = builder(fieldMetadata);
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    const builder = uiBuilders.get(this._fieldMetadata.userInterface) || buildTextInput;
+    this._gui = builder(this._fieldMetadata);
     if (this._gui.valueSetter != undefined) {
       this._gui.valueSetter(params.value);
     }
@@ -119440,10 +119441,147 @@ class EzCellEditor {
   isPopup() {
     return this._gui.isPopUp;
   }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+}
+
+class EzGridCustomCellEditor extends EzCellEditor {
+  init(params) {
+    var _a, _b;
+    this._value = params.value;
+    this._fieldName = params.column.getColId();
+    this._customEditorInstance = params.customEditorsInfo.customEditor;
+    super.init(params);
+    this._defaultGui = this.getDefaultGui();
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: params.charPress,
+      currentEditor: this._defaultGui,
+      name: this._fieldName,
+      source: ICustomRender.CustomEditorSource.GRID,
+      detailContext: params.customEditorsInfo.detailContext,
+      setValue: (value) => this.setValue(value),
+      getValue: () => this.getValue(),
+      editorMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      }
+    };
+  }
+  getDefaultGui() {
+    const gui = super.getGui();
+    gui.value = this._value;
+    gui.onkeyup = (event) => {
+      const value = event.target.value;
+      this.setValue(value);
+    };
+    return gui;
+  }
+  getGui() {
+    const editorElement = this._customEditorInstance.getEditorElement(this._params);
+    if (!editorElement) {
+      return this._defaultGui;
+    }
+    if (typeof editorElement === 'string') {
+      const element = core.HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
+  setValue(value) {
+    this._value = value;
+  }
+  getValue() {
+    return this._value;
+  }
+}
+
+class EzCellRender {
+  init(params) {
+    const span = document.createElement('span');
+    this._currentParams = params;
+    span.textContent = params.value;
+    const fieldName = params.column.getColId();
+    const dataUnit = params.context.dataUnit;
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    this._gui = span;
+  }
+  refresh() {
+    try {
+      this._currentParams.refreshCell();
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._currentParams.getValue();
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+}
+
+class EzGridCustomCellRender extends EzCellRender {
+  init(params) {
+    var _a, _b;
+    this._fieldName = params.column.getColId();
+    this._customRenderInstance = params.customRendersInfo.customRender;
+    super.init(params);
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: '',
+      currentRender: super.getGui(),
+      name: this._fieldName,
+      source: ICustomRender.CustomRenderSource.GRID,
+      getValue: () => params.getValue(),
+      detailContext: params.customRendersInfo.detailContext,
+      renderMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      }
+    };
+  }
+  getGui() {
+    const editorElement = this._customRenderInstance.getRenderElement(this._params);
+    if (!editorElement) {
+      return super.getGui();
+    }
+    if (typeof editorElement === 'string') {
+      const element = core.HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
 }
 
 class GridEditionManager {
-  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled) {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders) {
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor.RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -119452,6 +119590,8 @@ class GridEditionManager {
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._customEditors = customEditors;
+    this._customRenders = customRenders;
   }
   configureGrid(options) {
     this._gridOptions = options;
@@ -119518,6 +119658,30 @@ class GridEditionManager {
     col.suppressKeyboardEvent = (params) => {
       return params.event.key === KeyCode.ENTER;
     };
+    col.cellEditorSelector = (params) => {
+      var _a;
+      if ((_a = this._customEditors) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customEditor = this._customEditors.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellEditor,
+          params: {
+            customEditorsInfo: customEditor,
+          }
+        };
+      }
+    };
+    col.cellRendererSelector = (params) => {
+      var _a;
+      if ((_a = this._customRenders) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customRender = this._customRenders.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellRender,
+          params: {
+            customRendersInfo: customRender,
+          }
+        };
+      }
+    };
     return col;
   }
   getRequiredFields() {
@@ -119659,6 +119823,12 @@ class GridEditionManager {
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
   }
+  setCellEditors(customEditors) {
+    this._customEditors = customEditors;
+  }
+  setCellRenders(customRenders) {
+    this._customRenders = customRenders;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {
@@ -119703,6 +119873,7 @@ class AgGridController {
     this._gridConfig = [];
     this._filteredColumns = new Map();
     this._filterColumnleftPosition = 0;
+    this._customFormatters = new Map();
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -119786,7 +119957,7 @@ class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
-      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled);
+      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled, options.customEditors || this._customEditors, options.customRenders || this._customRenders);
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -119818,6 +119989,13 @@ class AgGridController {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
           headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll),
         },
+        processCellForClipboard: this.processFormatterCellCallback,
+        defaultExcelExportParams: {
+          processCellCallback: this.processFormatterCellCallback
+        },
+        defaultCsvExportParams: {
+          processCellCallback: this.processFormatterCellCallback
+        }
       };
       this.defineRowModelType(this._gridOptions, options);
       this.setOptionsEvents(this._gridOptions);
@@ -119841,7 +120019,25 @@ class AgGridController {
         this.selectRows((selection === null || selection === void 0 ? void 0 : selection.recordIds) || [], true);
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
+      this._customFormatters = options.customFormatters;
+    }
+  }
+  processFormatterCellCallback(params) {
+    const column = params.column.getColDef();
+    if (typeof column.valueFormatter === 'function') {
+      const valueParams = {
+        value: params.value,
+        data: params.node.data,
+        node: params.node,
+        colDef: column,
+        column: params.column,
+        api: params.api,
+        columnApi: params.columnApi,
+        context: params.context,
+      };
+      return column.valueFormatter(valueParams);
     }
+    return params.value;
   }
   setFilterColumnLeftPosition({ type, ePopup }) {
     if (type === 'columnMenu') {
@@ -120191,7 +120387,7 @@ class AgGridController {
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
       const colWidth = this.getColumnWidth(cfgColumn);
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
@@ -120294,6 +120490,13 @@ class AgGridController {
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        const customFormatter = this._customFormatters.get(source.name);
+        if (customFormatter) {
+          const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
+          if (formattedValue) {
+            return formattedValue;
+          }
+        }
         if (this._dataUnit) {
           return this._dataUnit.getFormattedValue(source.name, params.value);
         }
@@ -120302,6 +120505,13 @@ class AgGridController {
       cellStyle: this.getStyleByColumn(source),
     });
   }
+  setCustomFormatters(customFormatters) {
+    this._customFormatters = customFormatters;
+  }
+  refreshSelectedRows() {
+    const selectedNodes = this._gridOptions.api.getSelectedNodes();
+    this._gridOptions.api.redrawRows({ rowNodes: selectedNodes });
+  }
   getInitCellStyle() {
     return {
       'line-height': this.getRowHeight() - 1 + 'px',
@@ -120477,11 +120687,52 @@ class AgGridController {
     const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
+  setCellEditors(customEditors) {
+    var _a;
+    if (!this._editionManager) {
+      this._customEditors = customEditors;
+      return;
+    }
+    this._editionManager.setCellEditors(customEditors);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
+  setCellRenders(customRenders) {
+    var _a;
+    if (!this._editionManager) {
+      this._customRenders = customRenders;
+      return;
+    }
+    this._editionManager.setCellRenders(customRenders);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
+}
+
+function enableSelectAll(total) {
+  return total !== undefined;
+}
+function buildSelectAllLabel(allRecordSelected, count, total) {
+  if (allRecordSelected)
+    return 'Selecionar apenas a página atual';
+  if (total === undefined)
+    return `Carregando todos os ${count} registros`;
+  return `Selecionar todos os ${total} registros`;
+}
+function buildSelectAllTitle(total) {
+  if (enableSelectAll(total))
+    return '';
+  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+}
+function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  const pluralCharacter = selectionCount > 1 ? "s" : "";
+  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
 }
 
 const SelectionCounter = (props) => {
   const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const { total, hasMore } = paginationInfo || {};
+  const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
       return false;
@@ -120495,20 +120746,11 @@ const SelectionCounter = (props) => {
         index.h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))),
         index.h("div", { class: "ez-flex ez-margin-right--medium" },
           shouldRenderSelectionButton() &&
-            index.h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
-          index.h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
+            index.h("ez-button", Object.assign({ title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
+          index.h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
       index.h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")),
         index.h("ez-icon", { iconName: "close" })))));
 };
-function getText(selectionCount, allSelectedRecords) {
-  if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
-  }
-  else {
-    const pluralChar = selectionCount > 1 ? "s" : "";
-    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
-  }
-}
 function getElementID(sufix) {
   return {
     [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(sufix)
@@ -120688,6 +120930,8 @@ const EzGrid = class {
     this.componentReady = index.createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
+    this._customEditor = new Map();
+    this._customRenders = new Map();
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -120695,6 +120939,7 @@ const EzGrid = class {
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
+    this._customFormatters = new Map();
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -120766,6 +121011,63 @@ const EzGrid = class {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditor = new Map(this._customEditor);
+    newCustomEditor.set(fieldName, {
+      customEditor,
+      detailContext,
+    });
+    this._customEditor = newCustomEditor;
+    this._gridController.setCellEditors(newCustomEditor);
+  }
+  /**
+   * Registra um render customizado para colunas da grid.
+   */
+  async addGridCustomRender(fieldName, customRender, detailContext) {
+    const newCustomRenders = new Map(this._customRenders);
+    newCustomRenders.set(fieldName, { customRender, detailContext });
+    this._customRenders = newCustomRenders;
+    this._gridController.setCellRenders(newCustomRenders);
+  }
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  async addCustomValueFormatter(columnName, customFormatter) {
+    if (!columnName || !customFormatter) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.set(columnName, customFormatter);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  async removeCustomValueFormatter(columnName) {
+    if (!columnName) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.delete(columnName);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Atualiza linhas da grade.
+   */
+  async refreshSelectedRows() {
+    this._gridController.refreshSelectedRows();
+  }
+  /**
+   * Retorna o formatador customizado da coluna caso exista.
+   */
+  async getCustomValueFormatter(columnName) {
+    return this._customFormatters.get(columnName);
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
@@ -120967,7 +121269,8 @@ const EzGrid = class {
       statusResolver: this.statusResolver,
       useEnterLikeTab: this.useEnterLikeTab,
       recordsValidator: this.recordsValidator,
-      editionIsDisabled: () => !this.canEdit
+      editionIsDisabled: () => !this.canEdit,
+      customFormatters: this._customFormatters
     });
     if (this.config) {
       this.observeConfig(this.config);

package/dist/cjs/ez-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezListCss = ":host {\n  /* @doc Define a camada de visibilidae do componente. */\n  --ez-list__host--z-index: var(--visible, 1);\n\n  /* @doc Define o raio da borda do componente. */\n  --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n  /* @doc Define o espaçamento entre a lista e o componente. */\n  --ez-list__host--padding: var(--space--medium, 12px);\n\n  /* @doc Define o espaçamento interno do ícone. */\n  --ez-list__icon--padding: var(--space--small, 6px);\n\n  /* @doc Define a cor do ícone de arrasto do item da lista. */\n  --ez-list__icon--color: #AFB6C0;\n\n  /* @doc Define o espaçamento externo do item da lista. */\n  --ez-list__item--margin: 0 var(--space--small, 6px);\n\n  /* @doc Define a cor do texto do item da lista. */\n  --ez-list__item--color: var(--title--primary, #2b3a54);\n\n  /* @doc Define o estilo borda inferior do item da lista. */\n  --ez-list__item--border-bottom;\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color;\n\n  /* @doc Define o estilo do texto do item da lista. */\n  --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto do item da lista. */\n  --ez-list__item--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n  /* @doc Define o espaçamento lateral direito para items selecionados. */\n  --ez-list__selectable--padding-right: var(--space--small, 6px);\n  \n  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */\n  --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n  /*@doc Define o raio da borda de items selecionados.*/\n  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n  \n  /*@doc Define a cor de fundo de items selecionados.*/\n  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n  /* @doc Define o estilo do texto do grupo da lista. */\n  --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n  \n  /* @doc Define o tamanho do texto do grupo da lista. */\n  --ez-list__group--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o peso do texto do grupo da lista. */\n  --ez-list__group--font-weight: var(--text-weight--large, 600);\n  \n  /* @doc Define o espaçamento inferior do grupo da lista. */\n  --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n  /* @doc Define o estilo do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */\n  --ez-list__over--border--color: var(--color--primary, #008561);\n\n  /*@doc Define a altura do container para arrasto para última posição .*/\n  --ez-list__last-droppable-space--height: var(--space--small, 6px);\n  \n  /*@doc Define o espaçamento do container de itens arrastáveis .*/\n  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n  /* @doc Define a imagem do ícone de drag. */\n  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n  /* scrollbar */\n  /*@doc Define a cor da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n  /*@doc Define a cor de fundo da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n  /*@doc Define a cor do hover na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n  /*@doc Define a cor do active na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n  /*@doc Define o raio da borda da barra de rolagem do componente.*/\n  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n  /*@doc Define a largura da barra de rolagem do componente.*/\n  --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n  max-height: 100%;\n  width: 100%;\n  background-color: #fff;\n  display: flex;\n\n  /*public*/\n  z-index: var(--ez-list__host--z-index);\n}\n\np {\n  margin: 0;\n}\n\n.draggable {\n  /* private */\n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n  place-items: center;\n  border-top: 1px dashed #fff;\n  justify-content: space-between;\n\n  /*public*/\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n}\n\n.dragging {\n  background: #FFFFFF;\n  /* Primary/color--primary */\n\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n  border-radius: 6px;\n}\n\n.selectable {\n  cursor: pointer;\n\n  /*public*/\n  padding-right: var(--ez-list__selectable--padding-right);\n  padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container {\n  margin: 0px !important;\n}\n\n.hover-feedback:hover {\n  background-color: var(--background--medium);\n  border-radius: var(--border--radius-regular);\n}\n\n.item-content {\n  display: flex;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.draggable-list {\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 100%;\n  scrollbar-width: thin;\n  \n  /*public*/\n  color: var(--text-color);\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list li {\n  display: flex;\n  \n  /*public*/\n  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);\n  margin: var(--ez-list__item--margin);\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n  color: var(--ez-list__item--color);\n  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.over {\n  /*public*/\n  border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space {\n  /*public*/\n  height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-selected div:hover {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-list::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:hover,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:active,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon {\n  align-items: flex-start;\n  display: flex;\n  outline: none;\n  border: none;\n  background-color: unset;\n}\n\n.draggable-icon::after {\n  content: '';\n  display: flex;\n  width: 18px;\n  height: 18px;\n\n  /*public*/\n  background-color: var(--ez-list__icon--color);\n  -webkit-mask-image: var(--ez-list__draggable-icon--image);\n  mask-image: var(--ez-list__draggable-icon--image);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.checkbox {\n  width: fit-content;\n}\n\n.text--ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  /*public*/\n  white-space: var(--ez-list__item--white-space);\n}\n\n.group-container {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow-y: auto;\n  outline: none;\n  width: 100%;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name {\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /*public*/\n  color: var(--title--primary);\n  font-family: var(--ez-list__group--font-family);\n  font-size: var(--ez-list__group--font-size);\n  font-weight: var(--ez-list__group--font-weight);\n  padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.group-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:hover,\n.group-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:active,\n.group-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container {\n  display: flex;\n  position: relative;\n  height: 100%;\n}\n\n.items-container {\n  width: 100%;\n  max-height: 100%;\n  outline: none;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container {\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  outline: none;\n}\n\n.items-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:hover,\n.items-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:active,\n.items-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  border-radius: 8px;\n  position: absolute;\n  display: none;\n  place-items: center;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 0;\n  cursor: pointer;\n\n  /*public*/\n  font-family: var(--ez-list__group-overlay--font-family);\n  font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight {\n  min-height: 100px;\n}\n\n.overlay-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item {\n  /*public*/\n  background: var(--ez-list__selected-item--background-color);\n  border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item {\n  align-items: flex-end;\n}\n\n.overGroup {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-top: 6px;\n}";
+const ezListCss = ":host {\n  /* @doc Define a camada de visibilidae do componente. */\n  --ez-list__host--z-index: var(--visible, 1);\n\n  /* @doc Define o raio da borda do componente. */\n  --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n  /* @doc Define o espaçamento entre a lista e o componente. */\n  --ez-list__host--padding: var(--space--medium, 12px);\n\n  /* @doc Define o espaçamento interno do ícone. */\n  --ez-list__icon--padding: var(--space--small, 6px);\n\n  /* @doc Define a cor do ícone de arrasto do item da lista. */\n  --ez-list__icon--color: #AFB6C0;\n\n  /* @doc Define o espaçamento externo do item da lista. */\n  --ez-list__item--margin: 0 var(--space--small, 6px);\n\n  /* @doc Define a cor do texto do item da lista. */\n  --ez-list__item--color: var(--title--primary, #2b3a54);\n\n  /* @doc Define o estilo borda inferior do item da lista. */\n  --ez-list__item--border-bottom;\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color;\n\n  /* @doc Define o estilo do texto do item da lista. */\n  --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto do item da lista. */\n  --ez-list__item--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n  /* @doc Define o espaçamento lateral direito para items selecionados. */\n  --ez-list__selectable--padding-right: var(--space--small, 6px);\n  \n  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */\n  --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n  /*@doc Define o raio da borda de items selecionados.*/\n  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n  \n  /*@doc Define a cor de fundo de items selecionados.*/\n  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n  /* @doc Define o estilo do texto do grupo da lista. */\n  --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n  \n  /* @doc Define o tamanho do texto do grupo da lista. */\n  --ez-list__group--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o peso do texto do grupo da lista. */\n  --ez-list__group--font-weight: var(--text-weight--large, 600);\n  \n  /* @doc Define o espaçamento inferior do grupo da lista. */\n  --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n  /* @doc Define o estilo do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */\n  --ez-list__over--border--color: var(--color--primary, #008561);\n\n  /*@doc Define a altura do container para arrasto para última posição .*/\n  --ez-list__last-droppable-space--height: var(--space--small, 6px);\n  \n  /*@doc Define o espaçamento do container de itens arrastáveis .*/\n  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n  /* @doc Define a imagem do ícone de drag. */\n  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n  /* scrollbar */\n  /*@doc Define a cor da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n  /*@doc Define a cor de fundo da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n  /*@doc Define a cor do hover na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n  /*@doc Define a cor do active na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n  /*@doc Define o raio da borda da barra de rolagem do componente.*/\n  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n  /*@doc Define a largura da barra de rolagem do componente.*/\n  --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n  max-height: 100%;\n  width: 100%;\n  background-color: #fff;\n  display: flex;\n\n  /*public*/\n  z-index: var(--ez-list__host--z-index);\n}\n\np {\n  margin: 0;\n}\n\n.draggable {\n  /* private */\n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n  place-items: center;\n  border-top: 1px dashed #fff;\n  justify-content: space-between;\n\n  /*public*/\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n}\n\n.dragging {\n  background: #FFFFFF;\n  /* Primary/color--primary */\n\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n  border-radius: 6px;\n}\n\n.selectable {\n  cursor: pointer;\n\n  /*public*/\n  padding-right: var(--ez-list__selectable--padding-right);\n  padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container {\n  margin: 0px !important;\n}\n\n.hover-feedback:hover {\n  background-color: var(--background--medium);\n  border-radius: var(--border--radius-regular);\n}\n\n.item-content {\n  display: flex;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.draggable-list {\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 100%;\n  scrollbar-width: thin;\n  \n  /*public*/\n  color: var(--text-color);\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list li {\n  display: flex;\n  \n  /*public*/\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n  color: var(--ez-list__item--color);\n  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.draggable-list li > div {\n  /*public*/\n  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);\n  margin: var(--ez-list__item--margin);\n}\n\n.over {\n  /*public*/\n  border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space {\n  /*public*/\n  height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-selected div:hover {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-list::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:hover,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:active,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon {\n  align-items: flex-start;\n  display: flex;\n  outline: none;\n  border: none;\n  background-color: unset;\n}\n\n.draggable-icon::after {\n  content: '';\n  display: flex;\n  width: 18px;\n  height: 18px;\n\n  /*public*/\n  background-color: var(--ez-list__icon--color);\n  -webkit-mask-image: var(--ez-list__draggable-icon--image);\n  mask-image: var(--ez-list__draggable-icon--image);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.checkbox {\n  width: fit-content;\n}\n\n.text--ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  /*public*/\n  white-space: var(--ez-list__item--white-space);\n}\n\n.group-container {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow-y: auto;\n  outline: none;\n  width: 100%;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name {\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /*public*/\n  color: var(--title--primary);\n  font-family: var(--ez-list__group--font-family);\n  font-size: var(--ez-list__group--font-size);\n  font-weight: var(--ez-list__group--font-weight);\n  padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.group-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:hover,\n.group-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:active,\n.group-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container {\n  display: flex;\n  position: relative;\n  height: 100%;\n}\n\n.items-container {\n  width: 100%;\n  max-height: 100%;\n  outline: none;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container {\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  outline: none;\n}\n\n.items-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:hover,\n.items-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:active,\n.items-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  border-radius: 8px;\n  position: absolute;\n  display: none;\n  place-items: center;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 0;\n  cursor: pointer;\n\n  /*public*/\n  font-family: var(--ez-list__group-overlay--font-family);\n  font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight {\n  min-height: 100px;\n}\n\n.overlay-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item {\n  /*public*/\n  background: var(--ez-list__selected-item--background-color);\n  border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item {\n  align-items: flex-end;\n}\n\n.overGroup {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-top: 6px;\n}";
 
 const EzList = class {
   constructor(hostRef) {

package/dist/cjs/ez-modal-container.cjs.entry.js

@@ -22,7 +22,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
 
-const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:clip;display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x)}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--medium);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:clip;display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header-container.sc-ez-modal-container{outline:none}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x)}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--medium);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 
 const EzModalContainer = class {
   constructor(hostRef) {
@@ -71,7 +71,7 @@ const EzModalContainer = class {
     this._closeButton.focus();
   }
   render() {
-    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), index.h("div", { ref: ref => this._modalRef = ref, tabIndex: -1 }, this.showTitleBar && (index.h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), index.h("div", { class: "ez-modal-container__content" }, index.h("slot", null)), index.h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (index.h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), index.h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (index.h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), index.h("div", { class: "ez-modal-container__content" }, index.h("slot", null)), index.h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (index.h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -93,12 +93,17 @@ const EzNumberInput = class {
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
   getTextValue(value) {
     if (value != undefined) {
-      return this.precision > 0 ? core.NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+      return this.precision >= 0 ? core.NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
     return undefined;
   }
@@ -176,7 +181,9 @@ const EzNumberInput = class {
   static get watchers() { return {
     "label": ["observeLabel"],
     "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "precision": ["observePrecision"],
+    "prettyPrecision": ["observePrecision"]
   }; }
 };
 EzNumberInput.style = ezNumberInputCss;

package/dist/cjs/ez-search.cjs.entry.js

@@ -8,6 +8,7 @@ const core = require('@sankhyalabs/core');
 const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
+require('./ICustomRender-6fafffce.js');
 const constants = require('./constants-2714478b.js');
 
 const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--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-search__list-min-width);overflow:auto;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:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-search--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-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__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-search--border-radius-small);padding:var(--ez-search--space--small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--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-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__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)}}";
@@ -319,9 +320,12 @@ const EzSearch = class {
   }
   scrollToOption(opt) {
     window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`div#item_${this.replaceHighlight(opt.value).replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
-      if (liElem)
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
+        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
     });
   }
   selectCurrentOption() {