vviinn-widgets 2.18.21 → 2.19.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vps-button.js","sourceRoot":"","sources":["../../../src/components/vviinn-vps-button/vviinn-vps-button.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,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,eAAe;;IAyC1B,sBAAiB,GAAG,GAAmB,EAAE;MACvC,OAAO;QACL,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAAC;QAC1C,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;OACrB,CAAC;IACJ,CAAC,CAAC;;wBA3C6B,GAAG;kBAET,OAAO;;oBAIJ,KAAK;gBAEE,OAAO;;yBAKR,KAAK;;EAiCvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;EAC7B,CAAC;EAED,gBAAgB;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;EAClD,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;EAC5B,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ;MAC9B,qBACE,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,eAAe;QAEpB;UACE,EAAC,UAAU,OAAG,CACT,CACO;MAEhB,EAAC,YAAY,OAAG;MAChB,yBACE,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,YAAY,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAC,6NAA6N,EACzO,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,eAAe,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,GAC3B,CACG,CACR,CAAC;EACJ,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 { CameraIcon } from \"../vviinn-icons\";\nimport { SlotSkeleton } from \"../customized-slots\";\nimport { BasicEventData } from \"../../recommendation/events\";\nimport { campaignTypeNames } from \"../../campaign/Campaign\";\n\n/**\n * @slot vviinn-onboarding-title - Title of onboarding section\n * @slot onboarding-card-1-icon - Icon (or other graphics) on first onboarding slide\n * @slot onboarding-card-1-text - Text content of first onboarding slide\n * @slot onboarding-card-2-icon - Icon (or other graphics) on second onboarding slide\n * @slot onboarding-card-2-text - Text content of second onboarding slide\n * @slot onboarding-card-3-icon - Icon (or other graphics) on third onboarding slide\n * @slot onboarding-card-3-text - Text content of third onboarding slide\n * @slot vviinn-example-images-title - Header of example images block\n * @slot vviinn-example-images-1 - First image in example images block\n * @slot vviinn-example-images-2 - Second image in example images block\n * @slot vviinn-example-images-3 - Third image in example images block\n * @slot vviinn-example-images-4 - Fourth image in example images block\n * @slot vviinn-teaser-text - Text on widget's main screen\n * @slot vviinn-image-upload-button-text - Title of upload button\n * @slot vviinn-privacy-badge-text - Text content of privacy notification block\n * @slot vviinn-image-search-modal-title - Image search modal title\n *\n * @part brand - product brand.\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 title - product title\n * @part example-images - example images block\n * @part button - button\n */\n@Component({\n  tag: \"vviinn-vps-button\",\n  styleUrl: \"vviinn-vps-button.css\",\n  shadow: true,\n})\nexport class VviinnVpsButton {\n  @Element() el: HTMLElement;\n  /** vviinn customer token */\n  @Prop() token: string;\n  /** Currency sign will shown after price */\n  @Prop() currencySign: string = \"€\";\n  /** Locale for currency formatting */\n  @Prop() locale: string = \"de-DE\";\n  /** Campaign using for visual search */\n  @Prop() campaignId?: string;\n  /** Add style to the button */\n  @Prop() addStyle: boolean = false;\n  /** Add style to the button */\n  @Prop() mode: \"modal\" | \"upload\" = \"modal\";\n\n  /** @internal */\n  @Prop() apiPath: string | undefined;\n\n  @State() buttonPressed: boolean = false;\n\n  /** @internal */\n  @Event({ bubbles: true, composed: true })\n  globalSlotsChanged: EventEmitter<any>;\n\n  /** Event emitted when vps-button clicked */\n  @Event() vviinnWidgetOpen: EventEmitter<BasicEventData>;\n  /** Event fires when user select file */\n  @Event() vviinnImageUpload: EventEmitter<BasicEventData>;\n  /** Event fires when user select file that no .jpg, .jpeg or png */\n  @Event() vviinnNoResult: EventEmitter<BasicEventData>;\n\n  // List to show in the Storybook:\n  @Event() vviinnWidgetLoad: EventEmitter;\n  @Event() vviinnWidgetClose: EventEmitter;\n  @Event() vviinnProductClick: EventEmitter;\n  @Event() vviinnProductView: EventEmitter;\n  @Event() vviinnProductLoad: EventEmitter;\n  @Event() vviinnImageCrop: EventEmitter;\n  @Event() vviinnSelectObject: EventEmitter;\n  @Event() vviinnSelectFilter: EventEmitter;\n\n  getBasicEventData = (): BasicEventData => {\n    return {\n      widgetType: \"VPS\",\n      campaignTypeId: \"VPS\",\n      campaignTypeName: campaignTypeNames[\"VPS\"],\n      widgetId: this.el.id,\n    };\n  };\n\n  @Listen(\"vviinnWidgetClose\")\n  handleModalClosed() {\n    this.buttonPressed = false;\n  }\n\n  componentDidLoad() {\n    const slots = this.el.querySelectorAll(\"[slot]\");\n    this.globalSlotsChanged.emit(Array.from(slots));\n  }\n\n  private handleClick() {\n    this.buttonPressed = true;\n  }\n\n  private resetButton() {\n    this.buttonPressed = false;\n  }\n\n  render() {\n    return (\n      <Host tabindex=\"0\" role=\"button\">\n        <vviinn-button\n          onClick={() => {\n            this.handleClick();\n          }}\n          addStyle={this.addStyle}\n          part=\"vviinn-button\"\n        >\n          <slot>\n            <CameraIcon />\n          </slot>\n        </vviinn-button>\n\n        <SlotSkeleton />\n        <vviinn-vps-widget\n          mode={this.mode}\n          currency-sign={this.currencySign}\n          token={this.token}\n          locale={this.locale}\n          apiPath={this.apiPath}\n          exportparts=\"brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images\"\n          campaignId={this.campaignId}\n          showingInButton={true}\n          buttonPressed={this.buttonPressed}\n          resetVpsButton={this.resetButton.bind(this)}\n          buttonElementId={this.el.id}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -41,3 +41,4 @@ Default.decorators = [
 </style>
 ${Story()}`,
 ];
+//# sourceMappingURL=vviinn-vps-widget.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vps-widget.stories.js","sourceRoot":"","sources":["../../../../src/components/vviinn-vps-widget/stories/vviinn-vps-widget.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,QAAQ,EAAE;MACR,eAAe,EAAE,SAAS;KAC3B;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,OAAO,EACP,UAAU,EACV,YAAY,EACZ,MAAM,EACN,MAAM,GACP,EAAE,EAAE,CAAC;8BACwB,KAAK;iCACF,OAAO;oCACJ,UAAU;sCACR,YAAY;+BACnB,MAAM;+BACN,MAAM;uBACd,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EACH,mUAAmU;EACrU,OAAO,EAAE,wBAAwB;EACjC,UAAU,EAAE,EAAE;EACd,YAAY,EAAE,GAAG;EACjB,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC;AAEnC,OAAO,CAAC,UAAU,GAAG;EACnB,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;;;;;;;;;EAaX,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["export default {\n  title: \"Widgets/Visual Search/Widget\",\n  component: \"vviinn-vps-widget\",\n  parameters: {\n    viewport: {\n      defaultViewport: \"mobile2\",\n    },\n  },\n};\n\nconst Template = ({\n  token,\n  apiPath,\n  campaignId,\n  currencySign,\n  locale,\n  active,\n}) => `\n  <vviinn-vps-widget token=\"${token}\"\n                     api-path=\"${apiPath}\"\n                     campaign-id=\"${campaignId}\"\n                     currency-sign=\"${currencySign}\"\n                     locale=\"${locale}\"\n                     active=\"${active}\">\n  </vviinn-vps-widget>`;\n\nexport const Default = Template.bind({});\nDefault.args = {\n  token:\n    \"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4\",\n  apiPath: \"https://api.vviinn.com\",\n  campaignId: \"\",\n  currencySign: \"€\",\n  locale: \"en-US\",\n  active: true,\n};\n\nDefault.storyName = \"Modal Window\";\n\nDefault.decorators = [\n  (Story) => `\n<style>\n.sb-show-main.sb-main-padded {\n  padding: unset;\n}\n\n#root {\n  align-content: center;\n  display: grid;\n  height: 100vh;\n  justify-items: center;\n}\n</style>\n${Story()}`,\n];\n"]}

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

