vviinn-widgets 2.18.21 → 2.19.0

package/dist/collection/components/vviinn-carousel/vviinn-carousel.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, State, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { chunksOf } from "fp-ts/lib/Array";
 import { ChevronIcon } from "../vviinn-icons";
 const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
@@ -10,6 +10,12 @@ const CONTENT_GROUP_CSS_CLASS = "items-group";
  **/
 export class VviinnCarousel {
   constructor() {
+    this.columns = 0;
+    this.resizeObserver = new ResizeObserver(() => this.handleResize());
+    this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
+    this.isLastGroup = () => this.activeContentGroup === this.getContentGroups().length - 1 &&
+      this.mode === "grid";
+    this.isFirstGroup = () => this.activeContentGroup === 0 && this.mode === "grid";
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
@@ -17,13 +23,10 @@ export class VviinnCarousel {
     this.mode = "continuity";
     this.imageWidth = 140;
     this.showScroll = true;
+    this.campaignTypeId = undefined;
+    this.widgetElementId = undefined;
+    this.gridArrowsDynamic = undefined;
     this.recommendations = [];
-    this.columns = 0;
-    this.resizeObserver = new ResizeObserver(() => this.handleResize());
-    this.mutationObserver = new MutationObserver(() => this.cloneSlottedContent());
-    this.isLastGroup = () => this.activeContentGroup === this.getContentGroups().length - 1 &&
-      this.mode === "grid";
-    this.isFirstGroup = () => this.activeContentGroup === 0 && this.mode === "grid";
   }
   componentWillLoad() {
     this.isRTL = document.dir === "rtl";
@@ -186,7 +189,7 @@ export class VviinnCarousel {
     return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.mode === "continuity", campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId }));
   }
   renderRecommendationGroup(elements) {
-    return (h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, elements));
+    return (h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
   }
   renderRecommendationGroups(elements) {
     return elements.map((el) => this.renderRecommendationGroup(el));
@@ -213,164 +216,167 @@ export class VviinnCarousel {
       }, onClick: () => this.scroll(index) })));
   }
   render() {
-    return (h(Host, { class: this.getClassMap() },
-      h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
-        h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() },
-          h(ChevronIcon, null)),
-        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
-        h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() },
-          h(ChevronIcon, null))),
-      this.showBullets() && (h("div", { class: "bullets" }, this.renderBullets()))));
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, h(ChevronIcon, null))), this.showBullets() && (h("div", { class: "bullets" }, this.renderBullets()))));
   }
   static get is() { return "vviinn-carousel"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-carousel.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-carousel.css"]
-  }; }
-  static get properties() { return {
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CarouselMode",
-        "resolved": "\"continuity\" | \"grid\"",
-        "references": {
-          "CarouselMode": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-carousel.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-carousel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CarouselMode",
+          "resolved": "\"continuity\" | \"grid\"",
+          "references": {
+            "CarouselMode": {
+              "location": "local",
+              "path": "/Users/egor/mediaopt/vpr_webcomponent/src/components/vviinn-carousel/vviinn-carousel.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "\"continuity\""
-    },
-    "imageWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"continuity\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "imageWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-width",
+        "reflect": false,
+        "defaultValue": "140"
       },
-      "attribute": "image-width",
-      "reflect": false,
-      "defaultValue": "140"
-    },
-    "showScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "showScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-scroll",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-scroll",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "campaignTypeId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CampaignTypeId",
-        "resolved": "\"VCS\" | \"VPR\" | \"VPS\"",
-        "references": {
-          "CampaignTypeId": {
-            "location": "import",
-            "path": "../../campaign/Campaign"
+      "campaignTypeId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CampaignTypeId",
+          "resolved": "\"VCS\" | \"VPR\" | \"VPS\"",
+          "references": {
+            "CampaignTypeId": {
+              "location": "import",
+              "path": "../../campaign/Campaign"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "campaign-type-id",
-      "reflect": false
-    },
-    "widgetElementId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "campaign-type-id",
+        "reflect": false
       },
-      "attribute": "widget-element-id",
-      "reflect": false
-    },
-    "gridArrowsDynamic": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "widgetElementId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "widget-element-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "gridArrowsDynamic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "grid-arrows-dynamic",
+        "reflect": false
       },
-      "attribute": "grid-arrows-dynamic",
-      "reflect": false
-    },
-    "recommendations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Recommendation[]",
-        "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }[]",
-        "references": {
-          "Recommendation": {
-            "location": "import",
-            "path": "../../recommendation/recommendation"
+      "recommendations": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Recommendation[]",
+          "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }[]",
+          "references": {
+            "Recommendation": {
+              "location": "import",
+              "path": "../../recommendation/recommendation"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "moveDirection": {},
-    "contentGroups": {},
-    "activeContentGroup": {},
-    "isRTL": {}
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "moveDirection": {},
+      "contentGroups": {},
+      "activeContentGroup": {},
+      "isRTL": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=vviinn-carousel.js.map

package/dist/collection/components/vviinn-carousel/vviinn-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-carousel.js","sourceRoot":"","sources":["../../../src/components/vviinn-carousel/vviinn-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop } from \"@stencil/core\";\nimport { chunksOf } from \"fp-ts/lib/Array\";\nimport { Recommendation } from \"../../recommendation/recommendation\";\nimport { ChevronIcon } from \"../vviinn-icons\";\nimport { CampaignTypeId } from \"../../campaign/Campaign\";\n\nconst COLUMNS_NUMBER_CSS_VAR = \"--vviinn-carousel-columns-internal\";\nconst CAROUSEL_WIDTH_CSS_VAR = \"--vviinn-carousel-content-width\";\nconst CAROUSEL_IMAGE_WIDTH_CSS_VAR = \"--vviinn-carousel-image-width\";\nconst CONTENT_GROUP_CSS_CLASS = \"items-group\";\n\ntype MoveDirection = \"left\" | \"right\";\nexport type CarouselMode = \"grid\" | \"continuity\";\n\n/**\n * @part carousel-button\n **/\n@Component({\n  tag: \"vviinn-carousel\",\n  styleUrl: \"vviinn-carousel.css\",\n  shadow: false,\n})\nexport class VviinnCarousel {\n  @Element() el: HTMLElement;\n\n  @State() moveDirection: MoveDirection = \"right\";\n  @State() contentGroups: HTMLElement[] = [];\n  @State() activeContentGroup: number = 0;\n  @State() isRTL: boolean = false;\n\n  @Prop() mode: CarouselMode = \"continuity\";\n  @Prop() imageWidth: number = 140;\n  @Prop() showScroll: boolean = true;\n  @Prop() campaignTypeId: CampaignTypeId;\n  @Prop() widgetElementId?: string;\n  @Prop() gridArrowsDynamic: boolean;\n\n  @Prop() recommendations: Recommendation[] = [];\n\n  private columns: number = 0;\n  private resizeObserver: ResizeObserver = new ResizeObserver(() =>\n    this.handleResize()\n  );\n\n  private mutationObserver = new MutationObserver(() =>\n    this.cloneSlottedContent()\n  );\n\n  private isLastGroup = () =>\n    this.activeContentGroup === this.getContentGroups().length - 1 &&\n    this.mode === \"grid\";\n\n  private isFirstGroup = () =>\n    this.activeContentGroup === 0 && this.mode === \"grid\";\n\n  componentWillLoad() {\n    this.isRTL = document.dir === \"rtl\";\n  }\n\n  connectedCallback() {\n    this.setItemWidth();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  componentDidLoad() {\n    this.setWidth();\n    this.processScrollbarWidth();\n    this.columns = this.getColumnsNumber();\n    const slot = this.el.querySelector(\".content\");\n\n    this.mutationObserver.observe(slot, { subtree: true, childList: true });\n    this.resizeObserver.observe(this.getHostParent());\n  }\n\n  private getItemWidthFromDocument(): number {\n    return parseInt(\n      getComputedStyle(document.body).getPropertyValue(\n        CAROUSEL_IMAGE_WIDTH_CSS_VAR\n      )\n    );\n  }\n\n  private setItemWidth() {\n    const widthInDocument = this.getItemWidthFromDocument();\n    const itemWidth = isNaN(widthInDocument)\n      ? this.imageWidth\n      : widthInDocument;\n\n    this.el.style.setProperty(CAROUSEL_IMAGE_WIDTH_CSS_VAR, `${itemWidth}px`);\n  }\n\n  private getContentClassMap() {\n    return {\n      content: true,\n      [this.moveDirection]: true,\n      [this.mode]: true,\n      \"show-scrollbar\": this.showScroll,\n    };\n  }\n\n  private handleResize() {\n    this.setWidth();\n    this.processScrollbarWidth();\n    this.setItemWidth();\n\n    const newColumns = this.getColumnsNumber();\n\n    if (newColumns !== this.columns) {\n      this.columns = newColumns;\n    }\n  }\n\n  private calculateMoveStep() {\n    const contentWidths = this.getContent().map(\n      (el) => el.getBoundingClientRect().width\n    );\n    const sum = contentWidths.reduce((acc, val) => acc + val, 0);\n\n    return sum / contentWidths.length;\n  }\n\n  private getHostParent(): Element {\n    const parent = this.el.parentNode as any;\n    return parent.host.parentElement;\n  }\n\n  private setWidth() {\n    const parent = this.getHostParent();\n\n    if (!parent) return;\n\n    const parentStyles = getComputedStyle(parent);\n    const parentWidth = parent.getBoundingClientRect().width;\n    const width =\n      parentWidth -\n      (parseInt(parentStyles[\"padding-right\"]) +\n        parseInt(parentStyles[\"padding-left\"]));\n\n    this.el.style.setProperty(CAROUSEL_WIDTH_CSS_VAR, `${width}px`);\n  }\n\n  getParent(): HTMLElement {\n    const parentNode: any = this.el.parentNode;\n    const host = parentNode.host;\n    return host.parentElement as HTMLElement;\n  }\n\n  private cloneSlottedContent() {\n    this.setWidth();\n  }\n\n  private getActiveGroupIndex(): number {\n    const contentNodeLeft =\n      this.getContentNode()?.getBoundingClientRect()?.left;\n\n    if (!contentNodeLeft) return 0;\n\n    const groups = this.getContentGroups();\n    const groupsPositions = groups.map((g) => g.getBoundingClientRect().left);\n\n    const indexedPositions = groupsPositions\n      .map((value: number, index: number) => [value, index])\n      .filter((x) => x[0] >= 0);\n\n    return indexedPositions.length > 0\n      ? this.isRTL\n        ? indexedPositions[indexedPositions.length - 1][1]\n        : indexedPositions[0][1]\n      : 0;\n  }\n\n  private getContentNode(): HTMLElement {\n    return this.el.querySelector(\".content\");\n  }\n\n  private getContent(): HTMLElement[] {\n    const children = this.getContentNode().children;\n    return Array.from(children).map((c) => c as HTMLElement);\n  }\n\n  private getColumnsNumber(): number {\n    const styleSheet = getComputedStyle(this.el);\n    const columnsInCss = styleSheet.getPropertyValue(COLUMNS_NUMBER_CSS_VAR);\n    const columnsNumber = parseInt(columnsInCss);\n    return columnsNumber && !isNaN(columnsNumber) ? columnsNumber : 4;\n  }\n\n  private getContentGroups(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll(`.${CONTENT_GROUP_CSS_CLASS}`));\n  }\n\n  private showNext() {\n    this.moveDirection = \"right\";\n    const contentContainer = this.getContentNode();\n\n    requestAnimationFrame(() => {\n      contentContainer.scrollTo({\n        top: 0,\n        left: contentContainer.scrollLeft + this.calculateMoveStep(),\n        behavior: \"smooth\",\n      });\n    });\n  }\n\n  private showPrev() {\n    this.moveDirection = \"left\";\n    const contentContainer = this.getContentNode();\n\n    requestAnimationFrame(() => {\n      contentContainer.scrollTo({\n        top: 0,\n        left: contentContainer.scrollLeft - this.calculateMoveStep(),\n        behavior: \"smooth\",\n      });\n    });\n  }\n\n  private scroll(index: number) {\n    const contentContainer = this.getContentNode();\n\n    requestAnimationFrame(() => {\n      contentContainer.scrollTo({\n        top: 0,\n        left: this.calculateMoveStep() * index,\n        behavior: \"smooth\",\n      });\n    });\n  }\n\n  private processScrollbarWidth() {\n    const target = this.getContentNode();\n    if (!target) return;\n    const scrollRatio =\n      (target.scrollLeft + target.clientWidth) / target.scrollWidth;\n    const scrolledWidth = target.clientWidth * scrollRatio;\n\n    this.el.style.setProperty(\n      \"--vviinn-progressbar-width\",\n      `${scrolledWidth}px`\n    );\n\n    this.activeContentGroup = this.getActiveGroupIndex();\n  }\n\n  private showBullets(): boolean {\n    return this.mode === \"grid\" && this.showScroll;\n  }\n\n  private showScrollbar(): boolean {\n    return this.mode === \"continuity\" && this.showScroll;\n  }\n\n  private getClassMap() {\n    return {\n      [this.mode]: true,\n      \"show-scrollbar\": this.showScrollbar(),\n    };\n  }\n\n  private renderRecommendation(\n    recommendation: Recommendation,\n    rank: number\n  ): HTMLVviinnProductCardElement {\n    return (\n      <vviinn-product-card\n        part=\"product-part\"\n        productId={recommendation.productId}\n        productTitle={recommendation.title}\n        deeplink={recommendation.deeplink}\n        image={recommendation.image.thumbnail}\n        brand={recommendation.brand}\n        imageWidth={this.imageWidth}\n        imageRatio={1}\n        price={recommendation.price.actual}\n        salePrice={recommendation.price.sale}\n        responsive={this.mode === \"grid\"}\n        dimmedBackground={this.mode === \"continuity\"}\n        campaignTypeId={this.campaignTypeId}\n        index={rank}\n        widgetElementId={this.widgetElementId}\n      />\n    );\n  }\n\n  private renderRecommendationGroup(elements: HTMLVviinnProductCardElement[]) {\n    return (\n      <div class={CONTENT_GROUP_CSS_CLASS} part=\"items-group\">\n        {...elements}\n      </div>\n    );\n  }\n\n  private renderRecommendationGroups(\n    elements: HTMLVviinnProductCardElement[][]\n  ) {\n    return elements.map((el) => this.renderRecommendationGroup(el));\n  }\n\n  private renderRecommendations() {\n    return this.mode === \"grid\"\n      ? this.renderGrid()\n      : this.renderRecommendationsElements();\n  }\n\n  private renderRecommendationsElements(): HTMLVviinnProductCardElement[] {\n    return this.recommendations.map((r, i) => this.renderRecommendation(r, i));\n  }\n\n  private renderGrid() {\n    const recommendations = this.renderRecommendationsElements();\n    const grouppedContent = chunksOf(this.getColumnsNumber())(recommendations);\n\n    return this.renderRecommendationGroups(grouppedContent);\n  }\n\n  private renderBullets() {\n    const numberOfBullets = Math.ceil(\n      this.recommendations.length / this.getColumnsNumber()\n    );\n\n    const bulletsArray = Array.from(Array(numberOfBullets).keys());\n\n    return bulletsArray.map((index) => (\n      <div\n        class={{\n          bullet: true,\n          active: this.activeContentGroup === index,\n        }}\n        onClick={() => this.scroll(index)}\n      />\n    ));\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassMap()}>\n        <div class={{ body: true, ...this.getClassMap() }}>\n          <button\n            class=\"prev\"\n            onClick={() => this.showPrev()}\n            part=\"carousel-button\"\n            disabled={this.gridArrowsDynamic && this.isFirstGroup()}\n          >\n            <ChevronIcon />\n          </button>\n\n          <div\n            class={this.getContentClassMap()}\n            onScroll={() => this.processScrollbarWidth()}\n          >\n            {this.renderRecommendations()}\n          </div>\n\n          <button\n            class=\"next\"\n            onClick={() => this.showNext()}\n            part=\"carousel-button\"\n            disabled={this.gridArrowsDynamic && this.isLastGroup()}\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n        {this.showBullets() && (\n          <div class=\"bullets\">{this.renderBullets()}</div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js

@@ -1,20 +1,19 @@
-import { Component, Host, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnEmptyResults {
   render() {
-    return (h(Host, null,
-      h("vviinn-error", null,
-        h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-          h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }),
-          h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })),
-        h("h4", { slot: "title" }, "Leider nichts gefunden"),
-        h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
+    return (h(Host, null, h("vviinn-error", null, h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), h("h4", { slot: "title" }, "Leider nichts gefunden"), h("span", { slot: "text" }, "Leider konnten wir keine passenden Produkte finden. Bitte versuche es mit einem anderen Bildausschnitt noch einmal."))));
   }
   static get is() { return "vviinn-empty-results"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-empty-results.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-empty-results.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-empty-results.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-empty-results.css"]
+    };
+  }
 }
+//# sourceMappingURL=vviinn-empty-results.js.map

package/dist/collection/components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-empty-results.js","sourceRoot":"","sources":["../../../../src/components/vviinn-error/vviinn-empty-results/vviinn-empty-results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;EAC7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH;QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;UAElC,YACE,CAAC,EAAC,kFAAkF,EACpF,IAAI,EAAC,SAAS,GACd;UACF,YACE,CAAC,EAAC,6DAA6D,EAC/D,IAAI,EAAC,SAAS,GACd,CACE;QACN,UAAI,IAAI,EAAC,OAAO,6BAA4B;QAC5C,YAAM,IAAI,EAAC,MAAM,0HAGV,CACM,CACV,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"vviinn-empty-results\",\n  styleUrl: \"vviinn-empty-results.css\",\n  shadow: true,\n})\nexport class VviinnEmptyResults {\n  render() {\n    return (\n      <Host>\n        <vviinn-error>\n          <svg\n            slot=\"icon\"\n            class=\"icon\"\n            width=\"32\"\n            height=\"32\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z\"\n              fill=\"#525252\"\n            />\n            <path\n              d=\"M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z\"\n              fill=\"#525252\"\n            />\n          </svg>\n          <h4 slot=\"title\">Leider nichts gefunden</h4>\n          <span slot=\"text\">\n            Leider konnten wir keine passenden Produkte finden. Bitte versuche\n            es mit einem anderen Bildausschnitt noch einmal.\n          </span>\n        </vviinn-error>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-error/vviinn-error.js

@@ -1,18 +1,19 @@
-import { Component, Host, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnError {
   render() {
-    return (h(Host, null,
-      h("slot", { name: "icon" }),
-      h("slot", { name: "title" }),
-      h("slot", { name: "text" }),
-      h("slot", { name: "action" })));
+    return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
   }
   static get is() { return "vviinn-error"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-error.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-error.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-error.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-error.css"]
+    };
+  }
 }
+//# sourceMappingURL=vviinn-error.js.map

package/dist/collection/components/vviinn-error/vviinn-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-error.js","sourceRoot":"","sources":["../../../src/components/vviinn-error/vviinn-error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,MAAM,GAAQ;MACzB,YAAM,IAAI,EAAC,OAAO,GAAQ;MAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;MACzB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"vviinn-error\",\n  styleUrl: \"vviinn-error.css\",\n  shadow: true,\n})\nexport class VviinnError {\n  render() {\n    return (\n      <Host>\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <slot name=\"action\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-error/vviinn-server-error/vviinn-server-error.js

@@ -1,39 +1,45 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnServerError {
+  constructor() {
+    this.handler = undefined;
+  }
   render() {
-    return (h(Host, null,
-      h("vviinn-error", null,
-        h("h4", { slot: "title" }, "Keine Verbindung"),
-        h("span", { slot: "text" }, "Etwas hat leider nicht funktioniert. Bitte pr\u00FCfen Sie Ihre Internetverbindung und laden Sie das Bild noch einmal hoch."),
-        h("button", { slot: "action", onClick: this.handler }, "Erneut versuchen"))));
+    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Keine Verbindung"), h("span", { slot: "text" }, "Etwas hat leider nicht funktioniert. Bitte pr\u00FCfen Sie Ihre Internetverbindung und laden Sie das Bild noch einmal hoch."), h("button", { slot: "action", onClick: this.handler }, "Erneut versuchen"))));
   }
   static get is() { return "vviinn-server-error"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-server-error.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-server-error.css"]
-  }; }
-  static get properties() { return {
-    "handler": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "VoidFunction",
-        "resolved": "VoidFunction",
-        "references": {
-          "VoidFunction": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-server-error.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-server-error.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "handler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VoidFunction",
+          "resolved": "VoidFunction",
+          "references": {
+            "VoidFunction": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
+    };
+  }
 }
+//# sourceMappingURL=vviinn-server-error.js.map

package/dist/collection/components/vviinn-error/vviinn-server-error/vviinn-server-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-server-error.js","sourceRoot":"","sources":["../../../../src/components/vviinn-error/vviinn-server-error/vviinn-server-error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;;;EAG5B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH;QACE,UAAI,IAAI,EAAC,OAAO,uBAAsB;QACtC,YAAM,IAAI,EAAC,MAAM,kIAGV;QACP,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,uBAElC,CACI,CACV,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"vviinn-server-error\",\n  styleUrl: \"vviinn-server-error.css\",\n  shadow: true,\n})\nexport class VviinnServerError {\n  @Prop() handler: VoidFunction;\n\n  render() {\n    return (\n      <Host>\n        <vviinn-error>\n          <h4 slot=\"title\">Keine Verbindung</h4>\n          <span slot=\"text\">\n            Etwas hat leider nicht funktioniert. Bitte prüfen Sie Ihre\n            Internetverbindung und laden Sie das Bild noch einmal hoch.\n          </span>\n          <button slot=\"action\" onClick={this.handler}>\n            Erneut versuchen\n          </button>\n        </vviinn-error>\n      </Host>\n    );\n  }\n}\n"]}