vviinn-widgets 2.18.21 → 2.19.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"recommendations-sidebar.js","sourceRoot":"","sources":["../../../../src/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAkB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAU/E,MAAM,OAAO,sBAAsB;;;;;oBAMM,QAAQ;uBACV,IAAI;2BACN,KAAK;gBACX,YAAY;qBAEb,EAAE;;;sBAGD,GAAG;wBACD,GAAG;;;;mBAOI,wBAAwB;;iBAI/B,MAAM;;EAKrC,iBAAiB,CAAC,KAAiB;IACjC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAE/C,IAAI,CAAC,WAAW;MAAE,OAAO;IAEzB,MAAM,WAAW,GAAG,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC;IAChD,MAAM,YAAY,GAAG,OAAO,IAAI,WAAW,CAAC,KAAK,CAAC;IAClD,MAAM,UAAU,GAAG,OAAO,IAAI,WAAW,CAAC,GAAG,CAAC;IAC9C,MAAM,aAAa,GAAG,OAAO,IAAI,WAAW,CAAC,MAAM,CAAC;IACpD,MAAM,OAAO,GAAG,WAAW,IAAI,YAAY,IAAI,UAAU,IAAI,aAAa,CAAC;IAE3E,IAAI,CAAC,OAAO,EAAE;MACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;EACH,CAAC;EAEO,WAAW;IACjB,OAAO;MACL,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;MACrB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;KACnB,CAAC;EACJ,CAAC;EAEO,mBAAmB;;IACzB,OAAO,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,qBAAqB,EAAE,CAAC;EAC5E,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;MAC7B,aACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,EACX,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAEjD,cACE,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,EAC3D,IAAI,EAAC,gBAAgB;UAEpB,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI;UAC5D,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,YAAY,CACb;UACP,cACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YAEtC,EAAC,SAAS,OAAG,CACN,CACF;QACT,YAAM,IAAI,EAAC,iBAAiB;UAC1B,yBACE,WAAW,EAAC,wMAAwM,EACpN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAC,EAAE,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ,EACvC,6BAA6B,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,EAC1D,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,GACzC,CACG,CACD,CACH,CACR,CAAC;EACJ,CAAC;EAEO,iBAAiB;IACvB,OAAO,CACL,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,WAAW,GAAI,CACxE,CAAC;EACJ,CAAC;EAEO,kBAAkB;;IACxB,OAAO,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,IAAG,CAAC,CAAC;EACtC,CAAC;EAEO,kBAAkB,CAAC,EAAE,aAAa,EAAkB;IAC1D,MAAM,kBAAkB,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9D,IAAI,CAAC,kBAAkB;MAAE,OAAO;IAEhC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;MAC1B,UAAU,EAAE,KAAK;MACjB,cAAc,EAAE,IAAI,CAAC,YAAY;MACjC,gBAAgB,EAAE,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC;MACtD,QAAQ,EAAE,IAAI,CAAC,eAAe;KAC/B,CAAC,CAAC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { CrossIcon } from \"../../vviinn-icons\";\nimport { CarouselMode } from \"../../vviinn-carousel/vviinn-carousel\";\nimport { BasicEventData } from \"../../../recommendation/events\";\nimport { CampaignTypeId, campaignTypeNames } from \"../../../campaign/Campaign\";\n\ntype SidebarState = \"idle\" | \"open\" | \"closed\";\ntype ClickEvent = Event & { clientX: number; clientY: number };\n\n@Component({\n  tag: \"vviinn-recommendations-sidebar\",\n  styleUrl: \"recommendations-sidebar.css\",\n  shadow: true,\n})\nexport class RecommendationsSidebar {\n  @Element() el: HTMLElement;\n\n  @Prop() sidebarTitle: string;\n  @Prop() token: string;\n  @Prop() productId: string;\n  @Prop() position: \"bottom\" | \"right\" = \"bottom\";\n  @Prop() sourceImage: string | null = null;\n  @Prop() widgetScrollbar: boolean = false;\n  @Prop() mode: CarouselMode = \"continuity\";\n  /** comma-separated list of campaign-ids */\n  @Prop() campaigns: string = \"\";\n  @Prop() campaignType: CampaignTypeId;\n  @Prop() color: string;\n  @Prop() imageWidth: number = 300;\n  @Prop() currencySign: string = \"€\";\n  @Prop() noResultText?: string;\n  @Prop() noResultShow?: boolean;\n  /** Hiding disabled arrows in the carousel if true */\n  @Prop() gridArrowsDynamic: boolean;\n\n  /** @internal */\n  @Prop() apiPath: string | undefined = \"https://api.vviinn.com\";\n  /** @internal */\n  @Prop() buttonElementId?: string;\n\n  @State() state: SidebarState = \"idle\";\n\n  @Event() vviinnWidgetClose: EventEmitter<BasicEventData>;\n\n  @Listen(\"click\", { target: \"body\" })\n  bodyClickListener(event: ClickEvent) {\n    const { clientX, clientY } = event;\n    const sidebarRect = this.getSidebarRectangle();\n\n    if (!sidebarRect) return;\n\n    const inLeftBound = clientX >= sidebarRect.left;\n    const inRightBound = clientX <= sidebarRect.right;\n    const inTopBound = clientY >= sidebarRect.top;\n    const inBottomBound = clientY <= sidebarRect.bottom;\n    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;\n\n    if (!inBound) {\n      this.state = \"closed\";\n    }\n  }\n\n  private getClassMap() {\n    return {\n      [this.position]: true,\n      [this.state]: true,\n    };\n  }\n\n  private getSidebarRectangle(): DOMRect {\n    return this.el.shadowRoot.querySelector(\"aside\")?.getBoundingClientRect();\n  }\n\n  render(): any {\n    return (\n      <Host class={this.getClassMap()}>\n        <aside\n          class=\"sidebar\"\n          part=\"body\"\n          onAnimationEnd={(e) => this.handleAnimationEnd(e)}\n        >\n          <header\n            class={{ \"contains-source-img\": this.isSourceImageValid() }}\n            part=\"sidebar-header\"\n          >\n            {this.isSourceImageValid() ? this.renderSourceImage() : null}\n            <span class=\"title\" part=\"title\">\n              {this.sidebarTitle}\n            </span>\n            <button\n              class=\"close-sidebar\"\n              onClick={() => (this.state = \"closed\")}\n            >\n              <CrossIcon />\n            </button>\n          </header>\n          <main part=\"sidebar-content\">\n            <vviinn-vpr-widget\n              exportparts=\"brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group\"\n              token={this.token}\n              productId={this.productId}\n              imageWidth={this.imageWidth}\n              blockTitle=\"\"\n              mode={this.mode}\n              useCarousel={this.position === \"bottom\"}\n              onVviinnRecommendationsLoaded={() => (this.state = \"open\")}\n              showScroll={this.widgetScrollbar}\n              campaigns={this.campaigns}\n              color={this.color}\n              currencySign={this.currencySign}\n              apiPath={this.apiPath}\n              buttonElementId={this.buttonElementId}\n              noResultText={this.noResultText}\n              noResultShow={this.noResultShow}\n              gridArrowsDynamic={this.gridArrowsDynamic}\n            />\n          </main>\n        </aside>\n      </Host>\n    );\n  }\n\n  private renderSourceImage(): HTMLImageElement {\n    return (\n      <img class=\"source-image\" part=\"source-image\" src={this.sourceImage} />\n    );\n  }\n\n  private isSourceImageValid(): boolean {\n    return this.sourceImage?.length > 0;\n  }\n\n  private handleAnimationEnd({ animationName }: AnimationEvent): void {\n    const isClosingAnimation = animationName.includes(\"slideOut\");\n    if (!isClosingAnimation) return;\n\n    this.vviinnWidgetClose.emit({\n      widgetType: \"VPR\",\n      campaignTypeId: this.campaignType,\n      campaignTypeName: campaignTypeNames[this.campaignType],\n      widgetId: this.buttonElementId,\n    });\n  }\n}\n"]}

