@zanichelli/albe-web-components 7.3.7 → 7.4.1

package/dist/collection/components/z-breadcrumb/index.js

@@ -0,0 +1,421 @@
+import { h, Host } from "@stencil/core";
+import { BreadcrumbHomepageVariant, BreadcrumbPathStyle, Device, KeyboardCode, ListDividerType, ListSize, PopoverPosition, } from "../../beans";
+import { getDevice, handleKeyboardSubmit } from "../../utils/utils";
+export class ZBreadcrumb {
+  constructor() {
+    /** [optional] Sets the path style */
+    this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
+    /** [optional] Variant of first node */
+    this.homepageVariant = BreadcrumbHomepageVariant.ICON;
+    /** [optional] Sets max number of element to show */
+    this.maxNodesToShow = 5;
+    /** [optional] Controls the behaviour on <a> tag click/enter */
+    this.preventFollowUrl = false;
+    /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
+    this.overflowMenuItemRows = 0;
+    /** [optional] Sets the maximun number of chars per single node */
+    this.truncateChar = 30;
+    /** Detect whether the length of the nodes shown exceeds the container length */
+    this.hasOverflow = false;
+    this.popoverEllipsisOpen = false;
+    this.collapsedElements = [];
+    this.currentIndex = 0;
+    this.truncatePosition = null;
+  }
+  handleResize() {
+    this.viewPortWidth = getDevice();
+    if (this.viewPortWidth !== Device.MOBILE &&
+      this.wrapElement &&
+      this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  // eslint-disable-next-line lines-between-class-members
+  handlePropChange() {
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  handleResizeUp(newValue, oldValue) {
+    if (newValue === Device.MOBILE ||
+      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
+      this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+    }
+  }
+  componentWillLoad() {
+    this.viewPortWidth = getDevice();
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  componentWillRender() {
+    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
+      this.checkEllipsisOrOverflowMenu();
+      this.hasOverflow = false;
+    }
+  }
+  componentDidRender() {
+    if (this.collapsedElementsRef) {
+      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
+    }
+    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  initializeBreadcrumb(isMobile) {
+    if (isMobile) {
+      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
+    }
+    else {
+      this.pathsList = this.getPathsItemsList();
+    }
+    this.totalLenght = this.pathsList.length;
+    this.homepageNode = this.pathsList.shift();
+    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
+    this.collapsedElements = [];
+    if (this.totalLenght > this.maxNodesToShow) {
+      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
+    }
+  }
+  checkEllipsisOrOverflowMenu() {
+    if (this.pathListCopy.length > 0) {
+      for (let i = 0; i < this.pathsList.length; i++) {
+        if (this.pathsList[i].text.length > this.truncateChar) {
+          if (this.truncatePosition !== null) {
+            if (this.truncatePosition > 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
+              arrayToPush.forEach((item) => {
+                this.collapsedElements.push(item);
+              });
+              this.pathsList.splice(0, this.truncatePosition);
+              this.truncatePosition = 0;
+              return;
+            }
+            if (this.truncatePosition === 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
+              this.collapsedElements.push(...arrayToPush);
+              this.pathsList.splice(0, this.truncatePosition + 1);
+              this.truncatePosition = null;
+              return;
+            }
+          }
+          if (i !== this.pathsList.length - 1) {
+            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
+            this.currentEllipsisText = this.pathsList[i].text;
+            this.pathsList[i].text = truncatedString;
+            this.pathsList[i].hasTooltip = true;
+            this.truncatePosition = i;
+            return;
+          }
+        }
+      }
+    }
+  }
+  truncateWithEllipsis(str, length) {
+    const ending = "&mldr;";
+    if (str.length > length) {
+      return str.substring(0, length - 1) + ending;
+    }
+    return str;
+  }
+  getPathsItemsList() {
+    if (!this.paths) {
+      return Array.from(this.hostElement.children).map((item) => {
+        return {
+          text: item.textContent,
+          path: item.href,
+          hasTooltip: false,
+        };
+      });
+    }
+    const ret = typeof this.paths === "string" ? JSON.parse(this.paths) : this.paths;
+    return ret.map((item) => {
+      return Object.assign(Object.assign({}, item), { hasTooltip: false });
+    });
+  }
+  renderMobileBreadcrumb() {
+    const lastPath = this.pathsList[this.pathsList.length - 1];
+    return (h("nav", { "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderNode(lastPath, true))));
+  }
+  renderHomepageNode(item) {
+    return (h("li", null, h("a", { class: {
+        "homepage-icon": this.homepageVariant === BreadcrumbHomepageVariant.ICON,
+        "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
+      }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
+  }
+  renderNode(item, mobile) {
+    return (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: {
+        "missing-path": !item.path,
+        "text-ellipsis": mobile,
+      }, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = true;
+        }
+      }, onMouseLeave: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = false;
+        }
+      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon> ${item.text}` : item.text })));
+  }
+  renderBreadcrumb() {
+    return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
+  }
+  togglePopover() {
+    if (!this.collapsedElementsRef.open) {
+      this.collapsedElementsRef.open = true;
+    }
+  }
+  handlePreventFollowUrl(e, item) {
+    if (this.preventFollowUrl) {
+      e.preventDefault();
+      this.clickOnNode.emit(item.path);
+    }
+  }
+  handleOverflowMenuAccessibility(e) {
+    const anchorElementsLenght = this.anchorElements.length;
+    if (e.key === KeyboardCode.TAB) {
+      e.preventDefault();
+      return;
+    }
+    e.stopPropagation();
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+    if (arrows.includes(e.key)) {
+      e.preventDefault();
+      if (e.key === KeyboardCode.ARROW_DOWN) {
+        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
+      }
+      if (e.key === KeyboardCode.ARROW_UP) {
+        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
+      }
+      this.anchorElements[this.currentIndex].focus();
+    }
+    if (e.key === KeyboardCode.ESC) {
+      this.triggerButton.focus();
+    }
+  }
+  renderOverflowMenu() {
+    if (this.collapsedElements.length) {
+      return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { dividerType: ListDividerType.ELEMENT, size: ListSize.SMALL }, this.collapsedElements.map((item) => (h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)))))))), h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
+          this.togglePopover();
+        }, onKeyDown: (e) => {
+          handleKeyboardSubmit(e, this.togglePopover.bind(this));
+          setTimeout(() => {
+            this.anchorElements[0].focus();
+          }, 100);
+        } }, "...")));
+    }
+  }
+  render() {
+    return (h(Host, { style: { "--line-clamp": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+  }
+  static get is() { return "z-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paths": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbPath[] | string",
+          "resolved": "BreadcrumbPath[] | string",
+          "references": {
+            "BreadcrumbPath": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Path elements, the first of which is the home path"
+        },
+        "attribute": "paths",
+        "reflect": false
+      },
+      "pathStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbPathStyle",
+          "resolved": "BreadcrumbPathStyle.SEMIBOLD | BreadcrumbPathStyle.UNDERLINED",
+          "references": {
+            "BreadcrumbPathStyle": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the path style"
+        },
+        "attribute": "path-style",
+        "reflect": true,
+        "defaultValue": "BreadcrumbPathStyle.UNDERLINED"
+      },
+      "homepageVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbHomepageVariant",
+          "resolved": "BreadcrumbHomepageVariant.ICON | BreadcrumbHomepageVariant.TEXT",
+          "references": {
+            "BreadcrumbHomepageVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Variant of first node"
+        },
+        "attribute": "homepage-variant",
+        "reflect": false,
+        "defaultValue": "BreadcrumbHomepageVariant.ICON"
+      },
+      "maxNodesToShow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of element to show"
+        },
+        "attribute": "max-nodes-to-show",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "preventFollowUrl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Controls the behaviour on <a> tag click/enter"
+        },
+        "attribute": "prevent-follow-url",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "overflowMenuItemRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of row for each path inside the popover. Zero equals unlimited"
+        },
+        "attribute": "overflow-menu-item-rows",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "truncateChar": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the maximun number of chars per single node"
+        },
+        "attribute": "truncate-char",
+        "reflect": false,
+        "defaultValue": "30"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "viewPortWidth": {},
+      "hasOverflow": {},
+      "popoverEllipsisOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickOnNode",
+        "name": "clickOnNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when preventFollowUrl=true to handle custom page transition"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "paths",
+        "methodName": "handlePropChange"
+      }, {
+        "propName": "maxNodesToShow",
+        "methodName": "handlePropChange"
+      }, {
+        "propName": "viewPortWidth",
+        "methodName": "handleResizeUp"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/z-breadcrumb/styles.css

@@ -0,0 +1,139 @@
+/* stylelint-disable value-no-vendor-prefix */
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+
+  --line-clamp-popover: 0;
+  --line-clamp-mobile: 1;
+}
+
+button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+nav {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  padding-left: calc(var(--space-unit) / 2);
+  overflow-x: hidden;
+}
+
+li {
+  display: flex;
+  align-items: baseline;
+}
+
+:host a:focus,
+:host button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: 0;
+}
+
+:host a {
+  color: var(--color-link-primary);
+  font-size: var(--font-size-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+:host a.homepage-icon {
+  display: list-item;
+}
+
+:host a.homepage-text {
+  display: initial;
+}
+
+:host a.missing-path {
+  color: var(--color-text01);
+}
+
+:host a.text-ellipsis {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp-mobile);
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+:host ol {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+:host ol > li:not(:last-child) {
+  margin-right: var(--space-unit);
+}
+
+nav.underlined > ol > li a:not(.missing-path),
+nav.underlined > ol > li button {
+  text-decoration: underline;
+}
+
+nav.semibold > ol > li a:not(.missing-path),
+nav.semibold > ol > li button {
+  font-weight: var(--font-sb);
+}
+
+:host z-icon {
+  margin-right: var(--space-unit);
+
+  --z-icon-width: 12px;
+  --z-icon-height: 12px;
+}
+
+:host button.dots {
+  display: inline-block;
+  color: var(--color-link-primary);
+  cursor: pointer;
+}
+
+:host .popover-content {
+  max-width: 302px;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  text-align: left;
+}
+
+:host .popover-content a {
+  font-weight: var(--font-rg);
+  text-decoration: none;
+}
+
+:host .hidden-paths-popover {
+  --z-popover-theme--surface: var(--color-surface02);
+  --z-popover-padding: 0;
+}
+
+:host .full-path-tooltip {
+  --z-popover-theme--surface: var(--color-surface05);
+  --z-popover-theme--text: var(--color-text-inverse);
+  --z-popover-padding: 0;
+}
+
+:host .tooltip-content {
+  padding: 0 var(--space-unit);
+  font-size: var(--font-size-2);
+}
+
+@media (min-width: 768px) {
+  /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */
+  :host ol > li + li::before {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    flex: 1;
+    color: var(--color-disabled03);
+    content: "\203A";
+  }
+
+  :host a.text-ellipsis {
+    -webkit-line-clamp: var(--line-clamp-popover);
+  }
+}

package/dist/collection/constants/breakpoints.js

@@ -1,3 +1,4 @@
 const mobileBreakpoint = 767;
-const tabletBreakpoint = 1023;
-export { mobileBreakpoint, tabletBreakpoint };
+const tabletBreakpoint = 1052;
+const desktopBreakpoint = 1365;
+export { mobileBreakpoint, tabletBreakpoint, desktopBreakpoint };

package/dist/collection/utils/utils.js

@@ -1,5 +1,5 @@
 import { KeyboardCode, Device } from "../beans/index";
-import { mobileBreakpoint, tabletBreakpoint } from "../constants/breakpoints";
+import { desktopBreakpoint, mobileBreakpoint, tabletBreakpoint } from "../constants/breakpoints";
 export function format(first, middle, last) {
   return (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "");
 }
@@ -87,8 +87,10 @@ export function getDevice() {
       return Device.MOBILE;
     case window.innerWidth <= tabletBreakpoint:
       return Device.TABLET;
-    default:
+    case window.innerWidth <= desktopBreakpoint:
       return Device.DESKTOP;
+    default:
+      return Device.DESKTOP_WIDE;
   }
 }
 export function convertJson(data) {

package/dist/esm/breakpoints-9b81eb1b.js

@@ -0,0 +1,5 @@
+const mobileBreakpoint = 767;
+const tabletBreakpoint = 1052;
+const desktopBreakpoint = 1365;
+
+export { desktopBreakpoint as d, mobileBreakpoint as m, tabletBreakpoint as t };

package/dist/esm/{index-f3202f58.js → index-7e4df1be.js}

@@ -201,6 +201,7 @@ var Device;
   Device["MOBILE"] = "mobile";
   Device["TABLET"] = "tablet";
   Device["DESKTOP"] = "desktop";
+  Device["DESKTOP_WIDE"] = "desktop-wide";
 })(Device || (Device = {}));
 var PocketStatus;
 (function (PocketStatus) {
@@ -323,5 +324,15 @@ var CarouselProgressMode;
   CarouselProgressMode["DOTS"] = "dots";
   CarouselProgressMode["NUMBERS"] = "numbers";
 })(CarouselProgressMode || (CarouselProgressMode = {}));
+var BreadcrumbPathStyle;
+(function (BreadcrumbPathStyle) {
+  BreadcrumbPathStyle["SEMIBOLD"] = "semibold";
+  BreadcrumbPathStyle["UNDERLINED"] = "underlined";
+})(BreadcrumbPathStyle || (BreadcrumbPathStyle = {}));
+var BreadcrumbHomepageVariant;
+(function (BreadcrumbHomepageVariant) {
+  BreadcrumbHomepageVariant["TEXT"] = "text";
+  BreadcrumbHomepageVariant["ICON"] = "icon";
+})(BreadcrumbHomepageVariant || (BreadcrumbHomepageVariant = {}));
 
-export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerMode as F, ZDatePickerModeValue as G, ZDatePickerPosition as H, InputType as I, ZRangePickerMode as J, KeyboardKeyCode as K, LicenseType as L, InfoRevealPosition as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroVariant as Q, CoverHeroContentPosition as R, SortDirection as S, ThemeVariant as T, CarouselArrowsPosition as U, CarouselProgressMode as V, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, Size as j, ExpandableListButtonAlign as k, LabelPosition as l, ListDividerType as m, ListType as n, NotificationType as o, AlertType as p, Device as q, PocketStatus as r, ToastNotification as s, ToastNotificationTransition as t, ToastNotificationPosition as u, ZAriaAlertMode as v, TransitionDirection as w, ZFileUploadType as x, ZChipType as y, ZSectionTitleDividerPosition as z };
+export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerMode as F, ZDatePickerModeValue as G, ZDatePickerPosition as H, InputType as I, ZRangePickerMode as J, KeyboardKeyCode as K, LicenseType as L, InfoRevealPosition as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroVariant as Q, CoverHeroContentPosition as R, SortDirection as S, ThemeVariant as T, CarouselArrowsPosition as U, CarouselProgressMode as V, BreadcrumbPathStyle as W, BreadcrumbHomepageVariant as X, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, Size as j, ExpandableListButtonAlign as k, LabelPosition as l, ListDividerType as m, ListType as n, NotificationType as o, AlertType as p, Device as q, PocketStatus as r, ToastNotification as s, ToastNotificationTransition as t, ToastNotificationPosition as u, ZAriaAlertMode as v, TransitionDirection as w, ZFileUploadType as x, ZChipType as y, ZSectionTitleDividerPosition as z };

package/dist/esm/index-a2ca4b97.js

@@ -1912,6 +1912,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-body.entry.js').then(processMod, consoleError);
+        case 'z-breadcrumb':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-breadcrumb.entry.js').then(processMod, consoleError);
         case 'z-button-sort':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import { c as colorFromId } from './utils-0cfc97ad.js';
-export { p as AlertType, A as AvatarSize, d as ButtonSize, c as ButtonType, B as ButtonVariant, C as CardVariant, U as CarouselArrowsPosition, V as CarouselProgressMode, e as ControlSize, R as CoverHeroContentPosition, Q as CoverHeroVariant, q as Device, h as DividerOrientation, D as DividerSize, k as ExpandableListButtonAlign, E as ExpandableListStyle, M as InfoRevealPosition, f as InputStatus, I as InputType, g as KeyboardCode, K as KeyboardKeyCode, l as LabelPosition, L as LicenseType, m as ListDividerType, i as ListSize, n as ListType, b as NavigationTabsKeyboardEvents, N as NavigationTabsOrientation, a as NavigationTabsSize, o as NotificationType, O as OffCanvasVariant, r as PocketStatus, P as PopoverPosition, j as Size, S as SortDirection, T as ThemeVariant, s as ToastNotification, u as ToastNotificationPosition, t as ToastNotificationTransition, w as TransitionDirection, v as ZAriaAlertMode, y as ZChipType, F as ZDatePickerMode, G as ZDatePickerModeValue, H as ZDatePickerPosition, x as ZFileUploadType, J as ZRangePickerMode, z as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-f3202f58.js';
-import './breakpoints-c386984e.js';
+import { c as colorFromId } from './utils-825aed23.js';
+export { p as AlertType, A as AvatarSize, X as BreadcrumbHomepageVariant, W as BreadcrumbPathStyle, d as ButtonSize, c as ButtonType, B as ButtonVariant, C as CardVariant, U as CarouselArrowsPosition, V as CarouselProgressMode, e as ControlSize, R as CoverHeroContentPosition, Q as CoverHeroVariant, q as Device, h as DividerOrientation, D as DividerSize, k as ExpandableListButtonAlign, E as ExpandableListStyle, M as InfoRevealPosition, f as InputStatus, I as InputType, g as KeyboardCode, K as KeyboardKeyCode, l as LabelPosition, L as LicenseType, m as ListDividerType, i as ListSize, n as ListType, b as NavigationTabsKeyboardEvents, N as NavigationTabsOrientation, a as NavigationTabsSize, o as NotificationType, O as OffCanvasVariant, r as PocketStatus, P as PopoverPosition, j as Size, S as SortDirection, T as ThemeVariant, s as ToastNotification, u as ToastNotificationPosition, t as ToastNotificationTransition, w as TransitionDirection, v as ZAriaAlertMode, y as ZChipType, F as ZDatePickerMode, G as ZDatePickerModeValue, H as ZDatePickerPosition, x as ZFileUploadType, J as ZRangePickerMode, z as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-7e4df1be.js';
+import './breakpoints-9b81eb1b.js';
 
 const UTILS = {
   colorFromId,