@sankhyalabs/ezui 7.0.7 → 7.0.9

package/dist/custom-elements/index.js

@@ -82600,7 +82600,7 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
   static get style() { return ezPopoverPlusCss; }
 };
 
-const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset;gap:var(--space--16, 16px)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{overflow-y:auto;flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--24, 24px)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset;gap:var(--space--16, 16px)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--24, 24px)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzPopup$1 = class extends HTMLElement$1 {
   constructor() {
@@ -82614,7 +82614,7 @@ const EzPopup$1 = class extends HTMLElement$1 {
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
-    this.enabledScroll = false;
+    this.enabledScroll = true;
     this.autoClose = true;
     this.footerButtons = [];
   }
@@ -82684,9 +82684,6 @@ const EzPopup$1 = class extends HTMLElement$1 {
     if (this.heightMode === 'auto') {
       className += ' popup__container--auto';
     }
-    if (this.enabledScroll) {
-      className += ' popup__overflow-y--auto';
-    }
     className += ` ${this.getGridSize()}`;
     return className;
   }
@@ -82752,7 +82749,10 @@ const EzPopup$1 = class extends HTMLElement$1 {
   }
   render() {
     return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
-      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), h("footer", { class: "popup__footer" }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer' })))))));
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: {
+        "popup__expandable-content": true,
+        "popup__overflow-y--auto": this.enabledScroll
+      } }, h("slot", null)), h("footer", { class: "popup__footer" }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer' })))))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -91564,6 +91564,9 @@ const TreeItem = (props) => {
       iconClick(treeItem);
     }
   }
+  function handleIconDoubleClick(event) {
+    event.stopPropagation();
+  }
   return (h("ul", { class: level === 1 ? "first-level" : undefined },
     h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem), onDblClick: () => available && itemDoubleClick(treeItem) }, {
       disabled,
@@ -91572,7 +91575,7 @@ const TreeItem = (props) => {
     }),
       h("div", { class: "item-label-container" },
         h("div", { class: "item-icon-box" }, expandable &&
-          h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: (event) => handleIconClick(event) })),
+          h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: (event) => handleIconClick(event), onDblClick: (event) => handleIconDoubleClick(event) })),
         h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)),
       getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)),
     expanded
@@ -91664,6 +91667,13 @@ class Node$1 {
       this.children.set(item.id, new Node$1(tree, item, this));
     }
   }
+  removeChild(id) {
+    if (this.children.has(id)) {
+      this.children.delete(id);
+      return true;
+    }
+    return false;
+  }
   addPlaceHolder() {
     this.children.clear();
     const id = this.item.id;
@@ -91778,6 +91788,23 @@ class Tree extends Node$1 {
     }
     this._changeCallback();
   }
