vviinn-widgets 2.1.0 → 2.2.2

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

@@ -0,0 +1,138 @@
+:host {
+  --vviinn-progressbar-width: 0;
+  --vviinn-carousel-item-width: 150px;
+  --vviinn-carousel-columns-internal: var(--vviinn-carousel-columns, 4);
+  --vviinn-carousel-image-width-system: 140px;
+}
+
+.body {
+  display: flex;
+  position: relative;
+  width: var(--vviinn-carousel-content-width);
+  flex-direction: column;
+}
+
+.content-wrapper * {
+  box-sizing: border-box;
+}
+
+.content-wrapper {
+  overflow-y: hidden;
+  overflow-x: auto;
+  flex-grow: 1;
+}
+
+.bullets {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 24px;
+  justify-content: center;
+}
+
+.bullet {
+  width: 10px;
+  height: 10px;
+  background: #E0E0E0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.bullet.active {
+  background: #161616;
+}
+
+.content:not(.show-scrollbar),
+.content.grid {
+  scrollbar-color: #fff0 #fff0;
+}
+
+.content:not(.show-scrollbar)::-webkit-scrollbar,
+.content.grid::-webkit-scrollbar {
+  opacity: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  -ms-scroll-snap-type: x mandatory;
+      scroll-snap-type: x mandatory;
+  overflow-y: hidden;
+  overflow-x: auto;
+  flex-grow: 1;
+  padding-bottom: 16px;
+}
+
+.content.left > * {
+  scroll-snap-align: start;
+}
+
+.content.right > * {
+  scroll-snap-align: end;
+}
+
+:host(.continuity) button {
+  border-radius: 2px;
+}
+
+:host(.grid) button {
+  border-radius: 50%;
+}
+
+button {
+  align-items: center;
+  background-color: white;
+  border: none;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  display: grid;
+  height: 40px;
+  justify-items: center;
+  position: absolute;
+  top: calc(50% - 20px);
+  width: 40px;
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+}
+
+button.prev svg {
+  transform: rotate(180deg);
+  margin-left: -5px;
+}
+
+.prev {
+  left: 0;
+}
+
+.next {
+  right: 0;
+}
+
+.items-group {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(var(--vviinn-carousel-columns-internal), 1fr);
+  min-width: 100%;
+}
+
+vviinn-product-card::part(price-container) {
+  text-align: center;
+}
+
+:host(.classic) vviinn-product-card::part(title),
+:host(.classic) vviinn-product-card::part(brand),
+:host(.classic) vviinn-product-card::part(type) {
+  text-align: center;
+}
+
+@media(max-width: 480px) {
+  :host(.modern) button {
+    display: none;
+  }
+
+  .items-group {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

package/{www/build/vviinn-carousel.entry.js → dist/collection/components/vviinn-carousel/vviinn-carousel.js}

@@ -1,17 +1,12 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-b6d739a9.js';
-import { _ as _Array } from './Array-4b9f84cf.js';
-import { a as ChevronIcon } from './index-c9483145.js';
-import './NonEmptyArray-6ef0d207.js';
-
-const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar){scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
-
+import { Component, Host, h, Element, State, Prop } from "@stencil/core";
+import { chunksOf } from "fp-ts/lib/Array";
+import { ChevronIcon } from "../vviinn-icons";
 const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
-let VviinnCarousel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+export class VviinnCarousel {
+  constructor() {
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
@@ -84,6 +79,11 @@ let VviinnCarousel = class {
         parseInt(parentStyles["padding-left"]));
     this.el.style.setProperty(CAROUSEL_WIDTH_CSS_VAR, `${width}px`);
   }
+  getParent() {
+    const parentNode = this.el.parentNode;
+    const host = parentNode.host;
+    return host.parentElement;
+  }
   cloneSlottedContent() {
     this.setWidth();
   }
@@ -184,7 +184,7 @@ let VviinnCarousel = class {
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();
-    const grouppedContent = _Array.chunksOf(this.getColumnsNumber())(recommendations);
+    const grouppedContent = chunksOf(this.getColumnsNumber())(recommendations);
     return this.renderRecommendationGroups(grouppedContent);
   }
   renderBullets() {
@@ -196,10 +196,107 @@ let VviinnCarousel = class {
       }, 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() }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext() }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
-  }
-  get el() { return getElement(this); }
-};
-VviinnCarousel.style = vviinnCarouselCss;
-
-export { VviinnCarousel as vviinn_carousel };
+    return (h(Host, { class: this.getClassMap() },
+      h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
+        h("button", { class: "prev", onClick: () => this.showPrev() },
+          h(ChevronIcon, null)),
+        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
+        h("button", { class: "next", onClick: () => this.showNext() },
+          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"
+          }
+        }
+      },
+      "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": "image-width",
+      "reflect": false,
+      "defaultValue": "140"
+    },
+    "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"
+    },
+    "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": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,7 @@
+:host {
+  display: grid;
+}
+
+vviinn-error {
+  justify-items: center;
+}

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

