vviinn-widgets 2.18.21 → 2.19.0

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-product-card.js","sourceRoot":"","sources":["../../../src/components/vviinn-product-card/vviinn-product-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n} from \"@stencil/core\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport { getAnalyticsModule } from \"../../analytics/GeneralAnalytics\";\nimport { state } from \"../../store/store\";\nimport * as O from \"fp-ts/lib/Option\";\nimport { imageSearchState } from \"../../store/imageSearch.store\";\nimport { Recommendation } from \"../../recommendation/recommendation\";\nimport {\n  ImageProps,\n  Linked,\n  Price,\n  ResponsiveImage,\n  Image,\n} from \"./render-helpers\";\nimport { ProductCardEventData } from \"../../recommendation/events\";\n\nimport styles from \"./vviinn-product-card.css\";\nimport {\n  CampaignTypeId,\n  WidgetType,\n  campaignTypeNames,\n} from \"../../campaign/Campaign\";\n\n/**\n * @part brand - product brand.\n * @part currency - currency sign. Renders after price-amount.\n * @part deeplink - anchor element for title. Rendered only if \"deeplink\" property filled.\n * @part image - product image.\n * @part image-link - anchor element for image. Rendered only if \"deeplink\" property filled.\n * @part price-amount-sale - numeric part of price.\n * @part price-amount-outdated - numeric part of price.\n * @part price-amount-regular - numeric part of price.\n * @part price-container - block contains all prices.\n * @part price-outdated - renders inside price-container when \"sale-price\" property filled. Contains regular price.\n * @part price-regular - renders inside price-container when \"sale-price\" property is empty.\n * @part price-sale - renders inside price-container when \"sale-price\" property filled. Contains sale price.\n * @part price-prefix - renders before price-amount. Can be set with \"price-prefix\" property or inherited from parent component.\n * @part title - product title\n */\n@Component({\n  tag: \"vviinn-product-card\",\n  shadow: true,\n  styles,\n})\nexport class VviinnProductCard {\n  @Element() el: HTMLElement;\n  @Prop() brand: string | undefined;\n  @Prop() currency: string | undefined = undefined;\n  @Prop() deeplink: string | undefined;\n  @Prop() image: string | undefined;\n  @Prop() imageRatio: number = 1;\n  @Prop() imageWidth: number = 200;\n  @Prop() locale: string | undefined = undefined;\n  @Prop() price: number | undefined;\n  @Prop() pricePrefix: string | undefined = undefined;\n  @Prop() productId: string;\n  @Prop() productTitle: string;\n  @Prop() productType: string | undefined;\n  @Prop() salePrice: number | undefined;\n  @Prop() responsive: boolean = false;\n  @Prop() campaignTypeId: CampaignTypeId;\n  @Prop() dimmedBackground: boolean = false;\n  /** @internal */\n  @Prop() widgetElementId?: string;\n  /** @internal */\n  @Prop() buttonElementId?: string;\n\n  /** @internal */\n  @Prop() index: number = 0;\n\n  @State() imageLoaded: boolean = false;\n\n  /** Event fires ones when recommendation rendered on page */\n  @Event({ bubbles: true })\n  vviinnProductLoad: EventEmitter<ProductCardEventData>;\n  /** Event fires ones when recommendation appears on the viewport */\n  @Event({ bubbles: true })\n  vviinnProductView: EventEmitter<ProductCardEventData>;\n  /** Event fires ones when user click on deeplink */\n  @Event({ bubbles: true })\n  vviinnProductClick: EventEmitter<ProductCardEventData>;\n\n  private productData: ProductCardEventData | null = null;\n\n  private intersectionObserver = new IntersectionObserver(\n    this.intersectionCallback.bind(this),\n    { threshold: 1.0 }\n  );\n\n  connectedCallback() {\n    this.productData = this.getProductData();\n  }\n\n  private getWidgetType() {\n    return this.campaignTypeId === \"VPR\" || this.campaignTypeId === \"VCS\"\n      ? (\"VPR\" as WidgetType)\n      : (\"VPS\" as WidgetType);\n  }\n\n  private getProductData() {\n    return {\n      productId: this.productId,\n      productRank: this.index,\n      productName: this.productTitle,\n      widgetType: this.getWidgetType(),\n      campaignTypeId: this.campaignTypeId,\n      campaignTypeName: campaignTypeNames[this.campaignTypeId],\n      widgetId: this.buttonElementId ?? this.widgetElementId,\n    };\n  }\n\n  private intersectionCallback(data: IntersectionObserverEntry[]) {\n    if (data.some((entry) => entry.isIntersecting)) {\n      pipe(\n        getAnalyticsModule,\n        O.map((analytics) => analytics.sendImpression(this.getProduct()))\n      );\n\n      this.vviinnProductView.emit(this.productData);\n      this.intersectionObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.vviinnProductLoad.emit(this.productData);\n    this.intersectionObserver.observe(this.el);\n\n    const links = this.el.shadowRoot.querySelectorAll(\"a\");\n\n    links.forEach((link) =>\n      link.addEventListener(\"click\", (event) => {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        this.vviinnProductClick.emit(this.productData);\n\n        pipe(\n          getAnalyticsModule,\n          O.match(\n            () => null,\n            (analytics) => analytics.sendClick(this.getProduct())\n          )\n        );\n      })\n    );\n  }\n\n  private getProduct(): Recommendation {\n    return imageSearchState.results.find((r) => r.productId === this.productId);\n  }\n\n  private renderImage() {\n    const props: ImageProps = {\n      width: this.imageWidth,\n      height: this.imageWidth * this.imageRatio,\n      src: this.image,\n      title: this.productTitle,\n      lazy: false,\n    };\n\n    return this.responsive ? ResponsiveImage(props) : Image(props);\n  }\n\n  render() {\n    return (\n      <Host\n        part=\"product-card\"\n        class={{ dimmed: this.dimmedBackground }}\n        exportparts=\"brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title\"\n      >\n        <Linked deeplink={this.deeplink} part=\"image-link\">\n          {this.renderImage()}\n        </Linked>\n        <Linked deeplink={this.deeplink} part=\"deeplink\">\n          <span class=\"title\" part=\"title\">\n            {this.productTitle}\n          </span>\n        </Linked>\n        <span class=\"brand\" part=\"brand\">\n          {this.brand}\n        </span>\n        <span class=\"type\" part=\"type\">\n          {this.productType}\n        </span>\n        <Price\n          prefix={this.pricePrefix ?? state.pricePrefix}\n          currency={this.currency ?? state.currencySign}\n          price={this.price}\n          salePrice={this.salePrice}\n          locale={this.locale ?? state.locale}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-slider/arrow.js