+  removeItem(id) {
+    if (!id) {
+      return;
+    }
+    const node = this.getNode(id);
+    if (!node) {
+      return;
+    }
+    if (node.parent) {
+      node.parent.removeChild(id);
+    }
+    else {
+      this.children.delete(id);
+    }
+    this._disabledValues.delete(id);
+    this._changeCallback();
+  }
   async open(path) {
     return new Promise(async (resolve) => {
       await this.walkPath(this, path, node => node.item.expanded = true);
@@ -91911,6 +91938,7 @@ const EzTree$1 = class extends HTMLElement$1 {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezOpenItem = createEvent(this, "ezOpenItem", 7);
     this.ezDbClickItem = createEvent(this, "ezDbClickItem", 7);
+    this.ezRemoveItem = createEvent(this, "ezRemoveItem", 7);
     this._onItemClick = (item) => {
       if (!this.selectable) {
         this.openClose(item);
@@ -92014,12 +92042,48 @@ const EzTree$1 = class extends HTMLElement$1 {
   /**
    * Atualiza um item
    */
-  async updateItem(item) {
-    var _a;
-    this._tree.updateItem(item);
+  async updateItem(item, config) {
+    var _a, _b, _c;
+    if (Array.isArray(item)) {
+      item.forEach(i => this.updateItem(i, config));
+      return;
+    }
+    if (config === null || config === void 0 ? void 0 : config.updatedBySelectedId) {
+      Object.assign(item, { id: this.selectedId });
+    }
+    this._tree.updateItem((config === null || config === void 0 ? void 0 : config.forceDefaultValues) ? this.applyDefaultValues(item) : item);
+    this.updateItemInIndexedList(item, config === null || config === void 0 ? void 0 : config.forceDefaultValues);
     const node = (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getNode(this.selectedId);
     if (node == undefined) {
       this.value = this._visibleItems ? this._visibleItems[0] : undefined;
+      this._tree.collapseAll();
+    }
+    if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.id) === item.id) {
+      this.value = item;
+      this.ezChange.emit(this.value);
+      return;
+    }
+    const childSelected = this.getItemById((_c = this.value) === null || _c === void 0 ? void 0 : _c.id, [item]);
+    if (childSelected) {
+      this.value = childSelected;
+      this.ezChange.emit(this.value);
+    }
+  }
+  /**
+   * Remove um item da árvore pelo seu ID.
+   * Se o item removido estiver selecionado, a seleção será limpa.
+   */
+  async removeItem(id) {
+    var _a;
+    id = id !== null && id !== void 0 ? id : this.selectedId;
+    if (!id) {
+      return;
+    }
+    this._tree.removeItem(id);
+    this.removeItemFromIndexedList(id);
+    this.ezRemoveItem.emit(id);
+    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) === id) {
+      this.value = undefined;
     }
   }
   /**
@@ -92107,23 +92171,69 @@ const EzTree$1 = class extends HTMLElement$1 {
       event.preventDefault();
     }
   }
+  getItemById(id, items) {
+    for (const treeItem of items) {
+      if (treeItem.id === id) {
+        return treeItem;
+      }
+      else if (treeItem.children && Array.isArray(treeItem.children)) {
+        const itemFound = this.getItemById(id, treeItem.children);
+        if (itemFound) {
+          return itemFound;
+        }
+      }
+    }
+    return undefined;
+  }
   addItemInIndexedList(parentId, item, items) {
     var _a, _b;
     items = (_a = items !== null && items !== void 0 ? items : this.items) !== null && _a !== void 0 ? _a : [];
     if (!parentId) {
       items.push(item);
+    }
+    const itemFound = this.getItemById(parentId, items);
+    itemFound.children = ((_b = itemFound.children) !== null && _b !== void 0 ? _b : []);
+    itemFound.children.push(item);
+    itemFound.childrenCount = itemFound.children.length;
+  }
+  applyDefaultValues(item) {
+    if (item.disabled === undefined) {
+      item.disabled = false;
+    }
+    if (item.expanded === undefined) {
+      item.expanded = false;
+    }
+    return item;
+  }
+  updateItemInIndexedList(item, forceDefaultValues = false) {
+    if (!item || !this.items) {
+      return;
+    }
+    const itemFound = this.getItemById(item.id, this.items);
+    if (itemFound) {
+      Object.assign(itemFound, forceDefaultValues ? this.applyDefaultValues(item) : item);
+    }
+  }
+  removeItemFromIndexedList(id, items) {
+    var _a;
+    items = (_a = items !== null && items !== void 0 ? items : this.items) !== null && _a !== void 0 ? _a : [];
+    if (!id) {
+      return false;
+    }
+    const rootIndex = items.findIndex(item => item.id === id);
+    if (rootIndex !== -1) {
+      items.splice(rootIndex, 1);
       return true;
     }
     for (const treeItem of items) {
-      if (treeItem.id === parentId) {
-        treeItem.children = ((_b = treeItem.children) !== null && _b !== void 0 ? _b : []);
-        treeItem.children.push(item);
-        treeItem.childrenCount = treeItem.children.length;
-        return true;
-      }
-      else if (treeItem.children && Array.isArray(treeItem.children)) {
-        const result = this.addItemInIndexedList(parentId, item, treeItem.children);
-        if (result) {
+      if (treeItem.children && Array.isArray(treeItem.children)) {
+        const childIndex = treeItem.children.findIndex(child => child.id === id);
+        if (childIndex !== -1) {
+          treeItem.children.splice(childIndex, 1);
+          treeItem.childrenCount = treeItem.children.length;
+          return true;
+        }
+        if (this.removeItemFromIndexedList(id, treeItem.children)) {
           return true;
         }
       }

package/dist/esm/ez-popup.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { KeyboardManager, FloatingManager } from '@sankhyalabs/core';
 import { i as initI18n } from './index-41363fa6.js';
 
-const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset;gap:var(--space--16, 16px)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{overflow-y:auto;flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--24, 24px)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset;gap:var(--space--16, 16px)}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--24, 24px)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzPopup = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const EzPopup = class {
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
-    this.enabledScroll = false;
+    this.enabledScroll = true;
     this.autoClose = true;
     this.footerButtons = [];
   }
@@ -84,9 +84,6 @@ const EzPopup = class {
     if (this.heightMode === 'auto') {
       className += ' popup__container--auto';
     }
-    if (this.enabledScroll) {
-      className += ' popup__overflow-y--auto';
-    }
     className += ` ${this.getGridSize()}`;
     return className;
   }
@@ -152,7 +149,10 @@ const EzPopup = class {
   }
   render() {
     return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
-      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), h("footer", { class: "popup__footer" }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer' })))))));
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: {
+        "popup__expandable-content": true,
+        "popup__overflow-y--auto": this.enabledScroll
+      } }, h("slot", null)), h("footer", { class: "popup__footer" }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer' })))))));
   }
   get _element() { return getElement(this); }
   static get watchers() { return {