@zanichelli/albe-web-components 6.6.5 → 6.6.7

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 (27) hide show
  1. package/CHANGELOG.md +2200 -0
  2. package/dist/cjs/z-offcanvas.cjs.entry.js +5 -1
  3. package/dist/cjs/z-searchbar.cjs.entry.js +16 -6
  4. package/dist/collection/components/inputs/z-searchbar/index.js +15 -5
  5. package/dist/collection/components/inputs/z-searchbar/styles.css +51 -27
  6. package/dist/collection/components/z-offcanvas/index.js +4 -0
  7. package/dist/collection/components/z-offcanvas/styles.css +5 -0
  8. package/dist/esm/z-offcanvas.entry.js +5 -1
  9. package/dist/esm/z-searchbar.entry.js +16 -6
  10. package/dist/types/components/inputs/z-searchbar/index.d.ts +1 -0
  11. package/dist/web-components-library/p-8b15b30c.entry.js +1 -0
  12. package/dist/web-components-library/p-e21f87a4.entry.js +1 -0
  13. package/dist/web-components-library/web-components-library.css +1 -1
  14. package/dist/web-components-library/web-components-library.esm.js +1 -1
  15. package/package.json +1 -1
  16. package/src-react/index.ts +1 -0
  17. package/www/build/{p-275801c6.css → p-4b159cbd.css} +1 -1
  18. package/www/build/p-8b15b30c.entry.js +1 -0
  19. package/www/build/{p-854614e2.js → p-924dc99b.js} +1 -1
  20. package/www/build/p-e21f87a4.entry.js +1 -0
  21. package/www/build/web-components-library.css +1 -1
  22. package/www/build/web-components-library.esm.js +1 -1
  23. package/www/index.html +1 -1
  24. package/dist/web-components-library/p-47251a0f.entry.js +0 -1
  25. package/dist/web-components-library/p-9a613586.entry.js +0 -1
  26. package/www/build/p-47251a0f.entry.js +0 -1
  27. package/www/build/p-9a613586.entry.js +0 -1
package/dist/cjs/z-offcanvas.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-e3299e0a.js');
6
6
  const index$1 = require('./index-fa110f37.js');
7
7
 
8
- const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
8
+ const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
9
9
 
