@sankhyalabs/ezui 5.20.3 → 5.21.0-dev.1

package/dist/cjs/filter-column.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const filterColumnCss = ".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}";
@@ -22,6 +22,8 @@ const FilterColumn = class {
     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 = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -54,15 +56,24 @@ const FilterColumn = class {
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
-  calculateLeftPosition(configs) {
-    if (!configs.fromIcon) {
-      return configs.leftPosition;
+  calculateLeftPosition({ leftPosition, fromIcon }) {
+    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
+    if (!fromIcon) {
+      return `${leftPositionCalculated}px`;
     }
     const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
-    const leftResolved = (leftReference + 16) - difference;
+    const leftResolved = (leftPositionCalculated + 16) - difference;
     return `${(leftResolved > 0 ? leftResolved : 0)}px`;
   }
+  calcFilterColumnLeftPosition(leftReference) {
+    var _a, _b;
+    const gridReference = this.ezPopoverElement.closest("ez-grid");
+    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
+    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
+    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
+    return leftInt > maxLeft ? maxLeft : leftInt;
+  }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : core.UserInterface.SHORTTEXT;

package/dist/cjs/{index-1064511f.js → index-a7b0c73d.js}

@@ -2020,6 +2020,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
     }
 };
 const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
+        return doc;
     if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
         return win;
     return elm;
@@ -2193,10 +2195,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ez-breadcrumb.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ez-card-item.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ez-card-item.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ez-file-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2221,6 +2219,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ez-skeleton.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'ez-split-button.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './ez-split-button.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ez-split-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2233,10 +2235,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ez-view-stack.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ez-dropdown.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ez-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ez-form-view.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2249,6 +2247,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './filter-column.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'ez-dropdown.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './ez-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ez-multi-selection-list.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2257,10 +2259,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ez-text-edit.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ez-filter-input_2.cjs':
+        case 'ez-card-item_3.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './ez-filter-input_2.cjs.entry.js')); }).then(processMod, consoleError);
+            './ez-card-item_3.cjs.entry.js')); }).then(processMod, consoleError);
       }
     }
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 
 /*
  Stencil Client Patch Esm v2.22.3 | 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(JSON.parse("[[\"ez-grid.cjs\",[[6,\"ez-grid\",{\"multipleSelection\":[4,\"multiple-selection\"],\"config\":[1040],\"selectionToastConfig\":[16],\"serverUrl\":[1,\"server-url\"],\"dataUnit\":[16],\"statusResolver\":[16],\"columnfilterDataSource\":[16],\"useEnterLikeTab\":[4,\"use-enter-like-tab\"],\"recordsValidator\":[16],\"canEdit\":[4,\"can-edit\"],\"_paginationInfo\":[32],\"_paginationChangedByKeyboard\":[32],\"_showSelectionCounter\":[32],\"_isAllSelection\":[32],\"_currentPageSelected\":[32],\"_selectionCount\":[32],\"_hasLeftButtons\":[32],\"setColumnsDef\":[64],\"addColumnMenuItem\":[64],\"setColumnsState\":[64],\"setData\":[64],\"getSelection\":[64],\"getColumnsState\":[64],\"getColumns\":[64],\"quickFilter\":[64],\"locateColumn\":[64],\"filterColumns\":[64]},[[0,\"ezSelectionChange\",\"onSelectionChange\"]]]]],[\"ez-guide-navigator.cjs\",[[1,\"ez-guide-navigator\",{\"open\":[1540],\"selectedId\":[1537,\"selected-id\"],\"items\":[16],\"tooltipResolver\":[16],\"filterText\":[32],\"disableItem\":[64],\"openGuideNavidator\":[64],\"enableItem\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"selectGuide\":[64],\"getParent\":[64]}]]],[\"ez-alert-list.cjs\",[[1,\"ez-alert-list\",{\"alerts\":[1040],\"enableDragAndDrop\":[516,\"enable-drag-and-drop\"],\"enableExpand\":[516,\"enable-expand\"],\"itemRightSlotBuilder\":[16],\"opened\":[1540],\"expanded\":[1540]}]]],[\"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],\"showActions\":[64],\"isOpened\":[64]}]]],[\"ez-breadcrumb.cjs\",[[1,\"ez-breadcrumb\",{\"items\":[1040],\"fillMode\":[1025,\"fill-mode\"],\"maxItems\":[1026,\"max-items\"],\"positionEllipsis\":[1026,\"position-ellipsis\"],\"visibleItems\":[32],\"hiddenItems\":[32],\"showDropdown\":[32],\"collapseConfigPosition\":[32]}]]],[\"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\"],\"beforeClose\":[1040],\"show\":[64]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"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-badge.cjs\",[[1,\"ez-badge\",{\"size\":[513],\"label\":[513],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"position\":[1040],\"hasSlot\":[32]}]]],[\"ez-chip.cjs\",[[1,\"ez-chip\",{\"label\":[513],\"enabled\":[516],\"removePosition\":[513,\"remove-position\"],\"mode\":[513],\"value\":[1540],\"showNativeTooltip\":[4,\"show-native-tooltip\"],\"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-application.cjs\",[[0,\"ez-application\"]]],[\"ez-card-item.cjs\",[[1,\"ez-card-item\",{\"item\":[16]}]]],[\"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],\"heightMode\":[1,\"height-mode\"],\"opened\":[1028],\"closeEsc\":[4,\"close-esc\"],\"closeOutsideClick\":[4,\"close-outside-click\"],\"scrim\":[1]}]]],[\"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-skeleton.cjs\",[[0,\"ez-skeleton\",{\"count\":[2],\"variant\":[1],\"width\":[1],\"height\":[1],\"marginBottom\":[1,\"margin-bottom\"],\"animation\":[1]}]]],[\"ez-split-item.cjs\",[[0,\"ez-split-item\"]]],[\"ez-split-panel.cjs\",[[0,\"ez-split-panel\",{\"direction\":[1]}]]],[\"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-dropdown.cjs\",[[1,\"ez-dropdown\",{\"items\":[1040],\"value\":[1040],\"itemBuilder\":[16]}]]],[\"ez-tabselector.cjs\",[[1,\"ez-tabselector\",{\"selectedIndex\":[1538,\"selected-index\"],\"selectedTab\":[1537,\"selected-tab\"],\"tabs\":[1],\"_processedTabs\":[32]}]]],[\"ez-multi-selection-list.cjs\",[[2,\"ez-multi-selection-list\",{\"columnName\":[1,\"column-name\"],\"dataSource\":[16],\"useOptions\":[1028,\"use-options\"],\"options\":[1040],\"isTextSearch\":[4,\"is-text-search\"],\"filteredOptions\":[32],\"displayOptions\":[32],\"viewScenario\":[32],\"displayOptionToCheckAllItems\":[32],\"clearFilteredOptions\":[64]}]]],[\"ez-collapsible-box.cjs\",[[1,\"ez-collapsible-box\",{\"value\":[1540],\"boxBordered\":[4,\"box-bordered\"],\"label\":[513],\"subtitle\":[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-calendar.cjs\",[[1,\"ez-calendar\",{\"value\":[1040],\"floating\":[516],\"time\":[516],\"showSeconds\":[516,\"show-seconds\"],\"show\":[64],\"fitVertical\":[64],\"fitHorizontal\":[64],\"hide\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"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\"],\"password\":[4],\"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],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[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],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[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],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-number-input.cjs\",[[1,\"ez-number-input\",{\"label\":[1],\"value\":[1538],\"enabled\":[4],\"canShowError\":[516,\"can-show-error\"],\"errorMessage\":[1537,\"error-message\"],\"precision\":[2],\"prettyPrecision\":[2,\"pretty-precision\"],\"mode\":[513],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-form-view.cjs\",[[2,\"ez-form-view\",{\"fields\":[16],\"showUp\":[64]}]]],[\"ez-popover.cjs\",[[1,\"ez-popover\",{\"autoClose\":[516,\"auto-close\"],\"boxWidth\":[513,\"box-width\"],\"opened\":[1540],\"innerElement\":[1537,\"inner-element\"],\"overlayType\":[513,\"overlay-type\"],\"updatePosition\":[64],\"show\":[64],\"showUnder\":[64],\"hide\":[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],\"enableResize\":[516,\"enable-resize\"],\"appendTextToSelection\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-upload.cjs\",[[1,\"ez-upload\",{\"label\":[1],\"subtitle\":[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-scroller_3.cjs\",[[1,\"ez-tree\",{\"items\":[1040],\"value\":[1040],\"selectedId\":[1537,\"selected-id\"],\"iconResolver\":[16],\"tooltipResolver\":[16],\"_tree\":[32],\"_waintingForLoad\":[32],\"selectItem\":[64],\"openItem\":[64],\"disableItem\":[64],\"enableItem\":[64],\"addChild\":[64],\"applyFilter\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"getParent\":[64]},[[2,\"keydown\",\"onKeyDownListener\"]]],[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\"]]],[1,\"ez-sidebar-button\"]]],[\"ez-list.cjs\",[[1,\"ez-list\",{\"dataSource\":[1040],\"listMode\":[1,\"list-mode\"],\"useGroups\":[1540,\"use-groups\"],\"ezDraggable\":[1028,\"ez-draggable\"],\"ezSelectable\":[1028,\"ez-selectable\"],\"itemSlotBuilder\":[1040],\"itemLeftSlotBuilder\":[1040],\"hoverFeedback\":[1028,\"hover-feedback\"],\"_listItems\":[32],\"_listGroupItems\":[32],\"clearHistory\":[64],\"scrollToTop\":[64],\"setSelection\":[64],\"getSelection\":[64],\"getList\":[64],\"removeSelection\":[64]}]]],[\"ez-combo-box.cjs\",[[1,\"ez-combo-box\",{\"limitCharsToSearch\":[2,\"limit-chars-to-search\"],\"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],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"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],\"canShowError\":[516,\"can-show-error\"],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"ignoreLimitCharsToSearch\":[4,\"ignore-limit-chars-to-search\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64],\"getValueAsync\":[64]}]]],[\"ez-filter-input_2.cjs\",[[0,\"multi-selection-box-message\",{\"message\":[1]}],[1,\"ez-filter-input\",{\"label\":[1],\"value\":[1537],\"enabled\":[4],\"errorMessage\":[1537,\"error-message\"],\"restrict\":[1],\"mode\":[513],\"asyncSearch\":[516,\"async-search\"],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"setValue\":[64],\"endSearch\":[64]}]]],[\"ez-check.cjs\",[[1,\"ez-check\",{\"label\":[513],\"value\":[1540],\"enabled\":[1540],\"indeterminate\":[1540],\"mode\":[513],\"compact\":[4],\"getMode\":[64],\"setFocus\":[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]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-form.cjs\",[[2,\"ez-form\",{\"dataUnit\":[1040],\"config\":[16],\"recordsValidator\":[16],\"fieldToFocus\":[1,\"field-to-focus\"],\"validate\":[64]}]]],[\"filter-column.cjs\",[[0,\"filter-column\",{\"opened\":[4],\"columnName\":[1,\"column-name\"],\"columnLabel\":[1,\"column-label\"],\"gridHeaderHidden\":[4,\"grid-header-hidden\"],\"noHeaderTaskBar\":[1028,\"no-header-task-bar\"],\"dataSource\":[16],\"dataUnit\":[16],\"options\":[1040],\"selectedItems\":[32],\"fieldDescriptor\":[32],\"useOptions\":[32],\"isTextSearch\":[32],\"hide\":[64],\"show\":[64]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"ez-grid.cjs\",[[6,\"ez-grid\",{\"multipleSelection\":[4,\"multiple-selection\"],\"config\":[1040],\"selectionToastConfig\":[16],\"serverUrl\":[1,\"server-url\"],\"dataUnit\":[16],\"statusResolver\":[16],\"columnfilterDataSource\":[16],\"useEnterLikeTab\":[4,\"use-enter-like-tab\"],\"recordsValidator\":[16],\"canEdit\":[4,\"can-edit\"],\"_paginationInfo\":[32],\"_paginationChangedByKeyboard\":[32],\"_showSelectionCounter\":[32],\"_isAllSelection\":[32],\"_currentPageSelected\":[32],\"_selectionCount\":[32],\"_hasLeftButtons\":[32],\"setColumnsDef\":[64],\"addColumnMenuItem\":[64],\"setColumnsState\":[64],\"setData\":[64],\"getSelection\":[64],\"getColumnsState\":[64],\"getColumns\":[64],\"quickFilter\":[64],\"locateColumn\":[64],\"filterColumns\":[64]},[[0,\"ezSelectionChange\",\"onSelectionChange\"]]]]],[\"ez-guide-navigator.cjs\",[[1,\"ez-guide-navigator\",{\"open\":[1540],\"selectedId\":[1537,\"selected-id\"],\"items\":[16],\"tooltipResolver\":[16],\"filterText\":[32],\"disableItem\":[64],\"openGuideNavidator\":[64],\"enableItem\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"selectGuide\":[64],\"getParent\":[64]}]]],[\"ez-alert-list.cjs\",[[1,\"ez-alert-list\",{\"alerts\":[1040],\"enableDragAndDrop\":[516,\"enable-drag-and-drop\"],\"enableExpand\":[516,\"enable-expand\"],\"itemRightSlotBuilder\":[16],\"opened\":[1540],\"expanded\":[1540],\"_container\":[32]}]]],[\"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],\"showActions\":[64],\"isOpened\":[64]}]]],[\"ez-breadcrumb.cjs\",[[1,\"ez-breadcrumb\",{\"items\":[1040],\"fillMode\":[1025,\"fill-mode\"],\"maxItems\":[1026,\"max-items\"],\"positionEllipsis\":[1026,\"position-ellipsis\"],\"visibleItems\":[32],\"hiddenItems\":[32],\"showDropdown\":[32],\"collapseConfigPosition\":[32]}]]],[\"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\"],\"beforeClose\":[1040],\"show\":[64]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"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-split-button.cjs\",[[1,\"ez-split-button\",{\"enabled\":[516],\"iconName\":[513,\"icon-name\"],\"image\":[513],\"items\":[16],\"label\":[513],\"leftTitle\":[513,\"left-title\"],\"rightTitle\":[513,\"right-title\"],\"mode\":[513],\"size\":[513],\"show\":[32],\"setBlur\":[64],\"setLeftButtonFocus\":[64],\"setRightButtonFocus\":[64]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-split-item.cjs\",[[4,\"ez-split-item\",{\"label\":[1],\"enableExpand\":[516,\"enable-expand\"],\"size\":[1],\"_expanded\":[32]}]]],[\"ez-alert.cjs\",[[1,\"ez-alert\",{\"alertType\":[513,\"alert-type\"]}]]],[\"ez-badge.cjs\",[[1,\"ez-badge\",{\"size\":[513],\"label\":[513],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"position\":[1040],\"hasSlot\":[32]}]]],[\"ez-chip.cjs\",[[1,\"ez-chip\",{\"label\":[513],\"enabled\":[516],\"removePosition\":[513,\"remove-position\"],\"mode\":[513],\"value\":[1540],\"showNativeTooltip\":[4,\"show-native-tooltip\"],\"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-application.cjs\",[[0,\"ez-application\"]]],[\"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],\"heightMode\":[1,\"height-mode\"],\"opened\":[1028],\"closeEsc\":[4,\"close-esc\"],\"closeOutsideClick\":[4,\"close-outside-click\"],\"scrim\":[1]}]]],[\"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-skeleton.cjs\",[[0,\"ez-skeleton\",{\"count\":[2],\"variant\":[1],\"width\":[1],\"height\":[1],\"marginBottom\":[1,\"margin-bottom\"],\"animation\":[1]}]]],[\"ez-split-panel.cjs\",[[0,\"ez-split-panel\",{\"direction\":[1],\"anchorToExpand\":[4,\"anchor-to-expand\"],\"rebuildLayout\":[64]}]]],[\"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-collapsible-box.cjs\",[[1,\"ez-collapsible-box\",{\"value\":[1540],\"boxBordered\":[4,\"box-bordered\"],\"label\":[513],\"subtitle\":[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-combo-box.cjs\",[[1,\"ez-combo-box\",{\"limitCharsToSearch\":[2,\"limit-chars-to-search\"],\"value\":[1537],\"label\":[513],\"enabled\":[516],\"options\":[1040],\"errorMessage\":[1537,\"error-message\"],\"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],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-time-input.cjs\",[[1,\"ez-time-input\",{\"label\":[513],\"value\":[1026],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"showSeconds\":[516,\"show-seconds\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-number-input.cjs\",[[1,\"ez-number-input\",{\"label\":[1],\"value\":[1538],\"enabled\":[4],\"canShowError\":[516,\"can-show-error\"],\"errorMessage\":[1537,\"error-message\"],\"precision\":[2],\"prettyPrecision\":[2,\"pretty-precision\"],\"mode\":[513],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-popover.cjs\",[[1,\"ez-popover\",{\"autoClose\":[516,\"auto-close\"],\"boxWidth\":[513,\"box-width\"],\"opened\":[1540],\"innerElement\":[1537,\"inner-element\"],\"overlayType\":[513,\"overlay-type\"],\"updatePosition\":[64],\"show\":[64],\"showUnder\":[64],\"hide\":[64]}]]],[\"ez-list.cjs\",[[1,\"ez-list\",{\"dataSource\":[1040],\"listMode\":[1,\"list-mode\"],\"useGroups\":[1540,\"use-groups\"],\"ezDraggable\":[1028,\"ez-draggable\"],\"ezSelectable\":[1028,\"ez-selectable\"],\"itemSlotBuilder\":[1040],\"itemLeftSlotBuilder\":[1040],\"hoverFeedback\":[1028,\"hover-feedback\"],\"_listItems\":[32],\"_listGroupItems\":[32],\"clearHistory\":[64],\"scrollToTop\":[64],\"setSelection\":[64],\"getSelection\":[64],\"getList\":[64],\"removeSelection\":[64]}]]],[\"ez-calendar.cjs\",[[1,\"ez-calendar\",{\"value\":[1040],\"floating\":[516],\"time\":[516],\"showSeconds\":[516,\"show-seconds\"],\"show\":[64],\"fitVertical\":[64],\"fitHorizontal\":[64],\"hide\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"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\"],\"password\":[4],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-multi-selection-list.cjs\",[[2,\"ez-multi-selection-list\",{\"columnName\":[1,\"column-name\"],\"dataSource\":[16],\"useOptions\":[1028,\"use-options\"],\"options\":[1040],\"isTextSearch\":[4,\"is-text-search\"],\"filteredOptions\":[32],\"displayOptions\":[32],\"viewScenario\":[32],\"displayOptionToCheckAllItems\":[32],\"clearFilteredOptions\":[64]}]]],[\"filter-column.cjs\",[[0,\"filter-column\",{\"opened\":[4],\"columnName\":[1,\"column-name\"],\"columnLabel\":[1,\"column-label\"],\"gridHeaderHidden\":[4,\"grid-header-hidden\"],\"noHeaderTaskBar\":[1028,\"no-header-task-bar\"],\"dataSource\":[16],\"dataUnit\":[16],\"options\":[1040],\"selectedItems\":[32],\"fieldDescriptor\":[32],\"useOptions\":[32],\"isTextSearch\":[32],\"hide\":[64],\"show\":[64]}]]],[\"ez-date-input.cjs\",[[1,\"ez-date-input\",{\"label\":[513],\"value\":[1040],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[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],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-dropdown.cjs\",[[1,\"ez-dropdown\",{\"items\":[1040],\"value\":[1040],\"itemBuilder\":[16]},[[4,\"click\",\"handleClickOutside\"]]]]],[\"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],\"enableResize\":[516,\"enable-resize\"],\"appendTextToSelection\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-upload.cjs\",[[1,\"ez-upload\",{\"label\":[1],\"subtitle\":[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-scroller_3.cjs\",[[1,\"ez-tree\",{\"items\":[1040],\"value\":[1040],\"selectedId\":[1537,\"selected-id\"],\"iconResolver\":[16],\"tooltipResolver\":[16],\"_tree\":[32],\"_waintingForLoad\":[32],\"selectItem\":[64],\"openItem\":[64],\"disableItem\":[64],\"enableItem\":[64],\"addChild\":[64],\"applyFilter\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"getParent\":[64]},[[2,\"keydown\",\"onKeyDownListener\"]]],[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\"]]],[1,\"ez-sidebar-button\"]]],[\"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],\"canShowError\":[516,\"can-show-error\"],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"ignoreLimitCharsToSearch\":[4,\"ignore-limit-chars-to-search\"],\"options\":[1040],\"suppressSearch\":[4,\"suppress-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-check.cjs\",[[1,\"ez-check\",{\"label\":[513],\"value\":[1540],\"enabled\":[1540],\"indeterminate\":[1540],\"mode\":[513],\"compact\":[4],\"getMode\":[64],\"setFocus\":[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]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-card-item_3.cjs\",[[0,\"multi-selection-box-message\",{\"message\":[1]}],[1,\"ez-filter-input\",{\"label\":[1],\"value\":[1537],\"enabled\":[4],\"errorMessage\":[1537,\"error-message\"],\"restrict\":[1],\"mode\":[513],\"asyncSearch\":[516,\"async-search\"],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"setValue\":[64],\"endSearch\":[64]}],[1,\"ez-card-item\",{\"item\":[16],\"enableKey\":[4,\"enable-key\"]}]]],[\"ez-form-view.cjs\",[[2,\"ez-form-view\",{\"fields\":[16],\"showUp\":[64]}]]],[\"ez-form.cjs\",[[2,\"ez-form\",{\"dataUnit\":[1040],\"config\":[16],\"recordsValidator\":[16],\"fieldToFocus\":[1,\"field-to-focus\"],\"validate\":[64]}]]]]"), options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -4,9 +4,9 @@
     "./components/ez-alert-list/ez-alert-list.js",
     "./components/ez-modal/ez-modal.js",
     "./components/ez-combo-box/ez-combo-box.js",
-    "./components/ez-actions-button/ez-actions-button.js",
-    "./components/ez-breadcrumb/ez-breadcrumb.js",
     "./components/ez-card-item/ez-card-item.js",
+    "./components/ez-search/ez-search.js",
+    "./components/ez-breadcrumb/ez-breadcrumb.js",
     "./components/ez-text-input/ez-text-input.js",
     "./components/ez-popover/ez-popover.js",
     "./components/ez-radio-button/ez-radio-button.js",
@@ -14,6 +14,7 @@
     "./components/ez-text-edit/ez-text-edit.js",
     "./components/ez-upload/ez-upload.js",
     "./components/ez-grid/subcomponents/filter-column.js",
+    "./components/ez-actions-button/ez-actions-button.js",
     "./components/ez-alert/ez-alert.js",
     "./components/ez-application/ez-application.js",
     "./components/ez-badge/ez-badge.js",
@@ -40,9 +41,9 @@
     "./components/ez-number-input/ez-number-input.js",
     "./components/ez-popup/ez-popup.js",
     "./components/ez-scroller/ez-scroller.js",
-    "./components/ez-search/ez-search.js",
     "./components/ez-sidebar-button/ez-sidebar-button.js",
     "./components/ez-skeleton/ez-skeleton.js",
+    "./components/ez-split-button/ez-split-button.js",
     "./components/ez-split-panel/ez-split-panel.js",
     "./components/ez-split-panel/structure/item/ez-split-item.js",
     "./components/ez-text-area/ez-text-area.js",

package/dist/collection/components/ez-alert-list/ez-alert-list.css

@@ -7,6 +7,11 @@
   --ez-alert-list__container--width: 680px;
   /*@doc Define a altura da lista minimizado */
   --ez-alert-list__container--height: 220px;
