vviinn-widgets 2.40.2 → 2.40.4

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

@@ -785,7 +785,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -805,7 +805,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -825,7 +825,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -845,7 +845,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -865,7 +865,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "ProductCardEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
           "references": {
             "ProductCardEventData": {
               "location": "import",
@@ -885,7 +885,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "ProductCardEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
           "references": {
             "ProductCardEventData": {
               "location": "import",
@@ -905,7 +905,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "ProductCardEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; productId: string; productRank: number; productName: string; productType: string; clickEvent?: MouseEvent; }",
           "references": {
             "ProductCardEventData": {
               "location": "import",
@@ -925,7 +925,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -945,7 +945,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -965,7 +965,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -985,7 +985,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "BasicEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; }",
           "references": {
             "BasicEventData": {
               "location": "import",
@@ -1005,7 +1005,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "SelectObjectEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; detectedObject: ValueObject<DetectedObject>; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; detectedObject: ValueObject<DetectedObject>; }",
           "references": {
             "SelectObjectEventData": {
               "location": "import",
@@ -1025,7 +1025,7 @@ export class VviinnVpsWidget {
         },
         "complexType": {
           "original": "SelectFilterEventData",
-          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VCS\" | \"VPS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; action: FilterAction; kind: FilterKind; filterName?: string; }",
+          "resolved": "{ widgetType: \"VPR\" | \"VPS\"; campaignTypeId: \"VPR\" | \"VPS\" | \"VCS\"; campaignTypeName: \"Similar Products\" | \"Visual Search\" | \"Cross-Selling\"; widgetId: string; widgetVersion: string; action: FilterAction; kind: FilterKind; filterName?: string; }",
           "references": {
             "SelectFilterEventData": {
               "location": "import",

package/dist/collection/interfaces/generated.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{package-e0b16841.js → package-a3630ee2.js}

@@ -1,3 +1,3 @@
-const version = "2.40.2";
+const version = "2.40.4";
 
 export { version as v };

package/dist/esm/vviinn-carousel_4.entry.js

@@ -3,7 +3,7 @@ import { _ as _Array, O as Option, S as Semigroup, a as _function, h as has, t a
 import { C as ChevronIcon, U as UpdateIcon } from './index-dac5d1c8.js';
 import { i as instance } from './i18next-387f2b0a.js';
 import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-6b70a8f6.js';
-import { v as version } from './package-e0b16841.js';
+import { v as version } from './package-a3630ee2.js';
 import { v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './index-53105ad4.js';
 
 const vviinnCarouselCss = ":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;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) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.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/esm/vviinn-vpr-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { v as version } from './package-e0b16841.js';
+import { v as version } from './package-a3630ee2.js';
 import { V as VisualSearchIcon } from './index-dac5d1c8.js';
 
 const vviinnVprButtonCss = ":host{display:block}";

package/dist/esm/vviinn-vps-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { v as version } from './package-e0b16841.js';
+import { v as version } from './package-a3630ee2.js';
 import { a as CameraIcon } from './index-dac5d1c8.js';
 import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-6b70a8f6.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';

package/dist/esm/vviinn-vps-widget.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
 import { i as imageSearchState, s as state, a as _function, O as Option, k as parseExcluded, q as isEmpty } from './imageSearch.store-c0f2a178.js';
 import { i as instance } from './i18next-387f2b0a.js';
-import { v as version } from './package-e0b16841.js';
+import { v as version } from './package-a3630ee2.js';
 import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-6b70a8f6.js';
 import { j as createSearchEvent, k as createFilterEvent, v as v4, c as createTrackingApi, l as createWidgetVpsEvent, m as createProductVpsEventByType, n as createResultVpsEventByType } from './index-53105ad4.js';
 import { c as CameraActionIcon, d as UploadActionIcon } from './index-dac5d1c8.js';

package/dist/stencil-react-generated/index.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from 'stencil-library';
+
+
+
+export const SearchFilters = /*@__PURE__*/createReactComponent<JSX.SearchFilters, HTMLSearchFiltersElement>('search-filters');
+export const VviinnButton = /*@__PURE__*/createReactComponent<JSX.VviinnButton, HTMLVviinnButtonElement>('vviinn-button');
+export const VviinnCarousel = /*@__PURE__*/createReactComponent<JSX.VviinnCarousel, HTMLVviinnCarouselElement>('vviinn-carousel');
+export const VviinnDetectedObject = /*@__PURE__*/createReactComponent<JSX.VviinnDetectedObject, HTMLVviinnDetectedObjectElement>('vviinn-detected-object');
+export const VviinnEmptyResults = /*@__PURE__*/createReactComponent<JSX.VviinnEmptyResults, HTMLVviinnEmptyResultsElement>('vviinn-empty-results');
+export const VviinnError = /*@__PURE__*/createReactComponent<JSX.VviinnError, HTMLVviinnErrorElement>('vviinn-error');
+export const VviinnExampleImage = /*@__PURE__*/createReactComponent<JSX.VviinnExampleImage, HTMLVviinnExampleImageElement>('vviinn-example-image');
+export const VviinnImageSelector = /*@__PURE__*/createReactComponent<JSX.VviinnImageSelector, HTMLVviinnImageSelectorElement>('vviinn-image-selector');
+export const VviinnImageView = /*@__PURE__*/createReactComponent<JSX.VviinnImageView, HTMLVviinnImageViewElement>('vviinn-image-view');
+export const VviinnModal = /*@__PURE__*/createReactComponent<JSX.VviinnModal, HTMLVviinnModalElement>('vviinn-modal');
+export const VviinnOverlay = /*@__PURE__*/createReactComponent<JSX.VviinnOverlay, HTMLVviinnOverlayElement>('vviinn-overlay');
+export const VviinnOverlayedModal = /*@__PURE__*/createReactComponent<JSX.VviinnOverlayedModal, HTMLVviinnOverlayedModalElement>('vviinn-overlayed-modal');
+export const VviinnPreloader = /*@__PURE__*/createReactComponent<JSX.VviinnPreloader, HTMLVviinnPreloaderElement>('vviinn-preloader');
+export const VviinnPrivacyBadge = /*@__PURE__*/createReactComponent<JSX.VviinnPrivacyBadge, HTMLVviinnPrivacyBadgeElement>('vviinn-privacy-badge');
+export const VviinnProductCard = /*@__PURE__*/createReactComponent<JSX.VviinnProductCard, HTMLVviinnProductCardElement>('vviinn-product-card');
+export const VviinnRecommendationsSidebar = /*@__PURE__*/createReactComponent<JSX.VviinnRecommendationsSidebar, HTMLVviinnRecommendationsSidebarElement>('vviinn-recommendations-sidebar');
+export const VviinnServerError = /*@__PURE__*/createReactComponent<JSX.VviinnServerError, HTMLVviinnServerErrorElement>('vviinn-server-error');
+export const VviinnSkeleton = /*@__PURE__*/createReactComponent<JSX.VviinnSkeleton, HTMLVviinnSkeletonElement>('vviinn-skeleton');
+export const VviinnSlide = /*@__PURE__*/createReactComponent<JSX.VviinnSlide, HTMLVviinnSlideElement>('vviinn-slide');
+export const VviinnSlider = /*@__PURE__*/createReactComponent<JSX.VviinnSlider, HTMLVviinnSliderElement>('vviinn-slider');
+export const VviinnTeaser = /*@__PURE__*/createReactComponent<JSX.VviinnTeaser, HTMLVviinnTeaserElement>('vviinn-teaser');
+export const VviinnVprButton = /*@__PURE__*/createReactComponent<JSX.VviinnVprButton, HTMLVviinnVprButtonElement>('vviinn-vpr-button');
+export const VviinnVprWidget = /*@__PURE__*/createReactComponent<JSX.VviinnVprWidget, HTMLVviinnVprWidgetElement>('vviinn-vpr-widget');
+export const VviinnVpsButton = /*@__PURE__*/createReactComponent<JSX.VviinnVpsButton, HTMLVviinnVpsButtonElement>('vviinn-vps-button');
+export const VviinnVpsWidget = /*@__PURE__*/createReactComponent<JSX.VviinnVpsWidget, HTMLVviinnVpsWidgetElement>('vviinn-vps-widget');
+export const VviinnWrongFormat = /*@__PURE__*/createReactComponent<JSX.VviinnWrongFormat, HTMLVviinnWrongFormatElement>('vviinn-wrong-format');

package/dist/stencil-react-generated/react-component-lib/createComponent.tsx

@@ -0,0 +1,106 @@
+import React, { createElement } from 'react';
+
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+}
+
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+  forwardedRef: React.RefObject<ElementType>;
+  ref?: React.Ref<any>;
+}
+
+export const createReactComponent = <
+  PropType,
+  ElementType extends HTMLStencilElement,
+  ContextStateType = {},
+  ExpandedPropsTypes = {}
+>(
+  tagName: string,
+  ReactComponentContext?: React.Context<ContextStateType>,
+  manipulatePropsFunction?: (
+    originalProps: StencilReactInternalProps<ElementType>,
+    propsToPass: any
+  ) => ExpandedPropsTypes,
+  defineCustomElement?: () => void
+) => {
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
+    componentEl!: ElementType;
+
+    setComponentElRef = (element: ElementType) => {
+      this.componentEl = element;
+    };
+
+    constructor(props: StencilReactInternalProps<ElementType>) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+
+    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+
+      let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
+        const value = (cProps as any)[name];
+
+        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+            acc[name] = value;
+          }
+        } else {
+          // we should only render strings, booleans, and numbers as attrs in html.
+          // objects, functions, arrays etc get synced via properties on mount.
+          const type = typeof value;
+
+          if (type === 'string' || type === 'boolean' || type === 'number') {
+            acc[camelToDashCase(name)] = value;
+          }
+        }
+        return acc;
+      }, {} as ExpandedPropsTypes);
+
+      if (manipulatePropsFunction) {
+        propsToPass = manipulatePropsFunction(this.props, propsToPass);
+      }
+
+      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style,
+      };
+
+      /**
+       * We use createElement here instead of
+       * React.createElement to work around a
+       * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+       * React.createElement causes all elements to be rendered
+       * as <tagname> instead of the actual Web Component.
+       */
+      return createElement(tagName, newProps, children);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+  };
+
+  // If context was passed to createReactComponent then conditionally add it to the Component Class
+  if (ReactComponentContext) {
+    ReactComponent.contextType = ReactComponentContext;
+  }
+
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
+};

package/dist/stencil-react-generated/react-component-lib/createOverlayComponent.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+
+interface OverlayElement extends HTMLElement {
+  present: () => Promise<void>;
+  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+
+export interface ReactOverlayProps {
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+
+export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
+  tagName: string,
+  controller: { create: (options: any) => Promise<OverlayType> },
+  customElement?: any
+) => {
+  defineCustomElement(tagName, customElement);
+
+  const displayName = dashToPascalCase(tagName);
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
+
+  type Props = OverlayComponent &
+    ReactOverlayProps & {
+      forwardedRef?: StencilReactForwardedRef<OverlayType>;
+    };
+
+  let isDismissing = false;
+
+  class Overlay extends React.Component<Props> {
+    overlay?: OverlayType;
+    el!: HTMLDivElement;
+
+    constructor(props: Props) {
+      super(props);
+      if (typeof document !== 'undefined') {
+        this.el = document.createElement('div');
+      }
+      this.handleDismiss = this.handleDismiss.bind(this);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+
+    componentDidMount() {
+      if (this.props.isOpen) {
+        this.present();
+      }
+    }
+
+    componentWillUnmount() {
+      if (this.overlay) {
+        this.overlay.dismiss();
+      }
+    }
+
+    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {
+      if (this.props.onDidDismiss) {
+        this.props.onDidDismiss(event);
+      }
+      setRef(this.props.forwardedRef, null);
+    }
+
+    shouldComponentUpdate(nextProps: Props) {
+      // Check if the overlay component is about to dismiss
+      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+        isDismissing = true;
+      }
+
+      return true;
+    }
+
+    async componentDidUpdate(prevProps: Props) {
+      if (this.overlay) {
+        attachProps(this.overlay, this.props, prevProps);
+      }
+
+      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+        this.present(prevProps);
+      }
+      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+        await this.overlay.dismiss();
+        isDismissing = false;
+
+        /**
+         * Now that the overlay is dismissed
+         * we need to render again so that any
+         * inner components will be unmounted
+         */
+        this.forceUpdate();
+      }
+    }
+
+    async present(prevProps?: Props) {
+      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+      const elementProps = {
+        ...cProps,
+        ref: this.props.forwardedRef,
+        [didDismissEventName]: this.handleDismiss,
+        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
+      };
+
+      this.overlay = await controller.create({
+        ...elementProps,
+        component: this.el,
+        componentProps: {},
+      });
+
+      setRef(this.props.forwardedRef, this.overlay);
+      attachProps(this.overlay, elementProps, prevProps);
+
+      await this.overlay.present();
+    }
+
+    render() {
+      /**
+       * Continue to render the component even when
+       * overlay is dismissing otherwise component
+       * will be hidden before animation is done.
+       */
+      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+    }
+  }
+
+  return React.forwardRef<OverlayType, Props>((props, ref) => {
+    return <Overlay {...props} forwardedRef={ref} />;
+  });
+};

package/dist/stencil-react-generated/react-component-lib/index.ts

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

package/dist/stencil-react-generated/react-component-lib/interfaces.ts

@@ -0,0 +1,34 @@
+// General types important to applications using stencil built components
+export interface EventEmitter<T = any> {
+  emit: (data?: T) => CustomEvent<T>;
+}
+
+export interface StyleReactProps {
+  class?: string;
+  className?: string;
+  style?: { [key: string]: any };
+}
+
+export interface OverlayEventDetail<T = any> {
+  data?: T;
+  role?: string;
+}
+
+export interface OverlayInterface {
+  el: HTMLElement;
+  animated: boolean;
+  keyboardClose: boolean;
+  overlayIndex: number;
+  presented: boolean;
+
+  enterAnimation?: any;
+  leaveAnimation?: any;
+
+  didPresent: EventEmitter<void>;
+  willPresent: EventEmitter<void>;
+  willDismiss: EventEmitter<OverlayEventDetail>;
+  didDismiss: EventEmitter<OverlayEventDetail>;
+
+  present(): Promise<void>;
+  dismiss(data?: any, role?: string): Promise<boolean>;
+}

package/dist/stencil-react-generated/react-component-lib/utils/attachProps.ts

@@ -0,0 +1,125 @@
+import { camelToDashCase } from './case';
+
+export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
+  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+  if (node instanceof Element) {
+    // add any classes in className to the class list
+    const className = getClassName(node.classList, newProps, oldProps);
+    if (className !== '') {
+      node.className = className;
+    }
+
+    Object.keys(newProps).forEach((name) => {
+      if (
+        name === 'children' ||
+        name === 'style' ||
+        name === 'ref' ||
+        name === 'class' ||
+        name === 'className' ||
+        name === 'forwardedRef'
+      ) {
+        return;
+      }
+      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+        const eventName = name.substring(2);
+        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+
+        if (!isCoveredByReact(eventNameLc)) {
+          syncEvent(node, eventNameLc, newProps[name]);
+        }
+      } else {
+        (node as any)[name] = newProps[name];
+        const propType = typeof newProps[name];
+        if (propType === 'string') {
+          node.setAttribute(camelToDashCase(name), newProps[name]);
+        }
+      }
+    });
+  }
+};
+
+export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
+  const newClassProp: string = newProps.className || newProps.class;
+  const oldClassProp: string = oldProps.className || oldProps.class;
+  // map the classes to Maps for performance
+  const currentClasses = arrayToMap(classList);
+  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+  const finalClassNames: string[] = [];
+  // loop through each of the current classes on the component
+  // to see if it should be a part of the classNames added
+  currentClasses.forEach((currentClass) => {
+    if (incomingPropClasses.has(currentClass)) {
+      // add it as its already included in classnames coming in from newProps
+      finalClassNames.push(currentClass);
+      incomingPropClasses.delete(currentClass);
+    } else if (!oldPropClasses.has(currentClass)) {
+      // add it as it has NOT been removed by user
+      finalClassNames.push(currentClass);
+    }
+  });
+  incomingPropClasses.forEach((s) => finalClassNames.push(s));
+  return finalClassNames.join(' ');
+};
+
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix: string) => {
+  if (typeof document === 'undefined') {
+    return true;
+  } else {
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
+    let isSupported = eventName in document;
+
+    if (!isSupported) {
+      const element = document.createElement('div');
+      element.setAttribute(eventName, 'return;');
+      isSupported = typeof (element as any)[eventName] === 'function';
+    }
+
+    return isSupported;
+  }
+};
+
+export const syncEvent = (
+  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
+  eventName: string,
+  newEventHandler?: (e: Event) => any
+) => {
+  const eventStore = node.__events || (node.__events = {});
+  const oldEventHandler = eventStore[eventName];
+
+  // Remove old listener so they don't double up.
+  if (oldEventHandler) {
+    node.removeEventListener(eventName, oldEventHandler);
+  }
+
+  // Bind new listener.
+  node.addEventListener(
+    eventName,
+    (eventStore[eventName] = function handler(e: Event) {
+      if (newEventHandler) {
+        newEventHandler.call(this, e);
+      }
+    })
+  );
+};
+
+const arrayToMap = (arr: string[] | DOMTokenList) => {
+  const map = new Map<string, string>();
+  (arr as string[]).forEach((s: string) => map.set(s, s));
+  return map;
+};

package/dist/stencil-react-generated/react-component-lib/utils/case.ts

@@ -0,0 +1,7 @@
+export const dashToPascalCase = (str: string) =>
+  str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

package/dist/stencil-react-generated/react-component-lib/utils/dev.ts

@@ -0,0 +1,14 @@
+export const isDevMode = () => {
+  return process && process.env && process.env.NODE_ENV === 'development';
+};
+
+const warnings: { [key: string]: boolean } = {};
+
+export const deprecationWarning = (key: string, message: string) => {
+  if (isDevMode()) {
+    if (!warnings[key]) {
+      console.warn(message);
+      warnings[key] = true;
+    }
+  }
+};