10
10
  const ZOffcanvas = class {
11
11
  constructor(hostRef) {
@@ -33,6 +33,9 @@ const ZOffcanvas = class {
33
33
  if (this.open) {
34
34
  this.hostElement.style.opacity = "0";
35
35
  this.hostElement.style.display = "flex";
36
+ if (this.variant === index$1.OffCanvasVariant.OVERLAY) {
37
+ document.body.style.overflowY = "hidden";
38
+ }
36
39
  }
37
40
  else if (this.variant === index$1.OffCanvasVariant.PUSHCONTENT) {
38
41
  this.hostElement.style.display = "none";
@@ -46,6 +49,7 @@ const ZOffcanvas = class {
46
49
  else if (this.variant === index$1.OffCanvasVariant.OVERLAY) {
47
50
  this.hostElement.style.display = "none";
48
51
  document.body.style.overflowX = "initial";
52
+ document.body.style.overflowY = "initial";
49
53
  }
50
54
  }
51
55
  handleAnimationStart() {
package/dist/cjs/z-searchbar.cjs.entry.js CHANGED
@@ -7,7 +7,7 @@ const index$1 = require('./index-fa110f37.js');
7
7
  const utils = require('./utils-600bad93.js');
8
8
  require('./breakpoints-88c4fd6c.js');
9
9
 
10
- const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:0;border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2;scrollbar-color:var(--color-primary01) transparent}:host>div>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results .category-heading>*{display:block}:host>div>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results z-list-element{display:block}:host>div>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results .item>span.item-label>mark{background:var(--color-primary03)}:host>div>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results .item-show-all{display:block;text-align:center}@media (min-width: 768px){:host>div>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results .item{cursor:pointer}}";
10
+ const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}";
11
11
 
12
12
  const ZSearchbar = class {
13
13
  constructor(hostRef) {
@@ -152,13 +152,23 @@ const ZSearchbar = class {
152
152
  !this.autocomplete ||
153
153
  !this.searchString ||
154
154
  this.searchString.length < this.autocompleteMinChars ||
155
- !this.resultsItemsList ||
156
- !this.resultsItemsList.length) {
155
+ !this.resultsItemsList) {
157
156
  return null;
158
157
  }
159
- return (index.h("div", { class: "results" }, index.h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(), this.renderItems(), this.renderShowAllResults())));
158
+ return (index.h("div", { class: "results-wrapper" }, index.h("div", { class: "results" }, this.renderResultsList())));
159
+ }
160
+ renderResultsList() {
161
+ var _a, _b;
162
+ if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
163
+ return (index.h("span", { class: "item item-no-results" }, "La tua ricerca ", index.h("b", null, this.searchString), " non ha generato risultati.", index.h("br", null), index.h("br", null), "Alcuni suggerimenti:", index.h("ul", null, index.h("li", null, "Verifica di aver scritto correttamente"), index.h("li", null, "Prova una diversa chiave di ricerca"), index.h("li", null, "Prova una ricerca pi\u00F9 generica"))));
164
+ }
165
+ return (index.h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
160
166
  }
161
167
  renderItems() {
168
+ var _a;
169
+ if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
170
+ return [];
171
+ }
162
172
  const groupedItems = this.getGroupedItems(this.resultsItemsList);
163
173
  const listGroups = [];
164
174
  let counter = 0;
@@ -194,11 +204,11 @@ const ZSearchbar = class {
194
204
  }
195
205
  return (index.h("span", { class: "category-heading", slot: "header-title" }, index.h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && index.h("span", { class: "subcategory" }, groupItem.subcategory)));
196
206
  }
197
- renderSearchHelper() {
207
+ renderSearchHelper(hasDivider = true) {
198
208
  if (!this.autocomplete || this.preventSubmit || !this.searchString) {
199
209
  return null;
200
210
  }
201
- return (index.h("z-list-element", { role: "option", tabindex: 0, dividerType: index$1.ListDividerType.ELEMENT, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, index.h("span", { class: "item item-search" }, index.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index.h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
211
+ return (index.h("z-list-element", { role: "option", tabindex: 0, dividerType: hasDivider ? index$1.ListDividerType.ELEMENT : undefined, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, index.h("span", { class: "item item-search" }, index.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index.h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
202
212
  }
203
213
  renderShowAllResults() {
204
214
  var _a, _b;
package/dist/collection/components/inputs/z-searchbar/index.js CHANGED
@@ -143,13 +143,23 @@ export class ZSearchbar {
143
143
  !this.autocomplete ||
144
144
  !this.searchString ||
145
145
  this.searchString.length < this.autocompleteMinChars ||
146
- !this.resultsItemsList ||
147
- !this.resultsItemsList.length) {
146
+ !this.resultsItemsList) {
148
147
  return null;
149
148
  }
150
- return (h("div", { class: "results" }, h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(), this.renderItems(), this.renderShowAllResults())));
149
+ return (h("div", { class: "results-wrapper" }, h("div", { class: "results" }, this.renderResultsList())));
150
+ }
151
+ renderResultsList() {
152
+ var _a, _b;
153
+ if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
154
+ return (h("span", { class: "item item-no-results" }, "La tua ricerca ", h("b", null, this.searchString), " non ha generato risultati.", h("br", null), h("br", null), "Alcuni suggerimenti:", h("ul", null, h("li", null, "Verifica di aver scritto correttamente"), h("li", null, "Prova una diversa chiave di ricerca"), h("li", null, "Prova una ricerca pi\u00F9 generica"))));
155
+ }
156
+ return (h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
151
157
  }
152
158
  renderItems() {
159
+ var _a;
160
+ if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
161
+ return [];
162
+ }
153
163
  const groupedItems = this.getGroupedItems(this.resultsItemsList);
154
164
  const listGroups = [];
155
165
  let counter = 0;
@@ -185,11 +195,11 @@ export class ZSearchbar {
185
195
  }
186
196
  return (h("span", { class: "category-heading", slot: "header-title" }, h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && h("span", { class: "subcategory" }, groupItem.subcategory)));
187
197
  }
188
- renderSearchHelper() {
198
+ renderSearchHelper(hasDivider = true) {
189
199
  if (!this.autocomplete || this.preventSubmit || !this.searchString) {
190
200
  return null;
191
201
  }
192
- return (h("z-list-element", { role: "option", tabindex: 0, dividerType: ListDividerType.ELEMENT, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
202
+ return (h("z-list-element", { role: "option", tabindex: 0, dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
193
203
  }
194
204
  renderShowAllResults() {
195
205
  var _a, _b;
package/dist/collection/components/inputs/z-searchbar/styles.css CHANGED
@@ -37,67 +37,73 @@
37
37
  grid-row: 1;
38
38
  }
39
39
 
40
- :host > div > div.results {
40
+ :host > div > div.results-wrapper {
41
41
  overflow: auto;
42
- max-height: var(--z-searchbar-results-height, 540px);
43
- padding: var(--space-unit) calc(var(--space-unit) * 1.5);
44
- padding-bottom: 0;
42
+ padding: calc(var(--space-unit) / 4);
43
+ padding-bottom: calc(var(--space-unit) / 4);
45
44
  border: var(--border-size-small) solid var(--color-surface03);
46
45
  border-top: none;
47
46
  margin-top: -1px;
48
47
  background: var(--color-surface01);
49
48
  grid-column: 1;
50
49
  grid-row: 2;
50
+ }
51
+
52
+ :host > div > div.results-wrapper > div.results {
53
+ overflow: auto;
54
+ max-height: var(--z-searchbar-results-height, 540px);
55
+ padding: var(--space-unit) calc(var(--space-unit) * 1.5);
56
+ padding-bottom: calc(var(--space-unit) / 2);
51
57
  scrollbar-color: var(--color-primary01) transparent;
52
58
  }
53
59
 
54
- :host > div > div.results::-webkit-scrollbar {
60
+ :host > div > div.results-wrapper > div.results::-webkit-scrollbar {
55
61
  width: 10px;
56
62
  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
57
63
  border-radius: var(--border-radius);
58
64
  }
59
65
 
60
- :host > div > div.results::-webkit-scrollbar-track {
66
+ :host > div > div.results-wrapper > div.results::-webkit-scrollbar-track {
61
67
  background-color: transparent;
62
68
  }
63
69
 
64
- :host > div > div.results::-webkit-scrollbar-thumb {
70
+ :host > div > div.results-wrapper > div.results::-webkit-scrollbar-thumb {
65
71
  width: 10px;
66
72
  background-color: var(--color-primary01);
67
73
  border-radius: var(--border-radius);
68
74
  }
69
75
 
70
- :host > div > div.results .category-heading {
76
+ :host > div > div.results-wrapper > div.results .category-heading {
71
77
  display: block;
72
78
  font-size: var(--font-size-2);
73
79
  font-weight: var(--font-rg);
74
80
  line-height: var(--font-size-3);
75
81
  }
76
82
 
77
- :host > div > div.results .category-heading > * {
83
+ :host > div > div.results-wrapper > div.results .category-heading > * {
78
84
  display: block;
79
85
  }
80
86
 
81
- :host > div > div.results span.category-heading > span.category {
87
+ :host > div > div.results-wrapper > div.results span.category-heading > span.category {
82
88
  color: var(--color-text05);
83
89
  font-style: italic;
84
90
  }
85
91
 
86
- :host > div > div.results span.category-heading > span.subcategory {
92
+ :host > div > div.results-wrapper > div.results span.category-heading > span.subcategory {
87
93
  margin-top: 8px;
88
94
  color: var(--color-text01);
89
95
  text-transform: uppercase;
90
96
  }
91
97
 
92
- :host > div > div.results z-list-element {
98
+ :host > div > div.results-wrapper > div.results z-list-element {
93
99
  display: block;
94
100
  }
95
101
 
96
- :host > div > div.results z-list-element:focus {
102
+ :host > div > div.results-wrapper > div.results z-list-element:focus {
97
103
  box-shadow: var(--shadow-focus-primary);
98
104
  }
99
105
 
100
- :host > div > div.results .item {
106
+ :host > div > div.results-wrapper > div.results .item {
101
107
  --z-icon-height: 12px;
102
108
  --z-icon-width: 12px;
103
109
 
@@ -112,47 +118,55 @@
112
118
  line-height: var(--font-size-3);
113
119
  }
114
120
 
115
- :host > div > div.results .item.ellipsis > span.item-label {
121
+ :host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
116
122
  overflow: hidden;
117
123
  text-overflow: ellipsis;
118
124
  white-space: nowrap;
119
125
  }
120
126
 
121
- :host > div > div.results .item > span.item-label > mark {
127
+ :host > div > div.results-wrapper > div.results .item > span.item-label > mark,
128
+ :host > div > div.results-wrapper > div.results .item > span.item-label > * > mark {
122
129
  background: var(--color-primary03);
123
130
  }
124
131
 
125
- :host > div > div.results .item.has-category {
132
+ :host > div > div.results-wrapper > div.results .item.has-category {
126
133
  padding-left: calc(var(--space-unit) * 3);
127
134
  }
128
135
 
129
- :host > div > div.results .item > z-icon.item-icon {
136
+ :host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
130
137
  padding: 2px 0;
131
138
  margin-right: calc(var(--space-unit) * 1.5);
132
139
  }
133
140
 
134
- :host > div > div.results .item.item-search {
141
+ :host > div > div.results-wrapper > div.results .item.item-search {
135
142
  --z-icon-height: 16px;
136
143
  --z-icon-width: 16px;
137
144
  }
138
145
 
139
- :host > div > div.results .item.item-search > z-icon {
146
+ :host > div > div.results-wrapper > div.results .item.item-search > z-icon {
140
147
  margin-right: var(--space-unit);
141
148
  }
142
149
 
143
- :host > div > div.results .item-show-all {
150
+ :host > div > div.results-wrapper > div.results .item-show-all {
144
151
  display: block;
145
152
  text-align: center;
146
153
  }
147
154
 
155
+ :host > div > div.results-wrapper > div.results .item-no-results {
156
+ display: block;
157
+ font-size: var(--font-size-2);
158
+ font-style: italic;
159
+ line-height: var(--font-size-5);
160
+ }
161
+
148
162
  /* Tablet breakpoint */
149
163
  @media (min-width: 768px) {
150
- :host > div > div.results .category-heading {
164
+ :host > div > div.results-wrapper > div.results .category-heading {
151
165
  font-size: var(--font-size-3);
152
166
  line-height: var(--font-size-6);
153
167
  }
154
168
 
155
- :host > div > div.results .item {
169
+ :host > div > div.results-wrapper > div.results .item {
156
170
  --z-icon-height: 12px;
157
171
  --z-icon-width: 12px;
158
172
 
@@ -160,23 +174,33 @@
160
174
  line-height: var(--font-size-6);
161
175
  }
162
176
 
163
- :host > div > div.results .item.item-search {
177
+ :host > div > div.results-wrapper > div.results .item.item-search {
164
178
  --z-icon-height: 18px;
165
179
  --z-icon-width: 18px;
166
180
  }
167
181
 
168
- :host > div > div.results .item.ellipsis > span.item-label {
182
+ :host > div > div.results-wrapper > div.results .item.item-search > z-icon {
183
+ margin-top: calc(var(--space-unit) / 4);
184
+ }
185
+
186
+ :host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
169
187
  height: 24px;
170
188
  }
171
189
 
172
- :host > div > div.results .item > z-icon.item-icon {
190
+ :host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
173
191
  padding: 6px 0;
174
192
  }
175
193
  }
176
194
 
177
195
  /* Desktop breakpoint */
178
196
  @media (min-width: 1152px) {
179
- :host > div > div.results .item {
197
+ :host > div > div.results-wrapper > div.results .item {
180
198
  cursor: pointer;
181
199
  }
200
+
201
+ :host > div > div.results-wrapper > div.results .item-no-results {
202
+ cursor: default;
203
+ font-size: var(--font-size-3);
204
+ line-height: var(--font-size-6);
205
+ }
182
206
  }
package/dist/collection/components/z-offcanvas/index.js CHANGED
@@ -27,6 +27,9 @@ export class ZOffcanvas {
27
27
  if (this.open) {
28
28
  this.hostElement.style.opacity = "0";
29
29
  this.hostElement.style.display = "flex";
30
+ if (this.variant === OffCanvasVariant.OVERLAY) {
31
+ document.body.style.overflowY = "hidden";
32
+ }
30
33
  }
31
34
  else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
32
35
  this.hostElement.style.display = "none";
@@ -40,6 +43,7 @@ export class ZOffcanvas {
40
43
  else if (this.variant === OffCanvasVariant.OVERLAY) {
41
44
  this.hostElement.style.display = "none";
42
45
  document.body.style.overflowX = "initial";
46
+ document.body.style.overflowY = "initial";
43
47
  }
44
48
  }
45
49
  handleAnimationStart() {
package/dist/collection/components/z-offcanvas/styles.css CHANGED
@@ -128,6 +128,11 @@
128
128
  overflow-x: hidden;
129
129
  }
130
130
 
131
+ :host([variant="overlay"]) > .canvas-container > .canvas-content {
132
+ padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
133
+ margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
134
+ }
135
+
131
136
  .canvas-container .canvas-content::-webkit-scrollbar {
132
137
  width: 10px;
133
138
  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
package/dist/esm/z-offcanvas.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
2
2
  import { O as OffCanvasVariant, u as TransitionDirection } from './index-968a240f.js';
3
3
 
4
- const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
4
+ const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
5
5
 
6
6
  const ZOffcanvas = class {
7
7
  constructor(hostRef) {
@@ -29,6 +29,9 @@ const ZOffcanvas = class {
29
29
  if (this.open) {
30
30
  this.hostElement.style.opacity = "0";
31
31
  this.hostElement.style.display = "flex";
32
+ if (this.variant === OffCanvasVariant.OVERLAY) {
33
+ document.body.style.overflowY = "hidden";
34
+ }
32
35
  }
33
36
  else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
34
37
  this.hostElement.style.display = "none";
@@ -42,6 +45,7 @@ const ZOffcanvas = class {
42
45
  else if (this.variant === OffCanvasVariant.OVERLAY) {
43
46
  this.hostElement.style.display = "none";
44
47
  document.body.style.overflowX = "initial";
48
+ document.body.style.overflowY = "initial";
45
49
  }
46
50
  }
47
51
  handleAnimationStart() {
package/dist/esm/z-searchbar.entry.js CHANGED
@@ -3,7 +3,7 @@ import { k as ListDividerType, B as ButtonVariant } from './index-968a240f.js';
3
3
  import { r as randomId, h as handleKeyboardSubmit } from './utils-6cf7efe2.js';
4
4
  import './breakpoints-c386984e.js';
5
5
 
6
- const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:0;border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2;scrollbar-color:var(--color-primary01) transparent}:host>div>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results .category-heading>*{display:block}:host>div>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results z-list-element{display:block}:host>div>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results .item>span.item-label>mark{background:var(--color-primary03)}:host>div>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results .item-show-all{display:block;text-align:center}@media (min-width: 768px){:host>div>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results .item{cursor:pointer}}";
6
+ const stylesCss = ":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}";
7
7
 
8
8
  const ZSearchbar = class {
9
9
  constructor(hostRef) {
@@ -148,13 +148,23 @@ const ZSearchbar = class {
148
148
  !this.autocomplete ||
149
149
  !this.searchString ||
150
150
  this.searchString.length < this.autocompleteMinChars ||
151
- !this.resultsItemsList ||
152
- !this.resultsItemsList.length) {
151
+ !this.resultsItemsList) {
153
152
  return null;
154
153
  }
155
- return (h("div", { class: "results" }, h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(), this.renderItems(), this.renderShowAllResults())));
154
+ return (h("div", { class: "results-wrapper" }, h("div", { class: "results" }, this.renderResultsList())));
155
+ }
156
+ renderResultsList() {
157
+ var _a, _b;
158
+ if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
159
+ return (h("span", { class: "item item-no-results" }, "La tua ricerca ", h("b", null, this.searchString), " non ha generato risultati.", h("br", null), h("br", null), "Alcuni suggerimenti:", h("ul", null, h("li", null, "Verifica di aver scritto correttamente"), h("li", null, "Prova una diversa chiave di ricerca"), h("li", null, "Prova una ricerca pi\u00F9 generica"))));
160
+ }
161
+ return (h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
156
162
  }
157
163
  renderItems() {
164
+ var _a;
165
+ if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
166
+ return [];
167
+ }
158
168
  const groupedItems = this.getGroupedItems(this.resultsItemsList);
159
169
  const listGroups = [];
160
170
  let counter = 0;
@@ -190,11 +200,11 @@ const ZSearchbar = class {
190
200
  }
191
201
  return (h("span", { class: "category-heading", slot: "header-title" }, h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && h("span", { class: "subcategory" }, groupItem.subcategory)));
192
202
  }
193
- renderSearchHelper() {
203
+ renderSearchHelper(hasDivider = true) {
194
204
  if (!this.autocomplete || this.preventSubmit || !this.searchString) {
195
205
  return null;
196
206
  }
197
- return (h("z-list-element", { role: "option", tabindex: 0, dividerType: ListDividerType.ELEMENT, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
207
+ return (h("z-list-element", { role: "option", tabindex: 0, dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, clickable: true, id: `list-item-${this.htmlid}-search`, onClickItem: () => this.emitSearchSubmit() }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) }))));
198
208
  }
199
209
  renderShowAllResults() {
200
210
  var _a, _b;
package/dist/types/components/inputs/z-searchbar/index.d.ts CHANGED
@@ -55,6 +55,7 @@ export declare class ZSearchbar {
55
55
  private renderInput;
56
56
  private renderButton;
57
57
  private renderResults;
58
+ private renderResultsList;
58
59
  private renderItems;
59
60
  private renderItem;
60
61
  private renderItemLabel;
package/dist/web-components-library/p-8b15b30c.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as a,c as n,h as t,H as o,g as s}from"./p-d17ebc2f.js";import{O as i,u as c}from"./p-a23e9115.js";const r=class{constructor(t){a(this,t),this.canvasOpenStatusChanged=n(this,"canvasOpenStatusChanged",7),this.variant=i.PUSHCONTENT,this.open=!1,this.transitiondirection=c.LEFT}componentWillLoad(){this.handleOpenStatus()}onOpenChanged(){this.handleOpenStatus(),this.canvasOpenStatusChanged.emit(this.open)}handleOpenStatus(){this.open?(this.hostElement.style.opacity="0",this.hostElement.style.display="flex",this.variant===i.OVERLAY&&(document.body.style.overflowY="hidden")):this.variant===i.PUSHCONTENT&&(this.hostElement.style.display="none",document.body.style.overflowX="hidden")}handleAnimationEnd(){this.hostElement.hasAttribute("open")?this.hostElement.querySelector(".canvas-content").focus():this.variant===i.OVERLAY&&(this.hostElement.style.display="none",document.body.style.overflowX="initial",document.body.style.overflowY="initial")}handleAnimationStart(){this.hostElement.hasAttribute("open")&&(this.hostElement.style.opacity="1")}render(){return t(o,null,t("div",{class:"canvas-container",onAnimationEnd:()=>this.handleAnimationEnd(),onAnimationStart:()=>this.handleAnimationStart()},t("div",{class:"canvas-content"},t("slot",{name:"canvasContent"}))),t("div",{class:"canvas-background","data-action":"canvasBackground",onClick:()=>this.open=!1}))}get hostElement(){return s(this)}static get watchers(){return{open:["onOpenChanged"]}}};r.style='.sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant="overlay"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant="overlay"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection="right"].sc-z-offcanvas-h{justify-content:start}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection="right"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="right"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant="overlay"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}';export{r as z_offcanvas}
package/dist/web-components-library/p-e21f87a4.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as i,h as s,H as e}from"./p-d17ebc2f.js";import{k as r,B as a}from"./p-a23e9115.js";import{r as l,h as o}from"./p-8ebe4adf.js";import"./p-d69e14fb.js";const n=class{constructor(s){t(this,s),this.searchSubmit=i(this,"searchSubmit",7),this.searchTyping=i(this,"searchTyping",7),this.searchItemClick=i(this,"searchItemClick",7),this.htmlid=`searchbar-${l()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.resultsEllipsis=!0,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.searchString="",this.currResultsCount=0,this.showResults=!1,this.resultsItemsList=null}emitSearchSubmit(){this.searchSubmit.emit(this.searchString)}emitSearchTyping(t){this.searchTyping.emit(t)}emitSearchItemClick(t){this.searchItemClick.emit(t)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.handleInput(this.value)}watchSearchString(){this.emitSearchTyping(this.searchString),this.searchString||(this.currResultsCount=this.resultsCount)}clickListener(t){this.handleOutsideClick(t)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.currResultsCount=this.resultsCount,this.handleInput(this.value)}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(t){const i={};return t.forEach((t=>{var s;const e=`${null==t?void 0:t.category}${null==t?void 0:t.subcategory}`;i[e]=null!==(s=i[e])&&void 0!==s?s:{category:null==t?void 0:t.category,subcategory:null==t?void 0:t.subcategory,items:[]},i[e].items.push(t)})),this.sortResultsItems?Object.keys(i).sort().reduce(((t,s)=>(t[s]=Object.assign(Object.assign({},i[s]),{items:i[s].items.sort(((t,i)=>{const s=t.label.toUpperCase(),e=i.label.toUpperCase();return s<e?-1:s>e?1:0}))}),t)),{}):i}checkResultsCount(t){return!this.currResultsCount||t<this.currResultsCount}handleStopTyping(t){t.stopPropagation(),this.handleInput(t.detail.value)}handleInput(t){(null==t?void 0:t.length)>=this.autocompleteMinChars?this.searchString=t:this.searchString&&(this.searchString="")}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){const i=t.composedPath(),s=i.find((t=>"Z-SEARCHBAR"===t.nodeName));this.showResults=!(!s||s.htmlid!==this.htmlid||!i.find((t=>{var i;return"Z-INPUT"===(null==t?void 0:t.nodeName)||(null===(i=null==t?void 0:t.classList)||void 0===i?void 0:i.contains("results"))})))}renderInput(){return s("z-input",{message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>o(t,(()=>this.handleSubmit())),value:this.value})}renderButton(){return this.preventSubmit?null:s("z-button",{variant:a.PRIMARY,onClick:()=>this.handleSubmit()},"CERCA")}renderResults(){return this.showResults&&this.autocomplete&&this.searchString&&!(this.searchString.length<this.autocompleteMinChars)&&this.resultsItemsList?s("div",{class:"results-wrapper"},s("div",{class:"results"},this.renderResultsList())):null}renderResultsList(){var t,i;return this.preventSubmit&&!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)?s("span",{class:"item item-no-results"},"La tua ricerca ",s("b",null,this.searchString)," non ha generato risultati.",s("br",null),s("br",null),"Alcuni suggerimenti:",s("ul",null,s("li",null,"Verifica di aver scritto correttamente"),s("li",null,"Prova una diversa chiave di ricerca"),s("li",null,"Prova una ricerca più generica"))):s("z-list",{role:"listbox",id:`list-${this.htmlid}`},this.renderSearchHelper(!!(null===(i=this.resultsItemsList)||void 0===i?void 0:i.length)),this.renderItems(),this.renderShowAllResults())}renderItems(){var t;if(!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length))return[];const i=this.getGroupedItems(this.resultsItemsList),e=[];let a=0;return Object.values(i).forEach(((t,i,l)=>{if(this.checkResultsCount(a)){const o=[];t.items.forEach(((t,s,e)=>{this.checkResultsCount(a)&&o.push(this.renderItem(t,s,!(i===l.length-1&&s===e.length-1))),a++})),o.length&&e.push(s("z-list-group",{"divider-type":r.ELEMENT},this.renderItemCategory(t),o))}})),e}renderItem(t,i,e){return s("z-list-element",{id:`list-item-${this.htmlid}-${i}`,role:"option",tabindex:0,dividerType:e?r.ELEMENT:void 0,clickable:!0,onClickItem:()=>this.emitSearchItemClick(t)},s("span",{class:{item:!0,ellipsis:this.resultsEllipsis,"has-category":!!t.category}},(null==t?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("span",{class:"item-label",title:t.label,innerHTML:this.renderItemLabel(t.label)})))}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString,"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItemCategory(t){return(null==t?void 0:t.category)?s("span",{class:"category-heading",slot:"header-title"},s("span",{class:"category"},t.category),(null==t?void 0:t.subcategory)&&s("span",{class:"subcategory"},t.subcategory)):null}renderSearchHelper(t=!0){return this.autocomplete&&!this.preventSubmit&&this.searchString?s("z-list-element",{role:"option",tabindex:0,dividerType:t?r.ELEMENT:void 0,clickable:!0,id:`list-item-${this.htmlid}-search`,onClickItem:()=>this.emitSearchSubmit()},s("span",{class:"item item-search"},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("span",{class:"item-label",innerHTML:this.searchHelperLabel.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))):null}renderShowAllResults(){var t,i;return!this.currResultsCount||!this.searchString||!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)||this.currResultsCount>=(null===(i=this.resultsItemsList)||void 0===i?void 0:i.length)?null:s("z-list-element",{role:"option",tabindex:0,clickable:!0,id:`list-item-${this.htmlid}-show-all`,onClickItem:()=>this.currResultsCount=0},s("span",{class:"item-show-all"},s("z-link",null,"Vedi tutti i risultati")))}render(){return s(e,{onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t)},s("div",{class:{"has-submit":!this.preventSubmit,"has-results":this.autocomplete}},this.renderInput(),this.renderResults(),this.renderButton()))}static get watchers(){return{resultsItems:["watchItems"],resultsCount:["watchResultsCount"],value:["watchValue"],searchString:["watchSearchString"]}}};n.style=":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results-wrapper{overflow:auto;padding:calc(var(--space-unit) / 4);padding-bottom:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2}:host>div>div.results-wrapper>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) / 2);scrollbar-color:var(--color-primary01) transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results-wrapper>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results-wrapper>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .category-heading>*{display:block}:host>div>div.results-wrapper>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results-wrapper>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results-wrapper>div.results z-list-element{display:block}:host>div>div.results-wrapper>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results-wrapper>div.results .item>span.item-label>mark,:host>div>div.results-wrapper>div.results .item>span.item-label>*>mark{background:var(--color-primary03)}:host>div>div.results-wrapper>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results-wrapper>div.results .item-show-all{display:block;text-align:center}:host>div>div.results-wrapper>div.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}@media (min-width: 768px){:host>div>div.results-wrapper>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results-wrapper>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results-wrapper>div.results .item.item-search>z-icon{margin-top:calc(var(--space-unit) / 4)}:host>div>div.results-wrapper>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results-wrapper>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results-wrapper>div.results .item{cursor:pointer}:host>div>div.results-wrapper>div.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}";export{n as z_searchbar}