@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-search/stzh-search.css

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -169,9 +172,7 @@ stzh-search {
   /* default outline value, which will be applied to all elements receiving focus
   the .has-focus class is used by the focus target */
   --filter-background-color: var(--stzh-search-filter-background-color, var(--stzh-color-grey10));
-  --grid-template-areas:
-  "filters-main filters-main filters-main filters-main"
-  "results results results results";
+  --grid-template-areas: "filters-main filters-main filters-main filters-main" "results results results results";
 }
 stzh-search[hidden] {
   display: none;
@@ -205,44 +206,30 @@ stzh-search .stzh-fylingfocus-focused::-moz-focus-inner {
 }
 @media screen and (min-width: 900px) {
   stzh-search {
-    --grid-template-areas:
-      "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"
-      "results results results results results results results results";
+    --grid-template-areas: "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results";
   }
 }
 @media screen and (min-width: 1260px) {
   stzh-search {
-    --grid-template-areas:
-      "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"
-      ". . results results results results results results results results . .";
+    --grid-template-areas: "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" ". . results results results results results results results results . .";
   }
 }
 stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))) {
-  --grid-template-areas:
-  "filters-main filters-main filters-main filters-main"
-  "filters-aside filters-aside filters-aside filters-aside"
-  "results results results results";
+  --grid-template-areas: "filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside" "results results results results";
 }
 @media screen and (min-width: 900px) {
   stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))) {
-    --grid-template-areas:
-      "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"
-      "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside"
-      "results results results results results results results results";
+    --grid-template-areas: "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside" "results results results results results results results results";
   }
 }
 @media screen and (min-width: 1260px) {
   stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))) {
-    --grid-template-areas:
-      "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"
-      "filters-aside filters-aside filters-aside filters-aside results results results results results results results results";
+    --grid-template-areas: "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside results results results results results results results results";
   }
 }
 @media screen and (min-width: 1260px) {
   stzh-search:where([variant="teaser"]) {
-    --grid-template-areas:
-      "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"
-      "results results results results results results results results results results results results";
+    --grid-template-areas: "filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results results results results results";
   }
 }
 
@@ -257,6 +244,7 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
   /* Has main and aside filters */
   /* Has hidden main/aside filters */
   /* Is loading */
+  /* Is overlay */
 }
 @media screen and (min-width: 600px) {
   .stzh-search {
@@ -475,6 +463,19 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
+.stzh-search__filters-main-chips {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 900px) {
+  .stzh-search__filters-main-chips {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search__filters-main-chips {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
 .stzh-search--teaser .stzh-search__actions-wrapper {
   justify-content: flex-start;
 }
@@ -583,4 +584,117 @@ stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-f
 }
 .stzh-search--is-loading .stzh-search__results-heading, .stzh-search--is-loading .stzh-search__results-empty, .stzh-search--is-loading .stzh-search__results, .stzh-search--is-loading .stzh-search__action-more {
   opacity: 0.5;
+}
+.stzh-search--is-breakout {
+  --filter-background-color: var(--stzh-color-cobaltblue20);
+  background-color: var(--stzh-color-white);
+}
+.stzh-search--is-breakout .stzh-search {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+@media screen and (min-width: 600px) {
+  .stzh-search--is-breakout .stzh-search {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search--is-breakout .stzh-search {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search--is-breakout .stzh-search {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-search--is-breakout .stzh-search {
+    padding-left: calc((100vw - 84.25rem) / 2);
+    padding-right: calc((100vw - 84.25rem) / 2);
+  }
+}
+.stzh-search--is-breakout .stzh-search__header-wrapper {
+  background-color: var(--stzh-color-cobaltblue20);
+}
+.stzh-search--is-breakout .stzh-search__filters-main {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);
+  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);
+  width: calc(100vw - var(--stzh-scrollbar-width));
+  max-width: calc(100vw - var(--stzh-scrollbar-width));
+}
+@media screen and (min-width: 600px) {
+  .stzh-search--is-breakout .stzh-search__filters-main {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search--is-breakout .stzh-search__filters-main {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search--is-breakout .stzh-search__filters-main {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-search--is-breakout .stzh-search__filters-main {
+    padding-left: calc((100vw - 84.25rem) / 2);
+    padding-right: calc((100vw - 84.25rem) / 2);
+  }
+}
+.stzh-search--is-breakout .stzh-search__header {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+  padding-top: var(--stzh-space-xlarge);
+  background-color: var(--stzh-color-cobaltblue20);
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (min-width: 600px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 84.25rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-search--is-breakout .stzh-search__header {
+    padding-top: var(--stzh-space-xxxlarge);
+  }
 }

package/dist/collection/components/stzh-search/stzh-search.js

@@ -1,7 +1,7 @@
-import { Host, h, Fragment } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 import axios from "axios";
 import { hasSlot, raf } from "../../utils/utils";
-import { media, addMediaChangeListener, removeMediaChangeListener } from "../../utils/media-utils";
+import { addMediaChangeListener, media, removeMediaChangeListener } from "../../utils/media-utils";
 import debounce from "lodash/debounce";
 function defaultTemplateResult(search, item) {
   return `
@@ -12,6 +12,8 @@ function defaultTemplateResult(search, item) {
       topic="{topic}"
       service="{service}"
       event-location="{eventLocation}"
+      ${item.eventDateStart && 'event-date-start="{eventDateStart}"'}
+      ${item.eventDateEnd && 'event-date-end="{eventDateEnd}"'}
       download-heading="{downloadHeading}"
       meta='{meta}'
       breadcrumb-items='{breadcrumbItems}'
@@ -20,27 +22,23 @@ function defaultTemplateResult(search, item) {
       ${item.imagePosition && 'image-position="{imagePosition}"'}
       ${item.download && 'download="{download}"'}
       style="
-        ${item.serviceBackgroundColor ? '--service-background-color: {serviceBackgroundColor};' : ''}
-        ${item.serviceColor ? '--service-color: {serviceColor};' : ''}
+        ${item.serviceBackgroundColor ? "--service-background-color: {serviceBackgroundColor};" : ""}
+        ${item.serviceColor ? "--service-color: {serviceColor};" : ""}
       "
     >
       <div slot="heading">{heading}</div>
       <div slot="description">{description}</div>
       ${item.image
-    ?
-      (item.imagePosition === "right"
-        ?
-          `<img src="${item.image}" slot="image" />`
-        :
-          `<stzh-ratio ${search.variant === "teaser" ? 'ratio="2:1"' : 'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${item.image}" /></stzh-ratio>`)
-    :
-      ''}
+    ? item.imagePosition === "right"
+      ? `<img src="${item.image}" slot="image" />`
+      : `<stzh-ratio ${search.variant === "teaser" ? 'ratio="2:1"' : 'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${item.image}" /></stzh-ratio>`
+    : ""}
     </stzh-card-${search.variant === "teaser" ? "superteaser" : "searchresult"}>
   `;
 }
 function defaultResultWrapperProps(search) {
   return {
-    layout: search.variant === "teaser" ? "teasers" : "searchresults"
+    layout: search.variant === "teaser" ? "teasers" : "searchresults",
   };
 }
 /**
@@ -51,7 +49,7 @@ export class StzhSearch {
   constructor() {
     this._showMoreLink = false;
     this.fetch = async (append = false, initial = false) => {
-      var _a;
+      var _a, _b;
       if (this.currentController) {
         this.currentController.abort();
       }
@@ -63,7 +61,7 @@ export class StzhSearch {
       this.error = "";
       let apiUrl = this.api.replace(/\{lang\}/gi, this.localization.$locale);
       let limit = this.limit.toString();
-      this.params.set('offset', append ? this.results.length.toString() : '0');
+      this.params.set("offset", append ? this.results.length.toString() : "0");
       if (initial) {
         const search = new URLSearchParams(location.search).get("search");
         if (search) {
@@ -73,14 +71,14 @@ export class StzhSearch {
           }
         }
       }
-      this.params.set('limit', limit);
+      this.params.set("limit", limit);
       this.currentController = new AbortController();
       let data = {};
       try {
         // load data from API
         const response = await axios(apiUrl, {
           params: this.params,
-          signal: this.currentController.signal
+          signal: this.currentController.signal,
         });
         data = response.data;
       }
@@ -92,12 +90,23 @@ export class StzhSearch {
       if (data.error) {
         this.error = data.message || this.localization.error;
       }
+      if (data.chipResults && data.chipResults.length) {
+        this.chipResultsHeading = (_b = data.chipResultsHeading) !== null && _b !== void 0 ? _b : "";
+        this.chipResults = data.chipResults;
+      }
+      else {
+        this.chipResultsHeading = "";
+        this.chipResults = [];
+      }
       if (data.results) {
         if (append) {
-          this.results = [...this.results, ...data.results.map(item => {
+          this.results = [
+            ...this.results,
+            ...data.results.map(item => {
               var _a;
               return (Object.assign(Object.assign({}, item), { html: this.renderResultTemplate(item.html || ((_a = data.templates) === null || _a === void 0 ? void 0 : _a.result), item) }));
-            })];
+            }),
+          ];
         }
         else {
           this.results = data.results.map(item => {
@@ -157,8 +166,15 @@ export class StzhSearch {
         });
       });
     };
+    this.handleOverlayCloseClick = (event) => {
+      this.stzhOverlayCloseClick.emit({
+        component: "stzh-search",
+        originalEvent: event,
+      });
+    };
     this.localization = undefined;
     this.variant = "default";
+    this.breakout = false;
     this.autofetchMainFilters = false;
     this.autofetchAsideFilters = false;
     this.hideMainFilters = false;
@@ -170,17 +186,20 @@ export class StzhSearch {
     this.preventUpdateUrl = false;
     this.templateResult = defaultTemplateResult;
     this.templateResultWrapperElement = function () {
-      return 'stzh-cardlist';
+      return "stzh-cardlist";
     };
     this.templateResultWrapperProps = defaultResultWrapperProps;
     this.resultHeadingLevel = "3";
     this.emptyText = undefined;
+    this.heading = undefined;
     this.emptyLinkHref = undefined;
     this.emptyLinkLabel = undefined;
     this.totalCount = 0;
     this.loading = false;
     this.error = "";
     this.results = [];
+    this.chipResultsHeading = undefined;
+    this.chipResults = [];
     this.resultsHeading = undefined;
     this.hasRequiredParams = false;
     this.firstFetched = false;
@@ -194,10 +213,8 @@ export class StzhSearch {
     this.updateParams();
   }
   renderResultTemplate(html, item) {
-    let template = html
-      || (typeof this.templateResult === "function"
-        ? this.templateResult(this.element, item)
-        : this.templateResult);
+    let template = html ||
+      (typeof this.templateResult === "function" ? this.templateResult(this.element, item) : this.templateResult);
     [
       "href",
       "heading",
@@ -213,11 +230,13 @@ export class StzhSearch {
       "meta",
       "breadcrumbItems",
       "eventLocation",
+      "eventDateStart",
+      "eventDateEnd",
       "download",
       "downloadHeading",
       "downloadMeta",
       "datalistItems",
-    ].forEach((property) => {
+    ].forEach(property => {
       const regex = new RegExp(`\{${property}\}`, "gi");
       let value = item[property] || "";
       if (["meta", "breadcrumbItems", "downloadMeta", "datalistItems"].includes(property) && value) {
@@ -232,7 +251,7 @@ export class StzhSearch {
       const formData = new FormData(this.formElement);
       // @ts-ignore
       this.params = new URLSearchParams(formData);
-      this.params.set('variant', this.variant);
+      this.params.set("variant", this.variant);
     };
     if (initial) {
       const initialParams = new URLSearchParams(location.search);
@@ -240,7 +259,7 @@ export class StzhSearch {
       if (search) {
         this.initialFetch = true;
         const currentSearchParams = new URLSearchParams(search);
-        [...new Set(currentSearchParams.keys())].forEach((key) => {
+        [...new Set(currentSearchParams.keys())].forEach(key => {
           const values = currentSearchParams.getAll(key);
           // value as string/number: input, ... / pagination
           const valueInputs = Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${key}"]`));
@@ -279,9 +298,9 @@ export class StzhSearch {
       }
     });
     requiredInputFields.forEach((field) => {
-      const invalid = field.value === ""
-        || (field.minlength && field.minlength > field.value.length)
-        || (field.maxlength && field.maxlength < field.value.length);
+      const invalid = field.value === "" ||
+        (field.minlength && field.minlength > field.value.length) ||
+        (field.maxlength && field.maxlength < field.value.length);
       if (!initial) {
         field.invalid = invalid;
       }
@@ -344,8 +363,19 @@ export class StzhSearch {
     removeMediaChangeListener(this.handleMediaChange);
   }
   render() {
-    const filtersMainUsed = hasSlot(this.element, 'filters-main');
-    const filtersAsideUsed = hasSlot(this.element, 'filters-aside');
+    const filtersMainUsed = hasSlot(this.element, "filters-main");
+    const filtersAsideUsed = hasSlot(this.element, "filters-aside");
+    let chipsProvided = true;
+    if (filtersMainUsed) {
+      const providedChipselect = this.element.querySelector("[slot='filters-main'] stzh-chipselect");
+      const providedChipgroup = this.element.querySelector("[slot='filters-main'] stzh-chipgroup");
+      if (!providedChipselect && !providedChipgroup) {
+        chipsProvided = false;
+      }
+    }
+    else {
+      chipsProvided = false;
+    }
     const resultsShown = (this.hasRequiredParams || this.firstFetched) && this.firstFetched && this.initiallyFetched;
     const classes = {
       "stzh-search": true,
@@ -364,19 +394,13 @@ export class StzhSearch {
     const wrapperProps = typeof this.templateResultWrapperProps === "function"
       ? this.templateResultWrapperProps(this.element)
       : this.templateResultWrapperProps;
-    return (h(Host, { "has-aside-filters": filtersAsideUsed }, h("form", { ref: (el) => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" })), filtersAsideUsed &&
-      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
-      h(Fragment, null, this.results.length === 0
-        ?
-          h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading }), this.emptyText &&
-            h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText }), this.emptyLinkLabel && this.emptyLinkHref &&
-            h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel })))
-        :
-          h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading }), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map((result) => h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" }))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink &&
-            h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, a11yDisabled: this.loading })))), this.error &&
-      h("div", { class: "stzh-search__error" }, h("stzh-message", { type: "error", label: this.error })), this.loading && h("stzh-loader", { class: "stzh-search__loader" })), h("slot", null))));
+    return (h(Host, { "has-aside-filters": filtersAsideUsed, class: this.breakout ? "stzh-search--is-breakout" : "" }, this.breakout && (h("div", { class: "stzh-search__header-wrapper" }, h("div", { class: "stzh-search__header" }, h("stzh-heading", { class: "stzh-search__header-heading", curve: "h2" }, this.heading), h("stzh-button", { class: "stzh-search__overlay-close", icon: "close", iconOnly: true, size: "small", variant: "tertiary", onClick: this.handleOverlayCloseClick })))), h("form", { ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (h("div", { class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (h("stzh-text", { font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (h("stzh-chipgroup", null, this.chipResults.map(chipResult => (h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
+        label: chipResult.label,
+        value: chipResult.value,
+        counter: `${chipResult.amount}`,
+        variant: "filter",
+        size: "small",
+      })) }))))), filtersAsideUsed && (h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" }))))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown && (h(Fragment, null, this.results.length === 0 ? (h(Fragment, null, this.variant !== "teaser" && this.resultsHeading && (h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.emptyText && (h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (h(Fragment, null, this.variant !== "teaser" && this.resultsHeading && (h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map(result => (h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, a11yDisabled: this.loading }))))))), this.error && (h("div", { class: "stzh-search__error" }, h("stzh-message", { type: "error", label: this.error }))), this.loading && h("stzh-loader", { class: "stzh-search__loader" })), h("slot", null))));
   }
   static get is() { return "stzh-search"; }
   static get originalStyleUrls() {
@@ -430,6 +454,24 @@ export class StzhSearch {
         "reflect": false,
         "defaultValue": "\"default\""
       },
+      "breakout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether it should be rendered as overlay or not."
+        },
+        "attribute": "breakout",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "autofetchMainFilters": {
         "type": "boolean",
         "mutable": false,
@@ -641,13 +683,13 @@ export class StzhSearch {
         },
         "attribute": "template-result-wrapper-element",
         "reflect": false,
-        "defaultValue": "function() {\n    return 'stzh-cardlist';\n  }"
+        "defaultValue": "function () {\n    return \"stzh-cardlist\";\n  }"
       },
       "templateResultWrapperProps": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "{ [key: string]: any } | ((search: HTMLStzhSearchElement) => { [key: string]: any })",
+          "original": "| { [key: string]: any }\n    | ((search: HTMLStzhSearchElement) => { [key: string]: any })",
           "resolved": "((search: HTMLStzhSearchElement) => { [key: string]: any; }) | { [key: string]: any; }",
           "references": {
             "HTMLStzhSearchElement": {
@@ -699,6 +741,23 @@ export class StzhSearch {
         "attribute": "empty-text",
         "reflect": false
       },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Empty text"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
       "emptyLinkHref": {
         "type": "string",
         "mutable": false,
@@ -741,6 +800,8 @@ export class StzhSearch {
       "loading": {},
       "error": {},
       "results": {},
+      "chipResultsHeading": {},
+      "chipResults": {},
       "resultsHeading": {},
       "hasRequiredParams": {},
       "firstFetched": {},
@@ -748,6 +809,30 @@ export class StzhSearch {
       "isDetailsOpen": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhOverlayCloseClick",
+        "name": "stzhOverlayCloseClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Search overlay close click event"
+        },
+        "complexType": {
+          "original": "StzhSearchOverlayCloseClickEvent",
+          "resolved": "{ component: \"stzh-search\"; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhSearchOverlayCloseClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhSearchOverlayCloseClickEvent"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{