@sankhyalabs/ezui 5.20.0-dev.4 → 5.20.0-dev.41

package/dist/esm/ez-split-button.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #FFF);--ez-split-button--font-size:var(--text--medium, 14px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--medium, #008561);--ez-split-button--border-radius:var(--border--radius-large, 12px);--ez-split-button--border:none;--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600);--ez-split-button--hover--background-color:var(--background--medium, var(--ez-split-button--background-color));--ez-split-button--disabled-color:var(--text--disable);--ez-split-button--disabled--background-color:var(--color--disable-secondary);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:var(--ez-split-button--border);justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:focus,.ez-split-button__right-button:focus{outline:var(--ez-split-button--focus--border);box-shadow:var(--ez-split-button--focus--box-shadow)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+
+const EzSplitButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonClick = createEvent(this, "buttonClick", 7);
+    this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
+    this.dropdownSubActionClick = createEvent(this, "dropdownSubActionClick", 7);
+    this.rightDefaultTitle = 'Mais opções';
+    this.show = false;
+    this.enabled = true;
+    this.iconName = undefined;
+    this.image = undefined;
+    this.items = undefined;
+    this.label = undefined;
+    this.leftTitle = undefined;
+    this.rightTitle = 'Mais opções';
+    this.mode = 'default';
+    this.size = 'medium';
+  }
+  /**
+   * Remove o foco de ambos os botões.
+   */
+  async setBlur() {
+    this.leftButton.blur();
+    this.rightButton.blur();
+  }
+  /**
+   * Aplica o foco no botão principal.
+   */
+  async setLeftButtonFocus() {
+    this.leftButton.focus();
+  }
+  /**
+   * Aplica o foco no botão do dropdown.
+   */
+  async setRightButtonFocus() {
+    this.rightButton.focus();
+  }
+  clickListener(evt) {
+    if (!this.enabled) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  }
+  getIconSize(sizeParam = 'medium') {
+    var _a;
+    const sizeList = ['medium', 'large'];
+    const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
+  closeDropdown() {
+    this.show = false;
+  }
+  toggleDropdown() {
+    this.show = !this.show;
+  }
+  handleButtonClick() {
+    this.buttonClick.emit();
+  }
+  handleDropdownItemClick(evt) {
+    this.dropdownItemClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  handleDropdownSubActionClick(evt) {
+    this.dropdownSubActionClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  resolveOffsetParentRect() {
+    var _a, _b;
+    const offsetParentRect = (_b = (_a = this.dropdownParent) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const rectWithoutScroll = {
+      top: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) + scrollTop,
+      left: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) + scrollLeft,
+      bottom: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.bottom) + scrollTop,
+      right: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.right) + scrollLeft,
+      width: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.width,
+      height: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.height
+    };
+    this.offsetParentRect = rectWithoutScroll;
+  }
+  /**
+   * Método responsável em posicionar o dropdown na tela.
+   * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+   */
+  positionDropdown() {
+    var _a, _b, _c, _d, _e, _f;
+    const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
+    const rightButtonRect = _rightButton.getBoundingClientRect();
+    const dropdownParentRect = _dropdownParent.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - (rightButtonRect.bottom + ((_a = this.offsetParentRect) === null || _a === void 0 ? void 0 : _a.top));
+    const spaceAbove = rightButtonRect.top + ((_b = this.offsetParentRect) === null || _b === void 0 ? void 0 : _b.top);
+    const spaceRight = window.innerWidth - (rightButtonRect.left + ((_c = this.offsetParentRect) === null || _c === void 0 ? void 0 : _c.left));
+    const spaceLeft = rightButtonRect.left;
+    const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
+    const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
+    let top = `${rightButtonRect.bottom - ((_d = this.offsetParentRect) === null || _d === void 0 ? void 0 : _d.top) + window.scrollY}px`;
+    let left = `${rightButtonRect.left - ((_e = this.offsetParentRect) === null || _e === void 0 ? void 0 : _e.left) + window.scrollX}px`;
+    let bottom = 'auto';
+    if (hasSpaceBelow) {
+      bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
+      top = 'auto';
+      _dropdownParent.style.maxHeight = `${spaceAbove}px`;
+    }
+    if (hasSpaceRight) {
+      left = `${rightButtonRect.right - dropdownParentRect.width - ((_f = this.offsetParentRect) === null || _f === void 0 ? void 0 : _f.left) + window.scrollX}px`;
+    }
+    _dropdownParent.style.top = top;
+    _dropdownParent.style.bottom = bottom;
+    _dropdownParent.style.left = left;
+  }
+  setEvents() {
+    window.removeEventListener('scroll', this.positionDropdown.bind(this));
+    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  }
+  componentWillLoad() {
+    this.setEvents();
+  }
+  componentWillRender() {
+    this.resolveOffsetParentRect();
+  }
+  componentDidLoad() {
+    if (this._element)
+      ElementIDUtils.addIDInfo(this._element);
+    if (this.leftButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+    }
+    if (this.rightButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+    }
+    this.positionDropdown();
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+  }
+  render() {
+    const hasIconButton = this.shouldShowIconOnLeftButton();
+    const hasLabelButton = this.shouldShowLabelOnLeftButton();
+    const iconSize = this.getIconSize();
+    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
+  }
+  shouldShowLabelOnLeftButton() {
+    return ['icon-left', 'default'].includes(this.mode);
+  }
+  shouldShowIconOnLeftButton() {
+    return ['icon-left', 'icon-only'].includes(this.mode);
+  }
+  get _element() { return getElement(this); }
+};
+EzSplitButton.style = ezSplitButtonCss;
+
+export { EzSplitButton as ez_split_button };

package/dist/esm/ez-split-item.entry.js

@@ -1,13 +1,31 @@
 import { r as registerInstance, h, H as Host } from './index-baa5e267.js';
+import './ApplicationUtils-eaf91331.js';
+import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
+import './DialogType-54a62731.js';
+import './CheckMode-bdb2ec19.js';
+import '@sankhyalabs/core';
 
