@rebilly/instruments 8.12.1 → 8.13.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [8.13.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.12.1...instruments/core-v8.13.0) (2023-12-21)
+
+
+### Features
+
+* **instruments:** Allow instruments to work on a web component (shadow DOM) ([#2612](https://github.com/Rebilly/rebilly/issues/2612)) ([0f3ded2](https://github.com/Rebilly/rebilly/commit/0f3ded2d229a82c08bb6505243eff3257eced796))
+
 ## [8.12.1](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.12.0...instruments/core-v8.12.1) (2023-12-15)
 
 ## [8.12.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.11.0...instruments/core-v8.12.0) (2023-12-14)

package/dist/index.js

@@ -702,17 +702,17 @@ class Loader {
     }
   }
   startLoading({ section = "form", id: id2 = "" } = {}) {
-    var _a, _b;
+    var _a, _b, _c;
     this[section].push(id2);
-    const rootEl = document.querySelector(":root");
+    const rootEl = ((_a = state.shadowRoot) == null ? void 0 : _a.querySelector("style")) || document.querySelector(":root");
     const contentPadding = 2;
     let minHeight = "240px";
-    if ((_a = this.DOM) == null ? void 0 : _a[section]) {
+    if ((_b = this.DOM) == null ? void 0 : _b[section]) {
       let loaderEl = this.DOM[section].querySelector(
         ".rebilly-instruments-loader"
       );
       const { padding, paddingTop, paddingBottom } = getComputedStyle(
-        (_b = this.DOM) == null ? void 0 : _b[section]
+        (_c = this.DOM) == null ? void 0 : _c[section]
       );
       if (!loaderEl) {
         this.DOM[section].innerHTML = loaderContainer(
@@ -1542,16 +1542,14 @@ class Translate {
     this.languages = { ...en$1, ...es$1 };
   }
   init(locale, messages) {
-    this.items = Array.from(
-      document.querySelectorAll("[data-rebilly-i18n]")
-    );
+    const root2 = state.shadowRoot || document;
+    this.items = Array.from(root2.querySelectorAll("[data-rebilly-i18n]"));
     this.locale = this.getLocale(locale);
     this.languages = merge$1({}, { ...en$1, ...es$1 }, messages);
   }
   translateItems() {
-    this.items = Array.from(
-      document.querySelectorAll("[data-rebilly-i18n]")
-    );
+    const root2 = state.shadowRoot || document;
+    this.items = Array.from(root2.querySelectorAll("[data-rebilly-i18n]"));
     if (this.locale in this.languages) {
       return this.items.forEach((item) => {
         const translate = this.getTranslation(
@@ -1644,6 +1642,7 @@ const state = (() => {
     loader: new Loader(),
     translate: new Translate(),
     hasMounted: false,
+    shadowRoot: null,
     toModel() {
       var _a;
       const model = {
@@ -2796,15 +2795,21 @@ const errorTemplate = (error2) => {
 </div>`;
 };
 function clearError() {
-  const errorContainer = document.querySelector("#rebilly-instruments-error");
+  var _a;
+  const errorContainer = (_a = state.form) == null ? void 0 : _a.querySelector(
+    "#rebilly-instruments-error"
+  );
   if (!errorContainer)
     return;
   errorContainer.innerHTML = "";
 }
 function showError(error2, isCloseable = true) {
+  var _a;
   if (!error2)
     return;
-  const errorContainer = document.querySelector("#rebilly-instruments-error");
+  const errorContainer = (_a = state.form) == null ? void 0 : _a.querySelector(
+    "#rebilly-instruments-error"
+  );
   if (!errorContainer)
     return;
   errorContainer.innerHTML = errorTemplate(error2);
@@ -2822,7 +2827,7 @@ function showError(error2, isCloseable = true) {
       }
     });
   }
-  const closeButton = document.querySelector(
+  const closeButton = state.form.querySelector(
     ".rebilly-instruments-error-card-close-button"
   );
   if (isCloseable) {
@@ -2830,7 +2835,7 @@ function showError(error2, isCloseable = true) {
     window.addEventListener("click", clickOutsideError);
     window.addEventListener("blur", windowBlur, { once: true });
   } else {
-    const errorBox = document.querySelector(
+    const errorBox = state.form.querySelector(
       ".rebilly-instruments-error-card"
     );
     errorBox.classList.add("not-closeable");
@@ -5983,7 +5988,7 @@ function cloneArrayDeep(val, instanceClone) {
   return res;
 }
 var cloneDeep_1 = cloneDeep;
-const version = "55.9.0";
+const version = "55.9.1";
 let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
 let nanoid = (size2 = 21) => {
   let id2 = "";
@@ -14656,11 +14661,11 @@ async function fetchData({
 }
 function mountExpressMethod({ state: state2, id: id2 }) {
   const { Rebilly } = window;
-  const container = document.querySelector(
+  const container = state2.form.querySelector(
     `.rebilly-instruments-${id2}-method`
   );
   function updateApplePayStyling() {
-    const applePayButton = document.querySelector(
+    const applePayButton = state2.form.querySelector(
       "#rebilly-apple-pay-button"
     );
     const {
@@ -14678,10 +14683,11 @@ function mountExpressMethod({ state: state2, id: id2 }) {
         "pay-pal-billing-agreement": "paypal",
         "apple-pay": "applePay"
       };
+      const element = state2.form.querySelector(
+        `.rebilly-instruments-${id2}-method`
+      );
       if (rebillyMountFunction[id2]) {
-        Rebilly[rebillyMountFunction[id2]].mount(
-          `.rebilly-instruments-${id2}-method`
-        );
+        Rebilly[rebillyMountFunction[id2]].mount(element);
         if (id2 === "apple-pay") {
           updateApplePayStyling();
         }
@@ -15124,7 +15130,7 @@ async function mountMethodSelector() {
       state.options.digitalWallet = generateDigitalWallet({
         expressMethods
       });
-      const container = document.querySelector(
+      const container = state.form.querySelector(
         '[data-rebilly-instruments="express-methods-container"]'
       );
       mountExpressMethods({
@@ -15187,7 +15193,7 @@ const baseMethodSelectorHTML = () => `
 async function mountForm() {
   var _a;
   state.form.innerHTML += baseMethodSelectorHTML();
-  const container = document.querySelector(
+  const container = state.form.querySelector(
     '[data-rebilly-instruments="form"]'
   );
   const { paymentMethodsUrl: url } = ((_a = state == null ? void 0 : state.options) == null ? void 0 : _a._computed) || {};
@@ -15221,7 +15227,7 @@ function determineFirstView() {
   }
 }
 function removeForm() {
-  const container = document.querySelector(
+  const container = state.form.querySelector(
     '[data-rebilly-instruments="form"]'
   );
   container.remove();
@@ -15241,9 +15247,11 @@ function addDOMElement({
   if (content2) {
     ELEMENT.innerHTML = content2;
   }
-  document[target][insertMethod](
-    ELEMENT
-  );
+  if (target instanceof ShadowRoot) {
+    target.prepend(ELEMENT);
+  } else {
+    document[target][insertMethod](ELEMENT);
+  }
 }
 function hasValidCSSSelector(selector) {
   const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
@@ -15282,7 +15290,7 @@ function sleep(ms) {
 const setupElement = ({ element = "" }) => {
   const { options } = state;
   if (element !== "form" && element !== "summary") {
-    throw new Error('element must be "form" or "summary"');
+    throw new Error('element must be "form", or "summary"');
   }
   const getProp = () => {
     if (options != null && options[element]) {
@@ -23288,7 +23296,7 @@ function handleComputedProperty(options) {
   var _a;
   return Object.assign({}, options, {
     _computed: {
-      version: "8.12.0",
+      version: "8.12.1",
       paymentMethodsUrl: ((_a = options._dev) == null ? void 0 : _a.paymentMethodsUrl) ?? "https://forms.secure-payments.app"
     }
   });
@@ -25022,7 +25030,7 @@ let Theme = _Theme;
 const vars = (theme2) => `
 /* Instruments 'global' variables
 ------------------------------------------------------------ */
-:root {
+:root, :host {
   ${theme2.cssVars}
 
   --rebilly-fontWeight400: 400;
@@ -25175,6 +25183,12 @@ const vars = (theme2) => `
   border-radius: 100px;
 }
 
+.rebilly-instruments-express-methods .rebilly-instruments-google-pay-method iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
 @media (max-width: 600px) {
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
     -webkit-box-orient: vertical;
@@ -25731,14 +25745,14 @@ const setupStylesVars = () => {
     element: "style",
     attributes: { type: "text/css" },
     content: minifyCss(styleVars),
-    target: "head"
+    target: state.shadowRoot || "head"
   });
   if (css) {
     addDOMElement({
       element: "style",
       attributes: { type: "text/css" },
       content: minifyCss(css),
-      target: "head"
+      target: state.shadowRoot || "head"
     });
   }
   return styleVars;
@@ -25888,16 +25902,16 @@ async function mountModal({
     "beforeend",
     modalTemplate(isRedirect, method)
   );
-  const modalOverlay = document.querySelector(
+  const modalOverlay = state.form.querySelector(
     ".rebilly-instruments-modal-overlay"
   );
-  const modalContainer = document.querySelector(
+  const modalContainer = state.form.querySelector(
     ".rebilly-instruments-modal-container"
   );
-  const closeButton = document.querySelector(
+  const closeButton = state.form.querySelector(
     ".rebilly-instruments-modal-close"
   );
-  const modalContent = document.querySelector(
+  const modalContent = state.form.querySelector(
     ".rebilly-instruments-modal-content"
   );
   document.body.style.overflow = "hidden";
@@ -26345,6 +26359,14 @@ const setupUserFlow = ({ state: state2 = {} }) => {
     });
   }
 };
+function getShadowParent(element) {
+  while (element.parentNode && (element = element.parentNode)) {
+    if (element instanceof ShadowRoot) {
+      return element;
+    }
+  }
+  return null;
+}
 async function mount({
   setupFramepay: setupFramepay$1 = setupFramepay,
   ...options
@@ -26356,6 +26378,7 @@ async function mount({
     state.options = setupOptions({ options });
     state.form = setupElement({ element: "form" });
     state.summary = setupElement({ element: "summary" });
+    state.shadowRoot = getShadowParent(state.form);
     if (state.form) {
       state.form.style.maxWidth = "750px";
     }
@@ -26477,7 +26500,7 @@ class RebillyInstrumentsInstance {
     await show({ componentName, payload });
   }
   get version() {
-    return `RebillyInstruments Ver.${"8.12.0"}`;
+    return `RebillyInstruments Ver.${"8.12.1"}`;
   }
   on(eventName, callback) {
     on({ eventName, callback });