+  
+  /*@doc Define a largura da lista maximizada */
+  --ez-alert-list__container--width--expanded: 920px;
+  /*@doc Define a altura da lista maximizada */
+  --ez-alert-list__container--height--expanded: 540px;
 
   /* Title */
   /*@doc Define a fonte do título do componente */
@@ -38,13 +43,22 @@
 }
 
 .alert-list__container {
-  z-index: var(--more-visible--2x, 3);
+  z-index: var(--ez-elevation--8, 8);
   display: flex;
   height: var(--ez-alert-list__container--height);
   width: var(--ez-alert-list__container--width);
   border-radius: var(--border--radius-medium);
   background-color: var(--background--xlight);
-  box-shadow: 0px 8px 24px 0px rgba(0, 38, 111, 0.1);
+  box-shadow: var(--shadow--medium);
+
+  &.expanded {
+    height: var(--ez-alert-list__container--height--expanded);
+    width: var(--ez-alert-list__container--width--expanded);
+  }
+
+  @media (max-height: 640px) {
+    max-height: calc(100vh - var(--space--3xl));
+  }  
 }
 
 .alert-list__header {

package/dist/collection/components/ez-alert-list/ez-alert-list.js

@@ -2,77 +2,150 @@ import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
 import { Host, h } from '@stencil/core';
 export class EzAlertList {
   constructor() {
+    this._container = undefined;
     this.alerts = [];
     this.enableDragAndDrop = undefined;
-    this.enableExpand = undefined;
+    this.enableExpand = true;
     this.itemRightSlotBuilder = undefined;
     this.opened = true;
     this.expanded = false;
   }
   observeOpened() {
-    this.manageOverlay();
+    if (this.opened) {
+      this.manageOverlay();
+    }
+  }
+  /**
+   * Retorna o id do alerta a partir do título e do índice.
+   */
+  alertId(title, index) {
+    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  /**
+   * Retorna o título do alerta a partir do id.
+   */
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  /**
+   * Retorna o link para o titulo do alerta a partir do id.
+   */
+  getLinkTitle(item) {
+    var _a;
+    const link = (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === item.id)) === null || _a === void 0 ? void 0 : _a.link;
+    return link !== null && link !== void 0 ? link : "#";
+  }
+  /**
+    * Retorna o texto do título do alerta.
+    */
+  getTitleText(item) {
+    var _a;
+    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
+    return `${title}${(title && item.label) ? ':' : ''}`;
+  }
+  /**
+   * Gerencia a exibição do conteúdo expandido.
+   */
+  toggleExpandContainer() {
+    if (!this.enableExpand) {
+      return;
+    }
+    ;
+    this.expanded = !this.expanded;
+    this._container.classList.toggle('expanded', this.expanded);
+    if (this.expanded) {
+      this.updatePosition(this.getBoundingRight(), this.getBoundingBottom());
+    }
+    else {
+      this.updatePosition(`10px`, `10px`);
+    }
   }
   /**
    * Gerencia a exibição do overlay usando FloatingManager do Core.
    */
-  async manageOverlay() {
-    if (this.opened) {
-      this._overlayId = FloatingManager.float(this._container, this._overlayRef, {
-        autoClose: false,
-        isFixed: !this.enableDragAndDrop,
-        bottom: '10px',
-        right: '10px'
-      });
+  manageOverlay() {
+    if (this.opened && this._container) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
     }
     else {
+      if (this._overlayId === undefined)
+        return;
       FloatingManager.close(this._overlayId);
       this._overlayId = undefined;
     }
   }
-  componentDidRender() {
-    this.manageOverlay();
+  /**
+   * Atualiza a posição da lista.
+   */
+  updatePosition(right, bottom) {
     if (this.opened) {
-      this._container.focus();
+      FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+        bottom }));
     }
   }
-  componentWillLoad() {
-    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  ;
+  /**
+   * Retorna valores padrões do componente
+   */
+  getFloatOptions() {
+    return {
+      autoClose: false,
+      isFixed: true,
+      bottom: '10px',
+      right: '10px',
+    };
   }
-  alertId(title, index) {
-    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
-    return `alert-${index}-${concatTitle(title)}`;
+  ;
+  /**
+   * Retorna o valor para o alinhamento horizontal do componente.
+   */
+  getBoundingRight() {
+    const docWidth = document.body.clientWidth;
+    const boxWidth = this._container.getBoundingClientRect().width;
+    return ((docWidth - boxWidth) / 2) + 'px';
   }
-  getAlertTitle(id) {
-    var _a;
-    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  /**
+   * Retorna o valor para o alinhamento vertical do componente.
+   */
+  getBoundingBottom() {
+    const docHeight = document.body.clientHeight;
+    const boxHeight = this._container.getBoundingClientRect().height;
+    return ((docHeight - boxHeight) / 2) + 'px';
   }
-  getTitleText(item) {
-    var _a;
-    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
-    return `${title}${(title && item.label) ? ':' : ''}`;
+  componentDidLoad() {
+    this.manageOverlay();
+    if (this.opened && this._container) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
   }
   render() {
-    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: "alert-list__container", ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, h("ez-button", { mode: "icon", size: "small", iconName: "expand", "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), onClick: () => { }, title: this.expanded ? 'Resumir' : 'Expandir' }), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
-        this.opened = false;
-      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
-        return (h("a", { href: "#", style: {
-            fontFamily: "var(--font-pattern, 'Roboto')",
-            fontSize: 'var(--text--medium, 14px)',
-            fontWeight: 'var(--text-weight--medium, 400)',
-            color: 'var(--color--primary, #008561)',
-            marginRight: '4px',
-            cursor: 'pointer',
-            display: 'flex',
-            width: 'max-content',
-            textDecoration: 'none'
-          } }, this.getTitleText(item)));
-      }, dataSource: this.alerts.map((alert, index) => {
-        var _a;
-        return {
-          id: this.alertId(alert.title, index),
-          label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
-        };
-      }) })))))));
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
+      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+          this.opened = false;
+        }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+          return (h("a", { href: this.getLinkTitle(item), style: {
+              fontFamily: "var(--font-pattern, 'Roboto')",
+              fontSize: 'var(--text--medium, 14px)',
+              fontWeight: 'var(--text-weight--medium, 400)',
+              color: 'var(--color--primary, #008561)',
+              marginRight: '4px',
+              cursor: 'pointer',
+              display: 'flex',
+              width: 'max-content',
+              textDecoration: 'none'
+            } }, this.getTitleText(item)));
+        }, dataSource: this.alerts.map((alert, index) => {
+          var _a;
+          return {
+            id: this.alertId(alert.title, index),
+            label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
+          };
+        }) })))))) : null));
   }
   static get is() { return "ez-alert-list"; }
   static get encapsulation() { return "shadow"; }