@@ -0,0 +1,36 @@
+import { Component, Host, h, Event } 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."))));
+  }
+  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 events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,38 @@
+:host {
+  background: #F4F4F4;
+  border-radius: 8px;
+  display: grid;
+  grid-gap: 20px;
+  padding: 24px;
+  text-align: center;
+}
+
+::slotted(svg) {
+  display: grid;
+  align-self: center;
+}
+
+::slotted(h4) {
+  margin: unset;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+::slotted(span) {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+::slotted(button) {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-primary, var(--color-primary-system));
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+}

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

@@ -0,0 +1,18 @@
+import { Component, 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" })));
+  }
+  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"]
+  }; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,34 @@
+import { Component, Host, h, Event } from "@stencil/core";
+export class VviinnServerError {
+  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.actionClick.emit() }, "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 events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,34 @@
+import { Component, Host, h, Event } from "@stencil/core";
+export class VviinnWrongFormat {
+  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.actionClick.emit() }, "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 events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.css

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  cursor: pointer;
+}
+
+.image-preloader {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  bottom: 12px;
+  display: none;
+  padding: 4px 6px;
+  pointer-events: none;
+  position: absolute;
+  right: 12px;
+  z-index: 4;
+}
+
+vviinn-preloader {
+  --preloader-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .image-preloader {
+    display: block;
+  }
+}
+

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js

@@ -0,0 +1,129 @@
+import { Component, Host, h, Prop, Event, State, } from "@stencil/core";
+import { pipe } from "fp-ts/lib/function";
+import { toFile } from "../../../Image/toFile";
+import { imageSearchState, processSelectedFile, } from "../../../store/imageSearch.store";
+import * as E from "fp-ts/lib/Either";
+export class VviinnExampleImage {
+  constructor() {
+    this.src = "";
+    this.width = 0;
+    this.height = 0;
+    this.selected = false;
+  }
+  async selectImage(_event) {
+    this.selected = true;
+    const file = await toFile(this.src);
+    const processResult = await processSelectedFile(file);
+    pipe(processResult, E.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
+    this.selected = false;
+  }
+  showPreloader() {
+    return ((imageSearchState.objectDetectionInProgress ||
+      imageSearchState.loading) &&
+      this.selected);
+  }
+  render() {
+    return (h(Host, null,
+      this.showPreloader() ? (h("div", { class: "image-preloader" },
+        h("vviinn-preloader", null))) : null,
+      h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
+  }
+  static get is() { return "vviinn-example-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-example-image.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-example-image.css"]
+  }; }
+  static get properties() { return {
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "src",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "selected": {}
+  }; }
+  static get events() { return [{
+      "method": "exampleImageSelected",
+      "name": "exampleImageSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "exampleImageError",
+      "name": "exampleImageError",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/vviinn-example-images/vviinn-example-images.css

@@ -0,0 +1,19 @@
+:host {
+}
+
+h3 {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 32px;
+  margin: 0;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.images {
+  display: block;
+  -moz-column-count: 2;
+       column-count: 2;
+  -moz-column-gap: 16px;
+       column-gap: 16px;  
+}