vviinn-widgets 2.5.0 → 2.5.2

package/dist/collection/components/image-search/search-filters/search-filters.css

@@ -0,0 +1,120 @@
+:host {
+  display: grid;
+  grid-gap: 1rem;
+}
+
+.filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.filter {
+  align-items: center;
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  -webkit-animation-name: scalein;
+          animation-name: scalein;
+  border: 1px solid lightgray;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  padding: 0.1rem;
+  transform: scale(0);
+  transition-property: background;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 6px 16px;
+}
+
+.filter.active {
+  border: 1px solid black;
+  padding: 6px 8px;
+}
+
+.filter:hover {
+  border: 1px solid gray;
+}
+
+.show-more {
+  display: flex;
+}
+
+.show-more.hidden {
+  display: none;
+}
+
+.show-more::after {
+  content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E");
+  display: block;
+  height: 16px;
+  margin-top: 1px;
+  margin-left: 8px;
+}
+
+.show-more.active::after {
+  transform: rotateX(180deg);
+}
+
+@-webkit-keyframes scalein {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scalein {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 415px) {
+  .show-more::after {
+    transform: rotate(-90deg);
+  }
+
+  .show-more.active::after {
+    transform: rotate(90deg);
+  }
+}
+
+@media (max-width: 800px) {
+  .filters {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: x mandatory;
+    grid-gap: unset;
+  }
+
+  .filter {
+    scroll-snap-align: end;
+    margin-right: 0.5rem;
+  }
+}

package/dist/collection/components/image-search/search-filters/search-filters.js

@@ -0,0 +1,125 @@
+import { Component, Host, h, Prop, State, Element, Event } from "@stencil/core";
+import { imageSearchState } from "../../../store/imageSearch.store";
+import { CheckIcon } from "../../vviinn-icons";
+const FILTERS_COUNT = 5;
+const ACTIVE_FILTER_CLASSNAME = ".filter.active";
+const getFilterId = (filter) => filter.href.split("/").reverse()[0];
+export class SearchFilters {
+  constructor() {
+    this.filter = null;
+    this.selectedCategoryId = null;
+    this.hideFilters = true;
+  }
+  handleFilterSelection(filter) {
+    return this.isFilterSelected(filter)
+      ? this.clearSelectedFilter()
+      : this.selectFilter(filter);
+  }
+  selectFilter(filter) {
+    this.selectedCategoryId = getFilterId(filter);
+    imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
+  }
+  clearSelectedFilter() {
+    this.selectedCategoryId = null;
+    imageSearchState.activeIonLink = undefined;
+    this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
+  }
+  findSelectedFilter() {
+    return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
+  }
+  toggleFilters() {
+    this.hideFilters = !this.hideFilters;
+  }
+  handleEnter(ev, f) {
+    if (ev.key !== "Enter")
+      return;
+    this.handleFilterSelection(f);
+  }
+  isFilterSelected(filterLink) {
+    return this.selectedCategoryId === getFilterId(filterLink);
+  }
+  render() {
+    return (h(Host, { exportparts: "filter, show-more-filters" },
+      h("div", { class: "filters" },
+        this.filter.filters
+          .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+          .map((f, n) => (h("div", { role: "button", tabindex: "0", part: this.isFilterSelected(f) ? "filter active" : "filter", class: {
+            filter: true,
+            active: this.selectedCategoryId === getFilterId(f),
+          }, style: { "animation-delay": `${n * 10}ms` }, onPointerUp: (ev) => {
+            ev.stopPropagation();
+            this.handleFilterSelection(f);
+          }, onKeyPress: (ev) => this.handleEnter(ev, f) },
+          this.isFilterSelected(f) ? h(CheckIcon, null) : null,
+          f.name))),
+        h("div", { class: {
+            filter: true,
+            "show-more": true,
+            hidden: this.filter.filters.length <= FILTERS_COUNT,
+            active: !this.hideFilters,
+          }, role: "button", tabindex: "0", "aria-role": "button", onClick: () => this.toggleFilters(), onKeyPress: (ev) => {
+            if (ev.key === "Enter") {
+              this.toggleFilters();
+            }
+          }, part: "show-more-filters" }, this.hideFilters ? "Zeige mehr" : "Zeige weniger"))));
+  }
+  static get is() { return "search-filters"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["search-filters.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["search-filters.css"]
+  }; }
+  static get properties() { return {
+    "filter": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SearchSessionFilter | null",
+        "resolved": "SearchSessionFilter",
+        "references": {
+          "SearchSessionFilter": {
+            "location": "import",
+            "path": "../../../searchSession/searchSession"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "selectedCategoryId": {},
+    "hideFilters": {}
+  }; }
+  static get events() { return [{
+      "method": "filterSelected",
+      "name": "filterSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FilterAction",
+        "resolved": "\"deselect\" | \"select\"",
+        "references": {
+          "FilterAction": {
+            "location": "import",
+            "path": "vviinn-tracking-client-ts"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,142 @@
+: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 {
+  fill: #525252;
+}
+
+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,15 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-c8128606.js';
-import { _ as _Array } from './Array-c4dc02db.js';
-import { c as ChevronIcon } from './index-bbcd6be9.js';
-import './NonEmptyArray-65395d97.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),.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{fill:#525252}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);
+/**
+ * @part carousel-button
+ **/
+export class VviinnCarousel {
+  constructor() {
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
@@ -189,7 +187,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() {
@@ -201,10 +199,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(), part: "carousel-button" }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, 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(), part: "carousel-button" },
+          h(ChevronIcon, null)),
+        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
+        h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" },
+          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;
+}