npm - @zanichelli/albe-web-components - Versions diffs - 19.2.3 → 19.2.5 - Mend

@zanichelli/albe-web-components 19.2.3 → 19.2.5

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 (78) hide show

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

@@ -131,7 +131,7 @@ const ZBreadcrumb = class {
                 "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
             }, 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" }))));
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -176,7 +176,7 @@ const ZBreadcrumb = class {
                 setTimeout(() => {
                     this.anchorElements[0].focus();
                 }, 100);
-            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     renderMobileItems() {
         // show only the second to last element
@@ -202,14 +202,14 @@ const ZBreadcrumb = class {
                     if (item.hasTooltip) {
                         this.popoverEllipsisOpen = false;
                     }
-                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))))),
         ];
     }
     render() {
-        return (h(Host, { key: 'd1237ebe6e8f96e4b43f4197a85c0084050f076d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '03fb62eefc39de3f78890d857ae23fb4f4a3307f', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '993ff7342e79780d9d8f1e7e5cad29bb9de83f9b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '6da884ebe41963ce1de9e6279ea4b157e9472b24', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'bccdd02377c6bb41f54baf717c987fcef541d95a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '26b05c1cb46299aa77c793078f3a6d9d53aede77' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"z-breadcrumb.entry.js","mappings":"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","names":[],"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-text-link-blue);\n white-space: nowrap;\n}\n\na.missing-path {\n color: var(--color-default-text);\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 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-text-link-blue);\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-text-link-blue);\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-background);\n --z-popover-padding: 0;\n --background-color-list-element: var(--color-background);\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 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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} 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) {\n requestAnimationFrame(() => {\n if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n if (!this.hasOverflow) {\n this.hasOverflow = true;\n }\n }\n });\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}
1	+ {"file":"z-breadcrumb.entry.js","mappings":"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","names":[],"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-text-link-blue);\n white-space: nowrap;\n}\n\na.missing-path {\n color: var(--color-default-text);\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 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-text-link-blue);\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-text-link-blue);\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-background);\n --z-popover-padding: 0;\n --background-color-list-element: var(--color-background);\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 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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} 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) {\n requestAnimationFrame(() => {\n if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n if (!this.hasOverflow) {\n this.hasOverflow = true;\n }\n }\n });\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 aria-hidden=\"true\"\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 aria-hidden=\"true\"\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 aria-hidden=\"true\"\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/esm/z-notification.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
-const stylesCss = ":host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2);margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
+const stylesCss = ":host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
 const ZNotificationStyle0 = stylesCss;
 const ZNotification = class {
@@ -28,7 +28,7 @@ const ZNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: '3704b1815b8b714608787f7d86e8402fe7dc4eff' }, h("div", { key: '79598a77b4cca9ad53babe6be8d8ea103d979f6a', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '2a4de5808da5ec4af5bddf68376cc7510aad9cf8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'feb0b073eacb2fdb82501f3b33bdff68fef71769', class: "content-container" }, h("div", { key: '2a81ef0da3a0fba818025651aa64e270e833c9ed', class: "content-text" }, h("slot", { key: '88f8670d0a0433012aa6f6a27a40cef7c84498c5' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '6282f5526b57131deb130c57dfe165595612d01e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '514841e3b1a2a816c9283d05ca3d2de953269e8b', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'a43a9ca62b654719cd4a2bb634152b96c801cdc9', name: "multiply-circle", width: 16, height: 16 }))))));
     }
 };
 ZNotification.style = ZNotificationStyle0;

