@zanichelli/albe-web-components 19.2.4 → 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.
- package/CHANGELOG.md +11 -0
- package/dist/cjs/z-app-header_12.cjs.entry.js +5 -2
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-breadcrumb.cjs.entry.js +5 -5
- package/dist/cjs/z-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/z-notification.cjs.entry.js +2 -2
- package/dist/cjs/z-notification.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-breadcrumb/index.js +5 -5
- package/dist/collection/components/z-breadcrumb/index.js.map +1 -1
- package/dist/collection/components/z-button/index.js +5 -2
- package/dist/collection/components/z-button/index.js.map +1 -1
- package/dist/collection/components/z-notification/index.js +3 -2
- package/dist/collection/components/z-notification/index.js.map +1 -1
- package/dist/collection/components/z-notification/index.stories.js +79 -77
- package/dist/collection/components/z-notification/index.stories.js.map +1 -1
- package/dist/collection/components/z-notification/styles.css +8 -6
- package/dist/components/index5.js +5 -2
- package/dist/components/index5.js.map +1 -1
- package/dist/components/z-breadcrumb.js +5 -5
- package/dist/components/z-breadcrumb.js.map +1 -1
- package/dist/components/z-notification.js +2 -2
- package/dist/components/z-notification.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +5 -2
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-breadcrumb.entry.js +5 -5
- package/dist/esm/z-breadcrumb.entry.js.map +1 -1
- package/dist/esm/z-notification.entry.js +2 -2
- package/dist/esm/z-notification.entry.js.map +1 -1
- package/dist/types/components/z-notification/index.d.ts +2 -1
- package/dist/types/components/z-notification/index.stories.d.ts +27 -22
- package/dist/types/components.d.ts +8 -4
- package/dist/web-components-library/p-07cd81f6.entry.js +2 -0
- package/dist/web-components-library/p-07cd81f6.entry.js.map +1 -0
- package/{www/build/p-9814f864.entry.js → dist/web-components-library/p-0d2a5f65.entry.js} +2 -2
- package/dist/web-components-library/p-0d2a5f65.entry.js.map +1 -0
- package/dist/web-components-library/p-299f6d64.entry.js +2 -0
- package/dist/web-components-library/p-299f6d64.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.css +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-07cd81f6.entry.js +2 -0
- package/www/build/p-07cd81f6.entry.js.map +1 -0
- package/{dist/web-components-library/p-9814f864.entry.js → www/build/p-0d2a5f65.entry.js} +2 -2
- package/www/build/p-0d2a5f65.entry.js.map +1 -0
- package/www/build/p-299f6d64.entry.js +2 -0
- package/www/build/p-299f6d64.entry.js.map +1 -0
- package/www/build/{p-813bd63b.css → p-c60c851a.css} +1 -1
- package/www/build/{p-7a9b89a3.js → p-d969a9bf.js} +1 -1
- package/www/build/web-components-library.css +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-96e61363.entry.js +0 -2
- package/dist/web-components-library/p-96e61363.entry.js.map +0 -1
- package/dist/web-components-library/p-9814f864.entry.js.map +0 -1
- package/dist/web-components-library/p-be1c414e.entry.js +0 -2
- package/dist/web-components-library/p-be1c414e.entry.js.map +0 -1
- package/www/build/p-96e61363.entry.js +0 -2
- package/www/build/p-96e61363.entry.js.map +0 -1
- package/www/build/p-9814f864.entry.js.map +0 -1
- package/www/build/p-be1c414e.entry.js +0 -2
- package/www/build/p-be1c414e.entry.js.map +0 -1
|
@@ -131,7 +131,7 @@ const ZBreadcrumb = class {
|
|
|
131
131
|
"homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
|
|
132
132
|
}, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
|
|
133
133
|
? `<z-icon name="home" />`
|
|
134
|
-
: this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
|
|
134
|
+
: this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
|
|
135
135
|
}
|
|
136
136
|
togglePopover() {
|
|
137
137
|
if (!this.collapsedElementsRef.open) {
|
|
@@ -176,7 +176,7 @@ const ZBreadcrumb = class {
|
|
|
176
176
|
setTimeout(() => {
|
|
177
177
|
this.anchorElements[0].focus();
|
|
178
178
|
}, 100);
|
|
179
|
-
}, innerHTML: "…" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
|
|
179
|
+
}, innerHTML: "…" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
|
|
180
180
|
}
|
|
181
181
|
renderMobileItems() {
|
|
182
182
|
// show only the second to last element
|
|
@@ -202,14 +202,14 @@ const ZBreadcrumb = class {
|
|
|
202
202
|
if (item.hasTooltip) {
|
|
203
203
|
this.popoverEllipsisOpen = false;
|
|
204
204
|
}
|
|
205
|
-
}, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
|
|
205
|
+
}, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))))),
|
|
206
206
|
];
|
|
207
207
|
}
|
|
208
208
|
render() {
|
|
209
|
-
return (h(Host, { key: '
|
|
209
|
+
return (h(Host, { key: '993ff7342e79780d9d8f1e7e5cad29bb9de83f9b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '6da884ebe41963ce1de9e6279ea4b157e9472b24', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
|
|
210
210
|
semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
|
|
211
211
|
underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
|
|
212
|
-
} }, h("ol", { key: '
|
|
212
|
+
} }, h("ol", { key: '26b05c1cb46299aa77c793078f3a6d9d53aede77' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
|
|
213
213
|
}
|
|
214
214
|
get hostElement() { return getElement(this); }
|
|
215
215
|
static get watchers() { return {
|
|
@@ -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) + \"…\";\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=\"…\"\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) + \"…\";\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=\"…\"\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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
|
|
2
2
|
|
|
3
|
-
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:
|
|
3
|
+
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)}}";
|
|
4
4
|
const ZNotificationStyle0 = stylesCss;
|
|
5
5
|
|
|
6
6
|
const ZNotification = class {
|
|
@@ -28,7 +28,7 @@ const ZNotification = class {
|
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
30
|
var _a;
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
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 }))))));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
ZNotification.style = ZNotificationStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
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}
|
|
@@ -4,7 +4,8 @@ import { NotificationType } from "../../beans";
|
|
|
4
4
|
* Notification bar component.
|
|
5
5
|
* @slot - The text of the notification.
|
|
6
6
|
* @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.
|
|
7
|
-
* @cssprop --z-notification--content-max-width - The max width of the notification content.
|
|
7
|
+
* @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%.
|
|
8
|
+
* @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).
|
|
8
9
|
*/
|
|
9
10
|
export declare class ZNotification {
|
|
10
11
|
/** Name of the icon on the left of the content */
|
|
@@ -3,9 +3,7 @@ import { NotificationType } from "../../beans";
|
|
|
3
3
|
import { CSSVarsArguments } from "../../utils/storybook-utils";
|
|
4
4
|
import "./index";
|
|
5
5
|
import "./index.stories.css";
|
|
6
|
-
type ZNotificationStoriesArgs = ZNotification &
|
|
7
|
-
notificationText: string;
|
|
8
|
-
} & CSSVarsArguments<"--z-notification--content-max-width">;
|
|
6
|
+
type ZNotificationStoriesArgs = ZNotification & CSSVarsArguments<"--z-notification--top-offset" | "--z-notification--content-max-width">;
|
|
9
7
|
declare const StoryMeta: {
|
|
10
8
|
title: string;
|
|
11
9
|
component: string;
|
|
@@ -16,10 +14,17 @@ declare const StoryMeta: {
|
|
|
16
14
|
};
|
|
17
15
|
options: NotificationType[];
|
|
18
16
|
};
|
|
17
|
+
borderposition: {
|
|
18
|
+
control: {
|
|
19
|
+
type: "inline-radio";
|
|
20
|
+
};
|
|
21
|
+
options: string[];
|
|
22
|
+
};
|
|
19
23
|
};
|
|
20
24
|
args: {
|
|
21
25
|
"--z-notification--content-max-width": string;
|
|
22
26
|
contenticonname: string;
|
|
27
|
+
borderposition: "bottom";
|
|
23
28
|
actiontext: string;
|
|
24
29
|
showclose: false;
|
|
25
30
|
sticky: false;
|
|
@@ -30,24 +35,12 @@ export default StoryMeta;
|
|
|
30
35
|
export declare const Default: {
|
|
31
36
|
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
32
37
|
};
|
|
33
|
-
/**
|
|
34
|
-
* To use the border top variant set the `borderposition` property to `top`.
|
|
35
|
-
*/
|
|
36
|
-
export declare const BorderTop: {
|
|
37
|
-
args: {
|
|
38
|
-
borderposition: "top";
|
|
39
|
-
};
|
|
40
|
-
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
41
|
-
};
|
|
42
38
|
export declare const LongText: {
|
|
43
39
|
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
44
40
|
};
|
|
45
|
-
|
|
46
|
-
* To use the banner variant set the `sticky` property to `true`.
|
|
47
|
-
*/
|
|
48
|
-
export declare const BannerVariant: {
|
|
41
|
+
export declare const StickyBanner: {
|
|
49
42
|
args: {
|
|
50
|
-
|
|
43
|
+
"--z-notification--top-offset": string;
|
|
51
44
|
};
|
|
52
45
|
parameters: {
|
|
53
46
|
controls: {
|
|
@@ -56,13 +49,16 @@ export declare const BannerVariant: {
|
|
|
56
49
|
};
|
|
57
50
|
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
58
51
|
};
|
|
59
|
-
|
|
60
|
-
* To use the inline variant set the `sticky` property to `false`.
|
|
61
|
-
*/
|
|
62
|
-
export declare const InlineVariant: {
|
|
52
|
+
export declare const CenteredContent: {
|
|
63
53
|
args: {
|
|
64
|
-
|
|
54
|
+
"--z-notification--content-max-width": string;
|
|
65
55
|
};
|
|
56
|
+
render: (args: any) => import("lit-html").TemplateResult<1>;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* To have an inline notification keep the `sticky` property set to `false`.
|
|
60
|
+
*/
|
|
61
|
+
export declare const Inline: {
|
|
66
62
|
parameters: {
|
|
67
63
|
controls: {
|
|
68
64
|
exclude: string[];
|
|
@@ -70,3 +66,12 @@ export declare const InlineVariant: {
|
|
|
70
66
|
};
|
|
71
67
|
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
72
68
|
};
|
|
69
|
+
/**
|
|
70
|
+
* The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
|
|
71
|
+
*/
|
|
72
|
+
export declare const BorderPosition: {
|
|
73
|
+
args: {
|
|
74
|
+
borderposition: "top";
|
|
75
|
+
};
|
|
76
|
+
render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
|
|
77
|
+
};
|
|
@@ -1618,7 +1618,8 @@ export namespace Components {
|
|
|
1618
1618
|
/**
|
|
1619
1619
|
* Notification bar component.
|
|
1620
1620
|
* @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.
|
|
1621
|
-
* @cssprop --z-notification--content-max-width - The max width of the notification content.
|
|
1621
|
+
* @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%.
|
|
1622
|
+
* @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).
|
|
1622
1623
|
*/
|
|
1623
1624
|
interface ZNotification {
|
|
1624
1625
|
/**
|
|
@@ -3447,7 +3448,8 @@ declare global {
|
|
|
3447
3448
|
/**
|
|
3448
3449
|
* Notification bar component.
|
|
3449
3450
|
* @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.
|
|
3450
|
-
* @cssprop --z-notification--content-max-width - The max width of the notification content.
|
|
3451
|
+
* @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%.
|
|
3452
|
+
* @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).
|
|
3451
3453
|
*/
|
|
3452
3454
|
interface HTMLZNotificationElement extends Components.ZNotification, HTMLStencilElement {
|
|
3453
3455
|
addEventListener<K extends keyof HTMLZNotificationElementEventMap>(type: K, listener: (this: HTMLZNotificationElement, ev: ZNotificationCustomEvent<HTMLZNotificationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -5749,7 +5751,8 @@ declare namespace LocalJSX {
|
|
|
5749
5751
|
/**
|
|
5750
5752
|
* Notification bar component.
|
|
5751
5753
|
* @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.
|
|
5752
|
-
* @cssprop --z-notification--content-max-width - The max width of the notification content.
|
|
5754
|
+
* @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%.
|
|
5755
|
+
* @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).
|
|
5753
5756
|
*/
|
|
5754
5757
|
interface ZNotification {
|
|
5755
5758
|
/**
|
|
@@ -6943,7 +6946,8 @@ declare module "@stencil/core" {
|
|
|
6943
6946
|
/**
|
|
6944
6947
|
* Notification bar component.
|
|
6945
6948
|
* @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.
|
|
6946
|
-
* @cssprop --z-notification--content-max-width - The max width of the notification content.
|
|
6949
|
+
* @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%.
|
|
6950
|
+
* @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).
|
|
6947
6951
|
*/
|
|
6948
6952
|
"z-notification": LocalJSX.ZNotification & JSXBase.HTMLAttributes<HTMLZNotificationElement>;
|
|
6949
6953
|
/**
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
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)+"…"}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:"…"}),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};
|
|
2
|
+
//# sourceMappingURL=p-0d2a5f65.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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) + \"…\";\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=\"…\"\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":[]}
|