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

package/dist/custom-elements/index.js

@@ -83100,7 +83100,7 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
   static get style() { return ezModalContainerCss; }
 };
 
-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) {
@@ -84475,6 +84475,90 @@ const shift$1 = function (options) {
   };
 };
 
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 function hasWindow() {
   return typeof window !== 'undefined';
 }
@@ -85331,6 +85415,14 @@ const shift = shift$1;
  */
 const flip = flip$1;
 
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = size$1;
+
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -85377,6 +85469,7 @@ const EzPopoverCore$1 = class extends HTMLElement$1 {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   observeOpened(newValue, oldValue) {
     if (newValue === oldValue) {
@@ -85472,9 +85565,21 @@ const EzPopoverCore$1 = class extends HTMLElement$1 {
       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;
@@ -85490,6 +85595,9 @@ const EzPopoverCore$1 = class extends HTMLElement$1 {
       return;
     }
     this._box.style.display = '';
+    this._box.style.maxWidth = '';
+    this._box.style.maxHeight = '';
+    this._box.style.overflow = '';
     this.hideOverlay();
     this.ezVisibilityChange.emit(false);
   }
@@ -85582,6 +85690,7 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
     this.useAnchorSize = false;
     this.minWidth = 150;
+    this.fitInViewport = true;
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -85660,6 +85769,7 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
     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);
@@ -96430,7 +96540,7 @@ const EzViewStack$1 = class extends HTMLElement$1 {
   static get style() { return ezViewStackCss; }
 };
 
-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}#filter-column-selection-list{--ez-multi-selection-default-height:unset}";
+const filterColumnCss = ".filter-column{padding:var(--space--2xs, 8px);position:relative;display:flex;flex-direction:column;min-height:0;height:100%}.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);flex:0 0 auto}.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);flex:0 0 auto}.filter-column__popover{position:absolute}.filter-column__header-title{margin-left:8px}#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}";
 
 const windowInstace = window;
 const onSubmitFilter = new CustomEvent('onSubmitFilter', {
@@ -96748,8 +96858,8 @@ const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionLi
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"allowNegative":[4,"allow-negative"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"autoFocus":[4,"auto-focus"],"alternativePlaceholder":[1,"alternative-placeholder"],"_value":[32]}]);
 const EzPagination = /*@__PURE__*/proxyCustomElement(EzPagination$1, [2,"ez-pagination",{"type":[1],"currentPage":[1026,"current-page"],"totalItems":[2,"total-items"],"pageSize":[2,"page-size"],"hideInfoLabel":[4,"hide-info-label"],"pageLimit":[2,"page-limit"]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
-const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-popover-core",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
-const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
+const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-popover-core",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"],"fitInViewport":[516,"fit-in-viewport"]}]);
+const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"],"fitInViewport":[516,"fit-in-viewport"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"],"enabledScroll":[4,"enabled-scroll"],"autoClose":[4,"auto-close"],"footerButtons":[16],"_hasFooterSlotContent":[32]}]);
 const EzProgressBar = /*@__PURE__*/proxyCustomElement(EzProgressBar$1, [2,"ez-progress-bar",{"percent":[514],"label":[513],"helpText":[513,"help-text"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host }
 import { i as initI18n } from './index-9e6dab5b.js';
 import { ArrayUtils } from '@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) {