package/dist/esm/z-notification.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~4hEAA4hE~~,CAAC;~~AAC/iE~~,4BAAe,SAAS;;~~MCaX~~,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n --z-notification--content-max-width: 100%;\n\n display: block;\n width: 100%;\n}\n\n.main-container {\n display: flex;\n max-width: var(--z-notification--content-max-width);\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2);\n margin: 0 auto;\n background-color: transparent;\n font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. /\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) 2);\n}\n\n.content-text {\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: ~~20px~~;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: ~~16px~~;\n}\n\n.action-button:focus {\n box-shadow: var(--shadow-focus-primary);\n ~~outline: none !important;\n~~}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint /\n@media ~~only screen and~~ (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Border position /\n @Prop({reflect: true})\n borderposition?: \"top\" \| \"bottom\" = \"bottom\";\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n <div class=\"main-container\">\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ulEAAulE,CAAC;AAC1mE,4BAAe,SAAS;;MCcX,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n --z-notification--content-max-width: 100%;\n --z-notification--inline-padding: ;\n\n display: block;\n width: 100%;\n}\n\n.main-container {\n display: flex;\n max-width: var(--z-notification--content-max-width);\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n margin: 0 auto;\n background-color: transparent;\n font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. /\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) 2);\n}\n\n.content-text {\n width: 100%;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 1.333;\n outline: none;\n}\n\n.action-button:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Border position /\n @Prop({reflect: true})\n borderposition?: \"top\" \| \"bottom\" = \"bottom\";\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n <div class=\"main-container\">\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/types/components/z-input/index.d.ts CHANGED Viewed

@@ -38,6 +38,8 @@ export declare class ZInput {
     status?: InputStatus;
     /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
     message?: string | boolean;
+    /** input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value */
+    htmlAriaDescribedBy?: string;
     /** the input label position: available for checkbox, radio */
     labelPosition?: LabelPosition;
     /** the input has autocomplete option (optional): available for text, password, number, email */
@@ -93,6 +95,7 @@ export declare class ZInput {
     private getNumberAttributes;
     private getPatternAttribute;
     private getRoleAttribute;
+    private inputHasMessage;
     private getAriaAttrubutes;
     private getFocusBlurAttributes;
     private renderInputText;

package/dist/types/components/z-input-message/index.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import { InputStatus } from "../../beans";
 export declare class ZInputMessage {
     /** input helper message */
     message: string;
+    /** the id of the message element (optional)*/
+    htmlId?: string;
+    /** the role to set when both the message and the status are populated (optional)*/
+    htmlRole: null | string;
     /** input status (optional) */
     status?: InputStatus;
     /** input disabled status (optional) */

package/dist/types/components/z-notification/index.d.ts CHANGED Viewed

@@ -4,7 +4,8 @@ import { NotificationType } from "../../beans";
  * Notification bar component.
  * @slot - The text of the notification.
  * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
- * @cssprop --z-notification--content-max-width - The max width of the notification content.
+ * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+ * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
  */
 export declare class ZNotification {
     /** Name of the icon on the left of the content */

package/dist/types/components/z-notification/index.stories.d.ts CHANGED Viewed

@@ -3,9 +3,7 @@ import { NotificationType } from "../../beans";
 import { CSSVarsArguments } from "../../utils/storybook-utils";
 import "./index";
 import "./index.stories.css";
-type ZNotificationStoriesArgs = ZNotification & {
-    notificationText: string;
-} & CSSVarsArguments<"--z-notification--content-max-width">;
+type ZNotificationStoriesArgs = ZNotification & CSSVarsArguments<"--z-notification--top-offset" | "--z-notification--content-max-width">;
 declare const StoryMeta: {
     title: string;
     component: string;
@@ -16,10 +14,17 @@ declare const StoryMeta: {
             };
             options: NotificationType[];
         };
+        borderposition: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
     };
     args: {
         "--z-notification--content-max-width": string;
         contenticonname: string;
+        borderposition: "bottom";
         actiontext: string;
         showclose: false;
         sticky: false;
@@ -30,24 +35,12 @@ export default StoryMeta;
 export declare const Default: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the border top variant set the `borderposition` property to `top`.
- */
-export declare const BorderTop: {
-    args: {
-        borderposition: "top";
-    };
-    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
-};
 export declare const LongText: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the banner variant set the `sticky` property to `true`.
- */
-export declare const BannerVariant: {
+export declare const StickyBanner: {
     args: {
-        notificationText: string;
+        "--z-notification--top-offset": string;
     };
     parameters: {
         controls: {
@@ -56,13 +49,16 @@ export declare const BannerVariant: {
     };
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the inline variant set the `sticky` property to `false`.
- */
-export declare const InlineVariant: {
+export declare const CenteredContent: {
     args: {
-        notificationText: string;
+        "--z-notification--content-max-width": string;
     };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+/**
+ * To have an inline notification keep the `sticky` property set to `false`.
+ */
+export declare const Inline: {
     parameters: {
         controls: {
             exclude: string[];
@@ -70,3 +66,12 @@ export declare const InlineVariant: {
     };
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
+/**
+ * The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
+ */
+export declare const BorderPosition: {
+    args: {
+        borderposition: "top";
+    };
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components.d.ts CHANGED Viewed

@@ -1005,6 +1005,10 @@ export namespace Components {
           * the input aria-controls (optional): available for text, password, number, email
          */
         "htmlAriaControls"?: string;
+        /**
+          * input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value
+         */
+        "htmlAriaDescribedBy"?: string;
         /**
           * the input aria-expaded: available for text, password, number, email
          */
@@ -1103,6 +1107,14 @@ export namespace Components {
           * input disabled status (optional)
          */
         "disabled"?: boolean;
+        /**
+          * the id of the message element (optional)
+         */
+        "htmlId"?: string;
+        /**
+          * the role to set when both the message and the status are populated (optional)
+         */
+        "htmlRole": null | string;
         /**
           * input helper message
          */
@@ -1606,7 +1618,8 @@ export namespace Components {
     /**
      * Notification bar component.
      * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content.
+     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface ZNotification {
         /**
@@ -3435,7 +3448,8 @@ declare global {
     /**
      * Notification bar component.
      * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content.
+     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface HTMLZNotificationElement extends Components.ZNotification, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZNotificationElementEventMap>(type: K, listener: (this: HTMLZNotificationElement, ev: ZNotificationCustomEvent<HTMLZNotificationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5048,6 +5062,10 @@ declare namespace LocalJSX {
           * the input aria-controls (optional): available for text, password, number, email
          */
         "htmlAriaControls"?: string;
+        /**
+          * input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value
+         */
+        "htmlAriaDescribedBy"?: string;
         /**
           * the input aria-expaded: available for text, password, number, email
          */
@@ -5166,6 +5184,14 @@ declare namespace LocalJSX {
           * input disabled status (optional)
          */
         "disabled"?: boolean;
+        /**
+          * the id of the message element (optional)
+         */
+        "htmlId"?: string;
+        /**
+          * the role to set when both the message and the status are populated (optional)
+         */
+        "htmlRole"?: null | string;
         /**
           * input helper message
          */
@@ -5725,7 +5751,8 @@ declare namespace LocalJSX {
     /**
      * Notification bar component.
      * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content.
+     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface ZNotification {
         /**
@@ -6919,7 +6946,8 @@ declare module "@stencil/core" {
             /**
              * Notification bar component.
              * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-             * @cssprop --z-notification--content-max-width - The max width of the notification content.
+             * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+             * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
              */
             "z-notification": LocalJSX.ZNotification & JSXBase.HTMLAttributes<HTMLZNotificationElement>;
             /**

package/dist/web-components-library/p-07cd81f6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as o,h as i,a}from"./p-75c4a726.js";const n=':host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}';const e=n;const s=class{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(i){t(this,i);this.notificationAction=o(this,"notificationAction",7);this.notificationClose=o(this,"notificationClose",7);this.contenticonname=undefined;this.actiontext=undefined;this.type=undefined;this.showclose=false;this.showshadow=false;this.sticky=false;this.borderposition="bottom";this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return i(a,{key:"3704b1815b8b714608787f7d86e8402fe7dc4eff"},i("div",{key:"79598a77b4cca9ad53babe6be8d8ea103d979f6a",class:"main-container"},this.contenticonname&&i("z-icon",{key:"2a4de5808da5ec4af5bddf68376cc7510aad9cf8",class:"status-icon",name:this.contenticonname,width:16,height:16}),i("div",{key:"feb0b073eacb2fdb82501f3b33bdff68fef71769",class:"content-container"},i("div",{key:"2a81ef0da3a0fba818025651aa64e270e833c9ed",class:"content-text"},i("slot",{key:"88f8670d0a0433012aa6f6a27a40cef7c84498c5"})),!!((t=this.actiontext)===null\|\|t===void 0?void 0:t.trim())&&i("button",{key:"6282f5526b57131deb130c57dfe165595612d01e",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&i("button",{key:"514841e3b1a2a816c9283d05ca3d2de953269e8b",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},i("z-icon",{key:"a43a9ca62b654719cd4a2bb634152b96c801cdc9",name:"multiply-circle",width:16,height:16}))))}};s.style=e;export{s as z_notification};
2	+ //# sourceMappingURL=p-07cd81f6.entry.js.map

package/dist/web-components-library/p-07cd81f6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZNotificationStyle0","ZNotification","handleActionButtonClick","e","preventDefault","this","notificationAction","emit","handleCloseButtonClick","notificationClose","constructor","hostRef","bind","render","h","Host","key","class","contenticonname","name","width","height","_a","actiontext","trim","type","onClick","showclose"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n --z-notification--content-max-width: 100%;\n --z-notification--inline-padding: ;\n\n display: block;\n width: 100%;\n}\n\n.main-container {\n display: flex;\n max-width: var(--z-notification--content-max-width);\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n margin: 0 auto;\n background-color: transparent;\n font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. */\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n width: 100%;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 1.333;\n outline: none;\n}\n\n.action-button:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) * 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n */\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /** Name of the icon on the left of the content */\n @Prop()\n contenticonname?: string;\n\n /** Action button text */\n @Prop()\n actiontext?: string;\n\n /** Alert variant type */\n @Prop({reflect: true})\n type: NotificationType;\n\n /** Enable close icon */\n @Prop()\n showclose?: boolean = false;\n\n /**\n * Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n */\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /** Enable sticky notification bar. */\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /** Border position */\n @Prop({reflect: true})\n borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n /** Call to action clicked */\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /** Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n <div class=\"main-container\">\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oDAAA,MAAMA,EAAY,wkEAClB,MAAAC,EAAeD,E,MCcFE,EAAa,MAoChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,kNAnCsB,M,gBAOC,M,YAIJ,M,oBAIiB,SAqBlCN,KAAKH,wBAA0BG,KAAKH,wBAAwBU,KAAKP,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBI,KAAKP,K,CAGjE,MAAAQ,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRZ,KAAKa,iBACJJ,EAAA,UAAAE,IAAA,2CACEC,MAAM,cACNE,KAAMd,KAAKa,gBACXE,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,kDAECM,EAAAjB,KAAKkB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEC,MAAM,gBACNQ,KAAK,SACLC,QAASrB,KAAKH,yBAEbG,KAAKkB,aAIXlB,KAAKsB,WACJb,EAAA,UAAAE,IAAA,2CACEC,MAAM,eACNQ,KAAK,SACLC,QAASrB,KAAKG,wBAEdM,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,O","ignoreList":[]}

package/{www/build/p-9814f864.entry.js → dist/web-components-library/p-0d2a5f65.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as e,a as s,g as o}from"./p-75c4a726.js";import{U as n,V as r,p as a,g as l,P as h,i as p}from"./p-86618221.js";import{g as c,d}from"./p-061e28d6.js";import"./p-5145a606.js";const f=":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-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);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-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);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-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.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);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";const u=f;const m=class{constructor(e){i(this,e);this.clickOnNode=t(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=n.UNDERLINED;this.homepageVariant=r.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(i,t){if(i===a.MOBILE||t===a.MOBILE&&i===a.TABLET||t===a.MOBILE&&i===a.DESKTOP||t===a.MOBILE&&i===a.DESKTOP_WIDE||t===a.TABLET&&i===a.DESKTOP||t===a.TABLET&&i===a.DESKTOP_WIDE||t===a.DESKTOP&&i===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((i=>!!i.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){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 t=this.truncateWithEllipsis(this.pathsList[i].text,this.truncateChar);this.currentEllipsisText=this.pathsList[i].text;this.pathsList[i].text=t;this.pathsList[i].hasTooltip=true;this.truncatePosition=i;return}}}truncateWithEllipsis(i,t){if(i.length<=t){return i}return i.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((i=>({text:i.textContent,path:i.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===r.TEXT},href:this.homepageNode.path,onClick:i=>this.handlePreventFollowUrl(i,this.homepageNode),innerHTML:this.homepageVariant===r.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(i,t){if(this.preventFollowUrl){i.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(i){const t=this.anchorElements.length;if(i.key===l.TAB){i.preventDefault();return}i.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(i.key)){i.preventDefault();if(i.key===l.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(i.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(i.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:i=>this.collapsedElementsRef=i,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:p.SMALL},this.collapsedElements.map(((i,t,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onKeyDown:i=>this.handleOverflowMenuAccessibility(i),innerHTML:i.text})),t<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:i=>this.triggerButton=i,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:i=>{d(i,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}renderMobileItems(){const i=this.pathsList[this.pathsList.length-1];if(!i){return}return e("li",null,e("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))}renderItems(){let i;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,s)=>e("li",null,t.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:i,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!t.path},ref:t=>i=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right"}))))]}render(){return e(s,{key:"d1237ebe6e8f96e4b43f4197a85c0084050f076d",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"03fb62eefc39de3f78890d857ae23fb4f4a3307f",ref:i=>this.wrapElement=i,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},e("ol",{key:"bccdd02377c6bb41f54baf717c987fcef541d95a"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=u;export{m as z_breadcrumb};
-//# sourceMappingURL=p-9814f864.entry.js.map
+import{r as i,c as t,h as e,a as s,g as o}from"./p-75c4a726.js";import{U as n,V as r,p as a,g as l,P as h,i as p}from"./p-86618221.js";import{g as c,d}from"./p-061e28d6.js";import"./p-5145a606.js";const u=":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-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);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-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);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-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.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);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";const f=u;const m=class{constructor(e){i(this,e);this.clickOnNode=t(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=n.UNDERLINED;this.homepageVariant=r.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(i,t){if(i===a.MOBILE||t===a.MOBILE&&i===a.TABLET||t===a.MOBILE&&i===a.DESKTOP||t===a.MOBILE&&i===a.DESKTOP_WIDE||t===a.TABLET&&i===a.DESKTOP||t===a.TABLET&&i===a.DESKTOP_WIDE||t===a.DESKTOP&&i===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((i=>!!i.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){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 t=this.truncateWithEllipsis(this.pathsList[i].text,this.truncateChar);this.currentEllipsisText=this.pathsList[i].text;this.pathsList[i].text=t;this.pathsList[i].hasTooltip=true;this.truncatePosition=i;return}}}truncateWithEllipsis(i,t){if(i.length<=t){return i}return i.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((i=>({text:i.textContent,path:i.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===r.TEXT},href:this.homepageNode.path,onClick:i=>this.handlePreventFollowUrl(i,this.homepageNode),innerHTML:this.homepageVariant===r.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(i,t){if(this.preventFollowUrl){i.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(i){const t=this.anchorElements.length;if(i.key===l.TAB){i.preventDefault();return}i.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(i.key)){i.preventDefault();if(i.key===l.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(i.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(i.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:i=>this.collapsedElementsRef=i,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:p.SMALL},this.collapsedElements.map(((i,t,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onKeyDown:i=>this.handleOverflowMenuAccessibility(i),innerHTML:i.text})),t<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:i=>this.triggerButton=i,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:i=>{d(i,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const i=this.pathsList[this.pathsList.length-1];if(!i){return}return e("li",null,e("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))}renderItems(){let i;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,s)=>e("li",null,t.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:i,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!t.path},ref:t=>i=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return e(s,{key:"993ff7342e79780d9d8f1e7e5cad29bb9de83f9b",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"6da884ebe41963ce1de9e6279ea4b157e9472b24",ref:i=>this.wrapElement=i,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},e("ol",{key:"26b05c1cb46299aa77c793078f3a6d9d53aede77"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=f;export{m as z_breadcrumb};
+//# sourceMappingURL=p-0d2a5f65.entry.js.map

package/dist/web-components-library/p-0d2a5f65.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","requestAnimationFrame","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","maxNodesToShow","splice","i","text","truncateChar","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","popoverEllipsisOpen","onMouseOver","onMouseLeave","render","Host","style","overflowMenuItemRows","semibold","pathStyle","SEMIBOLD","underlined"],"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-text-link-blue);\n white-space: nowrap;\n}\n\na.missing-path {\n color: var(--color-default-text);\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 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-text-link-blue);\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-text-link-blue);\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-background);\n --z-popover-padding: 0;\n --background-color-list-element: var(--color-background);\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 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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} 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) {\n requestAnimationFrame(() => {\n if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n if (!this.hasOverflow) {\n this.hasOverflow = true;\n }\n }\n });\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 aria-hidden=\"true\"\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 aria-hidden=\"true\"\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 aria-hidden=\"true\"\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"],"mappings":"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","ignoreList":[]}