@sankhyalabs/ezui 2.10.1 → 2.12.0

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8646c40d.js');
+const index = require('./index-5e208fa5.js');
 
 /*
  Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-tree.cjs",[[1,"ez-tree",{"items":[16],"value":[1040],"iconResolver":[16],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-sidebar-button.cjs",[[1,"ez-sidebar-button"]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-filter-input.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-scroller.cjs",[[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["ez-sidebar-button.cjs",[[1,"ez-sidebar-button"]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-tree.cjs",[[1,"ez-tree",{"items":[16],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16],"validate":[64]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -20,8 +20,10 @@
     "./components/ez-date-input/ez-date-input.js",
     "./components/ez-date-time-input/ez-date-time-input.js",
     "./components/ez-dialog/ez-dialog.js",
+    "./components/ez-dropdown/ez-dropdown.js",
     "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
+    "./components/ez-form-view/ez-form-view.js",
     "./components/ez-grid/ez-grid.js",
     "./components/ez-icon/ez-icon.js",
     "./components/ez-loading-bar/ez-loading-bar.js",

package/dist/collection/components/ez-dropdown/ez-dropdown.css

@@ -0,0 +1,349 @@
+:host {
+  /* dropdown */
+  /*@doc Define a posição do componente.*/
+  --ez-dropdown--z-index: var(--more-visible, 2);
+  /*@doc Define o espaçamento interno do componente.*/
+  --ez-dropdown--padding: var(--space--small, 6px);
+  /*@doc Define a sombra externa do componente.*/
+  --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
+  /*@doc Define o raio da borda do componente.*/
+  --ez-dropdown--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define cor de fundo do componente.*/
+  --ez-dropdown--background-color: var(--background--xlight, #fff);
+  /*@doc Define a fonte do componente.*/
+  --ez-dropdown--font-family: var(--font-pattern, 'Roboto');
+  /*@doc Define a largura máxima do componente.*/
+  --ez-dropdown--max-width: 320px;
+  /*@doc Define a altura máxima do componente.*/
+  --ez-dropdown--max-height: 440px;
+
+  /* item*/
+  /*@doc Define o espaçamento interno de cada item do componente.*/
+  --ez-dropdown__item--padding: var(--space--small, 6px);
+  /*@doc Define o espaçamento entre os elementos internos do item do componente.*/
+  --ez-dropdown__item--gap: var(--space--small, 6px);
+  /*@doc Define o raio da borda de cada item do componente.*/
+  --ez-dropdown__item--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a cor do texto de cada item do componente.*/
+  --ez-dropdown__item--color: var(--title--primary, #2b3a54);
+  /*@doc Define o peso do texto de cada item do componente.*/
+  --ez-dropdown__item--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define o tamanho da fonte de cada item do componente.*/
+  --ez-dropdown__item--font-size: var(--text--medium, 14px);
+  /*@doc Define a altura do texto de cada item do componente.*/
+  --ez-dropdown__item--line-height: calc(var(--ez-dropdown__item--font-size) + 4px);
+  /*@doc Define a cor de fundo no hover de cada item do componente.*/
+  --ez-dropdown__item--background-color: var(--background--medium, #f0f3f7);
+  /*@doc Define o efeito de transição do hover de cada item do componente.*/
+  --ez-dropdown__item--transition: var(--transition, .2s linear);
+
+  /* item-label */
+  /*@doc Define o espaçamento direito externo de cada label do componente.*/
+  --ez-dropdown__item-label--margin-right: var(--space--medium, 12px);
+
+  /* icon */
+  /*@doc Define o tamanho da área de cada ícone do componente.*/
+  --ez-dropdown__icon--size: var(--icon--medium, 18px);
+
+  /* divider */
+  /*@doc Define a cor de fundo do divider do componente.*/
+  --ez-dropdown__divider--background-color: var(--color--disable-secondary, #f2f5f8);
+  /*@doc Define o espaçamento externo do divider do componente.*/
+  --ez-dropdown__divider--margin: var(--space--extra-small, 3px) 0;
+
+  /* group-label */
+  /*@doc Define a cor do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--color: var(--text--secondary, #A2ABB9);
+  /*@doc Define o peso do texto do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o tamanho da fonte do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--font-size: var(--text--small, 12px);
+  /*@doc Define a altura do texto do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--line-height: var(--text--medium, 14px);
+  /*@doc Define o espaçamento interno do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--padding: var(--space--small, 6px);
+
+  /* submenu */
+  /*@doc Define a posição do submenu do componente.*/
+  --ez-dropdown__submenu--z-index: var(--most-visible, 3);
+
+  /* link (subAction) */
+  /*@doc Define o peso do texto de cada link do componente.*/
+  --ez-dropdown__link--font-weight: var(--text-weight--large, 600);
+  /*@doc Define a cor utilizada como padrão para ações secundárias.*/
+  --ez-dropdown__link--primary--color: var(--color--primary, #008561);
+  /*@doc Define a cor utilizada para ações destrutivas como um excluir.*/
+  --ez-dropdown__link--critical--color: var(--color-alert--error-800, #BD0025);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--width: var(--space--small, 6px);
+  /*@doc Define o espaçamento interno direito quando houver barra de rolagem.*/
+  --ez-dropdown__scrollbar--padding-right: var(--space--extra-small, 3px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  user-select: none;
+  box-sizing: border-box;
+  position: fixed;
+
+  /*public*/
+  z-index: var(--ez-dropdown--z-index);
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+.ez-dropdown {
+  /*private*/
+  display: flex;
+
+  /*public*/
+  padding: var(--ez-dropdown--padding);
+  box-shadow: var(--ez-dropdown--box-shadow);
+  border-radius: var(--ez-dropdown--border-radius);
+  background-color: var(--ez-dropdown--background-color);
+  max-width: var(--ez-dropdown--max-width);
+  max-height: var(--ez-dropdown--max-height);
+}
+
+.ez-dropdown * {
+  /*public*/
+  font-family: var(--ez-dropdown--font-family);
+}
+
+.ez-dropdown__container {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  flex: auto;
+
+  /*public*/
+  scrollbar-color: var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background);
+}
+
+.ez-dropdown__container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-background);
+  width: var(--ez-dropdown__scrollbar--width);
+  max-width: var(--ez-dropdown__scrollbar--width);
+  min-width: var(--ez-dropdown__scrollbar--width);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-background);
+  border-radius: var(--ez-dropdown__scrollbar--border-radius);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-default);
+  border-radius: var(--ez-dropdown__scrollbar--border-radius);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,
+.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-hover);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,
+.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-clicked);
+}
+
+.ez-dropdown__container--spacer {
+  /*public*/
+  padding-right: var(--ez-dropdown__scrollbar--padding-right);
+}
+
+.ez-dropdown__item {
+  /*private*/
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+
+  /*public*/
+  border-radius: var(--ez-dropdown__item--border-radius);
+  transition: var(--ez-dropdown__item--transition);
+}
+
+.ez-dropdown__item:hover {
+  /*public*/
+  background-color: var(--ez-dropdown__item--background-color);
+}
+
+.ez-dropdown__item-wrapper {
+  /*private*/
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+
+  /*public*/
+  gap: var(--ez-dropdown__item--gap);
+  color: var(--ez-dropdown__item--color);
+  font-weight: var(--ez-dropdown__item--font-weight);
+  font-size: var(--ez-dropdown__item--font-size);
+  line-height: var(--ez-dropdown__item--line-height);
+  padding: var(--ez-dropdown__item--padding);
+}
+
+.ez-dropdown__item-wrapper ez-icon {
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /*public*/
+  width: var(--ez-dropdown__icon--size);
+  height: var(--ez-dropdown__icon--size);
+  min-width: var(--ez-dropdown__icon--size);
+  min-height: var(--ez-dropdown__icon--size);
+}
+
+.ez-dropdown__item-content {
+  /*private*/
+  display: flex;
+  align-items: center;
+  flex: auto;
+  overflow: hidden;
+
+  /*public*/
+  gap: var(--ez-dropdown__item--gap);
+}
+
+.ez-dropdown__item-label {
+  /* private */
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: auto;
+}
+
+.ez-dropdown__item-label:not(:last-child) {
+  /*public*/
+  margin-right: var(--ez-dropdown__item-label--margin-right);
+}
+
+.ez-dropdown__item-content + .ez-dropdown__link {
+  /*public*/
+  margin-left: var(--ez-dropdown__item-label--margin-right);
+  margin-right: var(--ez-dropdown__item--padding);
+}
+
+.ez-dropdown__item-builder {
+  /* private */
+  flex: auto;
+}
+
+.ez-dropdown__divider {
+  /*private*/
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  border: none;
+  display: block;
+
+  /*public*/
+  background-color: var(--ez-dropdown__divider--background-color);
+  margin: var(--ez-dropdown__divider--margin);
+}
+
+.ez-dropdown__hidden {
+  /*private*/
+  visibility: hidden;
+}
+
+.ez-dropdown__group {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.ez-dropdown__group-label {
+  /*private*/
+  display: block;
+  width: 100%;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /*public*/
+  color: var(--ez-dropdown__group-label--color);
+  font-weight: var(--ez-dropdown__group-label--font-weight);
+  font-size: var(--ez-dropdown__group-label--font-size);
+  line-height: var(--ez-dropdown__group-label--line-height);
+  padding: var(--ez-dropdown__group-label--padding);
+}
+
+.ez-dropdown__icon-right {
+  /*private*/
+  margin-left: auto;
+}
+
+.ez-dropdown__submenu {
+  /*private*/
+  position: fixed;
+
+  /*public*/
+  z-index: var(--ez-dropdown__submenu--z-index);
+  margin-top: calc(var(--ez-dropdown__item--padding) * -1);
+}
+
+.ez-dropdown__submenu--hide {
+  /*private*/
+  display: none;
+}
+
+.ez-dropdown__link {
+  /*private*/
+  display: block;
+  margin-left: auto;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  /*public*/
+  font-weight: var(--ez-dropdown__link--font-weight);
+  max-width: calc(var(--ez-dropdown--max-width) * 0.43);
+}
+
+.ez-dropdown__link--primary {
+  /*public*/
+  color: var(--ez-dropdown__link--primary--color);
+}
+
+.ez-dropdown__link--critical {
+  /*public*/
+  color: var(--ez-dropdown__link--critical--color);
+}
+
+.ez-dropdown__link:hover {
+  /*private*/
+  text-decoration: underline;
+}