@sankhyalabs/ezui 3.0.4 → 3.1.1

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, ElementIDUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, ObjectUtils as ObjectUtils$1, Action, WaitingChangeException, ApplicationContext, UserInterface, DataUnitAction, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, JSUtils, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils, JSUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, ObjectUtils as ObjectUtils$1, Action, WaitingChangeException, ApplicationContext, UserInterface, DataUnitAction, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, MaskFormatter } from '@sankhyalabs/core';
 
 var DialogType;
 (function (DialogType) {
@@ -394,29 +394,283 @@ const EzApplication$1 = class extends HTMLElement$1 {
   static get style() { return ezApplicationCss; }
 };
 
-const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}";
+const BreadcrumbItem = (props) => {
+  const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
+  const formatDropdownItems = () => {
+    return itemsHidden.map((item) => ({
+      id: item.id,
+      label: item.label,
+      type: 'item',
+      children: null,
+      iconName: item.iconName || null,
+      subAction: null,
+      group: null
+    }));
+  };
+  const onClickEllipsis = (evt) => {
+    evt.stopPropagation();
+    handleShowDropdown(!showDropdown);
+  };
+  const createEllipsis = (item) => {
+    return (h("li", Object.assign({ class: "breadcrumb__item", onClick: evt => onClickEllipsis(evt) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_ellipsis`) }),
+      ellipsesPositionedEnd && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })),
+      h("span", { class: "ellipses__item" }, "..."),
+      ellipsesPositionedEnd || h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })),
+      showDropdown &&
+        h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => {
+            const { id, label, iconName } = evt.detail;
+            selectedItem.emit({ id, label, iconName });
+          } }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
+  };
+  return (h("div", { class: "breadcrumb__items" }, items.map((item, index) => {
+    const isLastItem = index === (items.length - 1);
+    return (h("div", { class: "breadcrumb__group" },
+      collapseConfigPosition === index && createEllipsis(item),
+      h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumb_item_${item.id}_${item.label}`) }),
+        item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${(isLastItem && !ellipsesPositionedEnd) ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })),
+        h("p", { class: `breadcrumb__item--label ${(isLastItem && !ellipsesPositionedEnd) ? 'active' : ''}`, onClick: (ellipsesPositionedEnd || !isLastItem) ? () => selectedItem.emit(item) : undefined }, item.label),
+        !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))),
+      (collapseConfigPosition - 1 === index && ellipsesPositionedEnd) && createEllipsis(item)));
+  })));
+};
+
+const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb__group{display:flex}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0;overflow:hidden;white-space:nowrap}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}.breadcrumb__items{display:flex}";
 
 const EzBreadcrumb$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.ezClick = createEvent(this, "ezClick", 7);
+    this.selectedItem = createEvent(this, "selectedItem", 7);
+    this._ellipsesPositionedEnd = false;
+    this._renderSecond = false;
+    this.INDEX_ITEM_TO_REMOVE = 1; // sempre removemos o segundo item.
+    this.CHEVRON_SIZE = 28;
+    this.handleShowDropdown = (newState) => {
+      this.showDropdown = newState;
+    };
     this.items = [];
+    this.fillMode = "auto";
+    this.maxItems = 4;
+    this.positionEllipsis = 1;
+    this.visibleItems = undefined;
+    this.hiddenItems = [];
+    this.showDropdown = false;
+    this.collapseConfigPosition = -1;
+  }
+  watchPropHandler() {
+    this.fillMode === "auto" && this.handleResize();
+  }
+  watchPropHiddenItems() {
+    if (this.fillMode === 'auto') {
+      this.collapseConfigPosition = this.hiddenItems.length > 0 ? 1 : -1;
+    }
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+    this.setEvents();
+  }
+  componentWillLoad() {
+    this.visibleItems = [...this.items];
+    if (this.fillMode === 'regular') {
+      this.configModeRegular();
+    }
+    else if (this.fillMode === 'auto') {
+      this.startResize();
+    }
+    this.setEvents();
+  }
+  closeDropdown(evt) {
+    const target = evt === null || evt === void 0 ? void 0 : evt.target;
+    if (target == undefined) {
+      return;
+    }
+    if (target !== this._element.shadowRoot.querySelector(".ellipses__item")) {
+      this.showDropdown = false;
+    }
+  }
+  setEvents() {
+    document.removeEventListener("click", this.closeDropdown.bind(this));
+    document.addEventListener("click", this.closeDropdown.bind(this));
+    document.removeEventListener("scroll", this.positionDropdown.bind(this));
+    document.addEventListener("scroll", this.positionDropdown.bind(this));
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
   }