@@ -140,7 +213,8 @@ export class EzAlertList {
           "text": "Define se o componente pode ser expandido."
         },
         "attribute": "enable-expand",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "true"
       },
       "itemRightSlotBuilder": {
         "type": "unknown",
@@ -200,10 +274,15 @@ export class EzAlertList {
       }
     };
   }
+  static get states() {
+    return {
+      "_container": {}
+    };
+  }
   static get elementRef() { return "_element"; }
   static get watchers() {
     return [{
-        "propName": "opened",
+        "propName": "_container",
         "methodName": "observeOpened"
       }];
   }

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -42,6 +42,9 @@
   padding: 12px;
   z-index: 0;
   position: relative;
+  container-type: inline-size;
+  container-name: box;
+  white-space: pre-line;
 }
 
 .card-item:hover {
@@ -71,23 +74,27 @@
 
 .card-item__details {
   display: flex;
+  flex-direction: column;
   cursor: pointer;
   justify-content: space-between;
-  gap: var(--space--small, 6px);
+  width: 100%;
 }
 
-.card-item__details-left {
+.card-item__details-container__left {
+  white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
-.card-item__details-right {
+.card-item__details-container__right {
+  white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
 .card-item__detail:not(:last-child) {
   cursor: pointer;
+  white-space: pre-line;
 
   /*public*/
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
@@ -124,4 +131,46 @@
   outline: 2px solid var(--ez-card-item__highlight--color);
   box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), 
                4px 0px 0px 0px var(--ez-card-item__highlight--color);
+}
+
+.card-item__content{
+  display: flex;
+  align-items: center;
+}
+
+.card-item__details-container{
+  display: flex;
+}
+
+.card-item__details-slot{
+  margin-left: auto;
+}
+
+@container box (max-width: 550px) {
+  .card-item__details {
+    flex-direction: column;
+  }
+
+  .card-item__details-container__left {
+    width: 100%;
+  }
+  
+  .card-item__details-container__right {
+    width: 100%;
+  }
+}
+
+@container box (max-width: 200px) {
+  .card-item__title {
+    font-size: 10px;
+  }
+
+  .card-item__detail-label {
+    font-size: 10px;
+  }
+
+  .card-item__detail-value {
+    font-size: 10px;
+  }
+
 }

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -3,6 +3,7 @@ import { h, Host } from '@stencil/core';
 export class EzCardItem {
   constructor() {
     this.item = undefined;
+    this.enableKey = true;
   }
   componentWillRender() {
     this.createDetailList();
@@ -30,11 +31,11 @@ export class EzCardItem {
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title" }, h("span", { class: "card-item__key", innerHTML: this.item.key }), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
-      }))))));
+      })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
   static get is() { return "ez-card-item"; }
   static get encapsulation() { return "shadow"; }
@@ -68,6 +69,24 @@ export class EzCardItem {
           "tags": [],
           "text": "Determina o conte\u00FAdo do card. Deve conter um objeto no formato:\n`{title: string, key: string, details: any}`."
         }
+      },
+      "enableKey": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se a chave do item deve ser exibida."
+        },
+        "attribute": "enable-key",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }