@sankhyalabs/ezui 4.18.2 → 4.19.1

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

@@ -1,14 +1,12 @@
-import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
-import { Fragment, h, Host } from "@stencil/core";
-;
-;
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { Fragment, Host, h } from '@stencil/core';
 export class EzList {
   constructor() {
     this._listItemsHistory = [];
     this._listItems = [];
     this._listGroupItems = [];
     this.dataSource = [];
-    this.listMode = "regular";
+    this.listMode = 'regular';
     this.useGroups = false;
     this.ezDraggable = false;
     this.ezSelectable = false;
@@ -26,10 +24,10 @@ export class EzList {
    */
   async scrollToTop() {
     if (this.useGroups) {
-      this._element.shadowRoot.querySelector(".group-container").scrollTop = 0;
+      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
     }
     else {
-      this._element.shadowRoot.querySelector(".items-container").scrollTop = 0;
+      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
     }
   }
   /**
@@ -65,9 +63,9 @@ export class EzList {
         this._listItems = newList;
       }
       if (scrollToOption) {
-        let liElem = this.useGroups ?
-          this._groupContainer.querySelector("li#item_" + this.getItemId(selectedItem.label))
-          : this._itemContainer.querySelector("li#item_" + this.getItemId(selectedItem.label));
+        let liElem = this.useGroups
+          ? this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
+          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
         if (liElem) {
           liElem.scrollIntoView();
         }
@@ -84,7 +82,7 @@ export class EzList {
     let selectedItem;
     if (this.useGroups) {
       this._listGroupItems.every(group => {
-        let item = group.items.find((item) => item.selected == true);
+        let item = group.items.find(item => item.selected == true);
         if (item) {
           selectedItem = item;
           return false;
@@ -93,7 +91,7 @@ export class EzList {
       });
     }
     else {
-      selectedItem = this._listItems.find((item) => item.selected == true);
+      selectedItem = this._listItems.find(item => item.selected == true);
     }
     return selectedItem;
   }
@@ -123,7 +121,7 @@ export class EzList {
       itemGroup.items.sort(function (a, b) {
         return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
       });
-      if (itemGroup.sort === "DSC") {
+      if (itemGroup.sort === 'DSC') {
         itemGroup.items.reverse();
       }
     }
@@ -148,19 +146,19 @@ export class EzList {
   }
   buildIdDraggableListAndSelectable() {
     const shadow = this._element.shadowRoot;
-    const draggableList = shadow.querySelectorAll(".draggable-list");
+    const draggableList = shadow.querySelectorAll('.draggable-list');
     draggableList === null || draggableList === void 0 ? void 0 : draggableList.forEach((draggable, index) => {
       var _a, _b;
-      let suffix = "draggableList";
+      let suffix = 'draggableList';
       const group = (_b = (_a = this._listGroupItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.group;
       if (this.useGroups && group) {
         suffix = suffix.concat('_', group);
       }
       ElementIDUtils.addIDInfoIfNotExists(draggable, suffix);
     });
-    const selectable = shadow.querySelectorAll(".selectable-container");
+    const selectable = shadow.querySelectorAll('.selectable-container');
     selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
-      ElementIDUtils.addIDInfoIfNotExists(item, "selectable");
+      ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
   }
   componentWillLoad() {
@@ -187,15 +185,17 @@ export class EzList {
         //Adiciona item arrastado
         if (groupEnd.sort) {
           newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
-          newList.find(group => group.group == dragEndItem.groupName).items.sort(function (a, b) {
+          newList
+            .find(group => group.group == dragEndItem.groupName)
+            .items.sort(function (a, b) {
             return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
           });
-          if (groupEnd.sort === "DSC") {
+          if (groupEnd.sort === 'DSC') {
             newList.find(group => group.group == dragEndItem.groupName).items.reverse();
           }
         }
         else {
-          let indexForAdd = (dragEndItem.index > this._dragStartItem.index) ? dragEndItem.index - 1 : dragEndItem.index;
+          let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
           newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
         }
         this._listGroupItems = newList;
@@ -224,10 +224,12 @@ export class EzList {
         //Adiciona item arrastado
         newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
         if (groupEnd.sort) {
-          newList.find(group => group.group == groupDropped.group).items.sort(function (a, b) {
+          newList
+            .find(group => group.group == groupDropped.group)
+            .items.sort(function (a, b) {
             return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
           });
-          if (groupEnd.sort === "DSC") {
+          if (groupEnd.sort === 'DSC') {
             newList.find(group => group.group == groupDropped.group).items.reverse();
           }
         }
@@ -290,23 +292,23 @@ export class EzList {
     }
   }
   addOverClass(element) {
-    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains("draggable")) {
-      element.classList.add("over");
+    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
+      element.classList.add('over');
     }
-    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains("draggable-list")) {
+    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
       this.addOverClass(element.parentElement);
     }
   }
   addOverGroupClass(ev, group) {
     if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
       if (group.items.length > 0) {
-        groupOverlay.setAttribute("style", "display:grid");
+        groupOverlay.setAttribute('style', 'display:grid');
       }
       else {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
         groupOverlay.scrollIntoView(false);
       }
     }
@@ -316,31 +318,31 @@ export class EzList {
     let overCollection;
     let overLastDroppableCollection;
     if (this.useGroups) {
-      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("over");
-      overLastDroppableCollection = this._groupContainer.getElementsByClassName("last-droppable-space");
+      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('over');
+      overLastDroppableCollection = this._groupContainer.getElementsByClassName('last-droppable-space');
     }
     else {
-      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName("over");
-      overLastDroppableCollection = this._itemContainer.getElementsByClassName("last-droppable-space");
+      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('over');
+      overLastDroppableCollection = this._itemContainer.getElementsByClassName('last-droppable-space');
     }
     if (overCollection) {
       Array.from(overCollection).forEach(function (element) {
-        element.classList.remove("over");
+        element.classList.remove('over');
       });
     }
     if (overLastDroppableCollection) {
       Array.from(overLastDroppableCollection).forEach(function (element) {
-        element.classList.remove("over");
+        element.classList.remove('over');
       });
     }
   }
   removeOverGroupClass(ev, group) {
     if (ev.target) {
-      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
-      let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
       if (groupOverlay) {
-        groupOverlay.classList.remove("presetedHeight");
-        groupOverlay.setAttribute("style", "display:none");
+        groupOverlay.classList.remove('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:none');
       }
     }
   }
@@ -405,7 +407,7 @@ export class EzList {
         let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === 0) {
-            if ((groupIndex - 1 >= 0)) {
+            if (groupIndex - 1 >= 0) {
               item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
             }
           }
@@ -433,10 +435,10 @@ export class EzList {
     this.getSelection().then(selectedItem => {
       if (selectedItem) {
         switch (event.key) {
-          case "ArrowDown":
+          case 'ArrowDown':
             this.nextOption(selectedItem);
             break;
-          case "ArrowUp":
+          case 'ArrowUp':
             this.previousOption(selectedItem);
             break;
         }
@@ -449,19 +451,19 @@ export class EzList {
   }
   getItemId(itemLabel) {
     if (itemLabel) {
-      return itemLabel.replace(/[^a-z0-9_]/gi, "_");
+      return itemLabel.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
   getDivGroupId(groupName) {
     if (groupName) {
-      return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+      return 'group-' + groupName.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
   getGroupOverlayId(groupName) {
     if (groupName) {
-      return "group-overlay-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+      return 'group-overlay-' + groupName.replace(/[^a-z0-9_]/gi, '_');
     }
     return undefined;
   }
@@ -481,26 +483,26 @@ export class EzList {
   onDragOverLastIndex(ev) {
     ev.preventDefault();
     if (this._dragStartItem) {
-      ev.target.classList.add("over");
+      ev.target.classList.add('over');
       ev.stopPropagation();
     }
   }
   showOverlays(groupDragStart) {
-    let groupOverlayCollection = this._groupContainer.getElementsByClassName("group-overlay");
+    let groupOverlayCollection = this._groupContainer.getElementsByClassName('group-overlay');
     Array.from(groupOverlayCollection).forEach(groupOverlay => {
       let groupOverlayID = this.getGroupOverlayId(groupDragStart.group);
-      if (groupOverlayID && groupOverlay.getAttribute("id") && groupOverlayID != groupOverlay.getAttribute("id")) {
-        groupOverlay.classList.add("presetedHeight");
-        groupOverlay.setAttribute("style", "display:grid");
+      if (groupOverlayID && groupOverlay.getAttribute('id') && groupOverlayID != groupOverlay.getAttribute('id')) {
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
       }
     });
   }
   hideOverlays() {
     var _a;
-    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName("group-overlay");
+    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('group-overlay');
     Array.from(groupOverlayCollection).forEach(groupOverlay => {
-      groupOverlay.classList.remove("presetedHeight");
-      groupOverlay.setAttribute("style", "display:none");
+      groupOverlay.classList.remove('presetedHeight');
+      groupOverlay.setAttribute('style', 'display:none');
     });
   }
   getContainerItemBuilder(item, group, className) {
@@ -511,30 +513,39 @@ export class EzList {
     if (customContent == undefined) {
       return;
     }
-    if (typeof customContent !== "string") {
-      return (h("div", { class: className }, customContent));
+    if (typeof customContent !== 'string') {
+      return h("div", { class: className }, customContent);
     }
-    return (h("div", { class: className, innerHTML: customContent }));
+    return h("div", { class: className, innerHTML: customContent });
   }
   render() {
-    return (h(Host, { ref: (el) => this._element = el }, this.useGroups ?
-      h("div", { class: "group-container", ref: (el) => this._groupContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, this._listGroupItems.map(group => {
-        return h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: (ev) => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: "item_" + this.getItemId(item.label), class: {
-            "selectable-container": this.ezSelectable,
-            "hover-feedback": this.hoverFeedback
-          }, key: "item_" + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: () => { group.sort ? undefined : this.removeOverClass(); }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: (event) => { group.sort ? undefined : this.onDragOverItem(event); }, onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === "regular" ?
-          h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label) :
-          h("ez-check", { label: item.label, value: item.check, onEzChange: (evt) => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, "slot-item") : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event, group) })), group.sort ?
-          h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)
-          : undefined));
-      }))
-      :
-        h("div", { class: "items-container", ref: (el) => this._itemContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: "item_" + this.getItemId(item.label), class: {
-            "selectable-container": this.ezSelectable,
-            "hover-feedback": this.hoverFeedback
-          }, key: "item_" + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: () => this.removeOverClass(), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === "regular" ?
-          h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) :
-          h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: (evt) => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
+    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, this._listGroupItems.map(group => {
+      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+          'selectable-container': this.ezSelectable,
+          'hover-feedback': this.hoverFeedback,
+        }, key: 'item_' + this.getItemId(item.label) }, {
+        [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onClick: () => {
+          this.setSelection(item);
+        }, onDragLeave: () => {
+          group.sort ? undefined : this.removeOverClass();
+        }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
+          group.sort ? undefined : this.onDragOverItem(event);
+        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, 'slot-item') : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+          this.onDragOverLastIndex(event);
+        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
+    }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+        'selectable-container': this.ezSelectable,
+        'hover-feedback': this.hoverFeedback,
+      }, key: 'item_' + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
+        this.setSelection(item);
+      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+        this.onDragOverLastIndex(event);
+      }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "shadow"; }
@@ -596,7 +607,7 @@ export class EzList {
         },
         "attribute": "list-mode",
         "reflect": false,
-        "defaultValue": "\"regular\""
+        "defaultValue": "'regular'"
       },
       "useGroups": {
         "type": "boolean",
@@ -715,7 +726,7 @@ export class EzList {
           "text": "Emitido quando acontece a altera\u00E7\u00E3o de estado da lista."
         },
         "complexType": {
-          "original": "Array<ListItem|ListGroup>",
+          "original": "Array<ListItem | ListGroup>",
           "resolved": "(ListItem | ListGroup)[]",
           "references": {
             "Array": {

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

@@ -69,7 +69,6 @@
   box-sizing: border-box;
   max-height: 100%;
   height: 100%;
-  overflow-y: auto;
   background-color: rgb(255, 255, 255);
   padding: var(--ez-modal-content-padding);
   box-shadow: rgb(0 38 111 / 12%) 0px 0px 16px 0px;

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -3,6 +3,9 @@
   grid-template-rows: 0 auto 1fr auto;
   width: 100%;
   height: 100%;
+
+  /* @doc Define o tamanho do header e do footer com os espaçamentos necessários para scroll no content. */
+  --ez-modal-container__content--subtract-height: 154px;
 }
 
 .ez-modal-container__header{
@@ -13,8 +16,11 @@
 }
 
 .ez-modal-container__content {
+  display: flex;
   overflow-y: auto;
   overflow-x: clip;
+
+  height: calc(100vh - var(--ez-modal-container__content--subtract-height));
 }
 
 .ez-modal-container__title{
@@ -33,6 +39,11 @@
 
 .ez-modal-container__focus-ctrl{
   height: 0px;
+  width: 0px;
   background-color: transparent;
   border: none;
+}
+
+.ez-modal-container__footer{
+  padding-top: var(--space--small, 6px);
 }

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -32,7 +32,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-flex ez-flex--justify-end" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-flex ez-flex--justify-end  ez-modal-container__footer" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.css

@@ -0,0 +1,36 @@
+:host {
+  --ez-check--outter-gap: 0px;
+
+  display: block;
+  width: 304px;
+  height: 322px;
+  max-height: calc(100vh - 350px);
+}
+
+.multi-selection__input {
+  margin-bottom: var(--space--2xs, 8px);
+}
+
+.multi-selection__content-options {
+  position: relative;
+  top: -12px;
+  left: -4px;
+}
+
+.multi-selection__select-all {
+  height: var(--space--xl);
+  margin: 0 var(--space--small, 6px);
+}
+
+.multi-selection__list {
+  height: 235px;
+  max-height: calc(100vh - 435px);
+  overflow-y: auto;
+  overflow-x: clip;
+}
+
+.multi-selection__list::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
+}