@@ -7,5 +7,5 @@ const getStyleMap = (data) => {
     disabled: data.disabled,
   };
 };
-export const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
-  h(ArrowIcon, null)));
+export const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown }, h(ArrowIcon, null)));
+//# sourceMappingURL=arrow.js.map

package/dist/collection/components/vviinn-slider/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","sourceRoot":"","sources":["../../../src/components/vviinn-slider/arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAY5C,MAAM,WAAW,GAAG,CAClB,IAAwB,EACU,EAAE;EACpC,OAAO;IACL,eAAe,EAAE,IAAI;IACrB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;IACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;GACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAmC,CAAC,EACpD,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS;EAEpB,EAAC,SAAS,OAAG,CACT,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\nimport { ArrowIcon } from \"../vviinn-icons\";\n\nexport type ArrowKind = \"prev\" | \"next\";\n\ntype ArrowProp = {\n  kind: ArrowKind;\n  tabindex: number;\n  disabled: boolean;\n  onClick: () => void;\n  onKeyDown: (ev: KeyboardEvent) => void;\n};\n\nconst getStyleMap = (\n  data: Partial<ArrowProp>\n): { [className: string]: boolean } => {\n  return {\n    \"arrow-wrapper\": true,\n    [data.kind]: true,\n    disabled: data.disabled,\n  };\n};\n\nexport const Arrow: FunctionalComponent<ArrowProp> = ({\n  kind,\n  tabindex,\n  disabled,\n  onClick,\n  onKeyDown,\n}) => (\n  <div\n    class={getStyleMap({ kind, disabled })}\n    onClick={onClick}\n    tabindex={tabindex}\n    onKeyDown={onKeyDown}\n  >\n    <ArrowIcon />\n  </div>\n);\n"]}

