@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

package/dist/collection/assets/i18n/de.json

@@ -360,6 +360,15 @@
     "tagsLabel": "Tags",
     "showMore": "Mehr anzeigen"
   },
+  "poilist": {
+    "showMore": "Mehr anzeigen",
+    "geopositionError": "Es ist ein Fehler aufgetreten bei der Lokalisierung Ihrer Position.",
+    "geopositionLoading": "Ihre Position wird lokalisiert...",
+    "dataLoading": "Daten werden geladen...",
+    "sortByDistance": "Sortierung nach Entfernung",
+    "of": "von",
+    "sortByName": "Sortierung nach Name"
+  },
   "search": {
     "showMore": "Mehr anzeigen",
     "moreFilter": "Weitere Filter",

package/dist/collection/assets/i18n/en.json

@@ -360,6 +360,15 @@
     "tagsLabel": "Tags",
     "showMore": "Show more"
   },
+  "poilist": {
+    "showMore": "Show more",
+    "geopositionError": "An error occured while trying to geolocate your position.",
+    "geopositionLoading": "Trying to find your geoposition...",
+    "dataLoading": "Loading data...",
+    "sortByDistance": "Sort by distance",
+    "of": "of",
+    "sortByName": "Sort by name"
+  },
   "search": {
     "showMore": "Show more",
     "moreFilter": "More filter",

package/dist/collection/collection-manifest.json

@@ -93,6 +93,8 @@
     "components/stzh-pi-pagetitle/stzh-pi-pagetitle.js",
     "components/stzh-pi-quote/stzh-pi-quote.js",
     "components/stzh-pi-teaser/stzh-pi-teaser.js",
+    "components/stzh-poicard/stzh-poicard.js",
+    "components/stzh-poilist/stzh-poilist.js",
     "components/stzh-popover/stzh-popover.js",
     "components/stzh-print/stzh-print.js",
     "components/stzh-progressbar/stzh-progressbar.js",

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

@@ -168,7 +168,15 @@
   flex-grow: 1;
   margin: calc(var(--stzh-space-medium) / 2);
 }
+@media screen and (min-width: 600px) {
+  :host[space-between=true] ::slotted([slot=tertiary]) {
+    flex-grow: inherit;
+  }
+}
 
