@saasquatch/squatch-js 2.8.2-0 → 2.8.2-1

package/dist/squatch.js

@@ -892,6 +892,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if ((options == null ? void 0 : options.maxWidth) || (options == null ? void 0 : options.minWidth)) {
         frame.style.width = "100%";
       }
+      if (options == null ? void 0 : options.initialHeight) {
+        frame.height = options.initialHeight;
+      }
       return frame;
     }
     _findFrame() {
@@ -1115,21 +1118,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (container) this.container = container;
     }
     async load() {
-      var _a2, _b, _c, _d, _e;
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
       const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-      const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
+      const initialHeight = (_e = (_d = (_c = this.context.widgetConfig) == null ? void 0 : _c.values) == null ? void 0 : _d.brandingConfig) == null ? void 0 : _e.loadingHeight;
+      const sizes = (_f = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _f.embeddedWidgets;
       const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
       const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-      const frame = this._createFrame({ minWidth, maxWidth });
+      console.log({
+        brandingConfig,
+        initialHeight,
+        widgetConfig: this.context.widgetConfig
+      });
+      const frame = this._createFrame({
+        minWidth,
+        maxWidth,
+        initialHeight
+      });
       const element = this._findElement();
-      if ((_d = this.context) == null ? void 0 : _d.container) {
+      if ((_g = this.context) == null ? void 0 : _g.container) {
         element.style.visibility = "hidden";
         element.style.height = "0";
         element.style["overflow-y"] = "hidden";
       }
       if (this.container) {
         if (element.shadowRoot) {
-          if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
+          if (((_h = element.shadowRoot.lastChild) == null ? void 0 : _h.nodeName) === "IFRAME") {
             element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
           } else {
             element.shadowRoot.appendChild(frame);
@@ -1148,19 +1161,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const frameDoc = contentWindow.document;
       frameDoc.open();
+      console.log({ content: this.content });
       frameDoc.write(`
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      <style>
-      sqm-stencilbook, sqm-portal-google-registration-form, sqm-widget-verification, sqm-portal-google-login, sqm-portal-registration-form, sqm-portal-reset-password, sqm-instant-access-registration, sqm-portal-email-verification, sqm-portal-profile, sqm-portal-verify-email, sqm-qr-code, sqm-rewards-table-customer-note-column, raisins-plop-target, sqm-close-button, sqm-context-router, sqm-graphql-client-provider, sqm-header-logo, sqm-lead-checkbox-field, sqm-leaderboard-rank, sqm-logout-current-user, sqm-navigation-sidebar, sqm-navigation-sidebar-item, sqm-popup-container, sqm-portal-logout, sqm-portal-protected-route, sqm-route, sqm-tab, sqm-tabs, sqm-text-span, sqm-widget-verification-controller, sqm-email-verification, sqm-google-sign-in, sqm-lead-input-field, sqm-rewards-table-customer-note-cell, sqm-referral-codes, sqm-pagination, sqm-referral-code, sqm-scroll, sqm-form-message, sqm-code-verification, sqm-password-field, sqm-invoice-table-data-cell, sqm-invoice-table-date-cell, sqm-invoice-table-download-cell, sqm-table-cell, sqm-table-row, sqm-empty, sqm-portal-container, sqm-text, sqm-titled-section, sqm-rewards-table, sqm-rewards-table-date-column, sqm-rewards-table-reward-column, sqm-rewards-table-source-column, sqm-rewards-table-status-column, sqm-rewards-table-date-cell, sqm-rewards-table-reward-cell, sqm-rewards-table-source-cell, sqm-rewards-table-status-cell, sqm-referral-table-column, sqm-referral-table, sqm-referral-table-date-column, sqm-referral-table-rewards-column, sqm-referral-table-status-column, sqm-referral-table-user-column, 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-tax-and-cash-dashboard, sqm-banking-info-form, sqm-docusign-form, sqm-indirect-tax-form, sqm-user-info-form, sqm-invoice-table, sqm-invoice-table-data-column, sqm-invoice-table-date-column, sqm-invoice-table-download-column, sqm-payout-details-card, sqm-tax-and-cash, sqm-leaderboard, sqm-reward-exchange-list, sqm-lead-form, sqm-payout-status-alert, sqm-portal-change-password, sqm-portal-register, sqm-coupon-code, sqm-edit-profile, sqm-payout-button-scroll, sqm-portal-change-marketing, sqm-portal-forgot-password, sqm-portal-login, sqm-referred-registration, sqm-big-stat, sqm-brand, sqm-brand-selector, sqm-card-feed, sqm-checkbox-field, sqm-divided-layout, sqm-dropdown-field, sqm-hero, sqm-hero-image, sqm-hook-story-container, sqm-image, sqm-input-field, sqm-lead-dropdown-field, sqm-link-button, sqm-marketing-emails-checkbox, sqm-name-fields, sqm-navigation-menu, sqm-portal-footer, sqm-portal-frame, sqm-program-explainer, sqm-program-explainer-step, sqm-program-menu, sqm-referral-card, sqm-referral-iframe, sqm-router, sqm-share-button, sqm-share-code, sqm-share-link, sqm-stat-container, sqm-task-card, sqm-timeline, sqm-timeline-entry, sqm-user-name {
-    visibility: hidden;
-}
-      </style>
       ${this.content}
+            <style data-styles>
+      html:not(.hydrated) { visibility:hidden; }
+      </style>
       `);
       frameDoc.close();
       domready(frameDoc, async () => {
         const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-        frame.height = frameDoc.body.scrollHeight;
+        frame.height = initialHeight || frameDoc.body.scrollHeight;
         console.log({ height: frameDoc.body.scrollHeight });
         const ro = new contentWindow["ResizeObserver"]((entries) => {
           for (const entry of entries) {