package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js

@@ -1,15 +1,19 @@
-import { Component, Host, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnSlide {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "vviinn-slide"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-slide.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-slide.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-slide.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-slide.css"]
+    };
+  }
 }
+//# sourceMappingURL=vviinn-slide.js.map

package/dist/collection/components/vviinn-slider/vviinn-slide/vviinn-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-slide.js","sourceRoot":"","sources":["../../../../src/components/vviinn-slider/vviinn-slide/vviinn-slide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"vviinn-slide\",\n  styleUrl: \"vviinn-slide.css\",\n  shadow: true,\n})\nexport class VviinnSlide {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -32,7 +32,6 @@
 .controls {
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(var(--num-items), -webkit-min-content);
   grid-template-columns: repeat(var(--num-items), min-content);
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, State, Prop, Watch } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { range } from "fp-ts/lib/NonEmptyArray";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
@@ -100,91 +100,97 @@ export class VviinnSlider {
     }));
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "items-wrapper" },
-        h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) },
-          h("slot", null))),
-      this.showArrows
-        ? [
-          h(Arrow, { kind: "prev", onClick: () => this.isRTL ? this.nextSlide() : this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
-          h(Arrow, { kind: "next", onClick: () => this.isRTL ? this.prevSlide() : this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
-        ]
-        : null,
-      this.renderBullets()));
+    return (h(Host, null, h("div", { class: "items-wrapper" }, h("div", { class: "items", onTouchStart: (e) => this.handleTouchStart(e), onTouchEnd: (e) => this.handleTouchEnd(e) }, h("slot", null))), this.showArrows
+      ? [
+        h(Arrow, { kind: "prev", onClick: () => this.isRTL ? this.nextSlide() : this.prevSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 1, disabled: false }),
+        h(Arrow, { kind: "next", onClick: () => this.isRTL ? this.prevSlide() : this.nextSlide(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: 0, disabled: false }),
+      ]
+      : null, this.renderBullets()));
   }
   static get is() { return "vviinn-slider"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-slider.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-slider.css"]
-  }; }
-  static get properties() { return {
-    "showBullets": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-slider.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "showBullets": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-bullets",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "position": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "show-bullets",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "position": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "showArrows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-arrows",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "elementsCount": {},
-    "internalPosition": {},
-    "swipeStartPosition": {},
-    "isRTL": {}
-  }; }
+      "showArrows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-arrows",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "elementsCount": {},
+      "internalPosition": {},
+      "swipeStartPosition": {},
+      "isRTL": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "position",
-      "methodName": "positionWatchHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "position",
+        "methodName": "positionWatchHandler"
+      }];
+  }
 }
+//# sourceMappingURL=vviinn-slider.js.map

