vviinn-widgets 2.7.2 → 2.8.0

package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js

@@ -1,195 +0,0 @@
-import { Component, Host, h, Prop, State, Listen, Element, Event, } from "@stencil/core";
-import { CameraIcon } from "../vviinn-icons";
-import { SlotSkeleton } from "../customized-slots";
-/**
- * @slot vviinn-onboarding-title
- * @slot vviinn-onboarding-card-1-icon
- * @slot vviinn-onboarding-card-1-text
- * @slot vviinn-onboarding-card-2-icon
- * @slot vviinn-onboarding-card-2-text
- * @slot vviinn-onboarding-card-3-icon
- * @slot vviinn-onboarding-card-3-text
- * @slot vviinn-example-images-title
- * @slot vviinn-example-images-1
- * @slot vviinn-example-images-2
- * @slot vviinn-example-images-3
- * @slot vviinn-example-images-4
- * @slot vviinn-teaser-text
- * @slot vviinn-image-upload-button-text
- * @slot vviinn-privacy-badge-text
- *
- * @part brand - product brand.
- * @part currency - currency sign. Renders after price-amount.
- * @part deeplink - anchor element for title. Rendered only if "deeplink" property filled.
- * @part image - product image.
- * @part image-link - anchor element for image. Rendered only if "deeplink" property filled.
- * @part price-amount - numeric part of price.
- * @part price-container - block contains all prices.
- * @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
- * @part price-prefix - renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
- * @part price-regular - renders inside price-container when "sale-price" property is empty.
- * @part price-sale - renders inside price-container when "sale-price" property filled. Contains sale price.
- * @part title - product title
- * @part example-images - example images block
- */
-export class VviinnVpsButton {
-  constructor() {
-    /** Currency sign will shown after price */
-    this.currencySign = "€";
-    /** Locale for currency formatting */
-    this.locale = "de-DE";
-    this.pressed = false;
-  }
-  handleModalClosed() {
-    this.pressed = false;
-  }
-  componentDidLoad() {
-    const slots = this.el.querySelectorAll("[slot]");
-    this.globalSlotsChanged.emit(Array.from(slots));
-  }
-  handleKeyDown(ev) {
-    if (ev.code !== "Enter" && ev.code !== "Space")
-      return;
-    this.pressed = true;
-  }
-  handleClick() {
-    this.pressed = true;
-  }
-  render() {
-    return (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) },
-      h("slot", null,
-        h(CameraIcon, null)),
-      h(SlotSkeleton, null),
-      h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images", campaignId: this.campaignId })));
-  }
-  static get is() { return "vviinn-vps-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-vps-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-vps-button.css"]
-  }; }
-  static get properties() { return {
-    "token": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "vviinn customer token"
-      },
-      "attribute": "token",
-      "reflect": false
-    },
-    "currencySign": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currency sign will shown after price"
-      },
-      "attribute": "currency-sign",
-      "reflect": false,
-      "defaultValue": "\"\u20AC\""
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Locale for currency formatting"
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "\"de-DE\""
-    },
-    "campaignId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Campaign using for visual search"
-      },
-      "attribute": "campaign-id",
-      "reflect": false
-    },
-    "apiPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
-      },
-      "attribute": "api-path",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "pressed": {}
-  }; }
-  static get events() { return [{
-      "method": "globalSlotsChanged",
-      "name": "globalSlotsChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "modalClosed",
-      "method": "handleModalClosed",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/vviinn-vps-widget/stories/vviinn-vps-widget.stories.js

@@ -1,37 +0,0 @@
-export default {
-  title: "Widgets/Visual Search/Widget",
-  parameters: {
-    viewport: {
-      defaultViewport: "mobile2",
-    },
-  },
-};
-const Template = ({ token, apiPath, campaignId }) => `
-  <vviinn-vps-widget token="${token}"
-                     api-path="${apiPath}"
-                     campaign-id="${campaignId}"
-                     active="true">
-  </vviinn-vps-widget>`;
-export const Default = Template.bind({});
-Default.args = {
-  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
-  apiPath: "https://api.vviinn.com",
-  campaignId: "",
-};
-Default.storyName = "Modal Window";
-Default.decorators = [
-  (Story) => `
-<style>
-.sb-show-main.sb-main-padded {
-  padding: unset;
-}
-
-#root {
-  align-content: center;
-  display: grid;
-  height: 100vh;
-  justify-items: center;
-}
-</style>
-${Story()}`,
-];

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css

@@ -1,350 +0,0 @@
-:host {
-  --color-primary-system: #0F62FE;
-  --color-primary-hover-system: #014CDA;
-  --color-icons-system: #2F8EDF;
-  --spacer: 8px;
-}
-
-
-:host {
-  display: block;
-}
-
-.hidden {
-  visibility: hidden;
-  height: 1px;
-}
-
-vviinn-overlayed-modal.first-screen::part(title),
-vviinn-overlayed-modal.first-screen::part(secondary-action) {
-  visibility: hidden;
-}
-
-.start-page {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  min-height: 580px;
-}
-
-.start-page_block {
-  align-content: start;
-  border-right: 1px solid #F4F4F4;
-  display: grid;
-  padding: 48px;
-}
-
-.start-page_block.error {
-  align-content: center;
-}
-
-
-#onboarding-block {
-  border-right: unset;
-  box-sizing: border-box;
-  grid-gap: 24px;
-  overflow-y: auto;
-  position: relative;
-  width: 100%;
-}
-
-vviinn-teaser {
-  margin-bottom: 32px;
-  margin-top: -24px;
-}
-
-vviinn-image-selector {
-  align-items: center;
-  background: var(--color-primary, var(--color-primary-system));
-  border-color: var(--color-primary, var(--color-primary-system));
-  border-radius: 2px;
-  color: white;
-  display: grid;
-  font-size: 16px;
-  font-weight: 600;
-  height: 56px;
-  justify-items: center;
-  margin-bottom: 16px;
-  transition: background 0.1s ease-in-out;
-}
-
-vviinn-image-selector:hover {
-  background: var(--color-primary-hover, var(--color-primary-hover-system));
-  border-color: var(--color-primary-hover, var(--color-primary-hover-system));
-}
-
-vviinn-image-selector:active {
-  border-color: black;
-}
-
-.upload-button-content {
-  display: grid;
-  align-items: center;
-  justify-items: start;
-  justify-content: center;
-  grid-template-columns: -webkit-max-content auto;
-  grid-template-columns: max-content auto;
-  grid-gap: 16px;
-}
-
-.results-page {
-  display: grid;
-  grid-template-columns: 336px auto;
-  box-sizing: border-box;
-}
-
-.results-page > * {
-  padding: 24px;
-  box-sizing: border-box;
-}
-
-.products {
-  align-content: center;
-  align-items: start;
-  box-sizing: border-box;
-  display: grid;
-  grid-gap: 32px 16px;
-  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
-  justify-items: center;
-  padding: 24px;
-  padding-right: 0;
-  position: absolute;
-  width: calc(100% - 16px);
-}
-
-.products.hidden {
-  display: none;
-}
-
-vviinn-empty-results {
-  width: 280px;
-  align-self: center;
-  justify-self: center;
-}
-
-.products-wrapper {
-  display: grid;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: unset;
-  position: relative;
-  width: 100%;
-}
-
-.image-wrapper {
-  border-right: 1px solid #F4F4F4;
-  display: grid;
-  grid-template-rows: -webkit-min-content 170px;
-  grid-template-rows: min-content 170px;
-  grid-gap: 24px;
-  min-width: 100%;
-}
-
-.onboarding-wrapper {
-  position: absolute;
-  width: 100%;
-  padding: 48px;
-  box-sizing: border-box;
-  display: grid;
-  grid-gap: 64px;
-  padding-bottom: 24px;
-}
-
-vviinn-product-card {
-  gap: 0;
-  width: 100%;
-}
-
-vviinn-product-card::part(image) {
-  border: 1px solid #eaeaea;
-  margin-bottom: 8px;
-}
-
-vviinn-product-card::part(price-container),
-vviinn-product-card::part(deeplink),
-vviinn-product-card::part(title) {
-  align-self: start;
-}
-
-search-filters span {
-  display: none;
-}
-
-search-filters::part(filter) {
-  background: #F4F4F4;
-  border-radius: 4px;
-  border: 1px solid #F4F4F4;
-  box-sizing: border-box;
-  color: #161616;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-search-filters::part(show-more-filters) {
-  border: 1px solid #f4f4f4;
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: #161616;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 16px;
-}
-
-search-filters::part(show-more-filters):hover {
-  background: #EAEAEA;
-}
-
-search-filters::part(filter):hover {
-  background: #EAEAEA;
-}
-
-search-filters::part(filter):focus {
-  outline: none;
-  border: 1px solid var(--color-primary, var(--color-primary-system));
-}
-
-search-filters::part(filter active) {
-  background: rgba(15, 98, 254, 0.15);
-  color: var(--color-primary, var(--color-primary-system));
-}
-
-.filters-wrapper {
-  overflow: auto;
-}
-
-.results-page:not(.active) {
-  display: none;
-}
-
-.nothing-found {
-  display: grid;
-  grid-gap: 64px;
-  justify-self: center;
-  padding-top: 64px;
-  padding-bottom: 16px;
-  position: absolute;
-  width: 60%;
-}
-
-@media (max-width: 768px) {
-  .start-page_block {
-    padding: 24px;
-  }
-
-  .onboarding-wrapper {
-    padding: 24px;
-  }
-}
-
-@media (max-width: 640px) {
-  .start-page {
-    grid-template-rows: -webkit-min-content;
-    grid-template-rows: min-content;
-    grid-template-columns: unset;
-    grid-gap: 48px;
-    padding: 24px 0 48px 0;
-  }
-}
-
-@media (max-width: 640px) and (min-width: 415px) {
-  .onboarding-wrapper {
-    position: unset;
-  }
-
-  #onboarding-block {
-    overflow: unset;
-  }
-
-  .start-page.active {
-    height: 1px;
-    overflow: auto;
-  }
-}
-
-@media (max-width: 415px) {
-  .results-page > * {
-    box-sizing: border-box;
-    padding: 24px;
-  }
-
-  vviinn-slide {
-    padding-bottom: 48px;
-  }
-
-  .start-page_block:last-of-type {
-    border-right: unset;
-    overflow-y: unset;
-    position: static;
-    box-sizing: border-box;
-    width: unset;
-  }
-
-  .start-page_block {
-    padding: 0 24px;
-  }
-
-  vviinn-teaser {
-    margin-top: 24px;
-  }
-
-  .onboarding-wrapper {
-    position: static;
-    width: unset;
-    padding: unset;
-    box-sizing: border-box;
-  }
-
-  .results-page {
-    grid-template-columns: unset;
-    grid-template-rows: -webkit-min-content auto;
-    grid-template-rows: min-content auto;
-  }
-
-  .image {
-    margin-bottom: 8px;
-  }
-
-  .image-wrapper {
-    grid-template-rows: -webkit-min-content auto;
-    grid-template-rows: min-content auto;
-    width: 100%;
-  }
-
-  .products-wrapper {
-    align-content: start;
-    position: static;
-    overflow-y: unset;
-    width: 100%;
-    padding-top: 0;
-  }
-
-  .products {
-    position: static;
-    padding: 0;
-    width: unset;
-    grid-gap: 32px 16px;
-    justify-content: center;
-  }
-
-  .nothing-found {
-    position: static;
-    grid-gap: 64px;
-    padding: unset;
-    align-content: start;
-    width: unset;
-  }
-} 
-
-@media (max-width: 320px) {
-  .products {
-    grid-template-columns: unset;
-  }
-}
-
-vviinn-wrong-format,
-vviinn-server-error {
-  width: 280px;
-  align-self: center;
-  justify-self: center;
-}