@rebilly/instruments 8.12.0 → 8.13.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [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 = "";
@@ -10612,7 +10617,7 @@ class PlanPricingBracketModel {
     this.price = parsePrice(price);
   }
 }
-const _PlanPricingModel = class _PlanPricingModel {
+const _PlanPricingModel = class _PlanPricingModel2 {
   // {
   //     formula = PlanPricingModel.Formulas.fixedFee,
   //     price = 0,
@@ -10620,11 +10625,11 @@ const _PlanPricingModel = class _PlanPricingModel {
   //     brackets = [],
   // }
   constructor(data = {}) {
-    this.formula = data.formula ?? _PlanPricingModel.Formulas.fixedFee;
+    this.formula = data.formula ?? _PlanPricingModel2.Formulas.fixedFee;
     switch (data.formula) {
-      case _PlanPricingModel.Formulas.stairstep:
-      case _PlanPricingModel.Formulas.tiered:
-      case _PlanPricingModel.Formulas.volume:
+      case _PlanPricingModel2.Formulas.stairstep:
+      case _PlanPricingModel2.Formulas.tiered:
+      case _PlanPricingModel2.Formulas.volume:
         if (data.brackets == null) {
           throw new Error("Invalid brackets.");
         }
@@ -10632,23 +10637,23 @@ const _PlanPricingModel = class _PlanPricingModel {
           (bracket) => new PlanPricingBracketModel(bracket)
         );
         break;
-      case _PlanPricingModel.Formulas.flatRate:
+      case _PlanPricingModel2.Formulas.flatRate:
         this.price = parsePrice(data.price) ?? 0;
         this.maxQuantity = data.maxQuantity ?? null;
         break;
-      case _PlanPricingModel.Formulas.fixedFee:
+      case _PlanPricingModel2.Formulas.fixedFee:
       default:
         this.price = parsePrice(data.price) ?? 0;
         break;
     }
   }
   get isSimple() {
-    return Object.values(_PlanPricingModel.SimpleFormulas).includes(
+    return Object.values(_PlanPricingModel2.SimpleFormulas).includes(
       this.formula
     );
   }
   get isBracket() {
-    return Object.values(_PlanPricingModel.BracketFormulas).includes(
+    return Object.values(_PlanPricingModel2.BracketFormulas).includes(
       this.formula
     );
   }
@@ -13926,7 +13931,7 @@ class PaymentMetadataModel extends BaseModel {
     return this.landscapeLogo || this.portraitLogo;
   }
 }
-const _ReadyToPayFeatureModel = class _ReadyToPayFeatureModel {
+class ReadyToPayFeatureModel {
   constructor({
     name = "",
     expirationTime = "",
@@ -13954,13 +13959,12 @@ const _ReadyToPayFeatureModel = class _ReadyToPayFeatureModel {
     this.paypalClientId = paypalClientId;
     this.linkToken = linkToken;
   }
-};
-_ReadyToPayFeatureModel.FeatureName = {
+}
+ReadyToPayFeatureModel.FeatureName = {
   paypalBillingAgreement: "PayPal billing agreement",
   googlePay: "Google Pay",
   applePay: "Apple Pay"
 };
-let ReadyToPayFeatureModel = _ReadyToPayFeatureModel;
 class ReadyToPayModel {
   constructor({
     index: index2 = null,
@@ -14131,9 +14135,9 @@ async function fetchReadyToPayout() {
     return filterReadyToPayout(readyToPayout);
   });
 }
-const _InvoiceModel = class _InvoiceModel extends BaseModel {
+const _InvoiceModel = class _InvoiceModel2 extends BaseModel {
   get isPaid() {
-    return this.status === _InvoiceModel.Status.paid;
+    return this.status === _InvoiceModel2.Status.paid;
   }
 };
 _InvoiceModel.Status = {
@@ -14657,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 {
@@ -14679,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();
         }
@@ -15125,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({
@@ -15188,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) || {};
@@ -15222,7 +15227,7 @@ function determineFirstView() {
   }
 }
 function removeForm() {
-  const container = document.querySelector(
+  const container = state.form.querySelector(
     '[data-rebilly-instruments="form"]'
   );
   container.remove();
@@ -15242,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;
@@ -15283,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]) {
@@ -23289,7 +23296,7 @@ function handleComputedProperty(options) {
   var _a;
   return Object.assign({}, options, {
     _computed: {
-      version: "8.11.0",
+      version: "8.12.1",
       paymentMethodsUrl: ((_a = options._dev) == null ? void 0 : _a.paymentMethodsUrl) ?? "https://forms.secure-payments.app"
     }
   });
@@ -24998,7 +25005,7 @@ const theme = new Proxy(properties, {
     return true;
   }
 });
-const _Theme = class _Theme {
+const _Theme = class _Theme2 {
   constructor(overrides = {}) {
     this.overrides = overrides;
     this.theme = theme;
@@ -25009,7 +25016,7 @@ const _Theme = class _Theme {
     });
   }
   get cssVars() {
-    return Object.keys(this.theme).filter((v2) => !_Theme.nonCssProperties.includes(v2)).map((p2, i2) => `${!i2 ? "" : "  "}--rebilly-${p2}: ${this.theme[p2]};`).join("\n");
+    return Object.keys(this.theme).filter((v2) => !_Theme2.nonCssProperties.includes(v2)).map((p2, i2) => `${!i2 ? "" : "  "}--rebilly-${p2}: ${this.theme[p2]};`).join("\n");
   }
   build() {
     this.overrideTheme();
@@ -25023,7 +25030,7 @@ let Theme = _Theme;
 const vars = (theme2) => `
 /* Instruments 'global' variables
 ------------------------------------------------------------ */
-:root {
+:root, :host {
   ${theme2.cssVars}
 
   --rebilly-fontWeight400: 400;
@@ -25176,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;
@@ -25732,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;
@@ -25889,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";
@@ -26346,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
@@ -26357,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";
     }
@@ -26478,7 +26500,7 @@ class RebillyInstrumentsInstance {
     await show({ componentName, payload });
   }
   get version() {
-    return `RebillyInstruments Ver.${"8.11.0"}`;
+    return `RebillyInstruments Ver.${"8.12.1"}`;
   }
   on(eventName, callback) {
     on({ eventName, callback });