package/dist/collection/components/vviinn-vpr-button/stories/args.js

@@ -239,3 +239,4 @@ export const argTypes = {
     },
   },
 };
+//# sourceMappingURL=args.js.map

package/dist/collection/components/vviinn-vpr-button/stories/args.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"args.js","sourceRoot":"","sources":["../../../../src/components/vviinn-vpr-button/stories/args.ts"],"names":[],"mappings":"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","sourcesContent":["export const argTypes = {\n  buttonSize: {\n    name: \"Button size\",\n    options: [\"Default\", \"Small\", \"Large\"],\n    mapping: {\n      Default: 40,\n      Small: 32,\n      Large: 48,\n    },\n    control: {\n      type: \"select\",\n      labels: {\n        Default: \"Default (40px)\",\n        Small: \"Small (32px)\",\n        Large: \"Large (48px)\",\n      },\n    },\n    defaultValue: \"Default\",\n  },\n  backgroundColor: {\n    name: \"Background color\",\n    control: {\n      type: \"color\",\n    },\n    defaultValue: \"#ffffff\",\n  },\n  backgroundOpacity: {\n    name: \"Background opacity (%)\",\n    control: {\n      type: \"number\",\n    },\n    defaultValue: 100,\n  },\n  radius: {\n    name: \"Radius (px)\",\n    control: {\n      type: \"number\",\n    },\n    defaultValue: 20,\n  },\n  border: {\n    name: \"Border\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: false,\n  },\n  borderColor: {\n    name: \"Border color\",\n    control: {\n      type: \"color\",\n    },\n    defaultValue: \"#cccccc\",\n  },\n  shadow: {\n    name: \"Shadow\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: true,\n  },\n  position: {\n    options: [\"bottom\", \"right\"],\n    control: {\n      type: \"select\",\n      labels: {\n        bottom: \"From bottom\",\n        right: \"From right\",\n      },\n    },\n    defaultValue: \"bottom\",\n  },\n  sidebarBorderRadius: {\n    name: \"Modal container round corners (px)\",\n    control: {\n      type: \"number\",\n    },\n    defaultValue: 16,\n  },\n  showSourceImage: {\n    name: \"Modal container show source image\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: true,\n  },\n  sourceImageSize: {\n    name: \"Source image size\",\n    options: [\"Default\", \"Small\", \"Large\"],\n    mapping: {\n      Default: 64,\n      Small: 48,\n      Large: 80,\n    },\n    control: {\n      type: \"select\",\n      labels: {\n        Default: \"Default (64px)\",\n        Small: \"Small (48px)\",\n        Large: \"Large (80px)\",\n      },\n    },\n    defaultValue: \"Default\",\n  },\n  sourceImageBorder: {\n    name: \"Source image border\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: false,\n  },\n  sourceImageBorderColor: {\n    name: \"Source image border color\",\n    control: {\n      type: \"color\",\n    },\n    defaultValue: \"#cccccc\",\n  },\n  sourceImageShadow: {\n    name: \"Source image shadow\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: true,\n  },\n  font: {\n    name: \"Font family\",\n    options: [\"Inter\", \"System\", \"Arial\"],\n    mapping: {\n      Inter: \"'Inter', sans-serif\",\n      System: `-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"`,\n      Arial: \"Arial, sans-serif\",\n    },\n    control: {\n      type: \"select\",\n      labels: {\n        Inter: \"Inter\",\n        System: \"System stack\",\n        Arial: \"Arial (web safe)\",\n      },\n    },\n    defaultValue: \"Inter\",\n  },\n  primaryTextColor: {\n    name: \"Primary text color\",\n    control: {\n      type: \"color\",\n    },\n    defaultValue: \"#161616\",\n  },\n  secondaryTextColor: {\n    name: \"Secondary text color\",\n    control: {\n      type: \"color\",\n    },\n    defaultValue: \"#757575\",\n  },\n  modalTitle: {\n    name: \"Modal container title\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: true,\n  },\n  sidebarTitle: {\n    name: \"sidebar-title\",\n    control: {\n      type: \"text\",\n    },\n    defaultValue: \"Visually similar products\",\n  },\n  modalTitleFontSize: {\n    name: \"Modal container title font size (px)\",\n    control: {\n      type: \"number\",\n    },\n    defaultValue: 28,\n  },\n  modalScrollbar: {\n    name: \"modal-scrollbar\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: false,\n  },\n  campaigns: {\n    name: \"campaigns\",\n    control: {\n      type: \"text\",\n    },\n  },\n  addStyle: {\n    name: \"add-style\",\n    control: {\n      type: \"boolean\",\n    },\n    defaultValue: true,\n  },\n  imageWidth: {\n    name: \"image-width\",\n    control: {\n      type: \"text\",\n    },\n    defaultValue: \"300\",\n  },\n  mode: {\n    name: \"mode\",\n    options: [\"continuity\", \"grid\"],\n    control: {\n      type: \"select\",\n    },\n    defaultValue: \"continuity\",\n  },\n  sourceImage: {\n    name: \"source-image\",\n    defaultValue:\n      \"https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg\",\n  },\n  color: {\n    name: \"color\",\n    control: {\n      type: \"color\",\n    },\n  },\n  token: {\n    control: {\n      type: \"text\",\n    },\n  },\n  productId: {\n    name: \"product-id\",\n    control: {\n      type: \"text\",\n    },\n  },\n  currencySign: {\n    name: \"currency-sign\",\n    control: {\n      type: \"text\",\n    },\n  },\n};\n"]}

package/dist/collection/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.js

@@ -114,3 +114,4 @@ Default.parameters = {
     url: "https://www.figma.com/file/YR5ZK1s4z9ZRUXytB8uVuj/Widgets?node-id=591%3A3859",
   },
 };
+//# sourceMappingURL=vviinn-vpr-button.stories.js.map

package/dist/collection/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vpr-button.stories.js","sourceRoot":"","sources":["../../../../src/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;;;;;QAS3B,KAAK,EAAE;;GAEZ,CAAC;AAEJ,eAAe;EACb,KAAK,EAAE,uCAAuC;EAC9C,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE,CAAC,eAAe,CAAC;EAC7B,QAAQ;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACxB;;sBAEoB,IAAI,CAAC,IAAI;;;;gBAIf,IAAI,CAAC,UAAU;iBACd,IAAI,CAAC,UAAU;qBACX,IAAI,CAAC,eAAe;kBACvB,IAAI,CAAC,iBAAiB;wBAChB,IAAI,CAAC,MAAM;iBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;uBAC5B,IAAI,CAAC,WAAW;SAC9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;;kBAI7B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;oBACjC,IAAI,CAAC,kBAAkB;;;;;;;;gBAQ3B,IAAI,CAAC,gBAAgB;;;;gBAIrB,IAAI,CAAC,kBAAkB;;;;;;;;wBAQf,IAAI,CAAC,mBAAmB,MAC5C,IAAI,CAAC,mBACP;;;;kBAIgB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAC7D,IAAI,CAAC,eAAe;iBACnB,IAAI,CAAC,eAAe;iBACpB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;uBACvC,IAAI,CAAC,sBAAsB;SACzC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;+BAG3B,IAAI,CAAC,KAAK;oCACL,IAAI,CAAC,SAAS;kCAChB,IAAI,CAAC,QAAQ;mCACZ,IAAI,CAAC,QAAQ;uCACT,IAAI,CAAC,YAAY;uCACjB,IAAI,CAAC,YAAY;yCACf,IAAI,CAAC,cAAc;8BAC9B,IAAI,CAAC,IAAI;mCACJ,IAAI,CAAC,SAAS;qCACZ,IAAI,CAAC,UAAU;sCACd,IAAI,CAAC,WAAW;+BAE9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChD;wCACkB,IAAI,CAAC,YAAY;wCACjB,IAAI,CAAC,YAAY;6CACZ,IAAI,CAAC,iBAAiB;sCAE3C,IAAI,CAAC,eAAe;EAClB,CAAC,CAAC,yEAAyE;EAC3E,CAAC,CAAC,EACN,wBAAwB,CAAC;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EACH,mUAAmU;EACrU,SAAS,EAAE,YAAY;EACvB,SAAS,EAAE,EAAE;EACb,KAAK,EAAE,EAAE;EACT,YAAY,EAAE,GAAG;EACjB,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,IAAI;EACd,YAAY,EAAE,2BAA2B;EACzC,cAAc,EAAE,KAAK;EACrB,IAAI,EAAE,YAAY;EAClB,UAAU,EAAE,KAAK;EACjB,WAAW,EACT,yEAAyE;EAC3E,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,eAAe,EAAE,IAAI;EACrB,iBAAiB,EAAE,IAAI;EACvB,IAAI,EAAE,OAAO;EACb,YAAY,EAAE,sCAAsC;EACpD,YAAY,EAAE,IAAI;EAClB,iBAAiB,EAAE,KAAK;CACzB,CAAC;AAEF,OAAO,CAAC,UAAU,GAAG;EACnB,MAAM,EAAE;IACN,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,8EAA8E;GACpF;CACF,CAAC","sourcesContent":["import { argTypes } from \"./args\";\n\nconst centerDecorator = (story) => `\n    <div style=\"display: grid;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                align-items: center;\n                justify-items: center;\">\n      ${story()}\n    </div>\n  `;\n\nexport default {\n  title: \"Widgets/Visual Recommendations/Button\",\n  component: \"vviinn-vpr-button\",\n  decorators: [centerDecorator],\n  argTypes,\n};\n\nconst Template = (args) =>\n  `<style>\n     body {\n       font-family: ${args.font};\n     }\n\n     vviinn-vpr-button::part(button) {\n       width: ${args.buttonSize}px;\n       height: ${args.buttonSize}px;\n       background: ${args.backgroundColor};\n       opacity: ${args.backgroundOpacity}%;\n       border-radius: ${args.radius}px;\n       border: ${args.border ? \"1px solid\" : \"none\"};\n       border-color: ${args.borderColor};\n       ${args.shadow ? \"\" : \"box-shadow: none;\"}\n     }\n\n     vviinn-recommendations-sidebar::part(title) {\n       display: ${args.modalTitle ? \"inline\" : \"none\"};\n       font-size: ${args.modalTitleFontSize}px;\n     }\n\n     vviinn-recommendations-sidebar::part(product-title),\n     vviinn-recommendations-sidebar::part(brand),\n     vviinn-recommendations-sidebar::part(type),\n     vviinn-recommendations-sidebar::part(price-regular),\n     vviinn-recommendations-sidebar::part(price-sale) {\n       color: ${args.primaryTextColor};\n     }\n\n     vviinn-recommendations-sidebar::part(price-outdated) {\n       color: ${args.secondaryTextColor};\n     }\n\n     vviinn-recommendations-sidebar.open {\n       background: rgba(0, 0, 0, 0.1);\n     }\n\n     vviinn-recommendations-sidebar::part(body) {\n       border-radius: ${args.sidebarBorderRadius}px ${\n    args.sidebarBorderRadius\n  }px 0 0;\n     }\n\n     vviinn-recommendations-sidebar::part(source-image) {\n       display: ${args.sourceImage && args.showSourceImage ? \"block\" : \"none\"};\n       width: ${args.sourceImageSize}px;\n       height: ${args.sourceImageSize}px;\n       border: ${args.sourceImageBorder ? \"1px solid\" : \"none\"};\n       border-color: ${args.sourceImageBorderColor};\n       ${args.sourceImageShadow ? \"\" : \"box-shadow: none;\"}\n     }\n   </style>\n   <vviinn-vpr-button token=\"${args.token}\"\n                      product-id=\"${args.productId}\"\n                      position=\"${args.position}\"\n                      add-style=\"${args.addStyle}\"\n                      sidebar-title=\"${args.sidebarTitle}\"\n                      currency-sign=\"${args.currencySign}\"\n                      modal-scrollbar=\"${args.modalScrollbar}\"\n                      mode=\"${args.mode}\"\n                      campaigns=\"${args.campaigns}\"\n                      image-width=\"${args.imageWidth}\"\n                      source-image=\"${args.sourceImage}\"\n                      color=\"${\n                        args.color ? args.color.toString().slice(1) : \"\"\n                      }\"\n                      no-result-text=\"${args.noResultText}\"\n                      no-result-show=\"${args.noResultShow}\"\n                      grid-arrows-dynamic=\"${args.gridArrowsDynamic}\"\n                      source-image=\"${\n                        args.showSourceImage\n                          ? \"https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg\"\n                          : \"\"\n                      }\"></vviinn-vpr-button>`;\n\nexport const Default = Template.bind({});\n\nDefault.args = {\n  token:\n    \"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4\",\n  productId: \"4114460310\",\n  campaigns: \"\",\n  color: \"\",\n  currencySign: \"€\",\n  position: \"bottom\",\n  addStyle: true,\n  sidebarTitle: \"Visually similar products\",\n  modalScrollbar: false,\n  mode: \"continuity\",\n  imageWidth: \"300\",\n  sourceImage:\n    \"https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg\",\n  shadow: true,\n  modalTitle: true,\n  showSourceImage: true,\n  sourceImageShadow: true,\n  font: \"Inter\",\n  noResultText: \"No results! Please, try again later.\",\n  noResultShow: true,\n  gridArrowsDynamic: false,\n};\n\nDefault.parameters = {\n  design: {\n    type: \"figma\",\n    url: \"https://www.figma.com/file/YR5ZK1s4z9ZRUXytB8uVuj/Widgets?node-id=591%3A3859\",\n  },\n};\n"]}