package/dist/collection/components/vviinn-slider/vviinn-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-slider.js","sourceRoot":"","sources":["../../../src/components/vviinn-slider/vviinn-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch } from \"@stencil/core\";\nimport { range } from \"fp-ts/lib/NonEmptyArray\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport * as O from \"fp-ts/lib/Option\";\nimport * as N from \"fp-ts/number\";\nimport { sequenceToOption } from \"../../utils/option/option\";\nimport { Arrow } from \"./arrow\";\n\n@Component({\n  tag: \"vviinn-slider\",\n  styleUrl: \"vviinn-slider.css\",\n  shadow: true,\n})\nexport class VviinnSlider {\n  @Element() el: HTMLElement;\n\n  @State() elementsCount: number = 0;\n  @State() internalPosition: number = 0;\n  @State() swipeStartPosition: O.Option<number> = O.none;\n  @State() isRTL: boolean = false;\n\n  @Prop() showBullets: boolean = true;\n  @Prop({ reflect: true }) position: number = 0;\n  @Prop() showArrows: boolean = false;\n\n  @Watch(\"position\")\n  positionWatchHandler(newValue: number) {\n    this.internalPosition = newValue;\n    this.el.style.setProperty(\n      \"--position\",\n      `${this.calculatePosition(newValue)}`\n    );\n    this.setActiveCssClassToSlide(newValue);\n  }\n\n  componentWillLoad() {\n    this.isRTL = document.dir === \"rtl\";\n  }\n\n  connectedCallback() {\n    this.handleDomContentChanges();\n  }\n\n  private handleDomContentChanges() {\n    const items = this.el.querySelectorAll(\"vviinn-slide\");\n    this.elementsCount = items.length;\n    this.el.style.setProperty(\"--num-items\", `${this.elementsCount}`);\n    this.setActiveCssClassToSlide(0);\n  }\n\n  private setActiveCssClassToSlide(index: number) {\n    const items = this.el.querySelectorAll(\"vviinn-slide\");\n    items.forEach((i) => i.classList.remove(\"active\"));\n    items[index].classList.add(\"active\");\n  }\n\n  private goToSlide(index: number) {\n    this.internalPosition = index;\n    this.el.style.setProperty(\"--position\", `${index}`);\n    this.setActiveCssClassToSlide(index);\n  }\n\n  private renderBullets() {\n    return this.showBullets ? (\n      <div class=\"controls\">\n        {range(0, this.elementsCount - 1).map((i) => (\n          <div\n            class={{\n              bullet: true,\n              active: i == Math.abs(this.internalPosition) % this.elementsCount,\n            }}\n            onClick={() => this.goToSlide(i)}\n          ></div>\n        ))}\n      </div>\n    ) : null;\n  }\n\n  private nextSlide() {\n    this.internalPosition++;\n\n    this.renderSlidePosition();\n  }\n\n  private prevSlide() {\n    const nextPostion = this.internalPosition - 1;\n\n    this.internalPosition =\n      nextPostion > -1 ? nextPostion : this.elementsCount - 1;\n\n    this.renderSlidePosition();\n  }\n\n  private renderSlidePosition() {\n    const position = this.internalPosition % this.elementsCount;\n\n    requestAnimationFrame(() => {\n      this.el.style.setProperty(\n        \"--position\",\n        `${this.calculatePosition(position)}`\n      );\n    });\n  }\n\n  private calculatePosition(position: number) {\n    return this.isRTL ? position * -1 : position;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== \"Space\" && event.key !== \"Enter\") return;\n    const target = event.target as HTMLElement;\n    const direction = target.className.includes(\"prev\") ? \"prev\" : \"next\";\n\n    switch (direction) {\n      case \"prev\":\n        this.prevSlide();\n        break;\n      case \"next\":\n        this.nextSlide();\n        break;\n    }\n  }\n\n  private handleTouchStart(event: TouchEvent) {\n    if (!this.showBullets) return;\n\n    this.swipeStartPosition = pipe(\n      event.touches[0],\n      O.fromNullable,\n      O.map((t: Touch) => t.clientX)\n    );\n  }\n\n  private handleTouchEnd(event: TouchEvent) {\n    if (!this.showBullets) return;\n\n    const swipeEndPosition = pipe(\n      event.changedTouches[0],\n      O.fromNullable,\n      O.map((t: Touch) => t.clientX)\n    );\n\n    pipe(\n      sequenceToOption(this.swipeStartPosition, swipeEndPosition),\n      O.map(([start, end]) => N.Ord.compare(start, end)),\n      O.map((swipeDirection) => {\n        switch (swipeDirection) {\n          case 1:\n            return this.nextSlide();\n          case -1:\n            return this.prevSlide();\n        }\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"items-wrapper\">\n          <div\n            class=\"items\"\n            onTouchStart={(e: TouchEvent) => this.handleTouchStart(e)}\n            onTouchEnd={(e: TouchEvent) => this.handleTouchEnd(e)}\n          >\n            <slot></slot>\n          </div>\n        </div>\n        {this.showArrows\n          ? [\n              <Arrow\n                kind=\"prev\"\n                onClick={() =>\n                  this.isRTL ? this.nextSlide() : this.prevSlide()\n                }\n                onKeyDown={(ev) => this.handleKeyDown(ev)}\n                tabindex={1}\n                disabled={false}\n              />,\n              <Arrow\n                kind=\"next\"\n                onClick={() =>\n                  this.isRTL ? this.prevSlide() : this.nextSlide()\n                }\n                onKeyDown={(ev) => this.handleKeyDown(ev)}\n                tabindex={0}\n                disabled={false}\n              />,\n            ]\n          : null}\n        {this.renderBullets()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,29 +1,24 @@
-import { Component, Host, h, Element } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnTeaser {
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null,
-      h("slot", null,
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" },
-          h("defs", null),
-          h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }),
-          h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })),
-        h("span", { class: "vviinn-teaser-text" },
-          h("slot", { name: "vviinn-teaser-text" },
-            "Finde Produkte auf ",
-            h("br", null),
-            " einem Foto")))));
+    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", h("br", null), " einem Foto")))));
   }
   static get is() { return "vviinn-teaser"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-teaser.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-teaser.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-teaser.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-teaser.css"]
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=vviinn-teaser.js.map

package/dist/collection/components/vviinn-teaser/vviinn-teaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-teaser.js","sourceRoot":"","sources":["../../../src/components/vviinn-teaser/vviinn-teaser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,YAAY;EAGvB,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH;QACE,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM;UACxE,eAAQ;UACR,YAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,0MAA0M,GAAG;UACpO,YAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,6KAA6K,GAAG,CACnM;QACN,YAAM,KAAK,EAAC,oBAAoB;UAC9B,YAAM,IAAI,EAAC,oBAAoB;;YACV,aAAM;0BACpB,CACF,CACF,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element } from \"@stencil/core\";\nimport { slotChangeListener } from \"../customized-slots\";\n\n@Component({\n  tag: \"vviinn-teaser\",\n  styleUrl: \"vviinn-teaser.css\",\n  shadow: true,\n})\nexport class VviinnTeaser {\n  @Element() el: HTMLElement;\n  \n  componentWillLoad() {\n    slotChangeListener(this, this.el);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" fill=\"none\">\n            <defs />\n            <path fill=\"#C6C6C6\" d=\"M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z\" />\n            <path fill=\"#C6C6C6\" d=\"M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z\" />\n          </svg>\n          <span class=\"vviinn-teaser-text\">\n            <slot name=\"vviinn-teaser-text\">\n              Finde Produkte auf <br /> einem Foto\n            </slot>\n          </span>\n        </slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css