-  handleItemClick(itemSelected) {
-    this.ezClick.emit(itemSelected);
+  componentDidRender() {
+    if (this.fillMode === 'auto') {
+      this.configResize();
+    }
+  }
+  configResize() {
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(this._element.parentElement);
+    }
+    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.handleResize.bind(this), 200));
+    this._resizeObserver.observe(this._element.parentElement);
+  }
+  handleResize() {
+    const ELLIPSIS_SIZE = 39;
+    if (!this._renderSecond) {
+      this._renderSecond = true;
+      return;
+    }
+    let { offsetWidth } = this._element.parentElement;
+    let sumVisibleItems = 0;
+    this.visibleItems.forEach(item => sumVisibleItems += item.width);
+    //Se existe o ellipsis, devemos cconsidera-lo no calculo
+    const offset = this.collapseConfigPosition > -1 ? ELLIPSIS_SIZE : 0;
+    if (offsetWidth < sumVisibleItems + offset) {
+      this.handleCollapse(offsetWidth, sumVisibleItems);
+    }
+    else if (offsetWidth >= sumVisibleItems + offset) {
+      this.handleExpand(offsetWidth);
+    }
+  }
+  handleCollapse(containerWidth, itemsWidth) {
+    const MIN_VISIBLE_ITEMS = 2;
+    if (this.visibleItems.length <= MIN_VISIBLE_ITEMS) {
+      return;
+    }
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    let hasChange = false;
+    while (tmpVisibleItems.length > MIN_VISIBLE_ITEMS &&
+      secondItem != undefined &&
+      itemsWidth > containerWidth) {
+      hasChange = true;
+      tmpVisibleItems = tmpVisibleItems.filter((_, index) => index !== this.INDEX_ITEM_TO_REMOVE);
+      tmpHiddenItems = [...tmpHiddenItems, secondItem];
+      itemsWidth -= secondItem.width;
+      secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  handleExpand(containerWidth) {
+    if (!this.hiddenItems.length) {
+      return;
+    }
+    let widthFreeZone = Math.abs(this._elBreadcrumbList.offsetWidth - containerWidth);
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+    let hasChange = false;
+    while (lastHiddenElement && widthFreeZone >= lastHiddenElement.width) {
+      widthFreeZone -= lastHiddenElement.width;
+      tmpHiddenItems.pop();
+      tmpVisibleItems.splice(this.INDEX_ITEM_TO_REMOVE, 0, lastHiddenElement);
+      lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+      hasChange = true;
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  configModeRegular() {
+    if (this.visibleItems.length > this.maxItems) {
+      const amountsItemsToHide = Math.abs(this.visibleItems.length - this.maxItems);
+      if (this.positionEllipsis === 0) {
+        const itemsToTransfer = this.visibleItems.slice(0, amountsItemsToHide);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(0, amountsItemsToHide);
+      }
+      else if (this.positionEllipsis >= this.maxItems) {
+        const itemsToTransfer = this.visibleItems.slice(this.maxItems);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(this.maxItems);
+        this._ellipsesPositionedEnd = true;
+      }
+      else {
+        const removedItems = this.visibleItems.splice(this.positionEllipsis, amountsItemsToHide);
+        this.hiddenItems.push(...removedItems);
+      }
+      this.collapseConfigPosition = this.positionEllipsis;
+    }
+  }
+  positionDropdown() {
+    var _a;
+    const bounding = (_a = this._element.shadowRoot.querySelector(".ellipses__item")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const elDropdown = this._element.shadowRoot.querySelector(".dropdown-ellipsis");
+    if (bounding == undefined || elDropdown == undefined) {
+      return;
+    }
+    elDropdown.style.top = (bounding.y + bounding.height + 5) + "px";
+    elDropdown.style.left = bounding.x + "px";
+  }
+  ;
+  async startResize() {
+    const areaAvailable = this._element.parentElement.offsetWidth;
+    const ELLIPSIS_SIZE = 10;
+    const measureItemSize = async (item, index) => {
+      item.width = await this.measureSizeHTMLElement(item);
+      /*
+        Se é o ultimo item, desconsideramos o icone CHEVRON
+      */
+      if (index === this.visibleItems.length - 1) {
+        item.width -= this.CHEVRON_SIZE;
+      }
+      return item;
+    };
+    const measuredItems = await Promise.all(this.visibleItems.map(measureItemSize));
+    const sizeBreadcrumb = measuredItems.reduce((total, item) => total + item.width, 0);
+    if (sizeBreadcrumb > areaAvailable) {
+      const tempItemsVisible = [];
+      const tempItemsHidden = [...measuredItems];
+      const firstItem = tempItemsHidden.shift();
+      const lastItem = tempItemsHidden.pop();
+      lastItem.width += ELLIPSIS_SIZE;
+      tempItemsVisible.push(firstItem, lastItem);
+      let sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+      let newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+      tempItemsHidden.reverse().forEach((item) => {
+        if (item.width < newAreaAvailable) {
+          const firstItemForListHidden = tempItemsHidden.shift();
+          tempItemsVisible.splice(1, 0, firstItemForListHidden);
+          sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+          newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+        }
+      });
+      this.visibleItems = [...tempItemsVisible];
+      this.hiddenItems = [...tempItemsHidden.reverse()];
+    }
+  }
+  measureSizeHTMLElement(item) {
+    return new Promise((resolve) => {
+      const ICON_SIZE = 19;
+      this.waitFontLoad().then(() => {
+        if (this._textMesurement === undefined) {
+          this._textMesurement = this._element.shadowRoot.ownerDocument.createElement("canvas");
+        }
+        const context = this._textMesurement.getContext("2d");
+        context.font = "14px Roboto, Algerian";
+        resolve((item.iconName ? ICON_SIZE : 0) + this.CHEVRON_SIZE + context.measureText(item.label).width);
+      });
+    });
+  }
+  waitFontLoad() {
+    return new Promise((resolve) => {
+      document.fonts.load("14px Roboto").then(() => resolve(), resolve());
+    });
+  }
+  getItemContent() {
+    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list", ref: elem => this._elBreadcrumbList = elem }, h(BreadcrumbItem, { items: this.visibleItems, selectedItem: this.selectedItem, itemsHidden: this.hiddenItems, showDropdown: this.showDropdown, handleShowDropdown: this.handleShowDropdown, collapseConfigPosition: this.collapseConfigPosition, ellipsesPositionedEnd: this._ellipsesPositionedEnd }))));
   }
   render() {
-    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list" }, this.items.map((item, index) => {
-      const isLastItem = index === (this.items.length - 1);
-      return (h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_${item.id}`) }), item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${isLastItem ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })), h("p", { class: `breadcrumb__item--label ${isLastItem ? 'active' : ''}`, onClick: !isLastItem ? () => this.handleItemClick(item) : undefined }, item.label), !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))));
-    }))));
+    return this.getItemContent();
   }
   get _element() { return this; }
+  static get watchers() { return {
+    "items": ["watchPropHandler"],
+    "hiddenItems": ["watchPropHiddenItems"]
+  }; }
   static get style() { return ezBreadcrumbCss; }
 };
 
@@ -125042,7 +125296,7 @@ const EzSidebarButton$1 = class extends HTMLElement$1 {
   static get style() { return ezSidebarButtonCss; }
 };
 
-const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
 
 const EzTabselector$1 = class extends HTMLElement$1 {
   constructor() {
@@ -125228,15 +125482,6 @@ const EzTabselector$1 = class extends HTMLElement$1 {
       tabtoscroll.scrollIntoView();
     }, 200);
   }
-  getTextWidth(text) {
-    if (this._textMesurement === undefined) {
-      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
-    }
-    const context = this._textMesurement.getContext("2d");
-    context.font = "14px Sora, Algerian";
-    return Math.min(220, 24 + context.measureText(text).width) + "px";
-  }
-  ;
   setFocusedBtn(visible, parameter) {
     const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
     tabsButtons.forEach((el) => {
@@ -125257,14 +125502,13 @@ const EzTabselector$1 = class extends HTMLElement$1 {
   }
   render() {
     return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
-      const labelStyle = { "min-width": this.getTextWidth(tab.label) };
       const tabId = "tab" + index;
       const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
       if (isSelected) {
         this.selectedTab = tab.tabKey;
         this.selectedIndex = index;
       }
-      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab) }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
     })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return this; }
@@ -126356,7 +126600,7 @@ const EzTree$1 = class extends HTMLElement$1 {
     this._tree.setFilterPattern(pattern);
   }
   observeItems(newValue, oldValue) {
-    if (newValue != oldValue) {
+    if (ObjectUtils$1.objectToString(newValue) !== ObjectUtils$1.objectToString(oldValue)) {
       this._tree.load(this.items || []);
     }
   }
@@ -126970,7 +127214,7 @@ const EzViewStack$1 = class extends HTMLElement$1 {
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [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]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
-const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040]}]);
+const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [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]}]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
 const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);