+.stzh-actions {
+  /* space between */
+}
 .stzh-actions__actions {
   display: flex;
   flex-direction: column-reverse;
@@ -206,4 +214,23 @@
 }
 .stzh-actions--search .stzh-actions__actions {
   justify-content: flex-end;
+}
+.stzh-actions--space-between .stzh-actions__actions {
+  justify-content: space-between;
+}
+@media screen and (min-width: 600px) {
+  .stzh-actions--space-between .stzh-actions__actions {
+    flex-direction: column;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-actions--space-between .stzh-actions__actions {
+    flex-direction: row;
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-actions--space-between .stzh-actions__wrapper {
+    display: flex;
+    justify-content: flex-end;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { setPropsIfNull } from "../../utils/utils";
 /**
  * @slot primary - Slot for primary button
@@ -10,25 +10,26 @@ export class StzhActions {
     this.init = () => {
       const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
       const tertiaryButtons = this.element.querySelectorAll('stzh-button[slot="tertiary"], [slot="tertiary"] stzh-button');
-      secondaryButtons.forEach((button) => {
+      secondaryButtons.forEach(button => {
         setPropsIfNull(button, {
-          variant: "secondary"
+          variant: "secondary",
         });
       });
-      tertiaryButtons.forEach((button) => {
+      tertiaryButtons.forEach(button => {
         setPropsIfNull(button, {
-          variant: "tertiary"
+          variant: "tertiary",
         });
       });
     };
     this.variant = "form";
+    this.spaceBetween = false;
   }
   connectedCallback() {
     this.init();
     this.observer = new MutationObserver(this.init);
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
   disconnectedCallback() {
@@ -39,9 +40,10 @@ export class StzhActions {
   render() {
     const classes = {
       "stzh-actions": true,
-      [`stzh-actions--${this.variant}`]: !!this.variant
+      "stzh-actions--space-between": this.spaceBetween,
+      [`stzh-actions--${this.variant}`]: !!this.variant,
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "group" }, h("div", { class: "stzh-actions__tertiary-actions" }, h("slot", { name: "tertiary" })), h("div", { class: "stzh-actions__wrapper" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" })))))));
+    return (h(Host, { "space-between": this.spaceBetween }, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "group" }, h("div", { class: "stzh-actions__tertiary-actions" }, h("slot", { name: "tertiary" })), h("div", { class: "stzh-actions__wrapper" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" })))))));
   }
   static get is() { return "stzh-actions"; }
   static get encapsulation() { return "scoped"; }
@@ -61,8 +63,8 @@ export class StzhActions {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"form\" | \"dialog\" | \"process\" | \"cta\"",
-          "resolved": "\"cta\" | \"dialog\" | \"form\" | \"process\"",
+          "original": "\"form\" | \"dialog\" | \"process\" | \"search\"",
+          "resolved": "\"dialog\" | \"form\" | \"process\" | \"search\"",
           "references": {}
         },
         "required": false,
@@ -74,6 +76,24 @@ export class StzhActions {
         "attribute": "variant",
         "reflect": true,
         "defaultValue": "\"form\""
+      },
+      "spaceBetween": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to split tertiary and primary/secondary from each other (left and right)."
+        },
+        "attribute": "space-between",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,WAAW;;IAQd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAClC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;MAEH,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACjC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,UAAU;SACK,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;mBA1ByE,MAAM;;EA4BhF,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,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,WAAK,KAAK,EAAC,gCAAgC;YACzC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;UACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,WAAK,KAAK,EAAC,iCAAiC;cAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,WAAK,KAAK,EAAC,+BAA+B;cACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n    tertiaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\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-actions\": true,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,WAAW;;IAWd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAChC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;MAEH,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC/B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,UAAU;SACK,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;mBA7B2E,MAAM;wBAGlC,KAAK;;EA4BtD,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,cAAc,EAAE,IAAI;MACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;MAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,qBAAgB,IAAI,CAAC,YAAY;MACpC,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,WAAK,KAAK,EAAC,gCAAgC;YACzC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;UACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,WAAK,KAAK,EAAC,iCAAiC;cAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,WAAK,KAAK,EAAC,+BAA+B;cACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\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-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -212,4 +212,7 @@
   .stzh-archivelist__actions {
     margin-top: var(--stzh-space-xxxxlarge);
   }
+}
+.stzh-archivelist__heading {
+  margin-bottom: var(--stzh-space-medium);
 }

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

@@ -1,4 +1,4 @@
-import { Host, h, Fragment } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 /**
  *
  */
@@ -11,6 +11,8 @@ export class StzhArchivelist {
     this.localization = undefined;
     this.showItems = 9;
     this.stepItems = 9;
+    this.heading = "";
+    this.headingLevel = "3";
     this.items = [];
   }
   itemsWatcher(newValue) {
@@ -30,7 +32,7 @@ export class StzhArchivelist {
     this.stzhItemClick.emit({
       component: "stzh-archivelist",
       item,
-      originalEvent
+      originalEvent,
     });
   }
   async componentWillLoad() {
@@ -42,21 +44,9 @@ export class StzhArchivelist {
   }
   render() {
     const classes = {
-      "stzh-archivelist": true
+      "stzh-archivelist": true,
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-archivelist__list", role: "list" }, this._itemsShown.map((item) => h("a", { class: "stzh-archivelist__item", role: "listitem", href: item.href, onClick: (e) => this.handleClick(item, e) }, item.dateline &&
-      h("div", { class: "stzh-archivelist__dateline" }, item.dateline), item.label &&
-      h("div", { class: "stzh-archivelist__label" }, item.labelClamp
-        ?
-          h("stzh-clamp", Object.assign({}, item.labelClamp), item.label)
-        :
-          h(Fragment, null, item.label)), item.description &&
-      h("div", { class: "stzh-archivelist__description" }, item.descriptionClamp
-        ?
-          h("stzh-clamp", Object.assign({}, item.descriptionClamp), item.description)
-        :
-          h(Fragment, null, item.description))))), this._showMoreLink &&
-      h("div", { class: "stzh-archivelist__actions" }, h("stzh-button", { variant: "secondary", size: "small", sizeMedium: "default", label: this.localization.showMore, onClick: this.handleMoreClick })))));
+    return (h(Host, null, h("div", { class: classes }, this.heading && (h("stzh-heading", { level: this.headingLevel, class: "stzh-archivelist__heading" }, this.heading)), h("div", { class: "stzh-archivelist__list", role: "list" }, this._itemsShown.map(item => (h("a", { class: "stzh-archivelist__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, item.dateline && h("div", { class: "stzh-archivelist__dateline" }, item.dateline), item.label && (h("div", { class: "stzh-archivelist__label" }, item.labelClamp ? (h("stzh-clamp", Object.assign({}, item.labelClamp), item.label)) : (h(Fragment, null, item.label)))), item.description && (h("div", { class: "stzh-archivelist__description" }, item.descriptionClamp ? (h("stzh-clamp", Object.assign({}, item.descriptionClamp), item.description)) : (h(Fragment, null, item.description)))))))), this._showMoreLink && (h("div", { class: "stzh-archivelist__actions" }, h("stzh-button", { variant: "secondary", size: "small", sizeMedium: "default", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
   }
   static get is() { return "stzh-archivelist"; }
   static get encapsulation() { return "scoped"; }
@@ -129,6 +119,42 @@ export class StzhArchivelist {
         "reflect": false,
         "defaultValue": "9"
       },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level"
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "\"3\""
+      },
       "items": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-archivelist.js","sourceRoot":"","sources":["../../../../src/components/stzh-archivelist/stzh-archivelist.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhArchivelistItem,\n  StzhArchivelistItemClickEvent\n} from \"../../index\";\n\nimport { StzhArchivelistLocalizedText } from \"./stzh-archivelist.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-archivelist\",\n  styleUrl: \"stzh-archivelist.scss\",\n  scoped: true\n})\nexport class StzhArchivelist {\n  /** Translation strings */\n  @Prop() localization: StzhArchivelistLocalizedText;\n\n  /** Nr of entries shown */\n  @Prop({ mutable: true }) showItems: number = 9;\n  private _initialShowItems: number;\n\n  /** Nr of items loaded when more link is clicked */\n  @Prop() stepItems: number = 9;\n\n  /**\n   * Initial selected values.\n   * Array of objects with `label`, `href`, optionally: `dateline`, `description`, `labelClamp` and `descriptionClamp` attribute:\n   * `[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\", \"labelClamp\": { \"lines\": 2, \"linesMedium\": 1 }}]`\n   */\n  @Prop() items: StzhArchivelistItem[] | string = [];\n  private _items: StzhArchivelistItem[];\n  private _itemsShown: StzhArchivelistItem[];\n  private _showMoreLink: boolean = false;\n\n  @Element() element: HTMLStzhArchivelistElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhArchivelistItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n\n    this.showItemsWatcher(this._initialShowItems);\n  }\n\n  @Watch(\"showItems\")\n  showItemsWatcher(newValue: number) {\n    this._itemsShown = this._items.slice(0, newValue);\n    this._showMoreLink = newValue < this._items.length;\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhArchivelistItemClickEvent>;\n\n  private handleClick(item: StzhArchivelistItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-archivelist\",\n      item,\n      originalEvent\n    })\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"archivelist\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-archivelist\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-archivelist__list\" role=\"list\">\n            {this._itemsShown.map((item) =>\n              <a\n                class=\"stzh-archivelist__item\"\n                role=\"listitem\"\n                href={item.href}\n                onClick={(e) => this.handleClick(item, e)}\n              >\n                {item.dateline &&\n                  <div class=\"stzh-archivelist__dateline\">\n                    {item.dateline}\n                  </div>\n                }\n\n                {item.label &&\n                  <div class=\"stzh-archivelist__label\">\n                    {item.labelClamp\n                      ?\n                      <stzh-clamp {...item.labelClamp}>{item.label}</stzh-clamp>\n                      :\n                      <Fragment>{item.label}</Fragment>\n                    }\n                  </div>\n                }\n\n                {item.description &&\n                  <div class=\"stzh-archivelist__description\">\n                    {item.descriptionClamp\n                      ?\n                      <stzh-clamp {...item.descriptionClamp}>{item.description}</stzh-clamp>\n                      :\n                      <Fragment>{item.description}</Fragment>\n                    }\n                  </div>\n                }\n              </a>\n            )}\n          </div>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-archivelist__actions\">\n              <stzh-button\n                variant=\"secondary\"\n                size=\"small\"\n                sizeMedium=\"default\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-archivelist.js","sourceRoot":"","sources":["../../../../src/components/stzh-archivelist/stzh-archivelist.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhArchivelistItem, StzhArchivelistItemClickEvent } from \"../../index\";\n\nimport { StzhArchivelistLocalizedText } from \"./stzh-archivelist.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-archivelist\",\n  styleUrl: \"stzh-archivelist.scss\",\n  scoped: true,\n})\nexport class StzhArchivelist {\n  /** Translation strings */\n  @Prop() localization: StzhArchivelistLocalizedText;\n\n  /** Nr of entries shown */\n  @Prop({ mutable: true }) showItems: number = 9;\n  private _initialShowItems: number;\n\n  /** Nr of items loaded when more link is clicked */\n  @Prop() stepItems: number = 9;\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * Initial selected values.\n   * Array of objects with `label`, `href`, optionally: `dateline`, `description`, `labelClamp` and `descriptionClamp` attribute:\n   * `[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\", \"labelClamp\": { \"lines\": 2, \"linesMedium\": 1 }}]`\n   */\n  @Prop() items: StzhArchivelistItem[] | string = [];\n  private _items: StzhArchivelistItem[];\n  private _itemsShown: StzhArchivelistItem[];\n  private _showMoreLink: boolean = false;\n\n  @Element() element: HTMLStzhArchivelistElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhArchivelistItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n\n    this.showItemsWatcher(this._initialShowItems);\n  }\n\n  @Watch(\"showItems\")\n  showItemsWatcher(newValue: number) {\n    this._itemsShown = this._items.slice(0, newValue);\n    this._showMoreLink = newValue < this._items.length;\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhArchivelistItemClickEvent>;\n\n  private handleClick(item: StzhArchivelistItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-archivelist\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n  };\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"archivelist\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-archivelist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <stzh-heading level={this.headingLevel} class=\"stzh-archivelist__heading\">\n              {this.heading}\n            </stzh-heading>\n          )}\n          <div class=\"stzh-archivelist__list\" role=\"list\">\n            {this._itemsShown.map(item => (\n              <a\n                class=\"stzh-archivelist__item\"\n                role=\"listitem\"\n                href={item.href}\n                onClick={e => this.handleClick(item, e)}\n              >\n                {item.dateline && <div class=\"stzh-archivelist__dateline\">{item.dateline}</div>}\n\n                {item.label && (\n                  <div class=\"stzh-archivelist__label\">\n                    {item.labelClamp ? (\n                      <stzh-clamp {...item.labelClamp}>{item.label}</stzh-clamp>\n                    ) : (\n                      <Fragment>{item.label}</Fragment>\n                    )}\n                  </div>\n                )}\n\n                {item.description && (\n                  <div class=\"stzh-archivelist__description\">\n                    {item.descriptionClamp ? (\n                      <stzh-clamp {...item.descriptionClamp}>{item.description}</stzh-clamp>\n                    ) : (\n                      <Fragment>{item.description}</Fragment>\n                    )}\n                  </div>\n                )}\n              </a>\n            ))}\n          </div>\n\n          {this._showMoreLink && (\n            <div class=\"stzh-archivelist__actions\">\n              <stzh-button\n                variant=\"secondary\"\n                size=\"small\"\n                sizeMedium=\"default\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -30,147 +30,151 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
-}
+  decorators: [withActions, withDesign]
+};
 
 const itemsOnlyLink = [
   {
-    "label": "Lorem Ipsum Dolor",
-    "href": "#laboris"
+    label: 'Lorem Ipsum Dolor',
+    href: '#laboris'
   },
   {
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "href": "#lorem"
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    href: '#lorem'
   },
   {
-    "label": "Lorem Ipsum Dolor",
-    "href": "#lorem"
+    label: 'Lorem Ipsum Dolor',
+    href: '#lorem'
   },
   {
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "href": "#lorem"
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    href: '#lorem'
   },
   {
-    "label": "Lorem Ipsum Dolor",
-    "href": "#lorem"
+    label: 'Lorem Ipsum Dolor',
+    href: '#lorem'
   },
   {
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "href": "#lorem"
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    href: '#lorem'
   },
   {
-    "label": "Lorem Ipsum Dolor",
-    "href": "#lorem"
+    label: 'Lorem Ipsum Dolor',
+    href: '#lorem'
   }
 ];
 
 const itemsWithDescription = [
   {
-    "dateline": "1938.10.28",
-    "label": "Lorem Ipsum Dolor",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Lorem Ipsum Dolor',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#laboris",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#laboris',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Lorem Ipsum Dolor",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Lorem Ipsum Dolor',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Lorem Ipsum Dolor",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Lorem Ipsum Dolor',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   },
   {
-    "dateline": "1938.10.28",
-    "label": "Lorem Ipsum Dolor",
-    "labelClamp": {
-      "lines": "2",
-      "linesMedium": "1"
+    dateline: '1938.10.28',
+    label: 'Lorem Ipsum Dolor',
+    labelClamp: {
+      lines: '2',
+      linesMedium: '1'
     },
-    "href": "#lorem",
-    "description": "Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.",
-    "descriptionClamp": {
-      "lines": "3",
-      "linesSmall": "2",
-      "linesMedium": "1"
+    href: '#lorem',
+    description:
+      'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.',
+    descriptionClamp: {
+      lines: '3',
+      linesSmall: '2',
+      linesMedium: '1'
     }
   }
 ];
@@ -178,23 +182,26 @@ const itemsWithDescription = [
 export const OnlyLink = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    items: itemsOnlyLink
+    items: itemsOnlyLink,
+    heading: 'Lorem Ipsum Dolor',
+    headingLevel: 2
   }
 };
 
 export const OnlyLinkWithMore = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    items: [
-      ...itemsOnlyLink,
-      ...itemsOnlyLink
-    ]
+    items: [...itemsOnlyLink, ...itemsOnlyLink],
+    heading: 'Lorem Ipsum Dolor',
+    headingLevel: 2
   }
 };
 
 export const WithDescription = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    items: itemsWithDescription
+    items: itemsWithDescription,
+    heading: 'Lorem Ipsum Dolor',
+    headingLevel: 2
   }
 };