@@ -73,21 +73,15 @@ main {
 }
 
 :host(.bottom.closed) .sidebar {
-  -webkit-animation-name: slideOutFromBottom;
-          animation-name: slideOutFromBottom;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
+  animation-name: slideOutFromBottom;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
 }
 
 :host(.bottom.open) .sidebar {
-  -webkit-animation-name: slideInFromBottom;
-          animation-name: slideInFromBottom;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
+  animation-name: slideInFromBottom;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
 }
 
 :host(.right.idle) .sidebar {
@@ -95,21 +89,15 @@ main {
 }
 
 :host(.right.closed) .sidebar {
-  -webkit-animation-name: slideOutFromRight;
-          animation-name: slideOutFromRight;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
+  animation-name: slideOutFromRight;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
 }
 
 :host(.right.open) .sidebar {
-  -webkit-animation-name: slideInFromRight;
-          animation-name: slideInFromRight;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
+  animation-name: slideInFromRight;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
 }
 
 :host(.right) .sidebar {
@@ -160,16 +148,6 @@ vviinn-vpr-widget::part(price-container) {
   top: 24px;
 }
 
-@-webkit-keyframes slideInFromBottom {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
 @keyframes slideInFromBottom {
   from {
     transform: translateY(100%);
@@ -180,16 +158,6 @@ vviinn-vpr-widget::part(price-container) {
   }
 }
 
-@-webkit-keyframes slideOutFromBottom {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
 @keyframes slideOutFromBottom {
   from {
     transform: translateY(0);
@@ -200,16 +168,6 @@ vviinn-vpr-widget::part(price-container) {
   }
 }
 
-@-webkit-keyframes slideInFromRight {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
 @keyframes slideInFromRight {
   from {
     transform: translateX(100%);
@@ -220,16 +178,6 @@ vviinn-vpr-widget::part(price-container) {
   }
 }
 
-@-webkit-keyframes slideOutFromRight {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}
-
 @keyframes slideOutFromRight {
   from {
     transform: translateX(0);