@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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

@@ -14,8 +14,10 @@ const TEMPLATE_ONSITE = `
     <stzh-input required minlength="3" type="search" name="query" label="Suche nach Stichworten" hide-optional clearable></stzh-input>
     <stzh-text font="heavy" size="milli" color="primary">Themen</stzh-text>
     <stzh-chipselect
+      multiple
       name="subject"
       label="Test"
+      label-hidden
       data='[
         {
           "label": "All",
@@ -80,14 +82,20 @@ const TEMPLATE_WITH_ASIDE = `
         <stzh-input required type="text" name="ipsum" label="Ipsum" hide-optional></stzh-input>
       </stzh-cell>
     </stzh-row>
-    <stzh-row span-small="6">
-      <stzh-cell>
-        <stzh-input type="text" name="dolor" label="Dolor" hide-optional></stzh-input>
-      </stzh-cell>
-      <stzh-cell>
-        <stzh-input type="text" name="amet" label="Amet" hide-optional></stzh-input>
-      </stzh-cell>
-    </stzh-row>
+
+    <stzh-daterange
+      range-links='[
+        "today",
+        "tomorrow",
+        "next7days"
+      ]'
+    >
+      <stzh-datepicker slot="from" name="date-from"></stzh-datepicker>
+      <stzh-datepicker slot="to" name="date-to"></stzh-datepicker>
+    </stzh-daterange>
+
+    <stzh-checkbox name="check" label="Lorem Ipsum" hide-optional></stzh-checkbox>
+
     <stzh-row>
       <stzh-cell span-large="8">
         <stzh-text size="micro" color="info">
@@ -104,11 +112,14 @@ const TEMPLATE_WITH_ASIDE = `
       </stzh-cell>
     </stzh-row>
   </stzh-fieldset>
+
   <stzh-fieldset slot="filters-aside">
     <stzh-input type="text" name="lorem" label="Lorem" hide-optional></stzh-input>
     <stzh-chipselect
+      multiple
       name="subject"
       label="Ipsum"
+      label-hidden
       data='[
         {
           "label": "All",
@@ -159,41 +170,91 @@ const TEMPLATE_WITH_ASIDE = `
 const TEMPLATE_SUPERTEASER = `
 <stzh-search>
   <div slot="filters-main">
-    <stzh-chipselect
-      name="subject"
-      label="Test"
-      data='[
-        {
-          "label": "All",
-          "value": "",
-          "variant": "filter",
-          "type": "secondary",
-          "counter": "5",
-          "size": "small"
-        },
-        {
-          "label": "Lorem",
-          "value": "lorem",
-          "variant": "filter",
-          "type": "secondary",
-          "counter": "2",
-          "size": "small"
-        },
-        {
-          "label": "Ipsum",
-          "value": "ipsum",
-          "variant": "filter",
-          "type": "secondary",
-          "counter": "3",
-          "size": "small"
-        }
-      ]'
-    ></stzh-chipselect>
+    <stzh-chipgroup>
+      <stzh-dropdown
+        label="Lorem"
+        name="filter1"
+        variant="filter"
+        no-search
+        hide-optional
+        inline
+        options='[
+          { "text": "Lorem Ipsum", "value": "1" },
+          { "text": "Dolor", "value": "2" },
+          { "text": "Si amet", "value": "3" },
+          { "text": "Lorem Dolor", "value": "4" }
+        ]'
+      >
+      </stzh-dropdown>
+      <stzh-dropdown
+        label="Ipsum"
+        name="filter2"
+        variant="filter"
+        no-search
+        hide-optional
+        inline
+        options='[
+          { "text": "Lorem Ipsum", "value": "1" },
+          { "text": "Dolor", "value": "2" },
+          { "text": "Si amet", "value": "3" },
+          { "text": "Lorem Dolor", "value": "4" }
+        ]'
+      >
+      </stzh-dropdown>
+      <stzh-dropdown
+        label="Dolor"
+        name="filter3"
+        variant="filter"
+        no-search
+        hide-optional
+        inline
+        options='[
+          { "text": "Lorem Ipsum", "value": "1" },
+          { "text": "Dolor", "value": "2" },
+          { "text": "Si amet", "value": "3" },
+          { "text": "Lorem Dolor", "value": "4" }
+        ]'
+      >
+      </stzh-dropdown>
+    </stzh-chipgroup>
   </div>
   <input type="hidden" name="thema" value="Sicherheit">
 </stzh-search>
 `;
 
