npm - @zanichelli/albe-web-components - Versions diffs - 20.0.3 → 20.0.5 - Mend

@zanichelli/albe-web-components 20.0.3 → 20.0.5

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

Files changed (55) hide show

package/dist/components/z-app-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","__stencil_proxyCustomElement","HTMLElement","onStuck","scrollParent","this","sticking","emit","_stuck","setMenuFloatingMode","menuElements","length","forEach","element","open","verticalContext","drawerOpen","onStuckChange","container","stuck","_a","stuckIntersecObserver","observe","_b","unobserve","title","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","window","canShowMenu","enableOffcanvas","isMobile","focusableMenu","find","el","htmlTabindex","openDrawer","index","setTimeout","setFocus","closeDrawer","burgerButton","focus","collectMenuElements","Array","from","querySelectorAll","menuLength","menuWidth","reduce","acc","getBoundingClientRect","width","setupMenuResizeObserver","menuResizeObserver","ResizeObserver","entries","containerWidth","contentBoxSize","inlineSize","hasSlot","slotName","moveFocus","current","receiver","onOffcanvasKeydown","ev","key","KeyboardCode","TAB","closestMenu","target","closest","preventDefault","stopPropagation","closeDrawerButton","shiftKey","filter","menu","pop","manageMenus","targetMenu","containsElement","handleKeydown","ESC","some","elem","contains","currentIndex","indexOf","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ARROW_UP","focusLastItem","renderSeachbar","searchPageUrl","isTablet","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","value","searchString","placeholder","searchPlaceholder","htmlAriaLabel","searchLabel","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderSearchLabel","renderProductLogos","Fragment","enableZLogo","alt","name","renderMenuButton","ref","onClick","renderOffcanvas","id","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","onKeyDown","slot","disabled","onSlotchange","renderStuck","enableSearch","constructor","registerHost","entry","isIntersecting","threshold","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","renderTopSubtitle","render","hasTopSubtitle","Host","role"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.\n * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n /\n --app-header-content-max-width: ;\n --app-header-top-offset: ;\n --app-header-bg: ;\n --app-header-text-color: ;\n --app-header-stucked-bg: ;\n --app-header-stucked-text-color: ;\n\n position: relative;\n display: block;\n box-shadow: var(--shadow-2);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n --title-line-height: 1.333;\n --title-font-size: var(--font-size-6);\n\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width, 100%);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: row;\n}\n\n.heading-title {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: flex-end;\n}\n\n.heading-container > .heading-title:not(:last-child) {\n margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n}\n\n.z-logo img {\n height: 24px;\n margin: 0 var(--space-unit) 0 0;\n content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.product-logo {\n display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n width: 32px;\n height: 32px;\n margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n margin: 0;\n color: var(--app-header-text-color, var(--color-default-text));\n font-family: var(--font-family-serif);\n font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n display: -webkit-box;\n overflow: hidden;\n align-self: self-end;\n -webkit-box-orient: vertical;\n font-size: var(--title-font-size);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n display: -webkit-box;\n overflow: hidden;\n margin: 0;\n -webkit-box-orient: vertical;\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-style: italic;\n font-weight: var(--font-rg);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n}\n\n.search-page-button {\n margin-left: auto;\n}\n\n.menu-container {\n display: flex;\n flex: 1 auto;\n column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n position: absolute;\n top: calc(1.5em / 2); /* half the line-height of the label /\n right: calc(var(--space-unit) -2);\n width: var(--border-size-small);\n height: 1em;\n background-color: var(--color-default-icon);\n content: \"\";\n font-size: var(--font-size-3);\n transform: translateY(-50%);\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: 100%;\n align-items: center;\n}\n\n.search-slot {\n margin-left: auto;\n}\n\n.search-slot .z-label {\n padding-bottom: 0;\n margin-bottom: -3px;\n font-size: 10px;\n line-height: 10px;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset, 48px);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg, var(--color-surface01));\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width, 100%);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n --title-font-size: var(--font-size-5);\n --title-line-height: 1.4;\n\n overflow: hidden;\n align-items: center;\n}\n\n.heading-stuck .stucked-title {\n overflow: hidden;\n font-size: var(--title-font-size);\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n padding: 0;\n border: 0;\n margin-right: var(--space-unit);\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n fill: var(--color-default-icon);\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas {\n --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-close z-icon {\n fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.heading-block {\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n@media (max-width: 767px) {\n :host([enable-search]) .heading-panel .heading-container {\n row-gap: calc(var(--space-unit) * 1.5);\n }\n\n :host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n }\n\n .heading-block > .top-subtitle {\n margin-top: calc(var(--space-unit) * 0.5);\n }\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .heading-panel {\n --title-font-size: var(--font-size-9);\n }\n\n :host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: column;\n }\n\n .heading-panel .heading-container {\n flex-direction: column;\n margin-right: auto;\n }\n\n .z-logo img {\n height: 32px;\n }\n\n .product-logo {\n display: flex;\n height: calc(var(--title-font-size) var(--title-line-height));\n align-items: center;\n }\n\n .has-top-subtitle .z-logo {\n display: none;\n }\n\n z-searchbar {\n height: calc(var(--title-font-size) * var(--title-line-height));\n margin-left: auto;\n }\n\n ::slotted([slot=\"top-subtitle\"]) {\n margin-top: calc(var(--space-unit) * 0.5);\n margin-bottom: calc(var(--space-unit) * -0.5);\n }\n\n .menu-container {\n flex: initial;\n }\n\n .menu-container > [role=\"menubar\"] {\n display: contents;\n }\n\n :host(:not([enable-offcanvas])) .menu-container {\n margin-top: calc((var(--space-unit) * 1.75));\n }\n\n :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n display: none;\n }\n\n .heading-stuck .heading-title {\n --title-font-size: var(--font-size-8);\n --title-line-height: 1.5;\n }\n\n .heading-stuck-content {\n padding: 6px var(--grid-margin);\n }\n\n :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n padding-left: 0;\n }\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n z-searchbar {\n min-width: calc(var(--space-unit) 45);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n /\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Visible label for the search bar.\n /\n @Prop()\n searchLabel?: string;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Label of the search button.\n /\n @Prop()\n searchButtonLabel?: string;\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n Enable laZ logo.\n /\n @Prop({reflect: true})\n enableZLogo = true;\n\n /\n The opening state of the drawer.\n /\n @Prop({mutable: true})\n drawerOpen = false;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current count of menu items.\n /\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); / wait for the 400ms offcanvas transition /\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) 32 /* 32px is the gap between each menu item /;\n }\n this.setMenuFloatingMode();\n }\n\n /* Automatically use offcanvas mode when the menubar doesn't fit in the header. /\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB \|\| !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /* Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent \| PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement \| HTMLZSearchbarElement \| undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile \|\| this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n htmlAriaLabel={this.searchLabel}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile \|\| this.isTablet}\n searchButtonLabel={this.isMobile \|\| this.isTablet ? undefined : this.searchButtonLabel}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderSearchLabel(): HTMLSpanElement \| undefined {\n if (this.searchLabel && !this.isMobile && !this.isTablet && !this.enableOffcanvas) {\n return <label class=\"z-label\">{this.searchLabel}</label>;\n }\n }\n\n private renderProductLogos(): HTMLElement \| null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas \|\| this._stuck \|\| this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n private renderTopSubtitle(): HTMLElement \| undefined {\n if (!this.hasSlot(\"top-subtitle\") \|\| (this.enableSearch && this.isMobile)) {\n return;\n }\n\n return (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n );\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n <div class=\"heading-block\">\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <div class=\"title-container\">\n {!this.isMobile && this.renderTopSubtitle()}\n <slot name=\"title\" />\n </div>\n <div class=\"search-slot\">\n {this.renderSearchLabel()}\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n </div>\n {this.isMobile && this.renderTopSubtitle()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title \|\| undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title \|\| undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","__stencil_proxyCustomElement","HTMLElement","onStuck","scrollParent","this","sticking","emit","_stuck","setMenuFloatingMode","menuElements","length","forEach","element","open","verticalContext","drawerOpen","onStuckChange","container","stuck","_a","stuckIntersecObserver","observe","_b","unobserve","title","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","window","canShowMenu","enableOffcanvas","isMobile","focusableMenu","find","el","htmlTabindex","openDrawer","index","setTimeout","setFocus","closeDrawer","burgerButton","focus","collectMenuElements","Array","from","querySelectorAll","menuLength","menuWidth","reduce","acc","getBoundingClientRect","width","setupMenuResizeObserver","menuResizeObserver","ResizeObserver","entries","containerWidth","contentBoxSize","inlineSize","hasSlot","slotName","moveFocus","current","receiver","onOffcanvasKeydown","ev","key","KeyboardCode","TAB","closestMenu","target","closest","preventDefault","stopPropagation","closeDrawerButton","shiftKey","filter","menu","pop","manageMenus","targetMenu","containsElement","handleKeydown","ESC","some","elem","contains","currentIndex","indexOf","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ARROW_UP","focusLastItem","renderSeachbar","searchPageUrl","isTablet","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","htmlid","value","searchString","placeholder","searchPlaceholder","htmlAriaLabel","searchLabel","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderSearchLabel","htmlFor","renderProductLogos","Fragment","enableZLogo","alt","name","renderMenuButton","ref","onClick","renderOffcanvas","id","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","onKeyDown","slot","disabled","onSlotchange","renderStuck","enableSearch","constructor","registerHost","entry","isIntersecting","threshold","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","renderTopSubtitle","render","hasTopSubtitle","Host","role"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.\n * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n /\n --app-header-content-max-width: ;\n --app-header-top-offset: ;\n --app-header-bg: ;\n --app-header-text-color: ;\n --app-header-stucked-bg: ;\n --app-header-stucked-text-color: ;\n\n position: relative;\n display: block;\n box-shadow: var(--shadow-2);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n --title-line-height: 1.333;\n --title-font-size: var(--font-size-6);\n\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width, 100%);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: row;\n}\n\n.heading-title {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: flex-end;\n}\n\n.heading-container > .heading-title:not(:last-child) {\n margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n}\n\n.z-logo img {\n height: 24px;\n margin: 0 var(--space-unit) 0 0;\n content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.product-logo {\n display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n width: 32px;\n height: 32px;\n margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n margin: 0;\n color: var(--app-header-text-color, var(--color-default-text));\n font-family: var(--font-family-serif);\n font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n display: -webkit-box;\n overflow: hidden;\n align-self: self-end;\n -webkit-box-orient: vertical;\n font-size: var(--title-font-size);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n display: -webkit-box;\n overflow: hidden;\n margin: 0;\n -webkit-box-orient: vertical;\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-style: italic;\n font-weight: var(--font-rg);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n}\n\n.search-page-button {\n margin-left: auto;\n}\n\n.menu-container {\n display: flex;\n flex: 1 auto;\n column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n position: absolute;\n top: calc(1.5em / 2); /* half the line-height of the label /\n right: calc(var(--space-unit) -2);\n width: var(--border-size-small);\n height: 1em;\n background-color: var(--color-default-icon);\n content: \"\";\n font-size: var(--font-size-3);\n transform: translateY(-50%);\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: 100%;\n align-items: center;\n}\n\n.search-slot {\n margin-left: auto;\n}\n\n.search-slot .z-label {\n height: 10px;\n padding-bottom: 0;\n margin-bottom: -3px;\n font-size: 10px;\n line-height: 10px;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset, 48px);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg, var(--color-surface01));\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width, 100%);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n --title-font-size: var(--font-size-5);\n --title-line-height: 1.4;\n\n overflow: hidden;\n align-items: center;\n}\n\n.heading-stuck .stucked-title {\n overflow: hidden;\n font-size: var(--title-font-size);\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n padding: 0;\n border: 0;\n margin-right: var(--space-unit);\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n fill: var(--color-default-icon);\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas {\n --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-close z-icon {\n fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.heading-block {\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n@media (max-width: 767px) {\n :host([enable-search]) .heading-panel .heading-container {\n row-gap: calc(var(--space-unit) * 1.5);\n }\n\n :host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n }\n\n .heading-block > .top-subtitle {\n margin-top: calc(var(--space-unit) * 0.5);\n }\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .heading-panel {\n --title-font-size: var(--font-size-9);\n }\n\n :host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: column;\n }\n\n .heading-panel .heading-container {\n flex-direction: column;\n margin-right: auto;\n }\n\n .z-logo img {\n height: 32px;\n }\n\n .product-logo {\n display: flex;\n height: calc(var(--title-font-size) var(--title-line-height));\n align-items: center;\n }\n\n .has-top-subtitle .z-logo {\n display: none;\n }\n\n z-searchbar {\n height: calc(var(--title-font-size) * var(--title-line-height));\n margin-left: auto;\n }\n\n ::slotted([slot=\"top-subtitle\"]) {\n margin-top: calc(var(--space-unit) * 0.5);\n margin-bottom: calc(var(--space-unit) * -0.5);\n }\n\n .menu-container {\n flex: initial;\n }\n\n .menu-container > [role=\"menubar\"] {\n display: contents;\n }\n\n :host(:not([enable-offcanvas])) .menu-container {\n margin-top: calc((var(--space-unit) * 1.75));\n }\n\n :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n display: none;\n }\n\n .heading-stuck .heading-title {\n --title-font-size: var(--font-size-8);\n --title-line-height: 1.5;\n }\n\n .heading-stuck-content {\n padding: 6px var(--grid-margin);\n }\n\n :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n padding-left: 0;\n }\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n .search-slot {\n height: 53px;\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) 45);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n /\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Visible label for the search bar.\n /\n @Prop()\n searchLabel?: string;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Label of the search button.\n /\n @Prop()\n searchButtonLabel?: string;\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n Enable laZ logo.\n /\n @Prop({reflect: true})\n enableZLogo = true;\n\n /\n The opening state of the drawer.\n /\n @Prop({mutable: true})\n drawerOpen = false;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current count of menu items.\n /\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); / wait for the 400ms offcanvas transition /\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) 32 /* 32px is the gap between each menu item /;\n }\n this.setMenuFloatingMode();\n }\n\n /* Automatically use offcanvas mode when the menubar doesn't fit in the header. /\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB \|\| !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /* Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent \| PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement \| HTMLZSearchbarElement \| undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile \|\| this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n htmlid=\"app-header-searchbar\"\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n htmlAriaLabel={this.searchLabel}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile \|\| this.isTablet}\n searchButtonLabel={this.isMobile \|\| this.isTablet ? undefined : this.searchButtonLabel}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderSearchLabel(): HTMLSpanElement \| undefined {\n if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {\n return (\n <label\n class=\"z-label\"\n htmlFor=\"input-app-header-searchbar\"\n aria-hidden={this.searchLabel ? \"false\" : \"true\"}\n >\n {this.searchLabel}\n </label>\n );\n }\n }\n\n private renderProductLogos(): HTMLElement \| null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas \|\| this._stuck \|\| this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n private renderTopSubtitle(): HTMLElement \| undefined {\n if (!this.hasSlot(\"top-subtitle\") \|\| (this.enableSearch && this.isMobile)) {\n return;\n }\n\n return (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n );\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n <div class=\"heading-block\">\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <div class=\"title-container\">\n {!this.isMobile && this.renderTopSubtitle()}\n <slot name=\"title\" />\n </div>\n <div class=\"search-slot\">\n {this.enableSearch && this.renderSearchLabel()}\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n </div>\n {this.isMobile && this.renderTopSubtitle()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title \|\| undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title \|\| undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/z-card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as o,h as a,Host as e,transformTag as r}from"@stencil/core/internal/client";import{C as s}from"./index2.js";import{d as i}from"./index3.js";const c=()=>`:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}`;const n=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.showShadow=false;this.clickable=false}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[a("div",{class:"cover-container"},a("div",{class:"color-cover"},a("div",{class:"cover-content"},a("slot",{name:"metadata"}),a("slot",{name:"title"})))),a("div",{class:"content"},a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))]}renderContent(){return a("div",{class:"content"},a("slot",{name:"metadata"}),a("slot",{name:"title"}),a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))}render(){if(this.variant===s.TEXT){return a(e,null,this.renderContent())}if(this.variant===s.OVERLAY||this.hasCoverImage){return a(e,null,a("div",{class:"cover-container"},this.hasCoverImage&&[a("slot",{name:"cover"}),this.variant!==s.OVERLAY&&this.coverIcon&&a("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&a("div",{class:"color-cover"})),this.renderContent())}return a(e,null,this.renderColorCoverCard())}get host(){return this}static get style(){return c()}},[257,"z-card",{variant:[513],coverIcon:[1,"cover-icon"],showShadow:[516,"show-shadow"],clickable:[516],hasCoverImage:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-card","z-icon"];t.forEach((t=>{switch(t){case"z-card":if(!customElements.get(r(t))){customElements.define(r(t),n)}break;case"z-icon":if(!customElements.get(r(t))){i()}break}}))}const d=n;const v=l;export{d as ZCard,v as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as o,h as a,Host as e,transformTag as r}from"@stencil/core/internal/client";import{C as s}from"./index2.js";import{d as i}from"./index3.js";const c=()=>`:host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center}:host(:not([variant="overlay"])) .actions{margin-top:auto}::slotted([slot="action"]){position:relative;z-index:2}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant="text"]) [slot="text"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);color:var(--color-text-inverse);fill:var(--color-text-inverse)}`;const n=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.showShadow=false;this.clickable=false}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[a("div",{class:"cover-container"},a("div",{class:"color-cover"},a("div",{class:"cover-content"},a("slot",{name:"metadata"}),a("slot",{name:"title"})))),a("div",{class:"content"},a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))]}renderContent(){return a("div",{class:"content"},a("slot",{name:"metadata"}),a("slot",{name:"title"}),a("slot",{name:"text"}),a("div",{class:"actions"},a("slot",{name:"action"})))}render(){if(this.variant===s.TEXT){return a(e,null,this.renderContent())}if(this.variant===s.OVERLAY||this.hasCoverImage){return a(e,null,a("div",{class:"cover-container"},this.hasCoverImage&&[a("slot",{name:"cover"}),this.variant!==s.OVERLAY&&this.coverIcon&&a("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&a("div",{class:"color-cover"})),this.renderContent())}return a(e,null,this.renderColorCoverCard())}get host(){return this}static get style(){return c()}},[257,"z-card",{variant:[513],coverIcon:[1,"cover-icon"],showShadow:[516,"show-shadow"],clickable:[516],hasCoverImage:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-card","z-icon"];t.forEach((t=>{switch(t){case"z-card":if(!customElements.get(r(t))){customElements.define(r(t),n)}break;case"z-icon":if(!customElements.get(r(t))){i()}break}}))}const d=n;const v=l;export{d as ZCard,v as defineCustomElement};
 //# sourceMappingURL=z-card.js.map

package/dist/components/z-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","ZCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showShadow","clickable","componentWillLoad","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n /\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"mappings":"uLAAA,MAAMA,EAAY,IAAM,8tI,MCkBXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAoBEC,KAAAC,WAAa,MAObD,KAAAE,UAAY,KAwEb,CAjEC,iBAAAC,GACEH,KAAKI,cAAgBJ,KAAKK,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIZ,KAAKa,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEhB,KAAKW,gB,CAGrB,GAAIX,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKI,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRT,KAAKI,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXV,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKkB,WAAaV,EAAA,UAAQE,KAAMV,KAAKkB,cAE7ElB,KAAKI,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCT,KAAKW,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEhB,KAAKO,uB","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","ZCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showShadow","clickable","componentWillLoad","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`\n * @prop --z-card--border-color: Default: `var(--gray200)`\n * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`\n * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`\n * @prop --z-card--text-border-radius: Default: `none`\n * @prop --z-card--text-border: Configure CSS `border`. Default: `none`\n * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`\n /\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n,\n::slotted() {\n box-sizing: border-box;\n}\n\n:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/ Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental /\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text /\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n width: 100%;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n width: 100%;\n margin: 0;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n}\n\n.actions {\n display: flex;\n align-items: center;\n}\n\n:host(:not([variant=\"overlay\"])) .actions {\n margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n position: relative;\n z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n/* Border /\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/ Shadow /\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/ Overlay /\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to bottom, transparent, rgb(39 39 39 / 57%) 85%, var(--gray800) 100%);\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/\n ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n \n @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /\n Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"mappings":"uLAAA,MAAMA,EAAY,IAAM,wvI,MCkBXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAoBEC,KAAAC,WAAa,MAObD,KAAAE,UAAY,KAwEb,CAjEC,iBAAAC,GACEH,KAAKI,cAAgBJ,KAAKK,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIZ,KAAKa,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEhB,KAAKW,gB,CAGrB,GAAIX,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKI,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRT,KAAKI,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXV,KAAKa,UAAYC,EAAYG,SAAWjB,KAAKkB,WAAaV,EAAA,UAAQE,KAAMV,KAAKkB,cAE7ElB,KAAKI,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCT,KAAKW,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEhB,KAAKO,uB","ignoreList":[]}

package/dist/components/z-stepper-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./index3.js";const a=()=>`:host{position:relative;display:flex;font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:18px;--z-icon-height:18px;--indicator-size:calc(var(--space-unit) * 3.5);--stepper-item-size:calc(var(--space-unit) * 3.5);--indicator-overflow:calc((var(--indicator-size) - var(--stepper-item-size)) / 2);--connector-top:calc(var(--stepper-item-size) / 2)}:host(:not(:first-child)){flex:1;justify-content:flex-end}:host(:not(:first-child))::before{position:absolute;z-index:1;top:var(--connector-top);right:calc(var(--stepper-item-size) + var(--indicator-overflow));left:0;display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);content:"";transform:translateY(-50%)}:host(:not([disabled],:first-child))::before{border-bottom:var(--border-size-large) solid var(--color-primary01)}.stepper-item{display:grid;width:var(--stepper-item-size);align-items:center;padding:0;border:0;appearance:none;background:transparent;gap:10px;grid-template-columns:var(--stepper-item-size);grid-template-rows:var(--stepper-item-size) auto;justify-items:center;outline:0;text-decoration:none}.indicator{position:relative;z-index:2;display:flex;width:var(--indicator-size);min-width:0;height:var(--indicator-size);min-height:0;box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333}.stepper-item span{min-width:50px;color:var(--color-default-text);font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4;text-align:center}:host([pressed]){--indicator-size:calc(var(--space-unit) * 4)}:host([pressed]) .stepper-item{gap:8px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-4);font-weight:var(--font-sb)}:host([pressed]) .stepper-item span{font-weight:var(--font-sb);line-height:1.5}:host([href]:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-form-disabled01-icon);color:var(--color-form-disabled01-icon)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-primary01);background-color:var(--color-primary01)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-white)}@media (min-width: 1152px){:host{--z-icon-width:24px;--z-icon-height:24px;--indicator-size:calc(var(--space-unit) * 4.5);--stepper-item-size:calc(var(--space-unit) * 4.5)}.stepper-item{gap:12px}.stepper-item .indicator,.stepper-item span{font-size:var(--font-size-3);line-height:1.5}:host([pressed]){--indicator-size:calc(var(--space-unit) * 5)}:host([pressed]) .stepper-item{gap:10px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-6)}}`;const n=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}getAttributes(){const e=this.href&&!this.disabled?{onClick:()=>location.href=this.href}:undefined;const t=e?{role:"link"}:undefined;const i=this.pressed&&!this.disabled?{"aria-current":"step"}:undefined;const r=this.href===""?{tabIndex:-1}:undefined;const o=!t&&this.pressed!==undefined?{"aria-pressed":String(this.pressed)}:undefined;const s=this.disabled!==undefined?{"aria-disabled":String(this.disabled)}:undefined;return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e),t),i),r),o),s)}render(){return i(r,{key:"42329c166903a0ce77e82d222371804f3e7279b1",role:"listitem"},i("button",Object.assign({key:"ed6351193460e7a873cd9867bbd2ded798bbad8f",class:"stepper-item",disabled:this.disabled},this.getAttributes(),{"aria-label":this.htmlAriaLabel}),i("div",{key:"fc09e304cff2a9651859002047bd825f32c08e88",class:"indicator"},this.checked?i("z-icon",{name:"checkmark"}):this.index),i("span",{key:"5a9055a16e1e2481a995ad13ae307d8d67a07b70"},i("slot",{key:"68926fc154893ac5ed50ded8065590cfb586eb90"}))))}static get style(){return a()}},[257,"z-stepper-item",{index:[514],href:[513],pressed:[516],checked:[516],disabled:[516],htmlAriaLabel:[1,"html-aria-label"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["z-stepper-item","z-icon"];e.forEach((e=>{switch(e){case"z-stepper-item":if(!customElements.get(o(e))){customElements.define(o(e),n)}break;case"z-icon":if(!customElements.get(o(e))){s()}break}}))}const d=n;const p=c;export{d as ZStepperItem,p as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./index3.js";const a=()=>`:host{position:relative;display:flex;font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:18px;--z-icon-height:18px;--indicator-size:calc(var(--space-unit) * 3.5);--stepper-item-size:calc(var(--space-unit) * 3.5);--indicator-overflow:calc((var(--indicator-size) - var(--stepper-item-size)) / 2);--connector-top:calc(var(--stepper-item-size) / 2)}:host(:not(:first-child)){flex:1;justify-content:flex-end}:host(:not(:first-child))::before{position:absolute;z-index:1;top:var(--connector-top);right:calc(var(--stepper-item-size) + var(--indicator-overflow));left:0;display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);content:"";transform:translateY(-50%)}:host(:not([disabled],:first-child))::before{border-bottom:var(--border-size-large) solid var(--color-primary01)}.stepper-item{display:grid;width:var(--stepper-item-size);align-items:center;padding:0;border:0;appearance:none;background:transparent;gap:10px;grid-template-columns:var(--stepper-item-size);grid-template-rows:var(--stepper-item-size) auto;justify-items:center;outline:0;text-decoration:none}.indicator{position:relative;z-index:2;display:flex;width:var(--indicator-size);min-width:0;height:var(--indicator-size);min-height:0;box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px}.indicator-number{display:block;transform:translateY(0.04em)}.stepper-item span:not(.indicator-number){min-width:50px;align-self:start;color:var(--color-default-text);font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4;text-align:center}:host([pressed]){--indicator-size:calc(var(--space-unit) * 4)}:host([pressed]) .stepper-item{gap:8px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-4);font-weight:var(--font-sb)}:host([pressed]) .stepper-item span:not(.indicator-number){font-weight:var(--font-sb);line-height:1.5}:host([href]:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-form-disabled01-icon);color:var(--color-form-disabled01-icon)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-primary01);background-color:var(--color-primary01)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-white)}@media (min-width: 1152px){:host{--z-icon-width:24px;--z-icon-height:24px;--indicator-size:calc(var(--space-unit) * 4.5);--stepper-item-size:calc(var(--space-unit) * 4.5)}.stepper-item{gap:12px}.stepper-item .indicator,.stepper-item span:not(.indicator-number){font-size:var(--font-size-3);line-height:1.5}:host([pressed]){--indicator-size:calc(var(--space-unit) * 5)}:host([pressed]) .stepper-item{gap:10px}:host([pressed]) .stepper-item .indicator{font-size:var(--font-size-6)}}@supports (text-box-trim: trim-both){.indicator-number{text-box-edge:cap alphabetic;text-box-trim:trim-both;transform:none}}`;const n=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}getAttributes(){const e=this.href&&!this.disabled?{onClick:()=>location.href=this.href}:undefined;const t=e?{role:"link"}:undefined;const i=this.pressed&&!this.disabled?{"aria-current":"step"}:undefined;const r=this.href===""?{tabIndex:-1}:undefined;const o=!t&&this.pressed!==undefined?{"aria-pressed":String(this.pressed)}:undefined;const s=this.disabled!==undefined?{"aria-disabled":String(this.disabled)}:undefined;return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e),t),i),r),o),s)}render(){return i(r,{key:"42329c166903a0ce77e82d222371804f3e7279b1",role:"listitem"},i("button",Object.assign({key:"ed6351193460e7a873cd9867bbd2ded798bbad8f",class:"stepper-item",disabled:this.disabled},this.getAttributes(),{"aria-label":this.htmlAriaLabel}),i("div",{key:"fc09e304cff2a9651859002047bd825f32c08e88",class:"indicator"},this.checked?i("z-icon",{name:"checkmark"}):i("span",{class:"indicator-number"},this.index)),i("span",{key:"2535476a7879ce7dd090c4c3c11c8c8acff91b85"},i("slot",{key:"682000b3779da6edaa09dc1af5861c6161831eac"}))))}static get style(){return a()}},[257,"z-stepper-item",{index:[514],href:[513],pressed:[516],checked:[516],disabled:[516],htmlAriaLabel:[1,"html-aria-label"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["z-stepper-item","z-icon"];e.forEach((e=>{switch(e){case"z-stepper-item":if(!customElements.get(o(e))){customElements.define(o(e),n)}break;case"z-icon":if(!customElements.get(o(e))){s()}break}}))}const d=n;const p=c;export{d as ZStepperItem,p as defineCustomElement};
 //# sourceMappingURL=z-stepper-item.js.map

package/dist/components/z-stepper-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","ZStepperItem","__stencil_proxyCustomElement","HTMLElement","getAttributes","href","this","disabled","onClick","location","undefined","role","current","pressed","tabindex","tabIndex","ariaPressed","String","ariaDisabled","Object","assign","render","h","Host","key","class","htmlAriaLabel","checked","name","index"],"sources":["src/components/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n --indicator-size: calc(var(--space-unit) * 3.5);\n --stepper-item-size: calc(var(--space-unit) * 3.5);\n --indicator-overflow: calc((var(--indicator-size) - var(--stepper-item-size)) / 2);\n --connector-top: calc(var(--stepper-item-size) / 2);\n}\n\n:host(:not(:first-child)) {\n flex: 1;\n justify-content: flex-end;\n}\n\n:host(:not(:first-child))::before {\n position: absolute;\n z-index: 1;\n top: var(--connector-top);\n right: calc(var(--stepper-item-size) + var(--indicator-overflow));\n left: 0;\n display: block;\n width: auto;\n border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n content: \"\";\n transform: translateY(-50%);\n}\n\n:host(:not([disabled], :first-child))::before {\n border-bottom: var(--border-size-large) solid var(--color-primary01);\n}\n\n.stepper-item {\n display: grid;\n width: var(--stepper-item-size);\n align-items: center;\n padding: 0;\n border: 0;\n appearance: none;\n background: transparent;\n gap: 10px;\n grid-template-columns: var(--stepper-item-size);\n grid-template-rows: var(--stepper-item-size) auto;\n justify-items: center;\n outline: 0;\n text-decoration: none;\n}\n\n.indicator {\n position: relative;\n z-index: 2;\n display: flex;\n width: var(--indicator-size);\n min-width: 0;\n height: var(--indicator-size);\n min-height: 0;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: var(--border-size-medium) solid var(--color-primary01);\n background: var(--color-surface01);\n border-radius: 50%;\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}\n\n.stepper-item span {\n min-width: 50px;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n line-height: 1.4;\n text-align: center;\n}\n\n:host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 4);\n}\n\n:host([pressed]) .stepper-item {\n gap: 8px;\n}\n\n:host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n}\n\n:host([pressed]) .stepper-item span {\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host([href]:not([disabled])) .stepper-item {\n cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n pointer-events: none;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n border-color: var(--color-hover-primary);\n background: var(--color-hover-primary);\n color: var(--color-text-inverse);\n}\n\n:host([href]:not([disabled]):focus-within) .indicator {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n border-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n border-color: var(--color-form-disabled01-icon);\n color: var(--color-form-disabled01-icon);\n}\n\n:host([checked]:not([disabled])) .indicator {\n border-color: var(--color-primary01);\n background-color: var(--color-primary01);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n fill: var(--color-white);\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n :host {\n --z-icon-width: 24px;\n --z-icon-height: 24px;\n --indicator-size: calc(var(--space-unit) 4.5);\n --stepper-item-size: calc(var(--space-unit) * 4.5);\n }\n\n .stepper-item {\n gap: 12px;\n }\n\n .stepper-item .indicator,\n .stepper-item span {\n font-size: var(--font-size-3);\n line-height: 1.5;\n }\n\n :host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 5);\n }\n\n :host([pressed]) .stepper-item {\n gap: 10px;\n }\n\n :host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-6);\n }\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-stepper-item\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepperItem implements ComponentInterface {\n /*\n The number of the step item.\n /\n @Prop({reflect: true})\n index: number;\n\n /\n The href to navigate on click.\n /\n @Prop({reflect: true})\n href: string;\n\n /\n The pressed state of the item.\n /\n @Prop({reflect: true})\n pressed: boolean;\n\n /\n The checked state of the item.\n /\n @Prop({reflect: true})\n checked: boolean;\n\n /\n The disabled state of the item.\n /\n @Prop({reflect: true})\n disabled: boolean;\n\n /\n Aria label of the item.\n */\n @Prop()\n htmlAriaLabel: string;\n\n private getAttributes(): Record<string, unknown> {\n const href = this.href && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n const role = href ? {role: \"link\"} : undefined;\n const current = this.pressed && !this.disabled ? {\"aria-current\": \"step\"} : undefined;\n const tabindex = this.href === \"\" ? {tabIndex: -1} : undefined;\n const ariaPressed = !role && this.pressed !== undefined ? {\"aria-pressed\": String(this.pressed)} : undefined;\n const ariaDisabled = this.disabled !== undefined ? {\"aria-disabled\": String(this.disabled)} : undefined;\n\n return {\n ...href,\n ...role,\n ...current,\n ...tabindex,\n ...ariaPressed,\n ...ariaDisabled,\n };\n }\n\n render(): HTMLAnchorElement \| HTMLButtonElement {\n return (\n <Host role=\"listitem\">\n <button\n class=\"stepper-item\"\n disabled={this.disabled}\n {...this.getAttributes()}\n aria-label={this.htmlAriaLabel}\n >\n <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n <span>\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"uJAAA,MAAMA,EAAY,IAAM,~~6rG~~,MCOXC,EAAYC,EAAA,MAAAD,UAAAE,E,iFAqCf,aAAAC,GACN,MAAMC,EAAOC,KAAKD,OAASC,KAAKC,SAAW,CAACC,QAAS,IAAOC,SAASJ,KAAOC,KAAKD,MAASK,UAC1F,MAAMC,EAAON,EAAO,CAACM,KAAM,QAAUD,UACrC,MAAME,EAAUN,KAAKO,UAAYP,KAAKC,SAAW,CAAC,eAAgB,QAAUG,UAC5E,MAAMI,EAAWR,KAAKD,OAAS,GAAK,CAACU,UAAU,GAAML,UACrD,MAAMM,GAAeL,GAAQL,KAAKO,UAAYH,UAAY,CAAC,eAAgBO,OAAOX,KAAKO,UAAYH,UACnG,MAAMQ,EAAeZ,KAAKC,WAAaG,UAAY,CAAC,gBAAiBO,OAAOX,KAAKC,WAAaG,UAE9F,OAAAS,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACKf,GACAM,GACAC,GACAE,GACAE,GACAE,E,CAIP,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACb,KAAK,YACTW,EAAA,SAAAH,OAAAC,OAAA,CAAAI,IAAA,2CACEC,MAAM,eACNlB,SAAUD,KAAKC,UACXD,KAAKF,gBAAe,cACZE,KAAKoB,gBAEjBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,~~aAAanB~~,KAAKqB,QAAUL,EAAA,UAAQM,KAAK,~~cAAiBtB~~,KAAKuB,~~OAC1EP~~,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","ZStepperItem","__stencil_proxyCustomElement","HTMLElement","getAttributes","href","this","disabled","onClick","location","undefined","role","current","pressed","tabindex","tabIndex","ariaPressed","String","ariaDisabled","Object","assign","render","h","Host","key","class","htmlAriaLabel","checked","name","index"],"sources":["src/components/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n --indicator-size: calc(var(--space-unit) * 3.5);\n --stepper-item-size: calc(var(--space-unit) * 3.5);\n --indicator-overflow: calc((var(--indicator-size) - var(--stepper-item-size)) / 2);\n --connector-top: calc(var(--stepper-item-size) / 2);\n}\n\n:host(:not(:first-child)) {\n flex: 1;\n justify-content: flex-end;\n}\n\n:host(:not(:first-child))::before {\n position: absolute;\n z-index: 1;\n top: var(--connector-top);\n right: calc(var(--stepper-item-size) + var(--indicator-overflow));\n left: 0;\n display: block;\n width: auto;\n border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n content: \"\";\n transform: translateY(-50%);\n}\n\n:host(:not([disabled], :first-child))::before {\n border-bottom: var(--border-size-large) solid var(--color-primary01);\n}\n\n.stepper-item {\n display: grid;\n width: var(--stepper-item-size);\n align-items: center;\n padding: 0;\n border: 0;\n appearance: none;\n background: transparent;\n gap: 10px;\n grid-template-columns: var(--stepper-item-size);\n grid-template-rows: var(--stepper-item-size) auto;\n justify-items: center;\n outline: 0;\n text-decoration: none;\n}\n\n.indicator {\n position: relative;\n z-index: 2;\n display: flex;\n width: var(--indicator-size);\n min-width: 0;\n height: var(--indicator-size);\n min-height: 0;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: var(--border-size-medium) solid var(--color-primary01);\n background: var(--color-surface01);\n border-radius: 50%;\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n}\n\n.indicator-number {\n display: block;\n transform: translateY(0.04em);\n}\n\n.stepper-item span:not(.indicator-number) {\n min-width: 50px;\n align-self: start;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n line-height: 1.4;\n text-align: center;\n}\n\n:host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 4);\n}\n\n:host([pressed]) .stepper-item {\n gap: 8px;\n}\n\n:host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n}\n\n:host([pressed]) .stepper-item span:not(.indicator-number) {\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host([href]:not([disabled])) .stepper-item {\n cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n pointer-events: none;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n border-color: var(--color-hover-primary);\n background: var(--color-hover-primary);\n color: var(--color-text-inverse);\n}\n\n:host([href]:not([disabled]):focus-within) .indicator {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n border-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n border-color: var(--color-form-disabled01-icon);\n color: var(--color-form-disabled01-icon);\n}\n\n:host([checked]:not([disabled])) .indicator {\n border-color: var(--color-primary01);\n background-color: var(--color-primary01);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n fill: var(--color-white);\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n :host {\n --z-icon-width: 24px;\n --z-icon-height: 24px;\n --indicator-size: calc(var(--space-unit) 4.5);\n --stepper-item-size: calc(var(--space-unit) * 4.5);\n }\n\n .stepper-item {\n gap: 12px;\n }\n\n .stepper-item .indicator,\n .stepper-item span:not(.indicator-number) {\n font-size: var(--font-size-3);\n line-height: 1.5;\n }\n\n :host([pressed]) {\n --indicator-size: calc(var(--space-unit) * 5);\n }\n\n :host([pressed]) .stepper-item {\n gap: 10px;\n }\n\n :host([pressed]) .stepper-item .indicator {\n font-size: var(--font-size-6);\n }\n}\n\n/* stylelint-disable property-no-unknown /\n@supports (text-box-trim: trim-both) {\n .indicator-number {\n text-box-edge: cap alphabetic;\n text-box-trim: trim-both;\n transform: none;\n }\n}\n/ stylelint-enable property-no-unknown /\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-stepper-item\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepperItem implements ComponentInterface {\n /\n The number of the step item.\n /\n @Prop({reflect: true})\n index: number;\n\n /\n The href to navigate on click.\n /\n @Prop({reflect: true})\n href: string;\n\n /\n The pressed state of the item.\n /\n @Prop({reflect: true})\n pressed: boolean;\n\n /\n The checked state of the item.\n /\n @Prop({reflect: true})\n checked: boolean;\n\n /\n The disabled state of the item.\n /\n @Prop({reflect: true})\n disabled: boolean;\n\n /\n Aria label of the item.\n */\n @Prop()\n htmlAriaLabel: string;\n\n private getAttributes(): Record<string, unknown> {\n const href = this.href && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n const role = href ? {role: \"link\"} : undefined;\n const current = this.pressed && !this.disabled ? {\"aria-current\": \"step\"} : undefined;\n const tabindex = this.href === \"\" ? {tabIndex: -1} : undefined;\n const ariaPressed = !role && this.pressed !== undefined ? {\"aria-pressed\": String(this.pressed)} : undefined;\n const ariaDisabled = this.disabled !== undefined ? {\"aria-disabled\": String(this.disabled)} : undefined;\n\n return {\n ...href,\n ...role,\n ...current,\n ...tabindex,\n ...ariaPressed,\n ...ariaDisabled,\n };\n }\n\n render(): HTMLAnchorElement \| HTMLButtonElement {\n return (\n <Host role=\"listitem\">\n <button\n class=\"stepper-item\"\n disabled={this.disabled}\n {...this.getAttributes()}\n aria-label={this.htmlAriaLabel}\n >\n <div class=\"indicator\">\n {this.checked ? <z-icon name=\"checkmark\" /> : <span class=\"indicator-number\">{this.index}</span>}\n </div>\n <span>\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"uJAAA,MAAMA,EAAY,IAAM,07G,MCOXC,EAAYC,EAAA,MAAAD,UAAAE,E,iFAqCf,aAAAC,GACN,MAAMC,EAAOC,KAAKD,OAASC,KAAKC,SAAW,CAACC,QAAS,IAAOC,SAASJ,KAAOC,KAAKD,MAASK,UAC1F,MAAMC,EAAON,EAAO,CAACM,KAAM,QAAUD,UACrC,MAAME,EAAUN,KAAKO,UAAYP,KAAKC,SAAW,CAAC,eAAgB,QAAUG,UAC5E,MAAMI,EAAWR,KAAKD,OAAS,GAAK,CAACU,UAAU,GAAML,UACrD,MAAMM,GAAeL,GAAQL,KAAKO,UAAYH,UAAY,CAAC,eAAgBO,OAAOX,KAAKO,UAAYH,UACnG,MAAMQ,EAAeZ,KAAKC,WAAaG,UAAY,CAAC,gBAAiBO,OAAOX,KAAKC,WAAaG,UAE9F,OAAAS,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACKf,GACAM,GACAC,GACAE,GACAE,GACAE,E,CAIP,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACb,KAAK,YACTW,EAAA,SAAAH,OAAAC,OAAA,CAAAI,IAAA,2CACEC,MAAM,eACNlB,SAAUD,KAAKC,UACXD,KAAKF,gBAAe,cACZE,KAAKoB,gBAEjBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACRnB,KAAKqB,QAAUL,EAAA,UAAQM,KAAK,cAAiBN,EAAA,QAAMG,MAAM,oBAAoBnB,KAAKuB,QAErFP,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

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

@@ -5,7 +5,7 @@ import { a as containsElement, r as randomId, d as boolean, q as getTabbableElem
 import { C as COLOR_INDICATOR_ICONS, I as ICONS } from './iconset-D1c5gR45.js';
 import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller-CHemhYDp.js';
-const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--space-unit) var(--grid-margin);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-end}.heading-container>.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;align-self:self-end;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.search-slot{margin-left:auto}.search-slot .z-label{padding-bottom:0;margin-bottom:-3px;font-size:10px;line-height:10px}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.heading-block{display:flex;width:100%;flex-direction:column}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}.heading-block>.top-subtitle{margin-top:calc(var(--space-unit) * 0.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}z-searchbar{height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}::slotted([slot="top-subtitle"]){margin-top:calc(var(--space-unit) * 0.5);margin-bottom:calc(var(--space-unit) * -0.5)}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
+const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--space-unit) var(--grid-margin);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-end}.heading-container>.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;align-self:self-end;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.search-slot{margin-left:auto}.search-slot .z-label{height:10px;padding-bottom:0;margin-bottom:-3px;font-size:10px;line-height:10px}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.heading-block{display:flex;width:100%;flex-direction:column}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}.heading-block>.top-subtitle{margin-top:calc(var(--space-unit) * 0.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}z-searchbar{height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}::slotted([slot="top-subtitle"]){margin-top:calc(var(--space-unit) * 0.5);margin-bottom:calc(var(--space-unit) * -0.5)}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){.search-slot{height:53px}z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 const ZAppHeader = class {
@@ -190,11 +190,11 @@ const ZAppHeader = class {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, htmlAriaLabel: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (h("z-searchbar", { htmlid: "app-header-searchbar", value: this.searchString, placeholder: this.searchPlaceholder, htmlAriaLabel: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderSearchLabel() {
-        if (this.searchLabel && !this.isMobile && !this.isTablet && !this.enableOffcanvas) {
-            return h("label", { class: "z-label" }, this.searchLabel);
+        if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {
+            return (h("label", { class: "z-label", htmlFor: "input-app-header-searchbar", "aria-hidden": this.searchLabel ? "false" : "true" }, this.searchLabel));
         }
     }
     renderProductLogos() {
@@ -285,7 +285,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'b2b9e7ca77504392b37f3d77b1266df7818cb0cf', "menu-length": this.menuLength }, h("div", { key: '9e6b112e27f30445a34f1adbe4287ab226421de0', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '44c38afdf95c506ba2d1241b88f86fe9ed2113b7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, h("div", { key: 'c061f870b799b52b089be972709793ab471a3d98', class: "heading-block" }, h("div", { key: '77b4f385458a41751e6d2363d9c07aa19e3888fc', class: "heading-title" }, h("slot", { key: 'eff35b8f35ee97e91dbcc24acc87a28f0b3268d9', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("div", { key: '9db36b58de99fe7e08d50e81c6483705108f2975', class: "title-container" }, !this.isMobile && this.renderTopSubtitle(), h("slot", { key: 'c6b537b48e4486a1ddc5f5dae27639f91d71ac0b', name: "title" })), h("div", { key: '416324b5ea6f9a6a3f27212d02710a70953ff0d7', class: "search-slot" }, this.renderSearchLabel(), this.enableSearch && !this.isMobile && this.renderSeachbar())), this.isMobile && this.renderTopSubtitle()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'c7019897ca741018b24fa29bb9bd2e01c20f3de5', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '77c54b43e038bc4f79d213934303801be87ff0ff', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'bde1fc4c59b536c7cee2acd2177c8f8f3615ffe0', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'c15911d36102dbd84ef16cc2155d7f3d07197a86', "menu-length": this.menuLength }, h("div", { key: 'd3cc38a154e7185c01c17edc9437078b5fe80ac8', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'ee83f741c6cb12180b8255230664812788f3d7d1', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, h("div", { key: 'f4a164803967f1583a3b66ef20aa552d1974e7ca', class: "heading-block" }, h("div", { key: '088943806c86d488e62d3bf487e2d1f121d79a04', class: "heading-title" }, h("slot", { key: 'f869ce8f66551f99e0ed66381f16a9d56c66bb8e', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("div", { key: '5ca595378175860aa1aa986086144b75ee62e770', class: "title-container" }, !this.isMobile && this.renderTopSubtitle(), h("slot", { key: '69ccb983a555f459aa9376e9d44303cb846869ee', name: "title" })), h("div", { key: '1d9538bddc38f730a88568e0fb61cbcd07ef4b2c', class: "search-slot" }, this.enableSearch && this.renderSearchLabel(), this.enableSearch && !this.isMobile && this.renderSeachbar())), this.isMobile && this.renderTopSubtitle()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'f7eac2208962da7cc9aeb02db9705820e37fc6dc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '5ff91209b3672beabe855ca7e906c40d857b55b2', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '72a3f48cbcd6b363540a210acf36ea8baae39015', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -1348,17 +1348,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, h("z-input", { key: 'a4101a49facd4e1407d9f8e25098096426ab547c', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (h(Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, h("z-input", { key: 'a87a56c3b654ee2a6d51abbcbd0b00b4f113db29', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
-            }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
+            }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, htmlAriaLabel: this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: '1822c6ffbce819bfad2a6c88cc476191afbc8c93', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (h("div", { key: 'b0ec36671df7c21f50dc39b4806d5fcd510dfdf3', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '61c56c0c72d1d972a7272e90b1f34003aae79a32', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '168b680221822a07a73cdbf8917f4fadb9063a98', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {