@oiz/stzh-components 3.0.0-beta5 → 3.0.0

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -160,28 +160,161 @@
 }
 
 .stzh-eventinfo {
-  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
-  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
-  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  display: flex;
+}
+.stzh-eventinfo__left {
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
+  flex-shrink: 0;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--stzh-color-black);
+  background-color: var(--stzh-color-secondary30);
+  padding-top: var(--stzh-space-small);
+  width: 4.5rem;
+}
+@media screen and (min-width: 600px) {
+  .stzh-eventinfo__left {
+    width: 5.5rem;
+  }
+}
+.stzh-eventinfo__main-event-day {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  font-size: var(--stzh-font-hecto-font-size);
+  line-height: var(--stzh-font-hecto-text-line-height);
+  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);
+  color: var(--stzh-color-primary70);
+  margin-top: -0.4375rem;
+  margin-bottom: -0.4375rem;
+}
+.stzh-eventinfo__right {
+  font-size: var(--stzh-font-centi-font-size);
+  line-height: var(--stzh-font-centi-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  flex-grow: 1;
   color: var(--stzh-color-grey80);
+  background-color: var(--stzh-color-grey10);
+  padding-top: var(--stzh-space-small);
+  padding-bottom: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-small);
+  padding-right: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-eventinfo__right {
+    padding-left: var(--stzh-space-xlarge);
+    padding-right: var(--stzh-space-xlarge);
+  }
 }
 @media screen and (min-width: 900px) {
-  .stzh-eventinfo {
-    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
-    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
-    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  .stzh-eventinfo__right {
+    padding-top: var(--stzh-space-medium);
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-eventinfo__right {
+    padding-top: var(--stzh-space-large);
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+.stzh-eventinfo__head {
+  display: flex;
+  flex-direction: column;
+  -moz-column-gap: var(--stzh-space-large);
+       column-gap: var(--stzh-space-large);
+}
+@media screen and (min-width: 900px) {
+  .stzh-eventinfo__head {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+.stzh-eventinfo__main-date {
+  display: flex;
+  -moz-column-gap: var(--stzh-space-medium);
+       column-gap: var(--stzh-space-medium);
+  flex-wrap: wrap;
+}
+.stzh-eventinfo__main-event-link {
+  flex-shrink: 0;
+}
+.stzh-eventinfo__text {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--stzh-space-medium);
+  -moz-column-gap: var(--stzh-space-large);
+       column-gap: var(--stzh-space-large);
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 900px) {
+  .stzh-eventinfo__text {
+    margin-top: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 900px) {
+  .stzh-eventinfo__text {
+    margin-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 1260px) {
+  .stzh-eventinfo__text {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+.stzh-eventinfo__details-wrapper {
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 900px) {
+  .stzh-eventinfo__details-wrapper {
+    margin-top: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 900px) {
+  .stzh-eventinfo__details-wrapper {
+    margin-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 1260px) {
+  .stzh-eventinfo__details-wrapper {
+    margin-top: var(--stzh-space-medium);
   }
 }
+.stzh-eventinfo__details {
+  color: inherit;
+}
+.stzh-eventinfo__details-link-collapse {
+  display: none;
+}
+.stzh-eventinfo__details-link[a11y-expanded]:not([a11y-expanded=false]) .stzh-eventinfo__details-link-collapse {
+  display: block;
+}
+.stzh-eventinfo__details-link[a11y-expanded]:not([a11y-expanded=false]) .stzh-eventinfo__details-link-expand {
+  display: none;
+}
 .stzh-eventinfo__month-list, .stzh-eventinfo__event-list {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .stzh-eventinfo__month-list {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   display: grid;
   -moz-column-gap: var(--stzh-space-small);
        column-gap: var(--stzh-space-small);
 }
+@media screen and (min-width: 900px) {
+  .stzh-eventinfo__month-list {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
 @media screen and (min-width: 600px) {
   .stzh-eventinfo__month-list {
     grid-template-columns: minmax(0, 1fr) auto;
@@ -189,7 +322,9 @@
 }
 @media screen and (min-width: 900px) {
   .stzh-eventinfo__month-list {
-    grid-template-columns: minmax(calc(9.375rem - var(--stzh-space-small)), auto) minmax(calc(12.5rem - var(--stzh-space-small)), auto) minmax(0, 1fr) auto;
+    -moz-column-gap: var(--stzh-space-xxlarge);
+         column-gap: var(--stzh-space-xxlarge);
+    grid-template-columns: minmax(6.25rem, auto) minmax(11.25rem, auto) minmax(0, 1fr) auto;
   }
 }
 .stzh-eventinfo__month-list-item:not(:first-child) .stzh-eventinfo__heading {
@@ -217,7 +352,15 @@
   margin-bottom: 0px;
 }
 .stzh-eventinfo__heading {
+  font-family: var(--stzh-font-family-title);
+  font-weight: var(--stzh-font-weight-title);
+  font-style: var(--stzh-font-style-title);
+  font-size: var(--stzh-font-centi-font-size);
+  line-height: var(--stzh-font-centi-heading-line-height);
+  letter-spacing: var(--stzh-font-curve---heading-letter-spacing);
   margin-bottom: var(--stzh-space-xsmall);
+  margin-top: 0;
+  color: var(--stzh-color-primary70);
 }
 @media screen and (min-width: 900px) {
   .stzh-eventinfo__heading {
@@ -283,7 +426,9 @@
 }
 .stzh-eventinfo__event-date-wrapper {
   display: flex;
-  gap: var(--stzh-space-xsmall);
+  flex-direction: column;
+  -moz-column-gap: var(--stzh-space-xxlarge);
+       column-gap: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
   .stzh-eventinfo__event-date-wrapper {

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

@@ -1,12 +1,35 @@
 import { Host, h, } from "@stencil/core";
+import { setPropsIfNull } from "../../utils/utils";
 /**
+ * @slot location - stzh-text for location
+ * @slot additional-info - stzh-text for additional info
  */
 export class StzhEventinfo {
   constructor() {
     this._items = [];
     this._itemsGroupedByMonth = [];
+    this.init = () => {
+      const locationTexts = this.element.querySelectorAll('stzh-text[slot="location"], [slot="location"] stzh-text');
+      const additionalInfoTexts = this.element.querySelectorAll('stzh-text[slot="additional-info"], [slot="additional-info"] stzh-text');
+      locationTexts.forEach((text) => {
+        setPropsIfNull(text, {
+          color: "inherit",
+          curve: "none"
+        });
+      });
+      additionalInfoTexts.forEach((text) => {
+        setPropsIfNull(text, {
+          color: "inherit",
+          curve: "none"
+        });
+      });
+    };
     this.localization = undefined;
     this.monthHeadingLevel = "4";
+    this.start = undefined;
+    this.end = undefined;
+    this.calendarUrl = undefined;
+    this.calendarLabel = undefined;
     this.items = undefined;
     this.dateAdapter = undefined;
   }
@@ -48,14 +71,31 @@ export class StzhEventinfo {
     }
     this.itemsWatcher();
   }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
   render() {
     const classes = {
       "stzh-eventinfo": true
     };
-    return (h(Host, null, h("div", { class: classes }, this._itemsGroupedByMonth.length > 0 &&
-      h("ul", { class: "stzh-eventinfo__month-list" }, this._itemsGroupedByMonth.map((groupedItems) => h("li", { class: "stzh-eventinfo__month-list-item" }, h("stzh-heading", { class: "stzh-eventinfo__heading", level: this.monthHeadingLevel }, groupedItems.name), groupedItems.events.length > 0 &&
+    const startDate = this.start && new Date(this.start);
+    const endDate = this.end && new Date(this.end);
+    const MonthHeading = `h${this.monthHeadingLevel}`;
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-eventinfo__left" }, h("div", { class: "stzh-eventinfo__main-event-day-name" }, this.localization.$globals.dayNamesShort[startDate.getDay()]), h("div", { class: "stzh-eventinfo__main-event-day" }, startDate.getDate() < 10 && '0', startDate.getDate()), h("div", { class: "stzh-eventinfo__main-event-month" }, this.localization.$globals.monthNamesShort[startDate.getMonth()])), h("div", { class: "stzh-eventinfo__right" }, h("div", null, h("div", { class: "stzh-eventinfo__head" }, h("div", { class: "stzh-eventinfo__main-date" }, h("span", null, this.localization.$globals.dayNames[startDate.getDay()]), h("span", null, this.dateAdapter.format(startDate, "date")), h("span", null, this.dateAdapter.formatSpan(startDate, endDate, "time"))), this.calendarUrl &&
+      h("div", { class: "stzh-eventinfo__main-event-link" }, h("stzh-link", { href: this.calendarUrl, label: this.calendarLabel || this.localization.addToCalendar, size: "inherit" }))), h("div", { class: "stzh-eventinfo__text" }, h("div", { class: "stzh-eventinfo__location" }, h("slot", { name: "location" })), h("div", { class: "stzh-eventinfo__additional-info" }, h("slot", { name: "additional-info" })))), this._itemsGroupedByMonth.length > 0 &&
+      h("div", { class: "stzh-eventinfo__details-wrapper" }, h("stzh-details", { class: "stzh-eventinfo__details" }, h("stzh-link", { class: "stzh-eventinfo__details-link", icon: "calendar", size: "inherit" }, h("span", { class: "stzh-eventinfo__details-link-expand" }, this.localization.expandMoreDates), h("span", { class: "stzh-eventinfo__details-link-collapse" }, this.localization.collapseMoreDates)), h("ul", { slot: "content", class: "stzh-eventinfo__month-list" }, this._itemsGroupedByMonth.map((groupedItems) => h("li", { class: "stzh-eventinfo__month-list-item" }, h(MonthHeading, { class: "stzh-eventinfo__heading" }, groupedItems.name), groupedItems.events.length > 0 &&
         h("ul", { class: "stzh-eventinfo__event-list" }, groupedItems.events.map((event) => h("li", { class: "stzh-eventinfo__event-list-item" }, h("span", { class: "stzh-eventinfo__event-datetime-wrapper" }, h("span", { class: "stzh-eventinfo__event-date-wrapper" }, h("span", { class: "stzh-eventinfo__event-weekday" }, this.localization.$globals.dayNames[event.start.getDay()]), h("span", { class: "stzh-eventinfo__event-date" }, this.dateAdapter.format(event.start, "date"))), h("span", { class: "stzh-eventinfo__event-time" }, this.dateAdapter.formatSpan(event.start, event.end, "time"))), h("span", { class: "stzh-eventinfo__event-link" }, event.calendarUrl &&
-          h("stzh-link", { size: "small", href: event.calendarUrl, label: event.calendarLabel || this.localization.addToCalendar })))))))))));
+          h("stzh-link", { href: event.calendarUrl, label: event.calendarLabel || this.localization.addToCalendar }))))))))))))));
   }
   static get is() { return "stzh-eventinfo"; }
   static get encapsulation() { return "scoped"; }
@@ -76,7 +116,7 @@ export class StzhEventinfo {
         "mutable": false,
         "complexType": {
           "original": "StzhEventinfoLocalizedText",
-          "resolved": "StzhLocaleComponent & { addToCalendar: string; }",
+          "resolved": "StzhLocaleComponent & { addToCalendar: string; expandMoreDates: string; collapseMoreDates: string; }",
           "references": {
             "StzhEventinfoLocalizedText": {
               "location": "import",
@@ -110,6 +150,84 @@ export class StzhEventinfo {
         "reflect": false,
         "defaultValue": "\"4\""
       },
+      "start": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global",
+              "id": "global::Date"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Start date"
+        },
+        "attribute": "start",
+        "reflect": false
+      },
+      "end": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global",
+              "id": "global::Date"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "End date"
+        },
+        "attribute": "end",
+        "reflect": false
+      },
+      "calendarUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Calendar URL"
+        },
+        "attribute": "calendar-url",
+        "reflect": false
+      },
+      "calendarLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Calendar label"
+        },
+        "attribute": "calendar-label",
+        "reflect": false
+      },
       "items": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-eventinfo/stzh-eventinfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-eventinfo.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventinfo/stzh-eventinfo.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhEventinfoItemInput,\n  StzhEventinfoItem,\n  StzhEventinfoMonth,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { StzhEventinfoLocalizedText } from './stzh-eventinfo.localization';\n\n/**\n */\n@Component({\n  tag: \"stzh-eventinfo\",\n  styleUrl: \"stzh-eventinfo.scss\",\n  scoped: true\n})\nexport class StzhEventinfo {\n  /** Translation strings */\n  @Prop() localization: StzhEventinfoLocalizedText;\n\n  /** Month heading level */\n  @Prop() monthHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"4\";\n\n  /** Event dates */\n  @Prop() items: StzhEventinfoItemInput[] | string;\n  private _items: StzhEventinfoItem[] = [];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhEventinfoElement;\n\n  private _itemsGroupedByMonth: StzhEventinfoMonth[] = [];\n\n  @Watch(\"items\")\n  @Watch(\"dateAdapter\")\n  itemsWatcher() {\n    if (!this.dateAdapter) {\n      return;\n    }\n\n    const data: StzhEventinfoItemInput[] = typeof this.items === \"string\"\n      ? JSON.parse(this.items)\n      : this.items;\n\n    if (!data) {\n      return;\n    }\n\n    // convert start and end field to date\n    this._items = data\n      .map(event => ({\n        ...event,\n        start: new Date(event.start),\n        end: new Date(event.end),\n      }))\n      .sort((a, b) => a.start.getTime() - b.end.getTime());\n\n    // grouping events by month and year\n    const groupedItems: { [monthKey: string]: StzhEventinfoMonth } = this._items.reduce((acc, event) => {\n      const monthYearKey = event.start.getMonth() + event.start.getFullYear();\n      if (!acc[monthYearKey]) {\n        acc[monthYearKey] = {\n          name: this.localization.$globals.monthNames[event.start.getMonth()]\n            + \" \" + event.start.getFullYear(),\n          events: []\n        } as StzhEventinfoMonth;\n      }\n\n      acc[monthYearKey].events.push(event);\n      return acc;\n    }, {});\n\n    this._itemsGroupedByMonth = Object.values(groupedItems);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"eventinfo\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n\n    this.itemsWatcher();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-eventinfo\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._itemsGroupedByMonth.length > 0 &&\n            <ul class=\"stzh-eventinfo__month-list\">\n              {this._itemsGroupedByMonth.map((groupedItems) =>\n                <li class=\"stzh-eventinfo__month-list-item\">\n                  <stzh-heading\n                    class=\"stzh-eventinfo__heading\"\n                    level={this.monthHeadingLevel}\n                  >\n                    {groupedItems.name}\n                  </stzh-heading>\n\n                  {groupedItems.events.length > 0 &&\n                    <ul class=\"stzh-eventinfo__event-list\">\n                      {groupedItems.events.map((event) =>\n                        <li class=\"stzh-eventinfo__event-list-item\">\n                          <span class=\"stzh-eventinfo__event-datetime-wrapper\">\n                            <span class=\"stzh-eventinfo__event-date-wrapper\">\n                              <span class=\"stzh-eventinfo__event-weekday\">\n                                {this.localization.$globals.dayNames[event.start.getDay()]}\n                              </span>\n                              <span class=\"stzh-eventinfo__event-date\">\n                                {this.dateAdapter.format(event.start, \"date\")}\n                              </span>\n                            </span>\n                            <span class=\"stzh-eventinfo__event-time\">\n                              {this.dateAdapter.formatSpan(event.start, event.end, \"time\")}\n                            </span>\n                          </span>\n                          <span class=\"stzh-eventinfo__event-link\">\n                            {event.calendarUrl &&\n                              <stzh-link\n                                size=\"small\"\n                                href={event.calendarUrl}\n                                label={event.calendarLabel || this.localization.addToCalendar}\n                              ></stzh-link>\n                            }\n                          </span>\n                        </li>\n                      )}\n                  </ul>\n                  }\n                </li>\n              )}\n            </ul>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-eventinfo.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventinfo/stzh-eventinfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,aAAa;;IAqBhB,WAAM,GAAwB,EAAE,CAAC;IAqDjC,yBAAoB,GAAyB,EAAE,CAAC;IAGhD,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACjD,yDAAyD,CAC1D,CAAC;MAEF,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACvD,uEAAuE,CACxE,CAAC;MAEF,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC7B,cAAc,CAAC,IAAI,EAAE;UACnB,KAAK,EAAE,SAAS;UAChB,KAAK,EAAE,MAAM;SACS,CAAC,CAAA;MAC3B,CAAC,CAAC,CAAC;MAEH,mBAAmB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACnC,cAAc,CAAC,IAAI,EAAE;UACnB,KAAK,EAAE,SAAS;UAChB,KAAK,EAAE,MAAM;SACS,CAAC,CAAA;MAC3B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;;6BA9FkD,GAAG;;;;;;;;EA6BtD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO;KACR;IAED,MAAM,IAAI,GAA6B,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MACnE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MACxB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAEf,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IAED,sCAAsC;IACtC,IAAI,CAAC,MAAM,GAAG,IAAI;OACf,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACT,KAAK,KACR,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAC5B,GAAG,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IACxB,CAAC;OACF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;IAEvD,oCAAoC;IACpC,MAAM,YAAY,GAA+C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;MACjG,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;MACxE,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;QACtB,GAAG,CAAC,YAAY,CAAC,GAAG;UAClB,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;cAC/D,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE;UACnC,MAAM,EAAE,EAAE;SACW,CAAC;OACzB;MAED,GAAG,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACrC,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;EAC1D,CAAC;EA6BD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;IAED,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,wBAAwB,CACrE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC3B,CAAC;KACH;IAED,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAElD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,sBAAsB;UAC/B,WAAK,KAAK,EAAC,qCAAqC,IAC7C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CACzD;UACN,WAAK,KAAK,EAAC,gCAAgC;YACxC,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,GAAG;YAAE,SAAS,CAAC,OAAO,EAAE,CACjD;UACN,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAC7D,CACF;QAEN,WAAK,KAAK,EAAC,uBAAuB;UAChC;YACE,WAAK,KAAK,EAAC,sBAAsB;cAC/B,WAAK,KAAK,EAAC,2BAA2B;gBACpC,gBACG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CACnD;gBACP,gBACG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CACtC;gBACP,gBACG,IAAI,CAAC,WAAW,CAAC,UAAU,CAC1B,SAAS,EACT,OAAO,EACP,MAAM,CACP,CACI,CACH;cAEL,IAAI,CAAC,WAAW;gBACf,WAAK,KAAK,EAAC,iCAAiC;kBAC1C,iBACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAC5D,IAAI,EAAC,SAAS,GACH,CACT,CAEJ;YAEN,WAAK,KAAK,EAAC,sBAAsB;cAC/B,WAAK,KAAK,EAAC,0BAA0B;gBACnC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;cACN,WAAK,KAAK,EAAC,iCAAiC;gBAC1C,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,CACF,CACF;UAEL,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC;YACnC,WAAK,KAAK,EAAC,iCAAiC;cAC1C,oBAAc,KAAK,EAAC,yBAAyB;gBACzC,iBACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,SAAS;kBAEd,YAAM,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAC,eAAe,CAAQ;kBAC5F,YAAM,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAQ,CACtF;gBAEd,UAAI,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,4BAA4B,IAClD,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAC9C,UAAI,KAAK,EAAC,iCAAiC;kBACzC,EAAC,YAAY,IAAC,KAAK,EAAC,yBAAyB,IAC1C,YAAY,CAAC,IAAI,CACL;kBAEd,YAAY,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;oBAC7B,UAAI,KAAK,EAAC,4BAA4B,IACnC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACjC,UAAI,KAAK,EAAC,iCAAiC;sBACzC,YAAM,KAAK,EAAC,wCAAwC;wBAClD,YAAM,KAAK,EAAC,oCAAoC;0BAC9C,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CACrD;0BACP,YAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CACxC,CACF;wBACP,YAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,CACvD,CACF;sBACP,YAAM,KAAK,EAAC,4BAA4B,IACrC,KAAK,CAAC,WAAW;wBAChB,iBACE,IAAI,EAAE,KAAK,CAAC,WAAW,EACvB,KAAK,EAAE,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,GAClD,CAEV,CACJ,CACN,CACA,CAEF,CACN,CACE,CACQ,CACX,CAEJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhEventinfoItemInput,\n  StzhEventinfoItem,\n  StzhEventinfoMonth,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { StzhEventinfoLocalizedText } from './stzh-eventinfo.localization';\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot location - stzh-text for location\n * @slot additional-info - stzh-text for additional info\n */\n@Component({\n  tag: \"stzh-eventinfo\",\n  styleUrl: \"stzh-eventinfo.scss\",\n  scoped: true\n})\nexport class StzhEventinfo {\n  /** Translation strings */\n  @Prop() localization: StzhEventinfoLocalizedText;\n\n  /** Month heading level */\n  @Prop() monthHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"4\";\n\n  /** Start date */\n  @Prop() start: Date | string;\n\n  /** End date */\n  @Prop() end: Date | string;\n\n  /** Calendar URL */\n  @Prop() calendarUrl: string;\n\n  /** Calendar label */\n  @Prop() calendarLabel: string;\n\n  /** Event dates */\n  @Prop() items: StzhEventinfoItemInput[] | string;\n  private _items: StzhEventinfoItem[] = [];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhEventinfoElement;\n\n  @Watch(\"items\")\n  @Watch(\"dateAdapter\")\n  itemsWatcher() {\n    if (!this.dateAdapter) {\n      return;\n    }\n\n    const data: StzhEventinfoItemInput[] = typeof this.items === \"string\"\n      ? JSON.parse(this.items)\n      : this.items;\n\n    if (!data) {\n      return;\n    }\n\n    // convert start and end field to date\n    this._items = data\n      .map(event => ({\n        ...event,\n        start: new Date(event.start),\n        end: new Date(event.end),\n      }))\n      .sort((a, b) => a.start.getTime() - b.end.getTime());\n\n    // grouping events by month and year\n    const groupedItems: { [monthKey: string]: StzhEventinfoMonth } = this._items.reduce((acc, event) => {\n      const monthYearKey = event.start.getMonth() + event.start.getFullYear();\n      if (!acc[monthYearKey]) {\n        acc[monthYearKey] = {\n          name: this.localization.$globals.monthNames[event.start.getMonth()]\n            + \" \" + event.start.getFullYear(),\n          events: []\n        } as StzhEventinfoMonth;\n      }\n\n      acc[monthYearKey].events.push(event);\n      return acc;\n    }, {});\n\n    this._itemsGroupedByMonth = Object.values(groupedItems);\n  }\n\n  private _itemsGroupedByMonth: StzhEventinfoMonth[] = [];\n  private observer: MutationObserver;\n\n  private init = () => {\n    const locationTexts = this.element.querySelectorAll(\n      'stzh-text[slot=\"location\"], [slot=\"location\"] stzh-text'\n    );\n\n    const additionalInfoTexts = this.element.querySelectorAll(\n      'stzh-text[slot=\"additional-info\"], [slot=\"additional-info\"] stzh-text'\n    );\n\n    locationTexts.forEach((text) => {\n      setPropsIfNull(text, {\n        color: \"inherit\",\n        curve: \"none\"\n      } as HTMLStzhTextElement)\n    });\n\n    additionalInfoTexts.forEach((text) => {\n      setPropsIfNull(text, {\n        color: \"inherit\",\n        curve: \"none\"\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"eventinfo\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n\n    this.itemsWatcher();\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-eventinfo\": true\n    };\n\n    const startDate = this.start && new Date(this.start);\n    const endDate = this.end && new Date(this.end);\n\n    const MonthHeading = `h${this.monthHeadingLevel}`;\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-eventinfo__left\">\n            <div class=\"stzh-eventinfo__main-event-day-name\">\n              {this.localization.$globals.dayNamesShort[startDate.getDay()]}\n            </div>\n            <div class=\"stzh-eventinfo__main-event-day\">\n              {startDate.getDate() < 10 && '0'}{startDate.getDate()}\n            </div>\n            <div class=\"stzh-eventinfo__main-event-month\">\n              {this.localization.$globals.monthNamesShort[startDate.getMonth()]}\n            </div>\n          </div>\n\n          <div class=\"stzh-eventinfo__right\">\n            <div>\n              <div class=\"stzh-eventinfo__head\">\n                <div class=\"stzh-eventinfo__main-date\">\n                  <span>\n                    {this.localization.$globals.dayNames[startDate.getDay()]}\n                  </span>\n                  <span>\n                    {this.dateAdapter.format(startDate, \"date\")}\n                  </span>\n                  <span>\n                    {this.dateAdapter.formatSpan(\n                      startDate,\n                      endDate,\n                      \"time\"\n                    )}\n                  </span>\n                </div>\n\n                {this.calendarUrl &&\n                  <div class=\"stzh-eventinfo__main-event-link\">\n                    <stzh-link\n                      href={this.calendarUrl}\n                      label={this.calendarLabel || this.localization.addToCalendar}\n                      size=\"inherit\"\n                    ></stzh-link>\n                  </div>\n                }\n              </div>\n\n              <div class=\"stzh-eventinfo__text\">\n                <div class=\"stzh-eventinfo__location\">\n                  <slot name=\"location\"></slot>\n                </div>\n                <div class=\"stzh-eventinfo__additional-info\">\n                  <slot name=\"additional-info\"></slot>\n                </div>\n              </div>\n            </div>\n\n            {this._itemsGroupedByMonth.length > 0 &&\n              <div class=\"stzh-eventinfo__details-wrapper\">\n                <stzh-details class=\"stzh-eventinfo__details\">\n                    <stzh-link\n                      class=\"stzh-eventinfo__details-link\"\n                      icon=\"calendar\"\n                      size=\"inherit\"\n                    >\n                      <span class=\"stzh-eventinfo__details-link-expand\">{this.localization.expandMoreDates}</span>\n                      <span class=\"stzh-eventinfo__details-link-collapse\">{this.localization.collapseMoreDates}</span>\n                    </stzh-link>\n\n                  <ul slot=\"content\" class=\"stzh-eventinfo__month-list\">\n                    {this._itemsGroupedByMonth.map((groupedItems) =>\n                      <li class=\"stzh-eventinfo__month-list-item\">\n                        <MonthHeading class=\"stzh-eventinfo__heading\">\n                          {groupedItems.name}\n                        </MonthHeading>\n\n                        {groupedItems.events.length > 0 &&\n                          <ul class=\"stzh-eventinfo__event-list\">\n                            {groupedItems.events.map((event) =>\n                              <li class=\"stzh-eventinfo__event-list-item\">\n                                <span class=\"stzh-eventinfo__event-datetime-wrapper\">\n                                  <span class=\"stzh-eventinfo__event-date-wrapper\">\n                                    <span class=\"stzh-eventinfo__event-weekday\">\n                                      {this.localization.$globals.dayNames[event.start.getDay()]}\n                                    </span>\n                                    <span class=\"stzh-eventinfo__event-date\">\n                                      {this.dateAdapter.format(event.start, \"date\")}\n                                    </span>\n                                  </span>\n                                  <span class=\"stzh-eventinfo__event-time\">\n                                    {this.dateAdapter.formatSpan(event.start, event.end, \"time\")}\n                                  </span>\n                                </span>\n                                <span class=\"stzh-eventinfo__event-link\">\n                                  {event.calendarUrl &&\n                                    <stzh-link\n                                      href={event.calendarUrl}\n                                      label={event.calendarLabel || this.localization.addToCalendar}\n                                    ></stzh-link>\n                                  }\n                                </span>\n                              </li>\n                            )}\n                        </ul>\n                        }\n                      </li>\n                    )}\n                  </ul>\n                </stzh-details>\n              </div>\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-eventinfo/stzh-eventinfo.localization.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-eventinfo.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventinfo/stzh-eventinfo.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhEventinfoLocalizedText = StzhLocaleComponent & {\n  addToCalendar: string\n}\n"]}
+{"version":3,"file":"stzh-eventinfo.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventinfo/stzh-eventinfo.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhEventinfoLocalizedText = StzhLocaleComponent & {\n  addToCalendar: string\n  expandMoreDates: string\n  collapseMoreDates: string\n}\n"]}

package/dist/collection/components/stzh-eventinfo/stzh-eventinfo.stories.js

@@ -8,7 +8,17 @@ const COMPONENT_NAME = 'stzh-eventinfo';
 const story = createComponentStory(COMPONENT_NAME);
 
 const TEMPLATE = `
-<stzh-eventinfo></stzh-eventinfo>
+<stzh-eventinfo>
+  <stzh-text slot="location">
+    Lorem ipsum dolor sit amet<br />
+    Neumarkt 4<br />
+    8001 Zurich
+  </stzh-text>
+  <stzh-text slot="additional-info">
+    Lorem ipsum: <b>Dolor</b><br />
+    Lorem: <b>Ipsum</b>
+  </stzh-text>
+</stzh-eventinfo>
 `;
 
 export default {
@@ -69,6 +79,9 @@ const items = [
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
+    start: "2023-06-14T17:00:00.000Z",
+    end: "2023-06-14T20:00:00.000Z",
+    'calendar-url': "#",
     items
   }
 };

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -159,6 +159,9 @@
   border: 0 !important;
 }
 
+stzh-footer {
+  --background-color: var(--stzh-footer-background-color);
+}
 @media print {
   stzh-footer {
     display: none;
@@ -176,7 +179,7 @@
   the .has-focus class is used by the focus target */
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
-  background-color: var(--stzh-color-primary100);
+  background-color: var(--background-color);
   --stzh-flyingfocus-color: var(--stzh-color-white);
   --stzh-base-color: var(--stzh-color-white70op);
   --stzh-link-color: var(--stzh-color-white70op);

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -784,6 +784,12 @@ stzh-gallery .stzh-fylingfocus-focused::-moz-focus-inner {
   transition-duration: var(--stzh-base-transition-animation-speed);
   transition-property: color, background-color, border-color, opacity;
 }
+@media print {
+  .stzh-gallery__pswp .pswp__button {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
 @media screen and (min-width: 1260px) {
   .stzh-gallery__pswp .pswp__button {
     width: 3.5rem;

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -48,7 +48,6 @@ export class StzhHeader {
       this.updatePosition();
     };
     this.handleMetanavItemClick = (event, item) => {
-      this.flyoutOpen = false;
       this.stzhMetanavItemClick.emit({
         component: "stzh-header",
         item,