-const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);padding:var(--space--nano);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow)}";
+const ezSplitItemCss = "ez-split-item{--snk-grid-min-height:0;--ez-grid--min-height:0}.box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow);flex-direction:column;overflow:hidden;display:flex;padding:var(--space--nano)}.box_split-item>.ez-split-item--content{overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}";
 
 const SplitItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.label = undefined;
+    this.enableExpand = true;
+    this._expanded = false;
+    this.size = undefined;
+  }
+  /**
+   * Alterna a visibilidade do painel.
+   */
+  toggleExpandItem() {
+    this._expanded = !this._expanded;
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: 'box_split-item' }));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--small ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, this.enableExpand && (h("ez-button", { size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })), h("slot", { name: "rightButtons" }))), h("div", { class: "ez-split-item--content", ref: el => (this._slot = el) }, h("slot", null))));
   }
 };
 SplitItem.style = ezSplitItemCss;

package/dist/esm/ez-split-panel.entry.js

@@ -678,18 +678,30 @@ Grid.prototype.destroy = function destroy (immediate) {
 
 function index (options) { return new Grid(options); }
 
-const ezSplitPanelCss = ".ez-split-gutter{cursor:grab;background-color:transparent}.ez-split-panel--header{display:flex;align-items:center;justify-content:space-between;height:30px}";
+const ezSplitPanelCss = ".ez-split-gutter{cursor:grab;background-color:transparent}";
 
 const SplitPanel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this._items = [];
+    this._buildInProgress = false;
     this.direction = 'column';
-    this.label = undefined;
+    this.anchorToExpand = false;
   }
