@sankhyalabs/ezui 7.2.0-rc.13 → 7.2.0-rc.14

package/dist/collection/components/ez-grid/subcomponents/filter-column.css

@@ -1,6 +1,10 @@
 .filter-column {
   padding: var(--space--2xs, 8px);
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
 }
 
 .filter-column__header {
@@ -10,6 +14,7 @@
   align-items: center;
   justify-content: space-between;
   height: var(--space--xl, 32px);
+  flex: 0 0 auto;
 }
 
 .filter-column__footer {
@@ -23,6 +28,7 @@
   left: 0;
   padding-top: var(--space--2xs, 8px);
   border-top: var(--border--medium) var(--color--disable-secondary);
+  flex: 0 0 auto;
 }
 
 .filter-column__popover {
@@ -35,4 +41,8 @@
 
 #filter-column-selection-list {
   --ez-multi-selection-default-height: unset;
+  --ez-multi-selection-default-max-height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
 }

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

@@ -1,6 +1,7 @@
 :host {
   --ez-check--outter-gap: 0px;
   --ez-multi-selection-default-height: 322px;
+  --ez-multi-selection-default-max-height: calc(100vh - 435px);
 
   display: block;
   width: 304px;
@@ -24,7 +25,7 @@
 }
 
 .multi-selection__list {
-  max-height: calc(100vh - 435px);
+  max-height: var(--ez-multi-selection-default-max-height);
   overflow-y: auto;
   overflow-x: clip;
 }

package/dist/collection/components/ez-popover-plus/ez-popover-plus.js

@@ -10,6 +10,7 @@ export class EzPopoverPlus {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -88,6 +89,7 @@ export class EzPopoverPlus {
     this._popOverCore.options = this.options;
     this._popOverCore.useAnchorSize = this.useAnchorSize;
     this._popOverCore.minWidth = this.minWidth;
+    this._popOverCore.fitInViewport = this.fitInViewport;
     this._popOverCore.setAttribute("data-element-id", this.buildElementId(["ez-popover-core", this._host.getAttribute("data-element-id")]));
     this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
       this.ezVisibilityChange.emit(detail);
@@ -273,6 +275,24 @@ export class EzPopoverPlus {
         "attribute": "min-width",
         "reflect": true,
         "defaultValue": "150"
+      },
+      "fitInViewport": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o popover deve se ajustar ao espa\u00E7o vis\u00EDvel dispon\u00EDvel para n\u00E3o ser\ncortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro,\no conte\u00FAdo passa a rolar internamente em vez de ficar com parte oculta.\nPadr\u00E3o: true."
+        },
+        "attribute": "fit-in-viewport",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.js

@@ -1,4 +1,4 @@
-import { computePosition, flip, shift } from "@floating-ui/dom";
+import { computePosition, flip, shift, size } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 export class EzPopoverCore {
   constructor() {
@@ -10,6 +10,7 @@ export class EzPopoverCore {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   observeOpened(newValue, oldValue) {
     if (newValue === oldValue) {
@@ -105,9 +106,21 @@ export class EzPopoverCore {
       return;
     }
     const currentAnchorElement = this.getAnchorElement();
+    const middleware = [flip(), shift({ padding: 5 })];
+    if (this.fitInViewport) {
+      middleware.push(size({
+        padding: 5,
+        apply: ({ availableWidth, availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.max(0, availableWidth)}px`,
+            maxHeight: `${Math.max(0, availableHeight)}px`
+          });
+        },
+      }));
+    }
     await computePosition(currentAnchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
-      middleware: [flip(), shift({ padding: 5 })],
+      middleware,
       strategy: 'fixed',
     }).then(({ x, y, placement }) => {
       const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
@@ -123,6 +136,9 @@ export class EzPopoverCore {
       return;
     }
     this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
     this.hideOverlay();
     this.ezVisibilityChange.emit(false);
   }
@@ -357,6 +373,24 @@ export class EzPopoverCore {
         "attribute": "min-width",
         "reflect": true,
         "defaultValue": "150"
+      },
+      "fitInViewport": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o popover deve se ajustar ao espa\u00E7o vis\u00EDvel dispon\u00EDvel para n\u00E3o ser\ncortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro,\na largura/altura m\u00E1ximas do popover passam a ser limitadas ao espa\u00E7o dispon\u00EDvel\ne o conte\u00FAdo rola internamente, em vez de ficar com parte oculta. O elemento\npermanece no shadow DOM, preservando o estilo e o conte\u00FAdo do slot.\nPadr\u00E3o: true."
+        },
+        "attribute": "fit-in-viewport",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }