@zanichelli/albe-web-components 20.0.4 → 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.
- package/CHANGELOG.md +10 -0
- package/dist/cjs/z-app-header_12.cjs.entry.js +9 -9
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-stepper-item.cjs.entry.js +2 -2
- package/dist/cjs/z-stepper-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-app-header/index.js +4 -4
- package/dist/collection/components/z-app-header/index.js.map +1 -1
- package/dist/collection/components/z-app-header/styles.css +5 -0
- package/dist/collection/components/z-searchbar/index.js +4 -4
- package/dist/collection/components/z-searchbar/index.js.map +1 -1
- package/dist/collection/components/z-stepper-item/index.js +1 -1
- package/dist/collection/components/z-stepper-item/index.js.map +1 -1
- package/dist/collection/components/z-stepper-item/styles.css +19 -4
- package/dist/components/index12.js +1 -1
- package/dist/components/index12.js.map +1 -1
- package/dist/components/z-app-header.js +1 -1
- package/dist/components/z-app-header.js.map +1 -1
- package/dist/components/z-stepper-item.js +1 -1
- package/dist/components/z-stepper-item.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +9 -9
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-stepper-item.entry.js +2 -2
- package/dist/esm/z-stepper-item.entry.js.map +1 -1
- package/dist/web-components-library/p-50d68051.entry.js +2 -0
- package/dist/web-components-library/p-50d68051.entry.js.map +1 -0
- package/dist/web-components-library/p-90613329.entry.js +2 -0
- package/dist/web-components-library/p-90613329.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-50d68051.entry.js +2 -0
- package/www/build/p-50d68051.entry.js.map +1 -0
- package/www/build/p-90613329.entry.js +2 -0
- package/www/build/p-90613329.entry.js.map +1 -0
- package/www/build/{p-a5a93813.js → p-b52a669c.js} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-3e78dc0d.entry.js +0 -2
- package/dist/web-components-library/p-3e78dc0d.entry.js.map +0 -1
- package/dist/web-components-library/p-c00b8b6d.entry.js +0 -2
- package/dist/web-components-library/p-c00b8b6d.entry.js.map +0 -1
- package/www/build/p-3e78dc0d.entry.js +0 -2
- package/www/build/p-3e78dc0d.entry.js.map +0 -1
- package/www/build/p-c00b8b6d.entry.js +0 -2
- package/www/build/p-c00b8b6d.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [20.0.5](https://github.com/ZanichelliEditore/design-system/compare/v20.0.4...v20.0.5) (2026-10-01)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* handle different browsers rendering ([b2a6f41](https://github.com/ZanichelliEditore/design-system/commit/b2a6f41626b6a7f54b53bcad666b58028e591596))
|
|
11
|
+
* improve allignment in z-stepper-item ([566856c](https://github.com/ZanichelliEditore/design-system/commit/566856c0f3463344128d6cc8cc5ea95ea0d1d957))
|
|
12
|
+
* z-app-header search height ([855afdd](https://github.com/ZanichelliEditore/design-system/commit/855afdd8d15c9d7d97d965a80c473252c45842c8))
|
|
13
|
+
* z-app-header search input accessibility ([59a1e21](https://github.com/ZanichelliEditore/design-system/commit/59a1e21e5787baf1226d4953260be64265a2dc0b))
|
|
14
|
+
|
|
5
15
|
## [20.0.4](https://github.com/ZanichelliEditore/design-system/compare/v20.0.3...v20.0.4) (2026-09-29)
|
|
6
16
|
|
|
7
17
|
|
|
@@ -7,7 +7,7 @@ var utils = require('./utils-BnCPu0Si.js');
|
|
|
7
7
|
var iconset = require('./iconset-BIdMT0Ke.js');
|
|
8
8
|
var reactiveController = require('./reactive-controller-DJkjAuqS.js');
|
|
9
9
|
|
|
10
|
-
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}}`;
|
|
10
|
+
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}}`;
|
|
11
11
|
|
|
12
12
|
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
13
13
|
const ZAppHeader = class {
|
|
@@ -192,11 +192,11 @@ const ZAppHeader = class {
|
|
|
192
192
|
if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
|
|
193
193
|
return (index$1.h("z-button", { class: "search-page-button", variant: index.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index.ControlSize.X_SMALL }));
|
|
194
194
|
}
|
|
195
|
-
return (index$1.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: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
|
|
195
|
+
return (index$1.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: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
|
|
196
196
|
}
|
|
197
197
|
renderSearchLabel() {
|
|
198
|
-
if (
|
|
199
|
-
return index$1.h("label", { class: "z-label" }, this.searchLabel);
|
|
198
|
+
if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {
|
|
199
|
+
return (index$1.h("label", { class: "z-label", htmlFor: "input-app-header-searchbar", "aria-hidden": this.searchLabel ? "false" : "true" }, this.searchLabel));
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
renderProductLogos() {
|
|
@@ -287,7 +287,7 @@ const ZAppHeader = class {
|
|
|
287
287
|
}
|
|
288
288
|
render() {
|
|
289
289
|
const hasTopSubtitle = this.hasSlot("top-subtitle");
|
|
290
|
-
return (index$1.h(index$1.Host, { key: '
|
|
290
|
+
return (index$1.h(index$1.Host, { key: 'c15911d36102dbd84ef16cc2155d7f3d07197a86', "menu-length": this.menuLength }, index$1.h("div", { key: 'd3cc38a154e7185c01c17edc9437078b5fe80ac8', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: 'ee83f741c6cb12180b8255230664812788f3d7d1', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, index$1.h("div", { key: 'f4a164803967f1583a3b66ef20aa552d1974e7ca', class: "heading-block" }, index$1.h("div", { key: '088943806c86d488e62d3bf487e2d1f121d79a04', class: "heading-title" }, index$1.h("slot", { key: 'f869ce8f66551f99e0ed66381f16a9d56c66bb8e', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("div", { key: '5ca595378175860aa1aa986086144b75ee62e770', class: "title-container" }, !this.isMobile && this.renderTopSubtitle(), index$1.h("slot", { key: '69ccb983a555f459aa9376e9d44303cb846869ee', name: "title" })), index$1.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()), index$1.h("nav", { key: 'f7eac2208962da7cc9aeb02db9705820e37fc6dc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '5ff91209b3672beabe855ca7e906c40d857b55b2', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: '72a3f48cbcd6b363540a210acf36ea8baae39015', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
|
|
291
291
|
}
|
|
292
292
|
get hostElement() { return index$1.getElement(this); }
|
|
293
293
|
static get watchers() { return {
|
|
@@ -1350,17 +1350,17 @@ const ZSearchbar = class {
|
|
|
1350
1350
|
}
|
|
1351
1351
|
render() {
|
|
1352
1352
|
var _a, _b, _c, _d, _e;
|
|
1353
|
-
return (index$1.h(index$1.Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, index$1.h("z-input", { key: '
|
|
1353
|
+
return (index$1.h(index$1.Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, index$1.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) => {
|
|
1354
1354
|
utils.handleEnterKeydSubmit(e, () => this.handleSubmit());
|
|
1355
1355
|
this.handleArrowsNavigation(e);
|
|
1356
|
-
}, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label,
|
|
1356
|
+
}, 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 &&
|
|
1357
1357
|
this.autocomplete &&
|
|
1358
1358
|
this.searchString &&
|
|
1359
1359
|
this.searchString.length >= this.autocompleteMinChars &&
|
|
1360
|
-
this.resultsItemsList) && (index$1.h("div", { key: '
|
|
1360
|
+
this.resultsItemsList) && (index$1.h("div", { key: 'b0ec36671df7c21f50dc39b4806d5fcd510dfdf3', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.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 &&
|
|
1361
1361
|
((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
|
|
1362
1362
|
this.currResultsCount &&
|
|
1363
|
-
this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.h("z-button", { key: '
|
|
1363
|
+
this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.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"))));
|
|
1364
1364
|
}
|
|
1365
1365
|
get host() { return index$1.getElement(this); }
|
|
1366
1366
|
static get watchers() { return {
|