@saasquatch/mint-components 1.3.3-4 → 1.4.0-0

package/CHANGELOG.md

@@ -1,165 +1,189 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [1.3.0] - 2021-11-08
-
-### Changed
-
-- Changed components:
-  - \<sqm-share-button>
-      - Exported "icon" part so it can be customizable in the future
-  - \<sqm-portal-change-password> 
-      - Changed sl-button in modal to be of type "primary" instead of "default"
-      - Swapped location of cancel and change password buttons
-      - Added padding between fields
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-profile> 
-      - Changed hardcoded text into customizable props
-      - Added padding text below header
-  - \<sqm-portal-reset-password> 
-      - Changed hardcoded text into customizable props
-      - Changed password field input default label to "New Password"
-  - \<sqm-portal-register> 
-      - Changed hardcoded text into customizable props
-      - Changed formData slot to add custom inputs to the top of form instead of the bottom
-      - Fixed bug causing the correct error validation message from being shown 
-  - \<sqm-portal-email-verification>
-      - Changed hardcoded text into customizable props
-  - \<sqm-portal-verify-email>
-      - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
-
-### Added
-
-- Default affiliate portal templates now provided in [Stencilbook](https://mint-components.stencilbook.saasquat.ch)
-    - Default Portal
-    - Multi Program Portal
-    - Lead Submit Portal
-    - Portal Dashboard (program widget)
-- New components added for default affiliate portals
-  - \<sqm-portal-footer> Footer for providing FAQ, T&S, and support email
-  - \<sqm-hero> One or two column landing page with an optional background
-  - \<sqm-name-fields> First and last name inputs for registration which supports validation errors
-  - \<sqm-referral-iframe> Renders an iFrame and passes users referral code as a UTM param named rsCode
-
-## [1.2.1] - 2021-09-21
-
-### Fixed
-
-- demoData no longer breaking GrapesJS editability on all components
-- \<sqm-big-stat> properly supports units with/without slashes
-- \<sqm-big-stat> rewardBalance stat now uses format if included for the fallback value
-- \<sqm-referral-table> dateScheduledFor bug fixed, deleted user bug fixed
-
-### Added
-
-- Filtered Credit and Integration reward count stats now available in \<sqm-big-stat>
-  - formats:
-  ```
-  /(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?
-  /(integrationRewardsCountFiltered)/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?
-  ```
-- \<sqm-share-button> loading states and hide text prop
-- \<sqm-divided-layout> border customizable
-- \<sqm-leaderboard> allows rank to be shown
-
-### Removed
-
-- menuLabel prop removed from \<sqm-program-menu>
-
-## [1.2.0] - 2021-09-17
-
-### Changed
-
-- Changed components:
-  - \<sqm-referral-table> can pull only classic referrals
-  - \<sqm-referral-table> supports showing "Referred You" row
-  - \<sqm-referral-table> supports additional props to override text values
-  - \<sqm-referral-table> has default loading and empty slots
-  - \<sqm-referral-table> pagination button labels are customizable
-  - \<sqm-share-button> text slot (default slot) is hideable
-  - \<sqm-big-stat> will return appropriate stats or error for "classic" program id. Height is inherited
-
-## [1.1.1] - 2021-08-20
-
-### Added
-
-- Password field component with live validation
-- Newly available component:
-  - \<sqm-password-field>
-
-## [1.1.0] - 2021-08-04
-
-### Added
-
-- New portal components and additional layout components
-- Newly available components:
-  - \<sqm-asset-card>
-  - \<sqm-divided-layout>
-  - \<sqm-form-message>
-  - \<sqm-graphql-client-provider>
-  - \<sqm-navigation-sidebar>
-  - \<sqm-navigation-sidebar-item>
-  - \<sqm-portal-change-password>
-  - \<sqm-portal-container>
-  - \<sqm-portal-email-verification>
-  - \<sqm-portal-forgot-password>
-  - \<sqm-portal-login>
-  - \<sqm-portal-logout>
-  - \<sqm-portal-profile>
-  - \<sqm-portal-protected-route>
-  - \<sqm-portal-register>
-  - \<sqm-portal-reset-password>
-  - \<sqm-portal-verify-email>
-  - \<sqm-program-menu>
-  - \<sqm-referral-table>
-    - \<sqm-table-cell>
-    - \<sqm-table-row>
-    - \<sqm-referral-table-cell>
-    - \<sqm-referral-table-date-cell>
-    - \<sqm-referral-table-rewards-cell>
-    - \<sqm-referral-table-status-cell>
-    - \<sqm-referral-table-user-cell>
-    - \<sqm-referral-table-column>
-    - \<sqm-referral-table-date-column>
-    - \<sqm-referral-table-rewards-column>
-    - \<sqm-referral-table-status-column>
-    - \<sqm-referral-table-user-column>
-  - \<sqm-share-code>
-  - \<sqm-stat-container>
-  - \<sqm-text>
-  - \<sqm-text-span>
-  - \<sqm-titled-section>
-  - \<sqm-user-name>
-
-## [1.0.0-86] - 2021-05-20
-
-### Added
-
-- Initial release, components use stencil 2+, Sass mixins, and shoelace web components - https://shoelace.style
-- Available components:
-  - \<sqm-big-stat>
-  - \<sqm-edit-profile>
-  - \<sqm-leaderboard>
-  - \<sqm-leaderboard-rank>
-  - \<sqm-navigation-menu>
-  - \<sqm-portal-frame>
-  - \<sqm-route>
-  - \<sqm-router>
-  - \<sqm-share-button>
-  - \<sqm-share-link>
-  - \<sqm-form-message>
-  - \<sqm-hook-story-container>
-  - \<sqm-popup-container>
-  - \<sqm-stencilbook>
-
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.3.0...HEAD
-[1.3.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.3.0
-[1.2.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.2.0
-[1.1.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.1.1
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.4.0] - 2021-12-09
+
+- Updated version of component-boilerplate to prevent rare case of user context being deleted during register
+- Updated version of component-boilerplate to support new registration, password reset, and verify requests
+- Changed components:
+  - \<sqm-portal-email-verification>
+    - Added prop to customize what page a user is redirected to from their verify email, defaults to /verifyEmail
+  - \<sqm-portal-forgot-password>
+    - Added prop to customize what page a user is redirected to from their password reset email, defaults to /resetPassword
+    - Added prop to customize the login button redirection path, defaults to /login
+  - \<sqm-portal-login>
+    - Added prop to customize the register button redirection path, defaults to /register
+    - Added prop to customize the forgot password text link redirection path, defaults to /forgotPassword
+  - \<sqm-portal-register>
+    - Added prop to customize the login button redirection path, defaults to /login
+    - Added prop to customize what page a user is redirect to from their initial verify email, defaults to /verifyEmail
+  - \<sqm-portal-reset-password>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-portal-verify-email>
+    - Added prop to customize what path users are redirected to when oobcode validation fails, defaults to /
+  - \<sqm-big-stat>
+    - Added program ID prop to optionally be used instead of the default program context
+
+## [1.3.0] - 2021-11-08
+
+### Changed
+
+- Changed components:
+  - \<sqm-share-button>
+    - Exported "icon" part so it can be customizable in the future
+  - \<sqm-portal-change-password>
+    - Changed sl-button in modal to be of type "primary" instead of "default"
+    - Swapped location of cancel and change password buttons
+    - Added padding between fields
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-profile>
+    - Changed hardcoded text into customizable props
+    - Added padding text below header
+  - \<sqm-portal-reset-password>
+    - Changed hardcoded text into customizable props
+    - Changed password field input default label to "New Password"
+  - \<sqm-portal-register>
+    - Changed hardcoded text into customizable props
+    - Changed formData slot to add custom inputs to the top of form instead of the bottom
+    - Fixed bug causing the correct error validation message from being shown
+  - \<sqm-portal-email-verification>
+    - Changed hardcoded text into customizable props
+  - \<sqm-portal-verify-email>
+    - Fixed bug causing users to get stuck if no userIdent existed when verifying their email
+
+### Added
+
+- Default affiliate portal templates now provided in [Stencilbook](https://mint-components.stencilbook.saasquat.ch)
+  - Default Portal
+  - Multi Program Portal
+  - Lead Submit Portal
+  - Portal Dashboard (program widget)
+- New components added for default affiliate portals
+  - \<sqm-portal-footer> Footer for providing FAQ, T&S, and support email
+  - \<sqm-hero> One or two column landing page with an optional background
+  - \<sqm-name-fields> First and last name inputs for registration which supports validation errors
+  - \<sqm-referral-iframe> Renders an iFrame and passes users referral code as a UTM param named rsCode
+
+## [1.2.1] - 2021-09-21
+
+### Fixed
+
+- demoData no longer breaking GrapesJS editability on all components
+- \<sqm-big-stat> properly supports units with/without slashes
+- \<sqm-big-stat> rewardBalance stat now uses format if included for the fallback value
+- \<sqm-referral-table> dateScheduledFor bug fixed, deleted user bug fixed
+
+### Added
+
+- Filtered Credit and Integration reward count stats now available in \<sqm-big-stat>
+  - formats:
+  ```
+  /(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?
+  /(integrationRewardsCountFiltered)/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?
+  ```
+- \<sqm-share-button> loading states and hide text prop
+- \<sqm-divided-layout> border customizable
+- \<sqm-leaderboard> allows rank to be shown
+
+### Removed
+
+- menuLabel prop removed from \<sqm-program-menu>
+
+## [1.2.0] - 2021-09-17
+
+### Changed
+
+- Changed components:
+  - \<sqm-referral-table> can pull only classic referrals
+  - \<sqm-referral-table> supports showing "Referred You" row
+  - \<sqm-referral-table> supports additional props to override text values
+  - \<sqm-referral-table> has default loading and empty slots
+  - \<sqm-referral-table> pagination button labels are customizable
+  - \<sqm-share-button> text slot (default slot) is hideable
+  - \<sqm-big-stat> will return appropriate stats or error for "classic" program id. Height is inherited
+
+## [1.1.1] - 2021-08-20
+
+### Added
+
+- Password field component with live validation
+- Newly available component:
+  - \<sqm-password-field>
+
+## [1.1.0] - 2021-08-04
+
+### Added
+
+- New portal components and additional layout components
+- Newly available components:
+  - \<sqm-asset-card>
+  - \<sqm-divided-layout>
+  - \<sqm-form-message>
+  - \<sqm-graphql-client-provider>
+  - \<sqm-navigation-sidebar>
+  - \<sqm-navigation-sidebar-item>
+  - \<sqm-portal-change-password>
+  - \<sqm-portal-container>
+  - \<sqm-portal-email-verification>
+  - \<sqm-portal-forgot-password>
+  - \<sqm-portal-login>
+  - \<sqm-portal-logout>
+  - \<sqm-portal-profile>
+  - \<sqm-portal-protected-route>
+  - \<sqm-portal-register>
+  - \<sqm-portal-reset-password>
+  - \<sqm-portal-verify-email>
+  - \<sqm-program-menu>
+  - \<sqm-referral-table>
+    - \<sqm-table-cell>
+    - \<sqm-table-row>
+    - \<sqm-referral-table-cell>
+    - \<sqm-referral-table-date-cell>
+    - \<sqm-referral-table-rewards-cell>
+    - \<sqm-referral-table-status-cell>
+    - \<sqm-referral-table-user-cell>
+    - \<sqm-referral-table-column>
+    - \<sqm-referral-table-date-column>
+    - \<sqm-referral-table-rewards-column>
+    - \<sqm-referral-table-status-column>
+    - \<sqm-referral-table-user-column>
+  - \<sqm-share-code>
+  - \<sqm-stat-container>
+  - \<sqm-text>
+  - \<sqm-text-span>
+  - \<sqm-titled-section>
+  - \<sqm-user-name>
+
+## [1.0.0-86] - 2021-05-20
+
+### Added
+
+- Initial release, components use stencil 2+, Sass mixins, and shoelace web components - https://shoelace.style
+- Available components:
+  - \<sqm-big-stat>
+  - \<sqm-edit-profile>
+  - \<sqm-leaderboard>
+  - \<sqm-leaderboard-rank>
+  - \<sqm-navigation-menu>
+  - \<sqm-portal-frame>
+  - \<sqm-route>
+  - \<sqm-router>
+  - \<sqm-share-button>
+  - \<sqm-share-link>
+  - \<sqm-form-message>
+  - \<sqm-hook-story-container>
+  - \<sqm-popup-container>
+  - \<sqm-stencilbook>
+
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.0...HEAD
+[1.4.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.0
+[1.3.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.3.0
+[1.2.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.2.0
+[1.1.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.1.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/{ShadowViewAddon-741e87d0.js → ShadowViewAddon-e9bacad0.js}

@@ -1,124 +1,124 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-66cd975e.js');
+const index_module = require('./index.module-2925fe3b.js');
 
-function LeaderboardView(props) {
-  var _a;
-  const { states, data, elements } = props;
-  const { styles } = states;
-  if (states.loading) {
-    return elements.loadingstate;
-  }
-  return (index.h("div", null,
-    !states.hasLeaders && elements.empty,
-    states.hasLeaders && (index.h("table", null,
-      index.h("tr", null,
-        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
-        index.h("th", { class: "User" }, styles.usersheading),
-        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
-        return (index.h("tr", { class: "SeparateContent" },
-          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
-          index.h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
-          index.h("td", { class: "Score" }, user.value)));
-      })))));
+function LeaderboardView(props) {
+  var _a;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  if (states.loading) {
+    return elements.loadingstate;
+  }
+  return (index.h("div", null,
+    !states.hasLeaders && elements.empty,
+    states.hasLeaders && (index.h("table", null,
+      index.h("tr", null,
+        styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
+        index.h("th", { class: "User" }, styles.usersheading),
+        index.h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
+      _a.map((user) => {
+        return (index.h("tr", { class: "SeparateContent" },
+          styles.showRank && index.h("td", { class: "Rank" }, user.rank),
+          index.h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
+          index.h("td", { class: "Score" }, user.value)));
+      })))));
 }
 
-const GET_LEADERBOARD = index_module.dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows {
-        value
-        firstName
-        lastInitial
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
-function useLeaderboard(props) {
-  var _a;
-  const programId = index_module.M();
-  const user = index_module.T();
-  const variables = {
-    type: props.leaderboardType,
-    filter: { programId_eq: programId },
-  };
-  if (props.interval) {
-    variables.filter["interval"] = props.interval;
-  }
-  const { data: leaderboardData, loading: loadingLeaderboard } = index_module.en(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
-  const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
-  const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
-    return a.rank - b.rank;
-  });
-  function getFlattenedLeaderboard(leaderboardRows) {
-    return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
-      var _a;
-      return ({
-        value: user.value,
-        firstName: user.firstName || "Anonymous",
-        lastInitial: user.lastInitial,
-        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
-      });
-    });
-  }
-  return {
-    states: {
-      loading: loadingLeaderboard,
-      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
-      styles: props,
-    },
-    data: {
-      leaderboard: sortedLeaderboard,
-      rankType: props.rankType,
-    },
-    elements: {
-      empty: props.empty,
-      loadingstate: props.loadingstate,
-    },
-  };
+const GET_LEADERBOARD = index_module.dist.gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    userLeaderboard(type: $type, filter: $filter) {
+      dateModified
+      rows {
+        value
+        firstName
+        lastInitial
+        rank {
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
+function useLeaderboard(props) {
+  var _a;
+  const programId = index_module.M();
+  const user = index_module.ne();
+  const variables = {
+    type: props.leaderboardType,
+    filter: { programId_eq: programId },
+  };
+  if (props.interval) {
+    variables.filter["interval"] = props.interval;
+  }
+  const { data: leaderboardData, loading: loadingLeaderboard } = index_module.cn(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
+  const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
+  const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
+    return a.rank - b.rank;
+  });
+  function getFlattenedLeaderboard(leaderboardRows) {
+    return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
+      var _a;
+      return ({
+        value: user.value,
+        firstName: user.firstName || "Anonymous",
+        lastInitial: user.lastInitial,
+        rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
+      });
+    });
+  }
+  return {
+    states: {
+      loading: loadingLeaderboard,
+      hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
+      styles: props,
+    },
+    data: {
+      leaderboard: sortedLeaderboard,
+      rankType: props.rankType,
+    },
+    elements: {
+      empty: props.empty,
+      loadingstate: props.loadingstate,
+    },
+  };
 }
 
-const map = new Map();
-function withShadowView(component) {
-  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
-  const element = index.getElement(component);
-  let renderFn = component["render"].bind(component);
-  const newRenderFn = () => {
-    const key = element.getAttribute("stencilbook-shadow-view");
-    if (key) {
-      const value = map.get(key);
-      if (value) {
-        return value;
-      }
-    }
-    return renderFn();
-  };
-  component["render"] = newRenderFn;
-}
-/**
- * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
- */
-const ShadowViewAddon = ({ story }, children) => {
-  var _a;
-  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
-  if (!TagName)
-    return children;
-  const randomInt = Math.round(Math.random() * 100000);
-  map.set(randomInt + "", children);
-  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
-  // This will only re-render when the tag name changes, so we use a random tag name every time.
-  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
-  return (index.h(RandomTagName, null,
-    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
+const map = new Map();
+function withShadowView(component) {
+  // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
+  const element = index.getElement(component);
+  let renderFn = component["render"].bind(component);
+  const newRenderFn = () => {
+    const key = element.getAttribute("stencilbook-shadow-view");
+    if (key) {
+      const value = map.get(key);
+      if (value) {
+        return value;
+      }
+    }
+    return renderFn();
+  };
+  component["render"] = newRenderFn;
+}
+/**
+ * Any story that defines `parameters.tagname` will be used as a wrapper component around the view
+ */
+const ShadowViewAddon = ({ story }, children) => {
+  var _a;
+  let TagName = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.tagname;
+  if (!TagName)
+    return children;
+  const randomInt = Math.round(Math.random() * 100000);
+  map.set(randomInt + "", children);
+  const RandomTagName = "stencilbook-shawdow-view-" + randomInt;
+  // This will only re-render when the tag name changes, so we use a random tag name every time.
+  // Altneratively we could try to trick Stencil to call `forceUpdate` every time.
+  return (index.h(RandomTagName, null,
+    index.h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
 exports.LeaderboardView = LeaderboardView;