+{/* <stzh-chipselect
+  multiple
+  name="subject"
+  label="Test"
+  label-hidden
+  data='[
+    {
+      "label": "All",
+      "value": "",
+      "variant": "filter",
+      "type": "secondary",
+      "counter": "5",
+      "size": "small"
+    },
+    {
+      "label": "Lorem",
+      "value": "lorem",
+      "variant": "filter",
+      "type": "secondary",
+      "counter": "2",
+      "size": "small"
+    },
+    {
+      "label": "Ipsum",
+      "value": "ipsum",
+      "variant": "filter",
+      "type": "secondary",
+      "counter": "3",
+      "size": "small"
+    }
+  ]'
+></stzh-chipselect> */}
+
 export default {
   title: 'Components/Search',
   component: COMPONENT_NAME,
@@ -235,6 +296,14 @@ export const EmptyResults = {
   }
 };
 
+export const Error = {
+  render: (args) => story(args, TEMPLATE_ONSITE),
+  args: {
+    api: "mock/search-error.json",
+    "autofetch-main-filters": true,
+  }
+};
+
 export const WithAside = {
   render: (args) => story(args, TEMPLATE_WITH_ASIDE),
   args: {
@@ -246,7 +315,7 @@ export const WithAside = {
 export const SuperTeaser = {
   render: (args) => story(args, TEMPLATE_SUPERTEASER),
   args: {
-    api: "mock/search.json",
+    api: "mock/search-superteaser.json",
     variant: "teaser",
     "autofetch-main-filters": true,
     "initial-fetch": true,

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -54,7 +54,6 @@ export class StzhShow {
   }
   render() {
     const timeNow = Date.now();
-    console.log(this._hideFromDate, this._hideFromDate && timeNow >= this._hideFromDate.getTime());
     return (h(Host, { hidden: this._showFromDate && timeNow <= this._showFromDate.getTime()
         || this._hideFromDate && timeNow >= this._hideFromDate.getTime()
         || this.closedByCookie }, h("slot", null)));

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-show.js","sourceRoot":"","sources":["../../../../src/components/stzh-show/stzh-show.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAQvB,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,gBAAgB,GAAG,4BAA4B,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;IA8EX,mBAAc,GAAY,KAAK,CAAC;;;;;;;;oBAhDb,EAAE;;EAG7B,YAAY,CAAC,KAA0F;IACrG,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;MACtF,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;OAC3E;KACF;EACH,CAAC;EAGD,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KAC3D;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IAED,IAAI,cAAc,GAAG,KAAK,CAAC;IAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;MAEtE,IACE,UAAU,IAAI,CACZ,CAAC,IAAI,CAAC,aAAa;WAChB,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CACtD,EACD;QACA,cAAc,GAAG,IAAI,CAAC;OACvB;KACF;IAED,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;EACvC,CAAC;EAGD,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KAC3D;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAMD,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAE3B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;IAE9F,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EACV,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;WAC1D,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;WAC7D,IAAI,CAAC,cAAc;MAEtB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhBannerCloseEvent,\n  StzhGhettoboxCloseEvent,\n  StzhMessageCloseEvent\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (\n        timeClosed && (\n          !this._showFromDate\n          || Number(timeClosed) >= this._showFromDate.getTime()\n        )\n      ) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    console.log(this._hideFromDate, this._hideFromDate && timeNow >= this._hideFromDate.getTime())\n\n    return (\n      <Host hidden={\n        this._showFromDate && timeNow <= this._showFromDate.getTime()\n        || this._hideFromDate && timeNow >= this._hideFromDate.getTime()\n        || this.closedByCookie\n      }>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-show.js","sourceRoot":"","sources":["../../../../src/components/stzh-show/stzh-show.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAQvB,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,gBAAgB,GAAG,4BAA4B,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;IA8EX,mBAAc,GAAY,KAAK,CAAC;;;;;;;;oBAhDb,EAAE;;EAG7B,YAAY,CAAC,KAA0F;IACrG,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;MACtF,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;OAC3E;KACF;EACH,CAAC;EAGD,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KAC3D;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IAED,IAAI,cAAc,GAAG,KAAK,CAAC;IAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;MAEtE,IACE,UAAU,IAAI,CACZ,CAAC,IAAI,CAAC,aAAa;WAChB,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CACtD,EACD;QACA,cAAc,GAAG,IAAI,CAAC;OACvB;KACF;IAED,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;EACvC,CAAC;EAGD,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KAC3D;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAMD,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAE3B,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EACV,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;WAC1D,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;WAC7D,IAAI,CAAC,cAAc;MAEtB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhBannerCloseEvent,\n  StzhGhettoboxCloseEvent,\n  StzhMessageCloseEvent\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (\n        timeClosed && (\n          !this._showFromDate\n          || Number(timeClosed) >= this._showFromDate.getTime()\n        )\n      ) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host hidden={\n        this._showFromDate && timeNow <= this._showFromDate.getTime()\n        || this._hideFromDate && timeNow >= this._hideFromDate.getTime()\n        || this.closedByCookie\n      }>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css

@@ -3,7 +3,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -961,6 +964,7 @@ the .has-focus class is used by the focus target */
   --stzh-font-family-light: 'HelveticaNeueLTW01_41488878', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-regular: 'HelveticaNeueLTW01_55Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-medium: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium-italic: 'HelveticaNeueLTW05_66MediumIt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-bold: 'HelveticaNeueLTW01_71488914', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-heavy: 'HelveticaNeueLTW05_85Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --stzh-font-family-title: var(--stzh-font-family-heavy);
@@ -968,6 +972,7 @@ the .has-focus class is used by the focus target */
   --stzh-font-weight-light: normal;
   --stzh-font-weight-regular: normal;
   --stzh-font-weight-medium: normal;
+  --stzh-font-weight-medium-italic: normal;
   --stzh-font-weight-bold: normal;
   --stzh-font-weight-heavy: normal;
   --stzh-font-weight-title: normal;
@@ -975,6 +980,7 @@ the .has-focus class is used by the focus target */
   --stzh-font-style-light: normal;
   --stzh-font-style-regular: normal;
   --stzh-font-style-medium: normal;
+  --stzh-font-style-medium-italic: normal;
   --stzh-font-style-bold: normal;
   --stzh-font-style-heavy: normal;
   --stzh-font-style-title: normal;
@@ -1138,6 +1144,9 @@ the .has-focus class is used by the focus target */
   /* Text */
   --stzh-text-info-color: var(--stzh-color-coolgrey70);
 
+  /* Fieldset */
+  --stzh-fieldset-description-min-height: 1.375rem;
+
   /* Table */
   --stzh-table-max-height: none;
   --stzh-table-min-width: 43.75rem;
@@ -1204,7 +1213,7 @@ the .has-focus class is used by the focus target */
   --stzh-calendar-width: 20rem;
 
   /* Cta */
-  --stzh-cta-background-color: var(--stzh-color-violet40);
+  --stzh-cta-background-color: var(--stzh-color-violet60);
 
   /** Toasts */
   --stzh-toast-label-font-family: var(--stzh-font-family-medium);
@@ -1247,15 +1256,15 @@ the .has-focus class is used by the focus target */
 }
 
 .stzh-theme-cta-orange {
-  --stzh-cta-background-color: var(--stzh-color-orange50);
+  --stzh-cta-background-color: var(--stzh-color-orange70);
 }
 
 .stzh-theme-cta-magenta {
-  --stzh-cta-background-color: var(--stzh-color-magenta40);
+  --stzh-cta-background-color: var(--stzh-color-magenta60);
 }
 
 .stzh-theme-cta-firgreen {
-  --stzh-cta-background-color: var(--stzh-color-firgreen50);
+  --stzh-cta-background-color: var(--stzh-color-firgreen70);
 }
 
 /* Department and microsite themes */
@@ -1550,9 +1559,9 @@ main b, main strong {
   font-style: var(--stzh-font-style-heavy);
 }
 main i, main em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 main,
 main p,
@@ -2269,9 +2278,9 @@ main th strong {
 main td i, main td em,
 main th i,
 main th em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 main td.align-left,
 main th.align-left {
@@ -3749,9 +3758,9 @@ main .ql-editor b, main .ql-editor strong {
   font-style: var(--stzh-font-style-heavy);
 }
 main .ql-editor i, main .ql-editor em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 main .ql-editor,
 main .ql-editor p,
@@ -4468,9 +4477,9 @@ main .ql-editor th strong {
 main .ql-editor td i, main .ql-editor td em,
 main .ql-editor th i,
 main .ql-editor th em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 main .ql-editor td.align-left,
 main .ql-editor th.align-left {

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.css

@@ -3,7 +3,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -199,9 +202,9 @@
 .sbdocs-content > i, .sbdocs-content > em,
 .sbdocs-content > div > i,
 .sbdocs-content > div > em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 .sbdocs-content >,
 .sbdocs-content > p,
@@ -1181,9 +1184,9 @@
 .sbdocs-content > div > td em,
 .sbdocs-content > div > th i,
 .sbdocs-content > div > th em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 .sbdocs-content > td.align-left,
 .sbdocs-content > th.align-left,
@@ -1502,7 +1505,7 @@
 .sbdocs-content > div > ul li em,
 .sbdocs-content > div > stzh-text i,
 .sbdocs-content > div > stzh-text em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -386,9 +389,9 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
 .stzh-table td i, .stzh-table td em,
 .stzh-table th i,
 .stzh-table th em {
-  font-family: var(--stzh-font-family-medium);
-  font-weight: var(--stzh-font-weight-medium);
-  font-style: var(--stzh-font-style-medium);
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
 }
 .stzh-table td.align-left,
 .stzh-table th.align-left {

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */