npm - @zanichelli/albe-web-components - Versions diffs - 13.3.1-vs → 13.3.1 - Mend

@zanichelli/albe-web-components 13.3.1-vs → 13.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (257) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,8 @@
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### 13.3.1 (2024-05-08)
 ## 13.3.0 (2024-04-18)
 ## 13.2.0 (2024-04-17)

package/dist/cjs/z-alert.cjs.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const ZAlert = class {
         this.type = undefined;
     }
     render() {
-        return (index.h("div", { key: '118a9d311dba051df5cb7fc1ad53a8e72fb0e5b0', class: this.type }, index.h("slot", { key: 'eec707ce1616abc18e015a7486f12dbc17e0c0eb' })));
+        return (index.h("div", { key: '5f1af9f77d699a3098b189a33cbebdba36d5ce23', class: this.type }, index.h("slot", { key: 'd8b6da798f1579042763c3953a7e1a869031a9e0' })));
     }
 };
 ZAlert.style = ZAlertStyle0;

package/dist/cjs/z-anchor-navigation.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-dc60bee7.js');
 const index$1 = require('./index-39ce4edf.js');
-const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}z-anchor-navigation nav>[current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";
+const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([data-current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";
 const ZAnchorNavigationStyle0 = stylesCss;
 const ZAnchorNavigation = class {
@@ -15,14 +15,14 @@ const ZAnchorNavigation = class {
         this.collapsed = false;
     }
     /**
-     * Set aria-current attribute to the anchors and `current` to nav children.
+     * Set aria-current attribute to the anchors.
      */
     setAriaCurrent() {
         Array.from(this.nav.children).forEach((item) => {
             const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
             const isCurrent = window.location.href === anchor.href;
             anchor.setAttribute("aria-current", isCurrent.toString());
-            item.toggleAttribute("current", isCurrent);
+            item.toggleAttribute("data-current", isCurrent);
         });
     }
     /**
@@ -39,7 +39,7 @@ const ZAnchorNavigation = class {
         window.removeEventListener("hashchange", this.setAriaCurrent);
     }
     render() {
-        return (index.h(index.Host, { key: '2f19d516f4b99e0f76268f025227f94d302273ea', collapsed: this.collapsed }, index.h("z-button", { key: '822dca30f3ea2176f463b35a167fcc4714feeb7f', class: "toggle", variant: index$1.ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), index.h("nav", { key: '218bf9aeb919037ad4725a9593ded46302b9e42a', ref: (el) => (this.nav = el) }, index.h("slot", { key: '0dfb9d2e7642d86b5c3e7da97be6ec04d05db70f' }))));
+        return (index.h(index.Host, { key: '7dbd18145c5e8f799ae5dca19f1f1f4eaa8690b3', collapsed: this.collapsed }, index.h("z-button", { key: '5c36d79b8284d4f0aef21c659947fa5042a784c1', class: "toggle", variant: index$1.ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), index.h("nav", { key: '26c60ec5a4110f25a9dc9f3e34f1338c170f07b2', ref: (el) => (this.nav = el) }, index.h("slot", { key: '06320c9dd7b84048b5008cd6d3163df0455dd83d' }))));
     }
 };
 ZAnchorNavigation.style = ZAnchorNavigationStyle0;

package/dist/cjs/z-anchor-navigation.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-anchor-navigation.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,~~i7EAAi7E~~,CAAC;~~AACp8E~~,gCAAe,SAAS;;MCsBX,iBAAiB;;;8BAMX,KAAK;yBAMV,KAAK;;;;;IAQT,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACzC,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC;YACvD,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,~~SAAS~~,EAAE,SAAS,CAAC,CAAC;~~SAC5C~~,CAAC,CAAC;KACJ;;;;IAKO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;IAED,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC/D;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7BD,uEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAEE,qBAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B,EACXF,kEAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAC/BA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host","ButtonVariant"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n color: inherit;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-surface04);\n color: var(--color-text01);\n font-family: var(--font-family-sans);\n transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [current] {\n border-left-color: var(--color-primary01);\n color: var(--color-link-primary);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > :is(z-button, button, z-icon) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nz-anchor-navigation nav z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n display: flex;\n padding: calc(var(--space-unit) 1.5);\n fill: var(--color-icon02);\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n z-anchor-navigation nav a {\n outline: none;\n }\n\n @media (hover: hover) {\n z-anchor-navigation nav > :hover {\n border-left-color: var(--color-hover-secondary);\n background-color: var(--color-hover-surface);\n color: var(--color-hover-link);\n }\n }\n\n z-anchor-navigation nav > :is(:focus, :focus-within),\n z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n }\n\n z-anchor-navigation[hide-unselected] nav > :not([current], :hover, :focus, :focus-within) {\n color: transparent;\n }\n\n z-anchor-navigation\n nav\n > :not([current], :hover, :focus, :focus-within)\n > :is(z-button, button, z-icon):not(:focus:focus-visible) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: none) {\n z-anchor-navigation:not([hide-unselected]) nav > > :is(z-button, button, z-icon) {\n opacity: 1;\n pointer-events: all;\n }\n }\n}\n","import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/\n * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set aria-current attribute to the anchors ~~and `current` to nav children~~.\n /\n private setAriaCurrent(): void {\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = window.location.href === anchor.href;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n this.setAriaCurrent();\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-anchor-navigation.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,g8EAAg8E,CAAC;AACn9E,gCAAe,SAAS;;MCsBX,iBAAiB;;;8BAMX,KAAK;yBAMV,KAAK;;;;;IAQT,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACzC,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC;YACvD,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;SACjD,CAAC,CAAC;KACJ;;;;IAKO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;IAED,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC/D;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7BD,uEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAEE,qBAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B,EACXF,kEAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAC/BA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host","ButtonVariant"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n color: inherit;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-surface04);\n color: var(--color-text01);\n font-family: var(--font-family-sans);\n transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-link-primary);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > :is(z-button, button, z-icon) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nz-anchor-navigation nav z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n display: flex;\n padding: calc(var(--space-unit) 1.5);\n fill: var(--color-icon02);\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n z-anchor-navigation nav a {\n outline: none;\n }\n\n @media (hover: hover) {\n z-anchor-navigation nav > :hover {\n border-left-color: var(--color-hover-secondary);\n background-color: var(--color-hover-surface);\n color: var(--color-hover-link);\n }\n }\n\n z-anchor-navigation nav > :is(:focus, :focus-within),\n z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n }\n\n z-anchor-navigation[hide-unselected] nav > :not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n }\n\n z-anchor-navigation\n nav\n > :not([data-current], :hover, :focus, :focus-within)\n > :is(z-button, button, z-icon):not(:focus:focus-visible) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: none) {\n z-anchor-navigation:not([hide-unselected]) nav > > :is(z-button, button, z-icon) {\n opacity: 1;\n pointer-events: all;\n }\n }\n}\n","import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/\n * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n /\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /\n If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n /\n @Prop({reflect: true})\n hideUnselected = false;\n\n /\n Whether the mobile list is collapsed.\n /\n @State()\n collapsed = false;\n\n /* Reference to the nav element. /\n private nav: HTMLElement;\n\n /\n Set aria-current attribute to the anchors.\n /\n private setAriaCurrent(): void {\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = window.location.href === anchor.href;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /\n Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n this.setAriaCurrent();\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-app-header_12.cjs.entry.js CHANGED Viewed

@@ -203,7 +203,7 @@ const ZDivider = class {
         this.orientation = index$1.DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (index.h(index.Host, { key: '2dd73f0950f7c3f83fb650b12d92631fa353c67f', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (index.h(index.Host, { key: '2f058ffac1fd07ea8bd499de4749a4fd1f766414', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = ZDividerStyle0;
@@ -1611,7 +1611,7 @@ const ZOffcanvas = class {
         this.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '60946289b968d1faf19d7f2620a848a4c5fe049b', class: { "skip-animation": this.skipLoadAnimation } }, index.h("div", { key: 'b29107d6cfc579c79bef11aa8ae35b6cb7b2d319', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, index.h("div", { key: '6fdb6a4048b7f25b81fed9adb148e1afc1f2838c', role: "presentation", class: "canvas-content" }, index.h("slot", { key: '51ffe7fbc7bda15cf4ee2dd92d6cf87984a7ee96', name: "canvasContent" }))), this.variant == index$1.OffCanvasVariant.OVERLAY && (index.h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (index.h(index.Host, { key: 'dbe2cd2f56dba42df914c0d6643b62ba3543a2cb', class: { "skip-animation": this.skipLoadAnimation } }, index.h("div", { key: 'ed825afb1152d0e56ebfefd804f473d1e7680cb9', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, index.h("div", { key: '368c7d337aedeed1d464031dc55c33778dee6354', role: "presentation", class: "canvas-content" }, index.h("slot", { key: '507daf4b8fd961b0e0c81627e42a4fd605eab4c0', name: "canvasContent" }))), this.variant == index$1.OffCanvasVariant.OVERLAY && (index.h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get watchers() { return {
         "open": ["onOpenChanged"]
@@ -1865,10 +1865,10 @@ const ZTag = class {
         this.expandable = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'fa2bfa00bef52495bef1e2271ffa20c09a60380a', class: {
+        return (index.h(index.Host, { key: '1c3bc302ffa93e3950f50aa33560e3f6dbe3f003', class: {
                 "body-5-sb": true,
                 "expandable": this.expandable && !!this.icon,
-            } }, this.icon && index.h("z-icon", { name: this.icon }), index.h("div", { key: '37bbe9678c9a2022a6fe260753b7955fdb9a76d1' }, index.h("slot", { key: 'f9f7a5f44c6b89d90b4b252fd990889751e955c8' }))));
+            } }, this.icon && index.h("z-icon", { name: this.icon }), index.h("div", { key: '73bf2526e308bd86ce198807bfc8c77c7f917a37' }, index.h("slot", { key: '31d6b94d10752d3c3bea0ec36ecb897af3db28f7' }))));
     }
 };
 ZTag.style = ZTagStyle0;

package/dist/cjs/z-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const index$1 = require('./index-39ce4edf.js');
 const utils = require('./utils-d0b10736.js');
 require('./breakpoints-5c22092a.js');
-const stylesCss = ":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;margin-top:calc(var(--space-unit) / 4);margin-right:var(--space-unit)}: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(:first-child,: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 .hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .hidden-paths-popover .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 .hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}: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){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;margin-right:2px;color:var(--color-disabled03);content:\"\\203A\"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-link-primary);white-space:nowrap}a.missing-path{color:var(--color-text01)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-link-primary)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";
 const ZBreadcrumbStyle0 = stylesCss;
 const ZBreadcrumb = class {
@@ -37,7 +37,7 @@ const ZBreadcrumb = class {
     }
     // eslint-disable-next-line lines-between-class-members
     handlePropChange() {
-        this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+        this.initializeBreadcrumb();
     }
     handleResizeUp(newValue, oldValue) {
         if (newValue === index$1.Device.MOBILE ||
@@ -47,12 +47,12 @@ const ZBreadcrumb = class {
             (oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP) ||
             (oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP_WIDE) ||
             (oldValue === index$1.Device.DESKTOP && newValue === index$1.Device.DESKTOP_WIDE)) {
-            this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+            this.initializeBreadcrumb();
         }
     }
     componentWillLoad() {
         this.viewPortWidth = utils.getDevice();
-        this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+        this.initializeBreadcrumb();
     }
     componentWillRender() {
         if (this.viewPortWidth !== index$1.Device.MOBILE && this.hasOverflow) {
@@ -68,61 +68,52 @@ const ZBreadcrumb = class {
             this.hasOverflow = true;
         }
     }
-    initializeBreadcrumb(isMobile) {
-        if (isMobile) {
+    initializeBreadcrumb() {
+        if (this.viewPortWidth === index$1.Device.MOBILE) {
             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.pathListCopy = [...this.pathsList];
         this.collapsedElements = [];
-        if (this.totalLenght > this.maxNodesToShow) {
+        if (this.pathsList.length > 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;
-                    }
-                }
+        for (let i = 0; i < this.pathsList.length; i++) {
+            if (this.pathsList[i].text.length <= this.truncateChar) {
+                continue;
+            }
+            if (this.truncatePosition > 0) {
+                this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));
+                this.pathsList.splice(0, this.truncatePosition);
+                this.truncatePosition = 0;
+                return;
+            }
+            else if (this.truncatePosition === 0) {
+                this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));
+                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;
+    truncateWithEllipsis(str, maxLength) {
+        if (str.length <= maxLength) {
+            return str;
         }
-        return str;
+        return str.substring(0, maxLength - 1) + "&mldr;";
     }
     getPathsItemsList() {
         return Array.from(this.hostElement.children).map((item) => {
@@ -133,38 +124,12 @@ const ZBreadcrumb = class {
             };
         });
     }
-    renderMobileBreadcrumb() {
-        const lastPath = this.pathsList[this.pathsList.length - 1];
-        return (index.h("nav", { "aria-label": "Breadcrumb", class: {
-                underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
-                semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
-            } }, index.h("ol", null, this.renderNode(lastPath, true))));
-    }
-    renderHomepageNode(item) {
+    renderHomepageNode() {
         return (index.h("li", null, index.h("a", { class: {
-                "homepage-icon": this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON,
                 "homepage-text": this.homepageVariant === index$1.BreadcrumbHomepageVariant.TEXT,
-            }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON ? (index.h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
-    }
-    renderNode(item, mobile) {
-        return (index.h("li", null, item.hasTooltip && (index.h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, index.h("span", { class: "tooltip-content" }, this.currentEllipsisText))), index.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 (index.h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
-                underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
-                semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
-            } }, index.h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
+            }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON
+                ? `<z-icon name="home" />`
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -200,21 +165,49 @@ const ZBreadcrumb = class {
         }
     }
     renderOverflowMenu() {
-        if (this.collapsedElements.length) {
-            return (index.h("li", null, index.h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, index.h("div", { class: "popover-content" }, index.h("z-list", null, index.h("z-list-group", { size: index$1.ListSize.SMALL }, this.collapsedElements.map((item, index$1, array) => {
-                return (index.h("div", null, index.h("z-list-element", { clickable: true }, index.h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)), index$1 < array.length - 1 && index.h("z-divider", { color: "color-surface03" })));
-            }))))), index.h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
-                    this.togglePopover();
-                }, onKeyDown: (e) => {
-                    utils.handleKeyboardSubmit(e, this.togglePopover.bind(this));
-                    setTimeout(() => {
-                        this.anchorElements[0].focus();
-                    }, 100);
-                } }, "...")));
+        return (index.h("li", null, index.h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), bindTo: this.triggerButton, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, index.h("div", { class: "popover-content" }, index.h("z-list", null, index.h("z-list-group", { size: index$1.ListSize.SMALL }, this.collapsedElements.map((item, index$1, array) => {
+            return (index.h("div", null, index.h("z-list-element", { clickable: true }, index.h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e), innerHTML: item.text })), index$1 < array.length - 1 && index.h("z-divider", { color: "color-surface03" })));
+        }))))), index.h("button", { class: "dots", ref: (el) => (this.triggerButton = el), "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", onClick: () => {
+                this.togglePopover();
+            }, onKeyDown: (e) => {
+                utils.handleKeyboardSubmit(e, this.togglePopover.bind(this));
+                setTimeout(() => {
+                    this.anchorElements[0].focus();
+                }, 100);
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))));
+    }
+    renderMobileItems() {
+        // show only the second to last element
+        const secondToLastPath = this.pathsList[this.pathsList.length - 1];
+        if (!secondToLastPath) {
+            return;
         }
+        return (index.h("li", null, index.h("a", { "aria-current": secondToLastPath.path ? undefined : "page", href: secondToLastPath.path, onClick: (e) => this.handlePreventFollowUrl(e, secondToLastPath) }, index.h("z-icon", { name: "chevron-left" }), index.h("span", { class: {
+                "missing-path": !secondToLastPath.path,
+                "text-ellipsis": true,
+            } }, secondToLastPath.text))));
+    }
+    renderItems() {
+        let trigger;
+        return [
+            this.renderHomepageNode(),
+            this.collapsedElements.length > 0 && this.renderOverflowMenu(),
+            ...this.pathsList.map((item, index$2) => (index.h("li", null, item.hasTooltip && (index.h("z-popover", { class: "full-path-tooltip", bindTo: trigger, open: this.popoverEllipsisOpen, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, index.h("span", { class: "tooltip-content" }, this.currentEllipsisText))), index.h("a", { class: { "missing-path": !item.path }, ref: (val) => (trigger = 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: item.text }), index$2 !== this.pathsList.length - 1 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))))),
+        ];
     }
     render() {
-        return (index.h(index.Host, { key: '0fdd2556f767ddc969bb26ad157149092c28976f', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+        return (index.h(index.Host, { key: 'b5f0321b29ae51fac8fba3cc0302beff908cd56e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, index.h("nav", { key: '32d4c57f93c3fd943cb6f6b72b9f9c004003d470', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+                semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
+                underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
+            } }, index.h("ol", { key: '725c96157a94749d8e55e321dd1708132479b74a' }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-breadcrumb.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-breadcrumb.entry.cjs.js","mappings":"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","names":["BreadcrumbPathStyle","BreadcrumbHomepageVariant","getDevice","Device","h","PopoverPosition","KeyboardCode","ListSize","index","handleKeyboardSubmit","Host"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --line-clamp-popover: 0;\n --line-clamp-mobile: 1;\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nnav {\n display: flex;\n height: 30px;\n align-items: center;\n padding-left: calc(var(--space-unit) / 2);\n overflow-x: hidden;\n}\n\nli {\n display: flex;\n align-items: baseline;\n}\n\n:host a:focus,\n:host button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: 0;\n}\n\n:host a {\n color: var(--color-link-primary);\n font-size: var(--font-size-2);\n text-decoration: none;\n white-space: nowrap;\n}\n\n:host a.homepage-icon {\n display: list-item;\n}\n\n:host a.homepage-text {\n display: initial;\n margin-top: calc(var(--space-unit) / 4);\n margin-right: var(--space-unit);\n}\n\n:host a.missing-path {\n color: var(--color-text01);\n}\n\n:host a.text-ellipsis {\n display: -webkit-box !important;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--line-clamp-mobile);\n text-overflow: ellipsis;\n white-space: normal;\n}\n\n:host ol {\n display: flex;\n padding: 0;\n margin: 0;\n list-style-type: none;\n}\n\n:host ol > li:not(:first-child, :last-child) {\n margin-right: var(--space-unit);\n}\n\nnav.underlined > ol > li a:not(.missing-path),\nnav.underlined > ol > li button {\n text-decoration: underline;\n}\n\nnav.semibold > ol > li a:not(.missing-path),\nnav.semibold > ol > li button {\n font-weight: var(--font-sb);\n}\n\n:host z-icon {\n margin-right: var(--space-unit);\n\n --z-icon-width: 12px;\n --z-icon-height: 12px;\n}\n\n:host button.dots {\n display: inline-block;\n color: var(--color-link-primary);\n cursor: pointer;\n}\n\n:host .hidden-paths-popover .popover-content {\n max-width: 302px;\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n text-align: left;\n}\n\n:host .hidden-paths-popover .popover-content a {\n font-weight: var(--font-rg);\n text-decoration: none;\n}\n\n:host .hidden-paths-popover {\n --z-popover-theme--surface: var(--color-surface02);\n --z-popover-padding: 0;\n}\n\n:host .hidden-paths-popover::before,\n.full-path-tooltip::before {\n --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n:host .full-path-tooltip {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n --z-popover-padding: 0;\n}\n\n:host .tooltip-content {\n padding: 0 var(--space-unit);\n font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures /\n :host ol > li + li::before {\n display: inline-block;\n width: 10px;\n height: 10px;\n flex: 1;\n margin-right: 2px;\n color: var(--color-disabled03);\n content: \"\\203A\";\n }\n\n :host a.text-ellipsis {\n -webkit-line-clamp: var(--line-clamp-popover);\n }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n BreadcrumbHomepageVariant,\n BreadcrumbPath,\n BreadcrumbPathStyle,\n Device,\n KeyboardCode,\n ListSize,\n PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-breadcrumb\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBreadcrumb {\n / Accessibility references /\n / Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ /\n / Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ /\n / Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html /\n\n @Element() hostElement: HTMLZBreadcrumbElement;\n\n /* [optional] Sets the path style /\n @Prop({reflect: true})\n pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n /* [optional] Variant of first node /\n @Prop()\n homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n /* [optional] Sets max number of element to show /\n @Prop()\n maxNodesToShow? = 5;\n\n /* [optional] Controls the behaviour on <a> tag click/enter /\n @Prop()\n preventFollowUrl? = false;\n\n /* [optional] Sets max number of row for each path inside the popover. Zero equals unlimited /\n @Prop()\n overflowMenuItemRows? = 0;\n\n /* [optional] Sets the maximun number of chars per single node /\n @Prop()\n truncateChar? = 30;\n\n /* Handle mobile /\n @State()\n viewPortWidth: Device;\n\n /* Detect whether the length of the nodes shown exceeds the container length /\n @State()\n hasOverflow = false;\n\n @State()\n popoverEllipsisOpen = false;\n\n /* Emitted when preventFollowUrl=true to handle custom page transition */\n @Event()\n clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n @Listen(\"resize\", {target: \"window\"})\n handleResize(): void {\n this.viewPortWidth = getDevice();\n if (\n this.viewPortWidth !== Device.MOBILE &&\n this.wrapElement &&\n this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n ) {\n this.hasOverflow = true;\n }\n }\n // eslint-disable-next-line lines-between-class-members\n @Watch(\"maxNodesToShow\")\n handlePropChange(): void {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n @Watch(\"viewPortWidth\")\n handleResizeUp(newValue: Device, oldValue: Device): void {\n if (\n newValue === Device.MOBILE \|\|\n (oldValue === Device.MOBILE && newValue === Device.TABLET) \|\|\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP) \|\|\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) \|\|\n (oldValue === Device.TABLET && newValue === Device.DESKTOP) \|\|\n (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) \|\|\n (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n ) {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n }\n\n private pathsList: BreadcrumbPath[];\n\n private pathListCopy: BreadcrumbPath[];\n\n private collapsedElements: BreadcrumbPath[] = [];\n\n private collapsedElementsRef: HTMLZPopoverElement;\n\n private triggerButton: HTMLButtonElement;\n\n private triggerEllipsis: HTMLAnchorElement;\n\n private wrapElement: HTMLElement;\n\n private currentIndex = 0;\n\n private homepageNode: BreadcrumbPath;\n\n private totalLenght: number;\n\n private anchorElements;\n\n private currentEllipsisText: string;\n\n private truncatePosition = null;\n\n componentWillLoad(): void {\n this.viewPortWidth = getDevice();\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n componentWillRender(): void {\n if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n this.checkEllipsisOrOverflowMenu();\n this.hasOverflow = false;\n }\n }\n\n componentDidRender(): void {\n if (this.collapsedElementsRef) {\n this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n }\n\n if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n this.hasOverflow = true;\n }\n }\n\n private initializeBreadcrumb(isMobile: boolean): void {\n if (isMobile) {\n this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n } else {\n this.pathsList = this.getPathsItemsList();\n }\n this.totalLenght = this.pathsList.length;\n this.homepageNode = this.pathsList.shift();\n this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));\n this.collapsedElements = [];\n if (this.totalLenght > this.maxNodesToShow) {\n this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n }\n }\n\n private checkEllipsisOrOverflowMenu(): void {\n if (this.pathListCopy.length > 0) {\n for (let i = 0; i < this.pathsList.length; i++) {\n if (this.pathsList[i].text.length > this.truncateChar) {\n if (this.truncatePosition !== null) {\n if (this.truncatePosition > 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);\n arrayToPush.forEach((item) => {\n this.collapsedElements.push(item);\n });\n this.pathsList.splice(0, this.truncatePosition);\n this.truncatePosition = 0;\n\n return;\n }\n if (this.truncatePosition === 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);\n this.collapsedElements.push(...arrayToPush);\n this.pathsList.splice(0, this.truncatePosition + 1);\n this.truncatePosition = null;\n\n return;\n }\n }\n if (i !== this.pathsList.length - 1) {\n const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n this.currentEllipsisText = this.pathsList[i].text;\n this.pathsList[i].text = truncatedString;\n this.pathsList[i].hasTooltip = true;\n this.truncatePosition = i;\n\n return;\n }\n }\n }\n }\n }\n\n private truncateWithEllipsis(str: string, length: number): string {\n const ending = \"&mldr;\";\n\n if (str.length > length) {\n return str.substring(0, length - 1) + ending;\n }\n\n return str;\n }\n\n private getPathsItemsList(): BreadcrumbPath[] {\n return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n return {\n text: item.textContent,\n path: item.href,\n hasTooltip: false,\n };\n });\n }\n\n private renderMobileBreadcrumb(): HTMLDivElement {\n const lastPath = this.pathsList[this.pathsList.length - 1];\n\n return (\n <nav\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>{this.renderNode(lastPath, true)}</ol>\n </nav>\n );\n }\n\n private renderHomepageNode(item): HTMLLIElement {\n return (\n <li>\n <a\n class={{\n \"homepage-icon\": this.homepageVariant === BreadcrumbHomepageVariant.ICON,\n \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n }}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n >\n {this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (\n <z-icon\n name=\"home\"\n fill=\"color-link-primary\"\n height={16}\n width={16}\n />\n ) : (\n \"Home\"\n )}\n </a>\n </li>\n );\n }\n\n private renderNode(item, mobile): HTMLLIElement {\n return (\n <li>\n {item.hasTooltip && (\n <z-popover\n class=\"full-path-tooltip\"\n bind-to={this.triggerEllipsis}\n open={this.popoverEllipsisOpen}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={false}\n showArrow\n >\n <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n </z-popover>\n )}\n <a\n class={{\n \"missing-path\": !item.path,\n \"text-ellipsis\": mobile,\n }}\n ref={(val) => (this.triggerEllipsis = val)}\n aria-current={item.path ? undefined : \"page\"}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onMouseOver={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = true;\n }\n }}\n onMouseLeave={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = false;\n }\n }}\n innerHTML={mobile ? `<z-icon fill=\"color-link-primary\" name=\"chevron-left\"></z-icon>${item.text}` : item.text}\n />\n </li>\n );\n }\n\n private renderBreadcrumb(): HTMLElement {\n return (\n <nav\n ref={(val) => (this.wrapElement = val)}\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>\n {this.renderHomepageNode(this.homepageNode)}\n {this.collapsedElements.length ? this.renderOverflowMenu() : \"\"}\n {this.pathsList.map((item) => this.renderNode(item, false))}\n </ol>\n </nav>\n );\n }\n\n private togglePopover(): void {\n if (!this.collapsedElementsRef.open) {\n this.collapsedElementsRef.open = true;\n }\n }\n\n private handlePreventFollowUrl(e: MouseEvent, item): void {\n if (this.preventFollowUrl) {\n e.preventDefault();\n this.clickOnNode.emit(item.path);\n }\n }\n\n private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n const anchorElementsLenght = this.anchorElements.length;\n if (e.key === KeyboardCode.TAB) {\n e.preventDefault();\n\n return;\n }\n e.stopPropagation();\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n if (arrows.includes(e.key as KeyboardCode)) {\n e.preventDefault();\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n }\n if (e.key === KeyboardCode.ARROW_UP) {\n this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n }\n\n this.anchorElements[this.currentIndex].focus();\n }\n\n if (e.key === KeyboardCode.ESC) {\n this.triggerButton.focus();\n }\n }\n\n private renderOverflowMenu(): HTMLLIElement {\n if (this.collapsedElements.length) {\n return (\n <li>\n <z-popover\n class=\"hidden-paths-popover\"\n ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n bind-to={this.triggerButton}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={true}\n showArrow\n >\n <div class=\"popover-content\">\n <z-list>\n <z-list-group size={ListSize.SMALL}>\n {this.collapsedElements.map((item, index, array) => {\n return (\n <div>\n <z-list-element clickable>\n <a\n class=\"text-ellipsis\"\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n >\n {item.text}\n </a>\n </z-list-element>\n {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n </div>\n );\n })}\n </z-list-group>\n </z-list>\n </div>\n </z-popover>\n <button\n aria-label=\"Mostra più breadcrumb\"\n aria-haspopup=\"true\"\n ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n class=\"dots\"\n onClick={() => {\n this.togglePopover();\n }}\n onKeyDown={(e) => {\n handleKeyboardSubmit(e, this.togglePopover.bind(this));\n setTimeout(() => {\n this.anchorElements[0].focus();\n }, 100);\n }}\n >\n ...\n </button>\n </li>\n );\n }\n }\n\n render(): HTMLZBreadcrumbElement {\n return (\n <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n {this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-breadcrumb.entry.cjs.js","mappings":"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","names":["BreadcrumbPathStyle","BreadcrumbHomepageVariant","getDevice","Device","h","KeyboardCode","PopoverPosition","ListSize","index","handleKeyboardSubmit","Host"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --line-clamp-popover: 0;\n --line-clamp-mobile: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nnav {\n display: flex;\n align-items: center;\n}\n\nol {\n display: flex;\n align-items: center;\n padding: 0;\n margin: 0;\n column-gap: var(--space-unit);\n list-style: none;\n}\n\nli {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na {\n color: var(--color-link-primary);\n white-space: nowrap;\n}\n\na.missing-path {\n color: var(--color-text01);\n}\n\n.text-ellipsis {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--line-clamp-mobile);\n text-overflow: ellipsis;\n white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n font-weight: var(--font-sb);\n text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n text-decoration: underline;\n}\n\nz-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n display: block;\n fill: var(--color-link-primary);\n}\n\nz-icon.separator {\n --z-icon-width: 10px;\n --z-icon-height: 10px;\n\n fill: var(--gray500);\n}\n\nbutton.dots {\n display: inline-block;\n color: var(--color-link-primary);\n cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n max-width: 302px;\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n font-weight: var(--font-rg);\n text-decoration: none;\n}\n\n.hidden-paths-popover {\n --z-popover-theme--surface: var(--color-surface02);\n --z-popover-padding: 0;\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n --z-popover-padding: 0;\n}\n\n.tooltip-content {\n padding: 0 var(--space-unit);\n font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n .text-ellipsis {\n -webkit-line-clamp: var(--line-clamp-popover);\n }\n}\n\n@media (max-width: 767px) {\n li a {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n BreadcrumbHomepageVariant,\n BreadcrumbPath,\n BreadcrumbPathStyle,\n Device,\n KeyboardCode,\n ListSize,\n PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-breadcrumb\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBreadcrumb {\n /* Accessibility references /\n / Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ /\n / Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ /\n / Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html /\n\n @Element() hostElement: HTMLZBreadcrumbElement;\n\n /* [optional] Sets the path style /\n @Prop({reflect: true})\n pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n /* [optional] Variant of first node /\n @Prop()\n homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n /* [optional] Sets max number of element to show /\n @Prop()\n maxNodesToShow? = 5;\n\n /* [optional] Controls the behaviour on <a> tag click/enter /\n @Prop()\n preventFollowUrl? = false;\n\n /* [optional] Sets max number of row for each path inside the popover. Zero equals unlimited /\n @Prop()\n overflowMenuItemRows? = 0;\n\n /* [optional] Sets the maximun number of chars per single node /\n @Prop()\n truncateChar? = 30;\n\n /* Handle mobile /\n @State()\n viewPortWidth: Device;\n\n /* Detect whether the length of the nodes shown exceeds the container length /\n @State()\n hasOverflow = false;\n\n @State()\n popoverEllipsisOpen = false;\n\n /* Emitted when preventFollowUrl=true to handle custom page transition */\n @Event()\n clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n private pathsList: BreadcrumbPath[];\n\n private pathListCopy: BreadcrumbPath[];\n\n private collapsedElements: BreadcrumbPath[] = [];\n\n private collapsedElementsRef: HTMLZPopoverElement;\n\n private triggerButton: HTMLButtonElement;\n\n private wrapElement: HTMLElement;\n\n private currentIndex = 0;\n\n private homepageNode: BreadcrumbPath;\n\n private anchorElements;\n\n private currentEllipsisText: string;\n\n private truncatePosition = null;\n\n @Listen(\"resize\", {target: \"window\"})\n handleResize(): void {\n this.viewPortWidth = getDevice();\n if (\n this.viewPortWidth !== Device.MOBILE &&\n this.wrapElement &&\n this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n ) {\n this.hasOverflow = true;\n }\n }\n // eslint-disable-next-line lines-between-class-members\n @Watch(\"maxNodesToShow\")\n handlePropChange(): void {\n this.initializeBreadcrumb();\n }\n\n @Watch(\"viewPortWidth\")\n handleResizeUp(newValue: Device, oldValue: Device): void {\n if (\n newValue === Device.MOBILE \|\|\n (oldValue === Device.MOBILE && newValue === Device.TABLET) \|\|\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP) \|\|\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) \|\|\n (oldValue === Device.TABLET && newValue === Device.DESKTOP) \|\|\n (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) \|\|\n (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n ) {\n this.initializeBreadcrumb();\n }\n }\n\n componentWillLoad(): void {\n this.viewPortWidth = getDevice();\n this.initializeBreadcrumb();\n }\n\n componentWillRender(): void {\n if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n this.checkEllipsisOrOverflowMenu();\n this.hasOverflow = false;\n }\n }\n\n componentDidRender(): void {\n if (this.collapsedElementsRef) {\n this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n }\n\n if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n this.hasOverflow = true;\n }\n }\n\n private initializeBreadcrumb(): void {\n if (this.viewPortWidth === Device.MOBILE) {\n this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n } else {\n this.pathsList = this.getPathsItemsList();\n }\n this.homepageNode = this.pathsList.shift();\n this.pathListCopy = [...this.pathsList];\n this.collapsedElements = [];\n if (this.pathsList.length > this.maxNodesToShow) {\n this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n }\n }\n\n private checkEllipsisOrOverflowMenu(): void {\n for (let i = 0; i < this.pathsList.length; i++) {\n if (this.pathsList[i].text.length <= this.truncateChar) {\n continue;\n }\n\n if (this.truncatePosition > 0) {\n this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n this.pathsList.splice(0, this.truncatePosition);\n this.truncatePosition = 0;\n\n return;\n } else if (this.truncatePosition === 0) {\n this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n this.pathsList.splice(0, this.truncatePosition + 1);\n this.truncatePosition = null;\n\n return;\n }\n\n if (i !== this.pathsList.length - 1) {\n const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n this.currentEllipsisText = this.pathsList[i].text;\n this.pathsList[i].text = truncatedString;\n this.pathsList[i].hasTooltip = true;\n this.truncatePosition = i;\n\n return;\n }\n }\n }\n\n private truncateWithEllipsis(str: string, maxLength: number): string {\n if (str.length <= maxLength) {\n return str;\n }\n\n return str.substring(0, maxLength - 1) + \"&mldr;\";\n }\n\n private getPathsItemsList(): BreadcrumbPath[] {\n return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n return {\n text: item.textContent,\n path: item.href,\n hasTooltip: false,\n };\n });\n }\n\n private renderHomepageNode(): HTMLLIElement {\n return (\n <li>\n <a\n class={{\n \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n }}\n href={this.homepageNode.path}\n onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n innerHTML={\n this.homepageVariant === BreadcrumbHomepageVariant.ICON\n ? `<z-icon name=\"home\" />`\n : this.homepageNode.text \|\| \"Home\"\n }\n />\n {this.pathsList.length > 0 && (\n <z-icon\n class=\"separator\"\n name=\"chevron-right\"\n />\n )}\n </li>\n );\n }\n\n private togglePopover(): void {\n if (!this.collapsedElementsRef.open) {\n this.collapsedElementsRef.open = true;\n }\n }\n\n private handlePreventFollowUrl(e: MouseEvent, item): void {\n if (this.preventFollowUrl) {\n e.preventDefault();\n this.clickOnNode.emit(item.path);\n }\n }\n\n private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n const anchorElementsLenght = this.anchorElements.length;\n if (e.key === KeyboardCode.TAB) {\n e.preventDefault();\n\n return;\n }\n e.stopPropagation();\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n if (arrows.includes(e.key as KeyboardCode)) {\n e.preventDefault();\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n }\n if (e.key === KeyboardCode.ARROW_UP) {\n this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n }\n\n this.anchorElements[this.currentIndex].focus();\n }\n\n if (e.key === KeyboardCode.ESC) {\n this.triggerButton.focus();\n }\n }\n\n private renderOverflowMenu(): HTMLLIElement {\n return (\n <li>\n <z-popover\n class=\"hidden-paths-popover\"\n ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n bindTo={this.triggerButton}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable\n showArrow\n >\n <div class=\"popover-content\">\n <z-list>\n <z-list-group size={ListSize.SMALL}>\n {this.collapsedElements.map((item, index, array) => {\n return (\n <div>\n <z-list-element clickable>\n <a\n class=\"text-ellipsis\"\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n innerHTML={item.text}\n />\n </z-list-element>\n {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n </div>\n );\n })}\n </z-list-group>\n </z-list>\n </div>\n </z-popover>\n <button\n class=\"dots\"\n ref={(el) => (this.triggerButton = el)}\n aria-label=\"Mostra più breadcrumb\"\n aria-haspopup=\"true\"\n onClick={() => {\n this.togglePopover();\n }}\n onKeyDown={(e) => {\n handleKeyboardSubmit(e, this.togglePopover.bind(this));\n setTimeout(() => {\n this.anchorElements[0].focus();\n }, 100);\n }}\n innerHTML=\"&mldr;\"\n ></button>\n {this.pathsList.length > 0 && (\n <z-icon\n class=\"separator\"\n name=\"chevron-right\"\n />\n )}\n </li>\n );\n }\n\n private renderMobileItems(): HTMLLIElement {\n // show only the second to last element\n const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n if (!secondToLastPath) {\n return;\n }\n\n return (\n <li>\n <a\n aria-current={secondToLastPath.path ? undefined : \"page\"}\n href={secondToLastPath.path}\n onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n >\n <z-icon name=\"chevron-left\" />\n <span\n class={{\n \"missing-path\": !secondToLastPath.path,\n \"text-ellipsis\": true,\n }}\n >\n {secondToLastPath.text}\n </span>\n </a>\n </li>\n );\n }\n\n private renderItems(): HTMLElement[] {\n let trigger;\n\n return [\n this.renderHomepageNode(),\n this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n ...this.pathsList.map((item, index) => (\n <li>\n {item.hasTooltip && (\n <z-popover\n class=\"full-path-tooltip\"\n bindTo={trigger}\n open={this.popoverEllipsisOpen}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={false}\n showArrow\n >\n <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n </z-popover>\n )}\n <a\n class={{\"missing-path\": !item.path}}\n ref={(val) => (trigger = val)}\n aria-current={item.path ? undefined : \"page\"}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onMouseOver={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = true;\n }\n }}\n onMouseLeave={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = false;\n }\n }}\n innerHTML={item.text}\n />\n {index !== this.pathsList.length - 1 && (\n <z-icon\n class=\"separator\"\n name=\"chevron-right\"\n />\n )}\n </li>\n )),\n ];\n }\n\n render(): HTMLZBreadcrumbElement {\n return (\n <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n <nav\n ref={(val) => (this.wrapElement = val)}\n aria-label=\"Breadcrumb\"\n class={{\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n }}\n >\n <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-cover-hero.cjs.entry.js CHANGED Viewed

@@ -33,9 +33,9 @@ const ZCoverHero = class {
         return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
     }
     render() {
-        return (index.h(index.Host, { key: 'c63b0f9c84abfc58decac9a19d62b30b9ed3b4df' }, this.variant === index$1.CoverHeroVariant.STACKED &&
+        return (index.h(index.Host, { key: '5fe68ea4b76b9938e202f20e2f3d41bdc2346553' }, this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
-            this.renderContent(), index.h("div", { key: 'ac589b5b997c26d78a0a9d6e5bc3b1e20490d940', class: "main-container" }, index.h("div", { key: '195b39698c303d0cef4f57bbaaf60064604eb084', class: "cover-container" }, index.h("slot", { key: 'e17be72350e529deb6f17092d54360bcc97dbca4', name: "cover" })), index.h("slot", { key: 'ddc3008776b9eb94b3f10ca133c35090298a1de1', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
+            this.renderContent(), index.h("div", { key: 'c39734aada37cc8d7d0c3953caf8ba42c4276ead', class: "main-container" }, index.h("div", { key: '6b749c89d1c8ba23e08c694de457981f8cde8ffb', class: "cover-container" }, index.h("slot", { key: 'dbb58f0a9f1b657e0c867b18458a2cc0903f6c6e', name: "cover" })), index.h("slot", { key: 'd8b93de81c83a1080b7a5e0f6aed6475be67af53', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/cjs/z-dragdrop-area_2.cjs.entry.js CHANGED Viewed

@@ -894,7 +894,7 @@ if (window.HTMLDialogElement === undefined) {
   HTMLFormElement.prototype.submit = replacementFormSubmit;
 }
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;width:100%;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;width:100%;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";
 const ZModalStyle0 = stylesCss;
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';