@saasquatch/mint-components 2.4.1 → 2.4.2-2

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 });

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 });

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 });

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 });

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 });

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 });

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 });

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 });

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 });

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';

package/dist/esm/{useReferralTable-03d32c6f.js → useReferralTable-3aa4b527.js}

@@ -4,6 +4,15 @@ import { d as dist, J, H, L, w as wn, R as Rn } from './index.module-02cb914c.js
 import { u as useRerenderListener } from './re-render-bf46ba54.js';
 import { u as useChildElements } from './useChildElements-06937df7.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 = browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = dist.gql `
@@ -425,4 +434,4 @@ async function tryMethod(c, callback) {
   }
 }
 
-export { generateUserError as g, tryMethod as t, useReferralTable as u };
+export { dropZoneColumnIndexes as d, generateUserError as g, tryMethod as t, useReferralTable as u };

package/dist/esm-es5/GenericTableView-471a9386.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var a,t=1,r=arguments.length;t<r;t++){a=arguments[t];for(var s in a)if(Object.prototype.hasOwnProperty.call(a,s))e[s]=a[s]}return e};return __assign.apply(this,arguments)};import{h}from"./index-38ad4957.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";import{g as gap}from"./mixins-f750863a.js";function GenericTableView(e){var a;var t=e.states,r=e.data,s=e.callbacks,o=e.elements;var l=o.columns,i=o.rows;var n=t.show;var d=r.hiddenColumns&&r.hiddenColumns.split(",").map(Number);var p=new Set(o.dropZoneColumns);var c=p.size>0;var m=r.textOverrides.showLabels;var b="@media (max-width: "+r.mdBreakpoint+"px)";var g="@media (min-width: "+(Boolean(i.length<2)?r.mdBreakpoint:r.smBreakpoint)+"px) and (max-width: "+r.mdBreakpoint+"px)";var v={Table:(a={borderCollapse:"collapse",tableLayout:"fixed",width:"100%","& tbody tr":{borderBottom:"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)","&:first-child":{borderTop:"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)"}},"& th":{paddingBottom:"var(--sl-spacing-small)",textAlign:"left",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",overflow:"hidden",textOverflow:"ellipsis"}},a[b]={"& thead":{display:c?"block":"none"},"& 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"},"& thead th.drop-zone slot::slotted(raisins-plop-target)":{width:"100%"},"& tbody td.drop-zone":{display:"none"},"& tbody tr":{display:"block",background:"inherit",border:"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.1)",borderRadius:"var(--sl-border-radius-large)",padding:"var(--sl-spacing-medium)",fontSize:"var(--sl-font-size-small)",marginBottom:"var(--sl-spacing-large)"},"& td":{display:"grid",borderTop:"none",padding:"0",marginBottom:"var(--sl-spacing-medium)","&:first-child":{textAlign:"left"},"&:before":{content:"attr(data-label)",whiteSpace:"nowrap"},"&:last-child":{marginBottom:"0"},"&.hidden:before":{content:"none"}}},a[g]={"& tbody":{display:"grid",gridTemplateColumns:"0.5fr 0.5fr",gap:"25px"}},a),ButtonContainer:__assign({display:"flex","justify-content":"flex-end","margin-top":"var(--sl-spacing-small)"},gap({direction:"row",size:"var(--sl-spacing-small)"})),ButtonDisabled:{"&::part(base)":{opacity:"0.25"}}};var u=createStyleSheet(v);var f=u.toString();if(n==="empty")return o.emptyElement;return h("div",null,h("style",{type:"text/css"},f),h("table",{class:u.classes.Table},(m||c)&&h("thead",null,h("tr",null,l===null||l===void 0?void 0:l.map((function(e,a){if(p.has(a))return h("th",{class:"drop-zone"},e);return h("th",{class:m?"label":"collapsed"},e)})))),h("tbody",null,n==="loading"&&o.loadingElement,n==="rows"&&(i===null||i===void 0?void 0:i.map((function(e,a){return h("tr",{style:{borderTop:""+(!r.textOverrides.showLabels&&a===0?"none":"")},part:"table-row"},e.map((function(e,a){if(p.has(a))return h("td",{class:"drop-zone"},e);return typeof l[a]==="string"?h("td",{class:(d===null||d===void 0?void 0:d.includes(a))?"hidden":"","data-label":l[a]+":",style:{gridTemplateColumns:(d===null||d===void 0?void 0:d.includes(a))?"1fr":"0.5fr 0.5fr"}},e):h("td",null,e)})))}))))),h("div",{class:u.classes.ButtonContainer,part:t.namespace+"-button-wrapper"},h("sl-button",{size:"small",disabled:!t.hasPrev,loading:n==="loading",onClick:s.prevPage,exportparts:"base: secondarybutton-base",class:!t.hasPrev?u.classes.ButtonDisabled:""},r.textOverrides.prevLabel),h("sl-button",{size:"small",loading:n==="loading",disabled:!t.hasNext,onClick:s.nextPage,exportparts:"base: secondarybutton-base",class:!t.hasNext?u.classes.ButtonDisabled:""},r.textOverrides.moreLabel)))}export{GenericTableView as G};