-  componentDidLoad() {
+  rebuildLayout() {
+    Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
+      el.remove();
+    });
+    Array.from(this._element.getElementsByTagName("EzSplitPanel")).reverse().forEach(el => {
+      el['rebuildLayout']();
+    });
+    this.buildItems();
+    this.initSplit();
+  }
+  buildItems() {
     this._panelID = StringUtils.generateUUID();
     this._element.dataset.panelId = this._panelID;
+    this._element.dataset.uniqueId = "EzSplitPanel";
     let itemsElements = Array.from(this._element.children);
     this._items = itemsElements.filter(child => { var _a; return ((_a = child.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'EZ-SPLIT-ITEM'; });
     let trackCount = 1;
@@ -700,7 +712,30 @@ const SplitPanel = class {
       }
       trackCount += 2;
     });
+  }
+  componentDidLoad() {
+    this.buildItems();
     this.initSplit();
+    this._mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList' && this._buildInProgress === false) {
+          this._buildInProgress = true;
+          window.requestAnimationFrame(() => {
+            this.rebuildLayout();
+          });
+          window.requestAnimationFrame(() => this._buildInProgress = false);
+          break;
+        }
+      }
+    });
+    // Configure o observer para observar mudanças nos filhos
+    this._mutationObserver.observe(this._element, { childList: true, subtree: false });
+  }
+  disconnectedCallback() {
+    //disconect o _mutationObserver
+    if (this._mutationObserver != undefined) {
+      this._mutationObserver.disconnect();
+    }
   }
   initSplit() {
     if (!this._items.length) {
@@ -712,7 +747,7 @@ const SplitPanel = class {
   getGutters() {
     const gutters = {
       columnGutters: [],
-      rowGutters: []
+      rowGutters: [],
     };
     if (!this._items.length) {
       return gutters;
@@ -722,19 +757,19 @@ const SplitPanel = class {
       if (index == this._items.length - 1)
         return;
       let gutterTrack = item.dataset.trackNumber;
-      if (index === (this._items.length - 1)) {
+      if (index === this._items.length - 1) {
         gutterTrack = this._items.length.toString();
       }
       gutters[proToChange].push({
         track: Number(gutterTrack),
-        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`),
       });
     });
     return gutters;
   }
   addItemGutter(item) {
     const gutter = document.createElement('div');
-    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
@@ -742,29 +777,31 @@ const SplitPanel = class {
   }
   getElementStyle() {
     const style = {
-      'display': "grid",
-      'height': '100%',
-      'width': '100%'
+      display: 'grid',
+      height: '100%',
+      width: '100%',
+      position: this.anchorToExpand ? 'relative' : 'unset',
     };
     return style;
   }
   getGridTemplate() {
     let template = '';
-    this._items.forEach((_col, index) => {
+    this._items.forEach((col, index) => {
+      const size = col.size || '1fr';
       if (index === this._items.length - 1) {
-        template += ` 1fr`;
+        template += ` ${size}`;
         return;
       }
       if (index === 0) {
-        template += `1fr 5px`;
+        template += `${size} 5px`;
         return;
       }
-      template += ` 1fr 5px`;
+      template += ` ${size} 5px`;
     });
     return template;
   }
   render() {
-    return (h(Host, { style: this.getElementStyle() }, h("div", { class: "ez-split-panel--header ez-margin-top--small ez-margin-bottom--small" }, h("div", { class: "ez-margin-left--small" }, this.label), h("div", { class: "ez-margin-right--small" }, h("slot", { name: "rightButtons" }))), h("slot", null)));
+    return h(Host, { style: this.getElementStyle() });
   }
   get _element() { return getElement(this); }
 };

package/dist/esm/ez-time-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from '@sankhyalabs/core';
-import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
+import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
-const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container--z-index:var(--most-visible, 3);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__container--left:var(--space--large, 24px);--ez-toast__container--bottom:var(--space--large, 24px);--ez-toast__container--width:400px;--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;box-sizing:border-box;border-radius:6px;align-items:center;padding:12px;visibility:hidden;width:var(--ez-toast__container--width);left:var(--ez-toast__container--left);bottom:var(--ez-toast__container--bottom);z-index:var(--ez-toast__container--z-index);background-color:var(--ez-toast__container--background-color)}.message__container{text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis;font-family:var(--font-pattern, \"Roboto\")}.message__container--icon{width:80%;padding-left:var(--ez-toast__icon--padding-left)}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@-webkit-keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}@keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}";
+const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container--z-index:var(--elevation--100, 100);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__container--left:var(--space--large, 24px);--ez-toast__container--bottom:var(--space--large, 24px);--ez-toast__container--width:400px;--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;box-sizing:border-box;border-radius:6px;align-items:center;padding:12px;visibility:hidden;width:var(--ez-toast__container--width);left:var(--ez-toast__container--left);bottom:var(--ez-toast__container--bottom);z-index:var(--ez-toast__container--z-index);background-color:var(--ez-toast__container--background-color)}.message__container{text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis;font-family:var(--font-pattern, \"Roboto\")}.message__container--icon{width:80%;padding-left:var(--ez-toast__icon--padding-left)}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@-webkit-keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}@keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}";
 
 const EzToast = class {
   constructor(hostRef) {

package/dist/esm/ezui.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"ez-grid\",[[6,\"ez-grid\",{\"multipleSelection\":[4,\"multiple-selection\"],\"config\":[1040],\"selectionToastConfig\":[16],\"serverUrl\":[1,\"server-url\"],\"dataUnit\":[16],\"statusResolver\":[16],\"columnfilterDataSource\":[16],\"useEnterLikeTab\":[4,\"use-enter-like-tab\"],\"recordsValidator\":[16],\"canEdit\":[4,\"can-edit\"],\"_paginationInfo\":[32],\"_paginationChangedByKeyboard\":[32],\"_showSelectionCounter\":[32],\"_isAllSelection\":[32],\"_currentPageSelected\":[32],\"_selectionCount\":[32],\"_hasLeftButtons\":[32],\"setColumnsDef\":[64],\"addColumnMenuItem\":[64],\"setColumnsState\":[64],\"setData\":[64],\"getSelection\":[64],\"getColumnsState\":[64],\"getColumns\":[64],\"quickFilter\":[64],\"locateColumn\":[64],\"filterColumns\":[64]},[[0,\"ezSelectionChange\",\"onSelectionChange\"]]]]],[\"ez-guide-navigator\",[[1,\"ez-guide-navigator\",{\"open\":[1540],\"selectedId\":[1537,\"selected-id\"],\"items\":[16],\"tooltipResolver\":[16],\"filterText\":[32],\"disableItem\":[64],\"openGuideNavidator\":[64],\"enableItem\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"selectGuide\":[64],\"getParent\":[64]}]]],[\"ez-alert-list\",[[1,\"ez-alert-list\",{\"alerts\":[1040],\"enableDragAndDrop\":[516,\"enable-drag-and-drop\"],\"enableExpand\":[516,\"enable-expand\"],\"itemRightSlotBuilder\":[16],\"opened\":[1540],\"expanded\":[1540]}]]],[\"ez-actions-button\",[[1,\"ez-actions-button\",{\"enabled\":[516],\"actions\":[1040],\"size\":[513],\"showLabel\":[516,\"show-label\"],\"displayIcon\":[513,\"display-icon\"],\"checkOption\":[516,\"check-option\"],\"value\":[513],\"isTransparent\":[516,\"is-transparent\"],\"arrowActive\":[516,\"arrow-active\"],\"_selectedAction\":[32],\"hideActions\":[64],\"showActions\":[64],\"isOpened\":[64]}]]],[\"ez-breadcrumb\",[[1,\"ez-breadcrumb\",{\"items\":[1040],\"fillMode\":[1025,\"fill-mode\"],\"maxItems\":[1026,\"max-items\"],\"positionEllipsis\":[1026,\"position-ellipsis\"],\"visibleItems\":[32],\"hiddenItems\":[32],\"showDropdown\":[32],\"collapseConfigPosition\":[32]}]]],[\"ez-dialog\",[[1,\"ez-dialog\",{\"confirm\":[1028],\"dialogType\":[1025,\"dialog-type\"],\"message\":[1025],\"opened\":[1540],\"personalizedIconPath\":[1025,\"personalized-icon-path\"],\"ezTitle\":[1025,\"ez-title\"],\"beforeClose\":[1040],\"show\":[64]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"ez-modal-container\",[[6,\"ez-modal-container\",{\"modalTitle\":[1,\"modal-title\"],\"modalSubTitle\":[1,\"modal-sub-title\"],\"showTitleBar\":[4,\"show-title-bar\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonStatus\":[1,\"cancel-button-status\"],\"okButtonStatus\":[1,\"ok-button-status\"]}]]],[\"ez-alert\",[[1,\"ez-alert\",{\"alertType\":[513,\"alert-type\"]}]]],[\"ez-badge\",[[1,\"ez-badge\",{\"size\":[513],\"label\":[513],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"position\":[1040],\"hasSlot\":[32]}]]],[\"ez-chip\",[[1,\"ez-chip\",{\"label\":[513],\"enabled\":[516],\"removePosition\":[513,\"remove-position\"],\"mode\":[513],\"value\":[1540],\"showNativeTooltip\":[4,\"show-native-tooltip\"],\"setFocus\":[64],\"setBlur\":[64]}]]],[\"ez-file-item\",[[1,\"ez-file-item\",{\"canRemove\":[4,\"can-remove\"],\"fileName\":[1,\"file-name\"],\"iconName\":[1,\"icon-name\"],\"fileSize\":[2,\"file-size\"],\"progress\":[2]}]]],[\"ez-application\",[[0,\"ez-application\"]]],[\"ez-card-item\",[[1,\"ez-card-item\",{\"item\":[16]}]]],[\"ez-loading-bar\",[[1,\"ez-loading-bar\",{\"_showLoading\":[32],\"hide\":[64],\"show\":[64]}]]],[\"ez-modal\",[[1,\"ez-modal\",{\"modalSize\":[1,\"modal-size\"],\"align\":[1],\"heightMode\":[1,\"height-mode\"],\"opened\":[1028],\"closeEsc\":[4,\"close-esc\"],\"closeOutsideClick\":[4,\"close-outside-click\"],\"scrim\":[1]}]]],[\"ez-popup\",[[1,\"ez-popup\",{\"size\":[1],\"opened\":[1540],\"useHeader\":[516,\"use-header\"],\"heightMode\":[513,\"height-mode\"],\"ezTitle\":[1,\"ez-title\"]}]]],[\"ez-radio-button\",[[1,\"ez-radio-button\",{\"value\":[1544],\"options\":[1040],\"enabled\":[516],\"label\":[513],\"direction\":[1537]}]]],[\"ez-skeleton\",[[0,\"ez-skeleton\",{\"count\":[2],\"variant\":[1],\"width\":[1],\"height\":[1],\"marginBottom\":[1,\"margin-bottom\"],\"animation\":[1]}]]],[\"ez-split-item\",[[0,\"ez-split-item\"]]],[\"ez-split-panel\",[[4,\"ez-split-panel\",{\"direction\":[1],\"label\":[1]}]]],[\"ez-toast\",[[1,\"ez-toast\",{\"message\":[1025],\"fadeTime\":[1026,\"fade-time\"],\"useIcon\":[1028,\"use-icon\"],\"canClose\":[1028,\"can-close\"],\"show\":[64]}]]],[\"ez-view-stack\",[[0,\"ez-view-stack\",{\"show\":[64],\"getSelectedIndex\":[64]}]]],[\"ez-dropdown\",[[1,\"ez-dropdown\",{\"items\":[1040],\"value\":[1040],\"itemBuilder\":[16]},[[4,\"click\",\"handleClickOutside\"]]]]],[\"ez-tabselector\",[[1,\"ez-tabselector\",{\"selectedIndex\":[1538,\"selected-index\"],\"selectedTab\":[1537,\"selected-tab\"],\"tabs\":[1],\"_processedTabs\":[32]}]]],[\"ez-multi-selection-list\",[[2,\"ez-multi-selection-list\",{\"columnName\":[1,\"column-name\"],\"dataSource\":[16],\"useOptions\":[1028,\"use-options\"],\"options\":[1040],\"isTextSearch\":[4,\"is-text-search\"],\"filteredOptions\":[32],\"displayOptions\":[32],\"viewScenario\":[32],\"displayOptionToCheckAllItems\":[32],\"clearFilteredOptions\":[64]}]]],[\"ez-collapsible-box\",[[1,\"ez-collapsible-box\",{\"value\":[1540],\"boxBordered\":[4,\"box-bordered\"],\"label\":[513],\"subtitle\":[513],\"headerSize\":[513,\"header-size\"],\"iconPlacement\":[513,\"icon-placement\"],\"headerAlign\":[513,\"header-align\"],\"removable\":[516],\"editable\":[516],\"conditionalSave\":[16],\"_activeEditText\":[32],\"showHide\":[64],\"applyFocusTextEdit\":[64],\"cancelEdition\":[64]}]]],[\"ez-calendar\",[[1,\"ez-calendar\",{\"value\":[1040],\"floating\":[516],\"time\":[516],\"showSeconds\":[516,\"show-seconds\"],\"show\":[64],\"fitVertical\":[64],\"fitHorizontal\":[64],\"hide\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-text-input\",[[1,\"ez-text-input\",{\"label\":[513],\"value\":[1537],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"mask\":[1],\"canShowError\":[516,\"can-show-error\"],\"restrict\":[1],\"mode\":[513],\"noBorder\":[516,\"no-border\"],\"password\":[4],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-date-input\",[[1,\"ez-date-input\",{\"label\":[513],\"value\":[1040],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-date-time-input\",[[1,\"ez-date-time-input\",{\"label\":[513],\"value\":[1040],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"showSeconds\":[516,\"show-seconds\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-time-input\",[[1,\"ez-time-input\",{\"label\":[513],\"value\":[1026],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"showSeconds\":[516,\"show-seconds\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-number-input\",[[1,\"ez-number-input\",{\"label\":[1],\"value\":[1538],\"enabled\":[4],\"canShowError\":[516,\"can-show-error\"],\"errorMessage\":[1537,\"error-message\"],\"precision\":[2],\"prettyPrecision\":[2,\"pretty-precision\"],\"mode\":[513],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-form-view\",[[2,\"ez-form-view\",{\"fields\":[16],\"showUp\":[64]}]]],[\"ez-popover\",[[1,\"ez-popover\",{\"autoClose\":[516,\"auto-close\"],\"boxWidth\":[513,\"box-width\"],\"opened\":[1540],\"innerElement\":[1537,\"inner-element\"],\"overlayType\":[513,\"overlay-type\"],\"updatePosition\":[64],\"show\":[64],\"showUnder\":[64],\"hide\":[64]}]]],[\"ez-text-area\",[[1,\"ez-text-area\",{\"label\":[513],\"value\":[1537],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"rows\":[1538],\"canShowError\":[516,\"can-show-error\"],\"mode\":[513],\"enableResize\":[516,\"enable-resize\"],\"appendTextToSelection\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-upload\",[[1,\"ez-upload\",{\"label\":[1],\"subtitle\":[1],\"enabled\":[4],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"requestHeaders\":[8,\"request-headers\"],\"urlUpload\":[1,\"url-upload\"],\"urlDelete\":[1,\"url-delete\"],\"value\":[1040],\"addFiles\":[64],\"setFocus\":[64],\"setBlur\":[64]}]]],[\"ez-text-edit\",[[1,\"ez-text-edit\",{\"value\":[1],\"styled\":[16],\"_newValue\":[32],\"applyFocusSelect\":[64]}]]],[\"ez-scroller_3\",[[1,\"ez-tree\",{\"items\":[1040],\"value\":[1040],\"selectedId\":[1537,\"selected-id\"],\"iconResolver\":[16],\"tooltipResolver\":[16],\"_tree\":[32],\"_waintingForLoad\":[32],\"selectItem\":[64],\"openItem\":[64],\"disableItem\":[64],\"enableItem\":[64],\"addChild\":[64],\"applyFilter\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"getParent\":[64]},[[2,\"keydown\",\"onKeyDownListener\"]]],[1,\"ez-scroller\",{\"direction\":[1],\"locked\":[4],\"activeShadow\":[4,\"active-shadow\"],\"isActive\":[32]},[[2,\"click\",\"clickListener\"],[1,\"mousedown\",\"mouseDownHandler\"],[1,\"mouseup\",\"mouseUpHandler\"],[1,\"mousemove\",\"mouseMoveHandler\"]]],[1,\"ez-sidebar-button\"]]],[\"ez-list\",[[1,\"ez-list\",{\"dataSource\":[1040],\"listMode\":[1,\"list-mode\"],\"useGroups\":[1540,\"use-groups\"],\"ezDraggable\":[1028,\"ez-draggable\"],\"ezSelectable\":[1028,\"ez-selectable\"],\"itemSlotBuilder\":[1040],\"itemLeftSlotBuilder\":[1040],\"hoverFeedback\":[1028,\"hover-feedback\"],\"_listItems\":[32],\"_listGroupItems\":[32],\"clearHistory\":[64],\"scrollToTop\":[64],\"setSelection\":[64],\"getSelection\":[64],\"getList\":[64],\"removeSelection\":[64]}]]],[\"ez-combo-box\",[[1,\"ez-combo-box\",{\"limitCharsToSearch\":[2,\"limit-chars-to-search\"],\"value\":[1537],\"label\":[513],\"enabled\":[516],\"options\":[1040],\"errorMessage\":[1537,\"error-message\"],\"searchMode\":[4,\"search-mode\"],\"showSelectedValue\":[4,\"show-selected-value\"],\"showOptionValue\":[4,\"show-option-value\"],\"suppressSearch\":[4,\"suppress-search\"],\"optionLoader\":[16],\"suppressEmptyOption\":[4,\"suppress-empty-option\"],\"canShowError\":[516,\"can-show-error\"],\"mode\":[513],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-search\",[[1,\"ez-search\",{\"value\":[1537],\"label\":[1537],\"enabled\":[1540],\"errorMessage\":[1537,\"error-message\"],\"optionLoader\":[16],\"showSelectedValue\":[4,\"show-selected-value\"],\"showOptionValue\":[4,\"show-option-value\"],\"suppressEmptyOption\":[4,\"suppress-empty-option\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"ignoreLimitCharsToSearch\":[4,\"ignore-limit-chars-to-search\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64],\"getValueAsync\":[64]}]]],[\"ez-filter-input_2\",[[0,\"multi-selection-box-message\",{\"message\":[1]}],[1,\"ez-filter-input\",{\"label\":[1],\"value\":[1537],\"enabled\":[4],\"errorMessage\":[1537,\"error-message\"],\"restrict\":[1],\"mode\":[513],\"asyncSearch\":[516,\"async-search\"],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"setValue\":[64],\"endSearch\":[64]}]]],[\"ez-check\",[[1,\"ez-check\",{\"label\":[513],\"value\":[1540],\"enabled\":[1540],\"indeterminate\":[1540],\"mode\":[513],\"compact\":[4],\"getMode\":[64],\"setFocus\":[64]}]]],[\"ez-icon\",[[1,\"ez-icon\",{\"size\":[513],\"href\":[513],\"iconName\":[513,\"icon-name\"]}]]],[\"ez-button\",[[1,\"ez-button\",{\"label\":[513],\"enabled\":[516],\"mode\":[513],\"image\":[513],\"iconName\":[513,\"icon-name\"],\"size\":[513],\"setFocus\":[64],\"setBlur\":[64]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-form\",[[2,\"ez-form\",{\"dataUnit\":[1040],\"config\":[16],\"recordsValidator\":[16],\"fieldToFocus\":[1,\"field-to-focus\"],\"validate\":[64]}]]],[\"filter-column\",[[0,\"filter-column\",{\"opened\":[4],\"columnName\":[1,\"column-name\"],\"columnLabel\":[1,\"column-label\"],\"gridHeaderHidden\":[4,\"grid-header-hidden\"],\"noHeaderTaskBar\":[1028,\"no-header-task-bar\"],\"dataSource\":[16],\"dataUnit\":[16],\"options\":[1040],\"selectedItems\":[32],\"fieldDescriptor\":[32],\"useOptions\":[32],\"isTextSearch\":[32],\"hide\":[64],\"show\":[64]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"ez-grid\",[[6,\"ez-grid\",{\"multipleSelection\":[4,\"multiple-selection\"],\"config\":[1040],\"selectionToastConfig\":[16],\"serverUrl\":[1,\"server-url\"],\"dataUnit\":[16],\"statusResolver\":[16],\"columnfilterDataSource\":[16],\"useEnterLikeTab\":[4,\"use-enter-like-tab\"],\"recordsValidator\":[16],\"canEdit\":[4,\"can-edit\"],\"_paginationInfo\":[32],\"_paginationChangedByKeyboard\":[32],\"_showSelectionCounter\":[32],\"_isAllSelection\":[32],\"_currentPageSelected\":[32],\"_selectionCount\":[32],\"_hasLeftButtons\":[32],\"setColumnsDef\":[64],\"addColumnMenuItem\":[64],\"setColumnsState\":[64],\"setData\":[64],\"getSelection\":[64],\"getColumnsState\":[64],\"getColumns\":[64],\"quickFilter\":[64],\"locateColumn\":[64],\"filterColumns\":[64]},[[0,\"ezSelectionChange\",\"onSelectionChange\"]]]]],[\"ez-guide-navigator\",[[1,\"ez-guide-navigator\",{\"open\":[1540],\"selectedId\":[1537,\"selected-id\"],\"items\":[16],\"tooltipResolver\":[16],\"filterText\":[32],\"disableItem\":[64],\"openGuideNavidator\":[64],\"enableItem\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"selectGuide\":[64],\"getParent\":[64]}]]],[\"ez-alert-list\",[[1,\"ez-alert-list\",{\"alerts\":[1040],\"enableDragAndDrop\":[516,\"enable-drag-and-drop\"],\"enableExpand\":[516,\"enable-expand\"],\"itemRightSlotBuilder\":[16],\"opened\":[1540],\"expanded\":[1540]}]]],[\"ez-actions-button\",[[1,\"ez-actions-button\",{\"enabled\":[516],\"actions\":[1040],\"size\":[513],\"showLabel\":[516,\"show-label\"],\"displayIcon\":[513,\"display-icon\"],\"checkOption\":[516,\"check-option\"],\"value\":[513],\"isTransparent\":[516,\"is-transparent\"],\"arrowActive\":[516,\"arrow-active\"],\"_selectedAction\":[32],\"hideActions\":[64],\"showActions\":[64],\"isOpened\":[64]}]]],[\"ez-breadcrumb\",[[1,\"ez-breadcrumb\",{\"items\":[1040],\"fillMode\":[1025,\"fill-mode\"],\"maxItems\":[1026,\"max-items\"],\"positionEllipsis\":[1026,\"position-ellipsis\"],\"visibleItems\":[32],\"hiddenItems\":[32],\"showDropdown\":[32],\"collapseConfigPosition\":[32]}]]],[\"ez-dialog\",[[1,\"ez-dialog\",{\"confirm\":[1028],\"dialogType\":[1025,\"dialog-type\"],\"message\":[1025],\"opened\":[1540],\"personalizedIconPath\":[1025,\"personalized-icon-path\"],\"ezTitle\":[1025,\"ez-title\"],\"beforeClose\":[1040],\"show\":[64]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"ez-modal-container\",[[6,\"ez-modal-container\",{\"modalTitle\":[1,\"modal-title\"],\"modalSubTitle\":[1,\"modal-sub-title\"],\"showTitleBar\":[4,\"show-title-bar\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonStatus\":[1,\"cancel-button-status\"],\"okButtonStatus\":[1,\"ok-button-status\"]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"ez-split-button\",[[1,\"ez-split-button\",{\"enabled\":[516],\"iconName\":[513,\"icon-name\"],\"image\":[513],\"items\":[16],\"label\":[513],\"leftTitle\":[513,\"left-title\"],\"rightTitle\":[513,\"right-title\"],\"mode\":[513],\"size\":[513],\"show\":[32],\"setBlur\":[64],\"setLeftButtonFocus\":[64],\"setRightButtonFocus\":[64]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-split-item\",[[4,\"ez-split-item\",{\"label\":[1],\"enableExpand\":[516,\"enable-expand\"],\"size\":[1],\"_expanded\":[32]}]]],[\"ez-alert\",[[1,\"ez-alert\",{\"alertType\":[513,\"alert-type\"]}]]],[\"ez-badge\",[[1,\"ez-badge\",{\"size\":[513],\"label\":[513],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"position\":[1040],\"hasSlot\":[32]}]]],[\"ez-chip\",[[1,\"ez-chip\",{\"label\":[513],\"enabled\":[516],\"removePosition\":[513,\"remove-position\"],\"mode\":[513],\"value\":[1540],\"showNativeTooltip\":[4,\"show-native-tooltip\"],\"setFocus\":[64],\"setBlur\":[64]}]]],[\"ez-file-item\",[[1,\"ez-file-item\",{\"canRemove\":[4,\"can-remove\"],\"fileName\":[1,\"file-name\"],\"iconName\":[1,\"icon-name\"],\"fileSize\":[2,\"file-size\"],\"progress\":[2]}]]],[\"ez-application\",[[0,\"ez-application\"]]],[\"ez-loading-bar\",[[1,\"ez-loading-bar\",{\"_showLoading\":[32],\"hide\":[64],\"show\":[64]}]]],[\"ez-modal\",[[1,\"ez-modal\",{\"modalSize\":[1,\"modal-size\"],\"align\":[1],\"heightMode\":[1,\"height-mode\"],\"opened\":[1028],\"closeEsc\":[4,\"close-esc\"],\"closeOutsideClick\":[4,\"close-outside-click\"],\"scrim\":[1]}]]],[\"ez-popup\",[[1,\"ez-popup\",{\"size\":[1],\"opened\":[1540],\"useHeader\":[516,\"use-header\"],\"heightMode\":[513,\"height-mode\"],\"ezTitle\":[1,\"ez-title\"]},[[8,\"keydown\",\"handleKeyDown\"]]]]],[\"ez-radio-button\",[[1,\"ez-radio-button\",{\"value\":[1544],\"options\":[1040],\"enabled\":[516],\"label\":[513],\"direction\":[1537]}]]],[\"ez-skeleton\",[[0,\"ez-skeleton\",{\"count\":[2],\"variant\":[1],\"width\":[1],\"height\":[1],\"marginBottom\":[1,\"margin-bottom\"],\"animation\":[1]}]]],[\"ez-split-panel\",[[0,\"ez-split-panel\",{\"direction\":[1],\"anchorToExpand\":[4,\"anchor-to-expand\"],\"rebuildLayout\":[64]}]]],[\"ez-toast\",[[1,\"ez-toast\",{\"message\":[1025],\"fadeTime\":[1026,\"fade-time\"],\"useIcon\":[1028,\"use-icon\"],\"canClose\":[1028,\"can-close\"],\"show\":[64]}]]],[\"ez-view-stack\",[[0,\"ez-view-stack\",{\"show\":[64],\"getSelectedIndex\":[64]}]]],[\"ez-tabselector\",[[1,\"ez-tabselector\",{\"selectedIndex\":[1538,\"selected-index\"],\"selectedTab\":[1537,\"selected-tab\"],\"tabs\":[1],\"_processedTabs\":[32]}]]],[\"ez-collapsible-box\",[[1,\"ez-collapsible-box\",{\"value\":[1540],\"boxBordered\":[4,\"box-bordered\"],\"label\":[513],\"subtitle\":[513],\"headerSize\":[513,\"header-size\"],\"iconPlacement\":[513,\"icon-placement\"],\"headerAlign\":[513,\"header-align\"],\"removable\":[516],\"editable\":[516],\"conditionalSave\":[16],\"_activeEditText\":[32],\"showHide\":[64],\"applyFocusTextEdit\":[64],\"cancelEdition\":[64]}]]],[\"ez-combo-box\",[[1,\"ez-combo-box\",{\"limitCharsToSearch\":[2,\"limit-chars-to-search\"],\"value\":[1537],\"label\":[513],\"enabled\":[516],\"options\":[1040],\"errorMessage\":[1537,\"error-message\"],\"showSelectedValue\":[4,\"show-selected-value\"],\"showOptionValue\":[4,\"show-option-value\"],\"suppressSearch\":[4,\"suppress-search\"],\"optionLoader\":[16],\"suppressEmptyOption\":[4,\"suppress-empty-option\"],\"canShowError\":[516,\"can-show-error\"],\"mode\":[513],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-time-input\",[[1,\"ez-time-input\",{\"label\":[513],\"value\":[1026],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"showSeconds\":[516,\"show-seconds\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-number-input\",[[1,\"ez-number-input\",{\"label\":[1],\"value\":[1538],\"enabled\":[4],\"canShowError\":[516,\"can-show-error\"],\"errorMessage\":[1537,\"error-message\"],\"precision\":[2],\"prettyPrecision\":[2,\"pretty-precision\"],\"mode\":[513],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-popover\",[[1,\"ez-popover\",{\"autoClose\":[516,\"auto-close\"],\"boxWidth\":[513,\"box-width\"],\"opened\":[1540],\"innerElement\":[1537,\"inner-element\"],\"overlayType\":[513,\"overlay-type\"],\"updatePosition\":[64],\"show\":[64],\"showUnder\":[64],\"hide\":[64]}]]],[\"ez-list\",[[1,\"ez-list\",{\"dataSource\":[1040],\"listMode\":[1,\"list-mode\"],\"useGroups\":[1540,\"use-groups\"],\"ezDraggable\":[1028,\"ez-draggable\"],\"ezSelectable\":[1028,\"ez-selectable\"],\"itemSlotBuilder\":[1040],\"itemLeftSlotBuilder\":[1040],\"hoverFeedback\":[1028,\"hover-feedback\"],\"_listItems\":[32],\"_listGroupItems\":[32],\"clearHistory\":[64],\"scrollToTop\":[64],\"setSelection\":[64],\"getSelection\":[64],\"getList\":[64],\"removeSelection\":[64]}]]],[\"ez-calendar\",[[1,\"ez-calendar\",{\"value\":[1040],\"floating\":[516],\"time\":[516],\"showSeconds\":[516,\"show-seconds\"],\"show\":[64],\"fitVertical\":[64],\"fitHorizontal\":[64],\"hide\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-text-input\",[[1,\"ez-text-input\",{\"label\":[513],\"value\":[1537],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"mask\":[1],\"canShowError\":[516,\"can-show-error\"],\"restrict\":[1],\"mode\":[513],\"noBorder\":[516,\"no-border\"],\"password\":[4],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-multi-selection-list\",[[2,\"ez-multi-selection-list\",{\"columnName\":[1,\"column-name\"],\"dataSource\":[16],\"useOptions\":[1028,\"use-options\"],\"options\":[1040],\"isTextSearch\":[4,\"is-text-search\"],\"filteredOptions\":[32],\"displayOptions\":[32],\"viewScenario\":[32],\"displayOptionToCheckAllItems\":[32],\"clearFilteredOptions\":[64]}]]],[\"filter-column\",[[0,\"filter-column\",{\"opened\":[4],\"columnName\":[1,\"column-name\"],\"columnLabel\":[1,\"column-label\"],\"gridHeaderHidden\":[4,\"grid-header-hidden\"],\"noHeaderTaskBar\":[1028,\"no-header-task-bar\"],\"dataSource\":[16],\"dataUnit\":[16],\"options\":[1040],\"selectedItems\":[32],\"fieldDescriptor\":[32],\"useOptions\":[32],\"isTextSearch\":[32],\"hide\":[64],\"show\":[64]}]]],[\"ez-date-input\",[[1,\"ez-date-input\",{\"label\":[513],\"value\":[1040],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-date-time-input\",[[1,\"ez-date-time-input\",{\"label\":[513],\"value\":[1040],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"showSeconds\":[516,\"show-seconds\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"getValueAsync\":[64]}]]],[\"ez-dropdown\",[[1,\"ez-dropdown\",{\"items\":[1040],\"value\":[1040],\"itemBuilder\":[16]},[[4,\"click\",\"handleClickOutside\"]]]]],[\"ez-text-area\",[[1,\"ez-text-area\",{\"label\":[513],\"value\":[1537],\"enabled\":[516],\"errorMessage\":[1537,\"error-message\"],\"rows\":[1538],\"canShowError\":[516,\"can-show-error\"],\"mode\":[513],\"enableResize\":[516,\"enable-resize\"],\"appendTextToSelection\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64]}]]],[\"ez-upload\",[[1,\"ez-upload\",{\"label\":[1],\"subtitle\":[1],\"enabled\":[4],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"requestHeaders\":[8,\"request-headers\"],\"urlUpload\":[1,\"url-upload\"],\"urlDelete\":[1,\"url-delete\"],\"value\":[1040],\"addFiles\":[64],\"setFocus\":[64],\"setBlur\":[64]}]]],[\"ez-text-edit\",[[1,\"ez-text-edit\",{\"value\":[1],\"styled\":[16],\"_newValue\":[32],\"applyFocusSelect\":[64]}]]],[\"ez-scroller_3\",[[1,\"ez-tree\",{\"items\":[1040],\"value\":[1040],\"selectedId\":[1537,\"selected-id\"],\"iconResolver\":[16],\"tooltipResolver\":[16],\"_tree\":[32],\"_waintingForLoad\":[32],\"selectItem\":[64],\"openItem\":[64],\"disableItem\":[64],\"enableItem\":[64],\"addChild\":[64],\"applyFilter\":[64],\"updateItem\":[64],\"getItem\":[64],\"getCurrentPath\":[64],\"getParent\":[64]},[[2,\"keydown\",\"onKeyDownListener\"]]],[1,\"ez-scroller\",{\"direction\":[1],\"locked\":[4],\"activeShadow\":[4,\"active-shadow\"],\"isActive\":[32]},[[2,\"click\",\"clickListener\"],[1,\"mousedown\",\"mouseDownHandler\"],[1,\"mouseup\",\"mouseUpHandler\"],[1,\"mousemove\",\"mouseMoveHandler\"]]],[1,\"ez-sidebar-button\"]]],[\"ez-search\",[[1,\"ez-search\",{\"value\":[1537],\"label\":[1537],\"enabled\":[1540],\"errorMessage\":[1537,\"error-message\"],\"optionLoader\":[16],\"showSelectedValue\":[4,\"show-selected-value\"],\"showOptionValue\":[4,\"show-option-value\"],\"suppressEmptyOption\":[4,\"suppress-empty-option\"],\"mode\":[513],\"canShowError\":[516,\"can-show-error\"],\"hideErrorOnFocusOut\":[4,\"hide-error-on-focus-out\"],\"listOptionsPosition\":[16],\"isTextSearch\":[4,\"is-text-search\"],\"ignoreLimitCharsToSearch\":[4,\"ignore-limit-chars-to-search\"],\"options\":[1040],\"suppressSearch\":[4,\"suppress-search\"],\"_preSelection\":[32],\"_visibleOptions\":[32],\"_startLoading\":[32],\"_showLoading\":[32],\"_criteria\":[32],\"getValueAsync\":[64],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"clearValue\":[64]},[[11,\"scroll\",\"scrollListener\"]]]]],[\"ez-check\",[[1,\"ez-check\",{\"label\":[513],\"value\":[1540],\"enabled\":[1540],\"indeterminate\":[1540],\"mode\":[513],\"compact\":[4],\"getMode\":[64],\"setFocus\":[64]}]]],[\"ez-icon\",[[1,\"ez-icon\",{\"size\":[513],\"href\":[513],\"iconName\":[513,\"icon-name\"]}]]],[\"ez-button\",[[1,\"ez-button\",{\"label\":[513],\"enabled\":[516],\"mode\":[513],\"image\":[513],\"iconName\":[513,\"icon-name\"],\"size\":[513],\"setFocus\":[64],\"setBlur\":[64]},[[2,\"click\",\"clickListener\"]]]]],[\"ez-card-item_3\",[[0,\"multi-selection-box-message\",{\"message\":[1]}],[1,\"ez-filter-input\",{\"label\":[1],\"value\":[1537],\"enabled\":[4],\"errorMessage\":[1537,\"error-message\"],\"restrict\":[1],\"mode\":[513],\"asyncSearch\":[516,\"async-search\"],\"canShowError\":[516,\"can-show-error\"],\"setFocus\":[64],\"setBlur\":[64],\"isInvalid\":[64],\"setValue\":[64],\"endSearch\":[64]}],[1,\"ez-card-item\",{\"item\":[16],\"enableKey\":[4,\"enable-key\"]}]]],[\"ez-form-view\",[[2,\"ez-form-view\",{\"fields\":[16],\"showUp\":[64]}]]],[\"ez-form\",[[2,\"ez-form\",{\"dataUnit\":[1040],\"config\":[16],\"recordsValidator\":[16],\"fieldToFocus\":[1,\"field-to-focus\"],\"validate\":[64]}]]]]"), options);
 });

package/dist/esm/filter-column.entry.js

@@ -18,6 +18,8 @@ const FilterColumn = class {
     this.TOP_POSITION_NO_TASKBAR = '32';
     this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
+    this.FIX_MARGIN = 60;
+    this.FILTER_COLUMN_WIDTH = 330;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -50,15 +52,24 @@ const FilterColumn = class {
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
-  calculateLeftPosition(configs) {
-    if (!configs.fromIcon) {
-      return configs.leftPosition;
+  calculateLeftPosition({ leftPosition, fromIcon }) {
+    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
+    if (!fromIcon) {
+      return `${leftPositionCalculated}px`;
     }
     const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
-    const leftResolved = (leftReference + 16) - difference;
+    const leftResolved = (leftPositionCalculated + 16) - difference;
     return `${(leftResolved > 0 ? leftResolved : 0)}px`;
   }
+  calcFilterColumnLeftPosition(leftReference) {
+    var _a, _b;
+    const gridReference = this.ezPopoverElement.closest("ez-grid");
+    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
+    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
+    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
+    return leftInt > maxLeft ? maxLeft : leftInt;
+  }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;

package/dist/esm/index-baa5e267.js

@@ -2173,10 +2173,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ez-breadcrumb.entry.js').then(processMod, consoleError);
-        case 'ez-card-item':
-          return import(
-            /* webpackMode: "lazy" */
-            './ez-card-item.entry.js').then(processMod, consoleError);
         case 'ez-file-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2201,6 +2197,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ez-skeleton.entry.js').then(processMod, consoleError);
+        case 'ez-split-button':
+          return import(
+            /* webpackMode: "lazy" */
+            './ez-split-button.entry.js').then(processMod, consoleError);
         case 'ez-split-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2213,10 +2213,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ez-view-stack.entry.js').then(processMod, consoleError);
-        case 'ez-dropdown':
-          return import(
-            /* webpackMode: "lazy" */
-            './ez-dropdown.entry.js').then(processMod, consoleError);
         case 'ez-form-view':
           return import(
             /* webpackMode: "lazy" */
@@ -2229,6 +2225,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './filter-column.entry.js').then(processMod, consoleError);
+        case 'ez-dropdown':
+          return import(
+            /* webpackMode: "lazy" */
+            './ez-dropdown.entry.js').then(processMod, consoleError);
         case 'ez-multi-selection-list':
           return import(
             /* webpackMode: "lazy" */
@@ -2237,10 +2237,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ez-text-edit.entry.js').then(processMod, consoleError);
-        case 'ez-filter-input_2':
+        case 'ez-card-item_3':
           return import(
             /* webpackMode: "lazy" */
-            './ez-filter-input_2.entry.js').then(processMod, consoleError);
+            './ez-card-item_3.entry.js').then(processMod, consoleError);
       }
     }
     return import(