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/dist/cjs/z-pocket_3.cjs.entry.js CHANGED Viewed

@@ -64,7 +64,7 @@ const ZPocket = class {
         }
     }
     render() {
-        return (index.h("div", { key: '97d80e0b2cb56a932f35aa104256bf763f1eee7c' }, index.h("div", { key: '9e8f3eacd18892d80cc1a5c314c861ef18178daa', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { key: 'ee7d44929e94ebe8f2c128a74e0b8250819df04b', id: this.pocketid, class: "content-wrapper" }, index.h("div", { key: '57a77810690ce70ed3c7fac92cc4fa7e5158f17d' }, index.h("slot", { key: '9f1c1757f0bc2ff2db326ac9158d80f33802970f' })))));
+        return (index.h("div", { key: 'ad25460e1d77b82434d7237fc8bf70bdaccd1037' }, index.h("div", { key: '66003489b14556acf7ea4345dfd942cb244abfad', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { key: '69e23ca317f9aa2d68e00213af6d4aba2d01a5f9', id: this.pocketid, class: "content-wrapper" }, index.h("div", { key: '1d02d4b55e0853375c3770bd0f038e38922ce3f4' }, index.h("slot", { key: 'a4a0ebc7522d5f242263ac87b8b61191dd98d2b7' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -88,7 +88,7 @@ const ZPocketBody = class {
         }
     }
     render() {
-        return (index.h("main", { key: 'cd660568916f4384dc815a3c0067a579c217fa33', class: this.status }, index.h("slot", { key: '3dd94db83f10a36a3656914a90ca571bd088fc6d' })));
+        return (index.h("main", { key: 'f017441cd9ae7d12e0bea9ee61f6ebae5809ade7', class: this.status }, index.h("slot", { key: '02d262a95a8d41b1e303ac9d0efbd4218e8b28c9' })));
     }
 };
 ZPocketBody.style = ZPocketBodyStyle0;
@@ -118,7 +118,7 @@ const ZPocketHeader = class {
         mc.on("pandown", () => this.emitPocketHeaderPan("down"));
     }
     render() {
-        return (index.h("header", { key: '4f1f69686926f9b45d72800e711ae8437a3ca2f5', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", { key: 'cfdaf2acf381639e86ea15349a83834c311fda71' })));
+        return (index.h("header", { key: 'f14fbd3ff1d6757a840175eb9f17e71e40d7c507', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", { key: 'f6087dbe044ca3f0d2777194a73e60c4d5306c3c' })));
     }
 };
 ZPocketHeader.style = ZPocketHeaderStyle0;

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

@@ -304,7 +304,7 @@ const ZPopover = class {
         this.onOpen();
     }
     render() {
-        return index.h("slot", { key: 'dd51a369f1d5c8097418f1e69dd52c155adbe46e' });
+        return index.h("slot", { key: '5b096156553e94c50200ccd47d6ea97d65f03c54' });
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-section-title.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const ZSectionTitle = class {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (index.h(index.Host, { key: 'b629b236477e358e5e1f839dfab33ac08aa3cd68' }, index.h("slot", { key: 'f0752bbd190a7ad8a1e5f72a81c0cd92c77137f7', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: 'a4477bb9b91f62cdf839532f54eeb783615cc498', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (index.h(index.Host, { key: 'ffae3cccc6d4923d5904055ab083a1d581818e5b' }, index.h("slot", { key: 'a8bad3881acb225f24dafd28316bc08be97657f1', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: '7121066325d4be6c5385d70083da300f15eacf2b', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-skip-to-content.cjs.entry.js CHANGED Viewed

@@ -52,7 +52,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (index.h(index.Host, { key: '08004b426a63113ef27d0cac85716b5433a2a292', class: {
+        return (index.h(index.Host, { key: '911d2c6e0710ecc5f438fba15ace454e2d43b2d1', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/cjs/z-visually-hidden.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '9fb05af5cc8c977fc5041b5a5b75d5813caefd82' });
+        return index.h("slot", { key: '65fd2ab29bc68aa93203b219daa615d80bc6bdba' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/collection/components/modal/z-modal/styles.css CHANGED Viewed

@@ -49,7 +49,7 @@
 }
 .modal-container > header {
-  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);
   background: var(--color-surface02);
 }
@@ -223,14 +223,14 @@
 /* Tablet */
 @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);
+    padding: calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3);
   }
 }
 /* Desktop */
 @media only screen and (min-width: 1152px) {
   .modal-container > header {
-    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4);
+    padding: calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4);
   }
   .modal-container > header h1 {

package/dist/collection/components/z-anchor-navigation/index.js CHANGED Viewed

@@ -21,14 +21,14 @@ export class ZAnchorNavigation {
         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);
         });
     }
     /**
@@ -45,7 +45,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setAriaCurrent);
     }
     render() {
-        return (h(Host, { key: '2f19d516f4b99e0f76268f025227f94d302273ea', collapsed: this.collapsed }, h("z-button", { key: '822dca30f3ea2176f463b35a167fcc4714feeb7f', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '218bf9aeb919037ad4725a9593ded46302b9e42a', ref: (el) => (this.nav = el) }, h("slot", { key: '0dfb9d2e7642d86b5c3e7da97be6ec04d05db70f' }))));
+        return (h(Host, { key: '7dbd18145c5e8f799ae5dca19f1f1f4eaa8690b3', collapsed: this.collapsed }, h("z-button", { key: '5c36d79b8284d4f0aef21c659947fa5042a784c1', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '26c60ec5a4110f25a9dc9f3e34f1338c170f07b2', ref: (el) => (this.nav = el) }, h("slot", { key: '06320c9dd7b84048b5008cd6d3163df0455dd83d' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-anchor-navigation/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;yBAMV,KAAK;;IAKjB;;OAEG;IACK,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,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;~~QAC7C~~,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;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;IACxB,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;yBAMV,KAAK;;IAKjB;;OAEG;IACK,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,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;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;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;IACxB,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/z-anchor-navigation/styles.css CHANGED Viewed

@@ -50,7 +50,7 @@ z-anchor-navigation nav > * {
   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] {
+z-anchor-navigation nav > [data-current] {
   border-left-color: var(--color-primary01);
   color: var(--color-link-primary);
   font-weight: var(--font-sb);
@@ -107,13 +107,13 @@ z-anchor-navigation nav z-icon {
     outline: none;
   }
-  z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {
+  z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {
     color: transparent;
   }
   z-anchor-navigation
     nav
-    > *:not([current], :hover, :focus, :focus-within)
+    > *:not([data-current], :hover, :focus, :focus-within)
     > *:is(z-button, button, z-icon):not(:focus:focus-visible) {
     opacity: 0;
     pointer-events: none;

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

@@ -26,7 +26,7 @@ export class ZBreadcrumb {
     }
     // eslint-disable-next-line lines-between-class-members
     handlePropChange() {
-        this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+        this.initializeBreadcrumb();
     }
     handleResizeUp(newValue, oldValue) {
         if (newValue === Device.MOBILE ||
@@ -36,12 +36,12 @@ export class ZBreadcrumb {
             (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);
+            this.initializeBreadcrumb();
         }
     }
     componentWillLoad() {
         this.viewPortWidth = getDevice();
-        this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+        this.initializeBreadcrumb();
     }
     componentWillRender() {
         if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
@@ -57,61 +57,52 @@ export class ZBreadcrumb {
             this.hasOverflow = true;
         }
     }
-    initializeBreadcrumb(isMobile) {
-        if (isMobile) {
+    initializeBreadcrumb() {
+        if (this.viewPortWidth === 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) => {
@@ -122,38 +113,12 @@ export class ZBreadcrumb {
             };
         });
     }
-    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) {
+    renderHomepageNode() {
         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_RIGHT, 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)))));
+            }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
+                ? `<z-icon name="home" />`
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -189,21 +154,49 @@ export class ZBreadcrumb {
         }
     }
     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", { size: ListSize.SMALL }, this.collapsedElements.map((item, index, array) => {
-                return (h("div", null, 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)), index < array.length - 1 && h("z-divider", { color: "color-surface03" })));
-            }))))), 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);
-                } }, "...")));
+        return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), bindTo: this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { size: ListSize.SMALL }, this.collapsedElements.map((item, index, array) => {
+            return (h("div", null, 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), innerHTML: item.text })), index < array.length - 1 && h("z-divider", { color: "color-surface03" })));
+        }))))), h("button", { class: "dots", ref: (el) => (this.triggerButton = el), "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", onClick: () => {
+                this.togglePopover();
+            }, onKeyDown: (e) => {
+                handleKeyboardSubmit(e, this.togglePopover.bind(this));
+                setTimeout(() => {
+                    this.anchorElements[0].focus();
+                }, 100);
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (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 (h("li", null, h("a", { "aria-current": secondToLastPath.path ? undefined : "page", href: secondToLastPath.path, onClick: (e) => this.handlePreventFollowUrl(e, secondToLastPath) }, h("z-icon", { name: "chevron-left" }), 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) => (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", bindTo: trigger, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), 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 !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+        ];
     }
     render() {
-        return (h(Host, { key: '0fdd2556f767ddc969bb26ad157149092c28976f', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+        return (h(Host, { key: 'b5f0321b29ae51fac8fba3cc0302beff908cd56e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '32d4c57f93c3fd943cb6f6b72b9f9c004003d470', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+                semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+                underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+            } }, h("ol", { key: '725c96157a94749d8e55e321dd1708132479b74a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-breadcrumb/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/z-breadcrumb/index.spec.js CHANGED Viewed

@@ -14,9 +14,10 @@ describe("Suite test ZBreadcrumb", () => {
         <nav aria-label="Breadcrumb" class="underlined">
           <ol>
             <li>
-              <a class="homepage-icon" href="http://testing.stenciljs.com/link1">
-                <z-icon fill="color-link-primary" height="16" name="home" width="16"></z-icon>
+              <a href="http://testing.stenciljs.com/link1">
+                <z-icon name="home"></z-icon>
               </a>
+              <z-icon class="separator" name="chevron-right"></z-icon>
             </li>
             <li>
               <a href="http://testing.stenciljs.com/link2">

package/dist/collection/components/z-breadcrumb/index.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;oBAuBd~~,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZBreadcrumb} from \"./index\";\n\ndescribe(\"Suite test ZBreadcrumb\", () => {\n it(\"Test render ZBreadcrumb with passed children\", async () => {\n const page = await newSpecPage({\n components: [ZBreadcrumb],\n html: `<z-breadcrumb>\n <a href=\"./link1\">Link 1</a>\n <a href=\"./link2\">Link 2</a>\n </z-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`<z-breadcrumb path-style=\"underlined\" style=\"--line-clamp-popover: 0;\">\n <mock:shadow-root>\n <nav aria-label=\"Breadcrumb\" class=\"underlined\">\n <ol>\n <li>\n <a ~~class=\"homepage-icon\"~~ href=\"http://testing.stenciljs.com/link1\">\n <z-icon ~~fill~~=\"~~color~~-~~link~~-~~primary\"~~ ~~height~~=\"16\" name=\"~~home~~\" ~~width=\"16\"~~></z-icon>\n ~~</a>\n~~ </li>\n <li>\n <a href=\"http://testing.stenciljs.com/link2\">\n Link 2\n </a>\n </li>\n </ol>\n </nav>\n </mock:shadow-root>\n <a href=\"./link1\">\n Link 1\n </a>\n <a href=\"./link2\">\n Link 2\n </a>\n </z-breadcrumb>`);\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;oBAwBd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZBreadcrumb} from \"./index\";\n\ndescribe(\"Suite test ZBreadcrumb\", () => {\n it(\"Test render ZBreadcrumb with passed children\", async () => {\n const page = await newSpecPage({\n components: [ZBreadcrumb],\n html: `<z-breadcrumb>\n <a href=\"./link1\">Link 1</a>\n <a href=\"./link2\">Link 2</a>\n </z-breadcrumb>`,\n });\n\n expect(page.root).toEqualHtml(`<z-breadcrumb path-style=\"underlined\" style=\"--line-clamp-popover: 0;\">\n <mock:shadow-root>\n <nav aria-label=\"Breadcrumb\" class=\"underlined\">\n <ol>\n <li>\n <a href=\"http://testing.stenciljs.com/link1\">\n <z-icon name=\"home\"></z-icon>\n </a>\n <z-icon class=\"separator\" name=\"chevron-right\"></z-icon>\n </li>\n <li>\n <a href=\"http://testing.stenciljs.com/link2\">\n Link 2\n </a>\n </li>\n </ol>\n </nav>\n </mock:shadow-root>\n <a href=\"./link1\">\n Link 1\n </a>\n <a href=\"./link2\">\n Link 2\n </a>\n </z-breadcrumb>`);\n });\n});\n"]}