@@ -86,7 +86,6 @@ vviinn-image-selector:active {
   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;
 }
@@ -138,7 +137,6 @@ vviinn-empty-results {
 .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%;
@@ -244,7 +242,6 @@ search-filters::part(filter active) {
 
 @media (max-width: 640px) {
   .start-page {
-    grid-template-rows: -webkit-min-content;
     grid-template-rows: min-content;
     grid-template-columns: unset;
     grid-gap: 48px;
@@ -302,7 +299,6 @@ search-filters::part(filter active) {
 
   .results-page {
     grid-template-columns: unset;
-    grid-template-rows: -webkit-min-content auto;
     grid-template-rows: min-content auto;
   }
 
@@ -311,7 +307,6 @@ search-filters::part(filter active) {
   }
 
   .image-wrapper {
-    grid-template-rows: -webkit-min-content auto;
     grid-template-rows: min-content auto;
     width: 100%;
   }

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

@@ -0,0 +1,27 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("example", () => {
+  it("should render a foo-component", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<vviinn-vps-widget active="true"
+token="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"></vviinn-vps-widget>`);
+    const widget = await page.find("vviinn-vps-widget");
+    await page.waitForChanges();
+    const spy = await widget.spyOnEvent("viinnProductView");
+    await page.waitForChanges();
+    const exampleImage = await page.find("vviinn-vps-widget >>> vviinn-slide");
+    await page.waitForChanges();
+    console.log(exampleImage.nodeName);
+    exampleImage.classList.add("ololo");
+    await page.waitForChanges();
+    await exampleImage.click();
+    await page.waitForChanges();
+    //await page.debugger();
+    await page.waitForChanges();
+    await new Promise((res) => {
+      setTimeout(() => res(undefined), 1400);
+    });
+    expect(spy).toHaveReceivedEvent();
+    expect(widget).toHaveClass("hydrated");
+  });
+});
+//# sourceMappingURL=vviinn-vps-widget.e2e.js.map

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vps-widget.e2e.js","sourceRoot":"","sources":["../../../src/components/vviinn-vps-widget/vviinn-vps-widget.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;+VACqU,CAAC,CAAC;IAE7V,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAExD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAE3E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEnC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAEpC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;IAC3B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,wBAAwB;IACxB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MACxB,UAAU,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,CAAC,CAAC,mBAAmB,EAAE,CAAC;IAClC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"example\", () => {\n  it(\"should render a foo-component\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<vviinn-vps-widget active=\"true\"\ntoken=\"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4\"></vviinn-vps-widget>`);\n\n    const widget = await page.find(\"vviinn-vps-widget\");\n    await page.waitForChanges();\n    const spy = await widget.spyOnEvent(\"viinnProductView\");\n\n    await page.waitForChanges();\n\n    const exampleImage = await page.find(\"vviinn-vps-widget >>> vviinn-slide\");\n\n    await page.waitForChanges();\n\n    console.log(exampleImage.nodeName);\n\n    exampleImage.classList.add(\"ololo\");\n\n    await page.waitForChanges();\n    await exampleImage.click();\n    await page.waitForChanges();\n\n    //await page.debugger();\n    await page.waitForChanges();\n    await new Promise((res) => {\n      setTimeout(() => res(undefined), 1400);\n    });\n\n    expect(spy).toHaveReceivedEvent();\n    expect(widget).toHaveClass(\"hydrated\");\n  });\n});\n"]}