@saasquatch/mint-components 2.4.2 → 2.4.3

package/dist/cjs/{GenericTableView-be5648e4.js → GenericTableView-4c48c630.js}

@@ -9,6 +9,11 @@ function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Only the producer knows which columns are plop targets; a column can render a
+  // VNode label and still be real data (e.g. the invoice download column).
+  const dropZones = new Set(elements.dropZoneColumns);
+  const hasDropZones = dropZones.size > 0;
+  const showLabels = data.textOverrides.showLabels;
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
   // Due to mobile media queries being dependant on props, not feasiable to move out of render function
@@ -29,6 +34,13 @@ function GenericTableView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         overflowWrap: "anywhere",
       },
+      "& th.collapsed": {
+        fontSize: "0",
+        padding: "14px 0",
+      },
+      "& th.drop-zone": {
+        width: "30px",
+      },
       "& td": {
         padding: "var(--sl-spacing-small)",
         paddingLeft: "0",
@@ -36,10 +48,35 @@ function GenericTableView(props) {
         textOverflow: "ellipsis",
       },
       [mobile]: {
+        // Body rows become blocks here, so the header has to leave the table layout to stay full width
         "& thead": {
+          display: hasDropZones ? "block" : "none",
+        },
+        // Columns read top-to-bottom inside a card, so the drop zones between them stack the same way
+        "& thead tr": {
+          display: "flex",
+          flexDirection: "column",
+        },
+        "& thead th.label": {
+          padding: "0",
+          lineHeight: "20px",
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        },
+        "& thead th.drop-zone": {
+          width: "auto",
+          padding: "14px 0",
+          lineHeight: "0",
+          position: "relative",
+        },
+        // The plop target is inline-styled position:absolute, so it needs the cell as its containing block to span it
+        "& thead th.drop-zone slot::slotted(raisins-plop-target)": {
+          width: "100%",
+        },
+        "& tbody td.drop-zone": {
           display: "none",
         },
-        "& tr": {
+        "& tbody tr": {
           display: "block",
           background: "inherit",
           border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
@@ -96,11 +133,11 @@ function GenericTableView(props) {
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString),
     index.h("table", { class: sheet.classes.Table },
-      data.textOverrides.showLabels && (index.h("thead", null,
-        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
-          if (typeof column === "string")
-            return index.h("th", null, column);
-          return index.h("th", { style: { width: "30px" } }, column);
+      (showLabels || hasDropZones) && (index.h("thead", null,
+        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column, i) => {
+          if (dropZones.has(i))
+            return index.h("th", { class: "drop-zone" }, column);
+          return (index.h("th", { class: showLabels ? "label" : "collapsed" }, column));
         })))),
       index.h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -108,6 +145,9 @@ function GenericTableView(props) {
           return (index.h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
+            if (dropZones.has(j))
+              return index.h("td", { class: "drop-zone" }, cell);
+            // Only string labels can be echoed into the mobile card's :before
             return typeof columns[j] === "string" ? (index.h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                 gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                   : "0.5fr 0.5fr",

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -13,11 +13,11 @@ const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./AsYouType-d15caac8.js');
 const subregions = require('./subregions-3d27e279.js');
-const GenericTableView = require('./GenericTableView-be5648e4.js');
+const GenericTableView = require('./GenericTableView-4c48c630.js');
 const reRender = require('./re-render-72a0ef45.js');
+const useReferralTable = require('./useReferralTable-06887d9a.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
-const useReferralTable = require('./useReferralTable-6e9de0d5.js');
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-c5f9b79b.js');
 const data = require('./data-89ac73dd.js');
 const keys = require('./keys-5a2c9ed2.js');
@@ -3436,7 +3436,12 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: useReferralTable.dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
@@ -3465,8 +3470,7 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -11,12 +11,12 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');
-const GenericTableView = require('./GenericTableView-be5648e4.js');
+const GenericTableView = require('./GenericTableView-4c48c630.js');
 const reRender = require('./re-render-72a0ef45.js');
+const useReferralTable = require('./useReferralTable-06887d9a.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
 const mockRewardData = require('./mockRewardData-ed603fca.js');
-const useReferralTable = require('./useReferralTable-6e9de0d5.js');
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -290,7 +290,12 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: useReferralTable.dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
@@ -319,8 +324,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -10,12 +10,12 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
-const GenericTableView = require('./GenericTableView-be5648e4.js');
+const GenericTableView = require('./GenericTableView-4c48c630.js');
 const reRender = require('./re-render-72a0ef45.js');
+const useReferralTable = require('./useReferralTable-06887d9a.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
 const mockRewardData = require('./mockRewardData-ed603fca.js');
-const useReferralTable = require('./useReferralTable-6e9de0d5.js');
 
 const debug = domContextHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
@@ -394,7 +394,12 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: useReferralTable.dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
@@ -422,8 +427,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -17,7 +17,7 @@ const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-717d063
 require('./AsYouType-d15caac8.js');
 const subregions = require('./subregions-3d27e279.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-a45f7a52.js');
-const GenericTableView = require('./GenericTableView-be5648e4.js');
+const GenericTableView = require('./GenericTableView-4c48c630.js');
 require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-e9f2a454.js');

package/dist/cjs/{useReferralTable-6e9de0d5.js → useReferralTable-06887d9a.js}

@@ -6,6 +6,15 @@ const index_module = require('./index.module-f8c8495f.js');
 const reRender = require('./re-render-72a0ef45.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 
+const PLOP_TARGET_TAG = "RAISINS-PLOP-TARGET";
+function isPlopTarget(element) {
+  return element.tagName === PLOP_TARGET_TAG;
+}
+/** Indexes of the column components the widget editor injected as drop zones. */
+function dropZoneColumnIndexes(columnComponents) {
+  return columnComponents.reduce((indexes, component, idx) => isPlopTarget(component) ? [...indexes, idx] : indexes, []);
+}
+
 const debug = domContextHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
@@ -427,6 +436,7 @@ async function tryMethod(c, callback) {
   }
 }
 
+exports.dropZoneColumnIndexes = dropZoneColumnIndexes;
 exports.generateUserError = generateUserError;
 exports.tryMethod = tryMethod;
 exports.useReferralTable = useReferralTable;

package/dist/collection/components/sqm-invoice-table/sqm-invoice-table.js

@@ -5,6 +5,7 @@ import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
 import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { dropZoneColumnIndexes } from "../../tables/plopTargets";
 import { useChildElements } from "../../tables/useChildElements";
 import mockInvoiceData from "./mockInvoiceData";
 import { InvoiceTableView } from "./sqm-invoice-table-view";
@@ -422,7 +423,12 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -451,8 +457,7 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -5,6 +5,7 @@ import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
 import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { dropZoneColumnIndexes } from "../../tables/plopTargets";
 import { useChildElements } from "../../tables/useChildElements";
 import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
@@ -380,7 +381,12 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -409,8 +415,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -5,6 +5,7 @@ import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
 import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { dropZoneColumnIndexes } from "../../tables/plopTargets";
 import { useChildElements } from "../../tables/useChildElements";
 import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
@@ -325,7 +326,12 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -353,8 +359,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/collection/tables/GenericTableView.js

@@ -6,6 +6,11 @@ export function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Only the producer knows which columns are plop targets; a column can render a
+  // VNode label and still be real data (e.g. the invoice download column).
+  const dropZones = new Set(elements.dropZoneColumns);
+  const hasDropZones = dropZones.size > 0;
+  const showLabels = data.textOverrides.showLabels;
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
   // Due to mobile media queries being dependant on props, not feasiable to move out of render function
@@ -26,6 +31,13 @@ export function GenericTableView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         overflowWrap: "anywhere",
       },
+      "& th.collapsed": {
+        fontSize: "0",
+        padding: "14px 0",
+      },
+      "& th.drop-zone": {
+        width: "30px",
+      },
       "& td": {
         padding: "var(--sl-spacing-small)",
         paddingLeft: "0",
@@ -33,10 +45,35 @@ export function GenericTableView(props) {
         textOverflow: "ellipsis",
       },
       [mobile]: {
+        // Body rows become blocks here, so the header has to leave the table layout to stay full width
         "& thead": {
+          display: hasDropZones ? "block" : "none",
+        },
+        // Columns read top-to-bottom inside a card, so the drop zones between them stack the same way
+        "& thead tr": {
+          display: "flex",
+          flexDirection: "column",
+        },
+        "& thead th.label": {
+          padding: "0",
+          lineHeight: "20px",
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        },
+        "& thead th.drop-zone": {
+          width: "auto",
+          padding: "14px 0",
+          lineHeight: "0",
+          position: "relative",
+        },
+        // The plop target is inline-styled position:absolute, so it needs the cell as its containing block to span it
+        "& thead th.drop-zone slot::slotted(raisins-plop-target)": {
+          width: "100%",
+        },
+        "& tbody td.drop-zone": {
           display: "none",
         },
-        "& tr": {
+        "& tbody tr": {
           display: "block",
           background: "inherit",
           border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
@@ -93,11 +130,11 @@ export function GenericTableView(props) {
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
-      data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
-          if (typeof column === "string")
-            return h("th", null, column);
-          return h("th", { style: { width: "30px" } }, column);
+      (showLabels || hasDropZones) && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column, i) => {
+          if (dropZones.has(i))
+            return h("th", { class: "drop-zone" }, column);
+          return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -105,6 +142,9 @@ export function GenericTableView(props) {
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
+            if (dropZones.has(j))
+              return h("td", { class: "drop-zone" }, cell);
+            // Only string labels can be echoed into the mobile card's :before
             return typeof columns[j] === "string" ? (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                 gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                   : "0.5fr 0.5fr",

package/dist/collection/tables/plopTargets.js

@@ -0,0 +1,8 @@
+const PLOP_TARGET_TAG = "RAISINS-PLOP-TARGET";
+export function isPlopTarget(element) {
+  return element.tagName === PLOP_TARGET_TAG;
+}
+/** Indexes of the column components the widget editor injected as drop zones. */
+export function dropZoneColumnIndexes(columnComponents) {
+  return columnComponents.reduce((indexes, component, idx) => isPlopTarget(component) ? [...indexes, idx] : indexes, []);
+}

package/dist/esm/{GenericTableView-8c72ac30.js → GenericTableView-471a9386.js}

@@ -7,6 +7,11 @@ function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Only the producer knows which columns are plop targets; a column can render a
+  // VNode label and still be real data (e.g. the invoice download column).
+  const dropZones = new Set(elements.dropZoneColumns);
+  const hasDropZones = dropZones.size > 0;
+  const showLabels = data.textOverrides.showLabels;
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
   // Due to mobile media queries being dependant on props, not feasiable to move out of render function
@@ -27,6 +32,13 @@ function GenericTableView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         overflowWrap: "anywhere",
       },
+      "& th.collapsed": {
+        fontSize: "0",
+        padding: "14px 0",
+      },
+      "& th.drop-zone": {
+        width: "30px",
+      },
       "& td": {
         padding: "var(--sl-spacing-small)",
         paddingLeft: "0",
@@ -34,10 +46,35 @@ function GenericTableView(props) {
         textOverflow: "ellipsis",
       },
       [mobile]: {
+        // Body rows become blocks here, so the header has to leave the table layout to stay full width
         "& thead": {
+          display: hasDropZones ? "block" : "none",
+        },
+        // Columns read top-to-bottom inside a card, so the drop zones between them stack the same way
+        "& thead tr": {
+          display: "flex",
+          flexDirection: "column",
+        },
+        "& thead th.label": {
+          padding: "0",
+          lineHeight: "20px",
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        },
+        "& thead th.drop-zone": {
+          width: "auto",
+          padding: "14px 0",
+          lineHeight: "0",
+          position: "relative",
+        },
+        // The plop target is inline-styled position:absolute, so it needs the cell as its containing block to span it
+        "& thead th.drop-zone slot::slotted(raisins-plop-target)": {
+          width: "100%",
+        },
+        "& tbody td.drop-zone": {
           display: "none",
         },
-        "& tr": {
+        "& tbody tr": {
           display: "block",
           background: "inherit",
           border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
@@ -94,11 +131,11 @@ function GenericTableView(props) {
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
-      data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
-          if (typeof column === "string")
-            return h("th", null, column);
-          return h("th", { style: { width: "30px" } }, column);
+      (showLabels || hasDropZones) && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column, i) => {
+          if (dropZones.has(i))
+            return h("th", { class: "drop-zone" }, column);
+          return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -106,6 +143,9 @@ function GenericTableView(props) {
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
+            if (dropZones.has(j))
+              return h("td", { class: "drop-zone" }, cell);
+            // Only string labels can be echoed into the mobile card's :before
             return typeof columns[j] === "string" ? (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                 gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                   : "0.5fr 0.5fr",

package/dist/esm/sqm-banking-info-form_10.entry.js

@@ -9,11 +9,11 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './AsYouType-2d56519e.js';
 import { t as taxTypeToName, b as validTaxDocument, I as INDIRECT_TAX_SPAIN_REGIONS, a as INDIRECT_TAX_PROVINCES, o as objectIsFull, c as toDomesticNumber, A as ADDRESS_REGIONS } from './subregions-810a5c2d.js';
-import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
+import { G as GenericTableView } from './GenericTableView-471a9386.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-bf46ba54.js';
+import { g as generateUserError, d as dropZoneColumnIndexes } from './useReferralTable-3aa4b527.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';
-import { g as generateUserError } from './useReferralTable-03d32c6f.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, T as TaxAndCashDashboardView, U as UserInfoFormView } from './sqm-user-info-form-view-ceb3917a.js';
 import { F as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, f as FINANCE_NETWORK_SETTINGS_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE } from './data-8698cbc6.js';
 import { c as VERIFICATION_EVENT_KEY } from './keys-1054056a.js';
@@ -3432,7 +3432,12 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -3461,8 +3466,7 @@ function useInvoiceTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/esm/sqm-referral-table_11.entry.js

@@ -7,12 +7,12 @@ import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
-import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
+import { G as GenericTableView } from './GenericTableView-471a9386.js';
 import { a as useRequestRerender, u as useRerenderListener } from './re-render-bf46ba54.js';
+import { u as useReferralTable, t as tryMethod, d as dropZoneColumnIndexes } from './useReferralTable-3aa4b527.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';
 import { g as getPaypalMeta } from './mockRewardData-9b27d6f1.js';
-import { u as useReferralTable, t as tryMethod } from './useReferralTable-03d32c6f.js';
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -286,7 +286,12 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -315,8 +320,7 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -6,12 +6,12 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
+import { G as GenericTableView } from './GenericTableView-471a9386.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-bf46ba54.js';
+import { g as generateUserError, d as dropZoneColumnIndexes } from './useReferralTable-3aa4b527.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';
 import { m as mockRewardData } from './mockRewardData-9b27d6f1.js';
-import { g as generateUserError } from './useReferralTable-03d32c6f.js';
 
 const debug = browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
@@ -390,7 +390,12 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     setContent({ rows });
     const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
+    setContent({
+      columns,
+      dropZoneColumns: dropZoneColumnIndexes(columnComponents),
+      loading: false,
+      page: 0,
+    });
   }
   useEffect(() => {
     setContent({ loading: true });
@@ -418,8 +423,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
       smBreakpoint: 599,
     },
     elements: {
-      columns: content.columns,
-      rows: content.rows,
+      ...content,
       emptyElement,
       loadingElement,
     },

package/dist/esm/sqm-stencilbook.entry.js

@@ -13,7 +13,7 @@ import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLogi
 import './AsYouType-2d56519e.js';
 import { t as taxTypeToName, L as LoadingView, I as INDIRECT_TAX_SPAIN_REGIONS, a as INDIRECT_TAX_PROVINCES } from './subregions-810a5c2d.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-79265df5.js';
-import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
+import { G as GenericTableView } from './GenericTableView-471a9386.js';
 import './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';
 import { C as CloseButtonView } from './sqm-close-button-view-fd9012e7.js';