vviinn-widgets 2.7.2 → 2.8.0

package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.js

@@ -1,25 +0,0 @@
-import { Component, Host, h } from "@stencil/core";
-import { getClipValue } from "../../../../geometry/Clip";
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/function";
-import { imageSearchState } from "../../../../store/imageSearch.store";
-import { sequenceToOption } from "../../../../utils/option/option";
-export class HighlightBox {
-  getInsetValue() {
-    return pipe(sequenceToOption(imageSearchState.searchArea, imageSearchState.imageBounds), O.map(([selection, image]) => getClipValue(selection, image)), O.getOrElse(() => ""));
-  }
-  renderImage() {
-    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.imageBounds), O.map(([url, bounds]) => (h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), O.getOrElse(() => ""));
-  }
-  render() {
-    return h(Host, null, this.renderImage());
-  }
-  static get is() { return "highlight-box"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["highlight-box.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["highlight-box.css"]
-  }; }
-}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.css

@@ -1,49 +0,0 @@
-:host {
-  --size: 20px;
-
-  background: transparent;
-  border: 4px solid white;
-  box-sizing: content-box;
-  display: block;
-  height: var(--size);
-  touch-action: none;
-  position: absolute;
-  width: var(--size);
-  z-index: 4;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-:host(.disabled) {
-  opacity: 0.25;
-}
-
-:host(.nw-resize) {
-  border-bottom: none;
-  border-right: none;
-  top: 0;
-  left: 0;
-}
-
-:host(.ne-resize) {
-  border-left: none;
-  border-bottom: none;
-  right: 0;
-  top: 0;
-}
-
-:host(.sw-resize) {
-  border-right: none;
-  border-top: none;
-  left: 0;
-  bottom: 0;
-}
-
-:host(.se-resize) {
-  border-left: none;
-  border-top: none;
-  bottom: 0;
-  right: 0;
-}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js

@@ -1,64 +0,0 @@
-import { Component, Host, h, Prop } from "@stencil/core";
-import { getCursorValue } from "../../../../../cropper/Handler";
-export class CropperHandler {
-  constructor() {
-    this.disabled = false;
-  }
-  render() {
-    return (h(Host, { part: `handle ${getCursorValue(this.handler.direction)}`, class: {
-        disabled: this.disabled,
-        [getCursorValue(this.handler.direction)]: true,
-      }, style: {
-        "--size": "20px",
-        cursor: getCursorValue(this.handler.direction),
-      }, draggable: false }));
-  }
-  static get is() { return "cropper-handler"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cropper-handler.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cropper-handler.css"]
-  }; }
-  static get properties() { return {
-    "handler": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Handler",
-        "resolved": "Handler",
-        "references": {
-          "Handler": {
-            "location": "import",
-            "path": "../../../../../cropper/Handler"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}

package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.css

@@ -1,33 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-:host(.hidden) {
-  visibility: hidden;
-}
-
-.crop-area {
-  border: 1px solid white;
-  box-sizing: border-box;
-  position: absolute;
-  touch-action: none;
-  transition-property: border-color, opacity;
-  transition-duration: .25s;
-  transition-timing-function: ease-in-out;
-  z-index: 2;
-  position: relative;
-  will-change: transform;
-}
-
-.crop-area.active {
-  border-color: whitesmoke;
-}
-
-.crop-area.disabled {
-  opacity: 0.25;
-}

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

@@ -1,120 +0,0 @@
-: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

@@ -1,125 +0,0 @@
-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

@@ -1,142 +0,0 @@
-: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/dist/collection/components/vviinn-error/vviinn-empty-results/vviinn-empty-results.css

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

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

@@ -1,36 +0,0 @@
-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

@@ -1,38 +0,0 @@
-: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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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": {}
-      }
-    }]; }
-}