vviinn-widgets 2.18.21 → 2.19.1

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,166 @@ 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"; }
 }

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

@@ -1,20 +1,18 @@
-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"]
+    };
+  }
 }

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

@@ -1,18 +1,18 @@
-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"]
+    };
+  }
 }

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

@@ -1,39 +1,44 @@
-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": ""
       }
-    }
-  }; }
+    };
+  }
 }

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

@@ -1,39 +1,44 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnWrongFormat {
+  constructor() {
+    this.handler = undefined;
+  }
   render() {
-    return (h(Host, null,
-      h("vviinn-error", null,
-        h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"),
-        h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."),
-        h("button", { slot: "action", onClick: this.handler }, "Neues Bild hochladen"))));
+    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), h("button", { slot: "action", onClick: this.handler }, "Neues Bild hochladen"))));
   }
   static get is() { return "vviinn-wrong-format"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-wrong-format.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-wrong-format.css"]
-  }; }
-  static get properties() { return {
-    "handler": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "VoidFunction",
-        "resolved": "VoidFunction",
-        "references": {
-          "VoidFunction": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-wrong-format.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-wrong-format.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": ""
       }
-    }
-  }; }
+    };
+  }
 }