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

package/dist/cjs/ez-multi-selection-list.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-a7b0c73d.js');
 const index$1 = require('./index-9739c242.js');
 const core = require('@sankhyalabs/core');
 
-const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-height:322px;display:block;width:304px;height:var(--ez-multi-selection-default-height);min-height:fit-content;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
+const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-height:322px;--ez-multi-selection-default-max-height:calc(100vh - 435px);display:block;width:304px;height:var(--ez-multi-selection-default-height);min-height:fit-content;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{max-height:var(--ez-multi-selection-default-max-height);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
 
 var ViewScenarios;
 (function (ViewScenarios) {

package/dist/cjs/ez-popover-core.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-bea31048.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-9c8bfebb.js');
 
 const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--elevation--100, 100);--ez-popover__box--overlay-z-index:var(--elevation--24, 24);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--ez-popover__box--overlay-z-index)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
 
@@ -19,6 +19,7 @@ const EzPopoverCore = class {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   observeOpened(newValue, oldValue) {
     if (newValue === oldValue) {
@@ -114,9 +115,21 @@ const EzPopoverCore = class {
       return;
     }
     const currentAnchorElement = this.getAnchorElement();
+    const middleware = [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift({ padding: 5 })];
+    if (this.fitInViewport) {
+      middleware.push(floatingUi_dom_esm.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 floatingUi_dom_esm.computePosition(currentAnchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
-      middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift({ padding: 5 })],
+      middleware,
       strategy: 'fixed',
     }).then(({ x, y, placement }) => {
       const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
@@ -132,6 +145,9 @@ const EzPopoverCore = class {
       return;
     }
     this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
     this.hideOverlay();
     this.ezVisibilityChange.emit(false);
   }

package/dist/cjs/ez-popover-plus_3.cjs.entry.js

@@ -20,6 +20,7 @@ const EzPopoverPlus = class {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -98,6 +99,7 @@ const EzPopoverPlus = class {
     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);

package/dist/cjs/ez-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-bea31048.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-9c8bfebb.js');
 const core = require('@sankhyalabs/core');
 
 const ezTooltipCss = ":host{--ez-tooltip--triangle-size:var(--space--8);--ez-tooltip--z-index:var(--elevation--24);--ez-tooltip--padding:var(--space--4) var(--space--8);--ez-tooltip--border-radius:var(--border--radius-8);--ez-tooltip--font-family:var(--font--pattern);--ez-tooltip--font-size:var(--font-size--small);--ez-tooltip--font-weight:var(--font-weight--regular);width:100%}.tooltip{position:absolute;z-index:var(--ez-tooltip--z-index);padding:var(--ez-tooltip--padding);border-radius:var(--ez-tooltip--border-radius);box-sizing:border-box;font-family:var(--ez-tooltip--font-family);font-size:var(--ez-tooltip--font-size);font-weight:var(--ez-tooltip--font-weight);text-align:center;width:max-content;display:none}.tooltip[data-strategy=\"fixed\"]{position:fixed}.arrow{position:absolute;width:var(--ez-tooltip--triangle-size);height:var(--ez-tooltip--triangle-size);transform:rotate(45deg)}.tooltip[data-type=\"default\"]{background:var(--color--petroleum-600);color:var(--color--gray-70)}.tooltip[data-type=\"default\"] .arrow{background:var(--color--petroleum-600)}.tooltip[data-type=\"error\"]{background:var(--color--red-600);color:var(--color--red-100)}.tooltip[data-type=\"error\"] .arrow{background:var(--color--red-600)}.tooltip[data-type=\"success\"]{background:var(--color--green-600);color:var(--color--green-100)}.tooltip[data-type=\"success\"] .arrow{background:var(--color--green-600)}.tooltip[data-type=\"warning\"]{background:var(--color--yellow-600);color:var(--color--yellow-100)}.tooltip[data-type=\"warning\"] .arrow{background:var(--color--yellow-600)}.tooltip[data-active=\"false\"]{display:none !important}";