@saasquatch/mint-components 2.4.1-9 → 2.4.2-1

package/dist/cjs/{GenericTableView-be5648e4.js → GenericTableView-2a5a39c8.js}

@@ -9,6 +9,9 @@ function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Non-string columns are the editor's raisins plop targets, so the header has to stay rendered for them
+  const hasDropZones = !!(columns === null || columns === void 0 ? void 0 : columns.some((column) => typeof column !== "string"));
+  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 +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",
@@ -36,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)",
@@ -96,11 +131,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,
+      (showLabels || hasDropZones) && (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);
+            return (index.h("th", { class: showLabels ? "label" : "collapsed" }, column));
+          return index.h("th", { class: "drop-zone" }, column);
         })))),
       index.h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -111,7 +146,7 @@ function GenericTableView(props) {
             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",
-              } }, cell)) : (index.h("td", null, cell));
+              } }, cell)) : (index.h("td", { class: "drop-zone" }, cell));
           })));
         })))),
     index.h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },

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

@@ -13,7 +13,7 @@ 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-2a5a39c8.js');
 const reRender = require('./re-render-72a0ef45.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');

package/dist/cjs/sqm-big-stat_47.cjs.entry.js

@@ -7981,7 +7981,7 @@ const TaxAndCashMonolith = class {
     /**
      *
      * @undocumented
-     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
+     * @componentState { "title": "Step 1: Personal information", "default": true, "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
      * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" }
      * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" }
      * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" }

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

@@ -11,7 +11,7 @@ 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-2a5a39c8.js');
 const reRender = require('./re-render-72a0ef45.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');

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

@@ -10,7 +10,7 @@ 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-2a5a39c8.js');
 const reRender = require('./re-render-72a0ef45.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');

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-2a5a39c8.js');
 require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-e9f2a454.js');

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -42,7 +42,7 @@ const WidgetVerificationController = class {
      * @componentState { "title": "Tax and cash", "default": true, "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
      * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
      */
-    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}}';
+    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}, "sqm-tax-and-cash":{"step":"/1"}}';
     domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js

@@ -45,7 +45,7 @@ export class WidgetVerificationController {
      * @componentState { "title": "Tax and cash", "default": true, "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
      * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
      */
-    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}}';
+    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}, "sqm-tax-and-cash":{"step":"/1"}}';
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -153,7 +153,7 @@ export class WidgetVerificationController {
       },
       "attribute": "state-controller",
       "reflect": false,
-      "defaultValue": "'{\"sqm-widget-verification-controller\":{\"isAuth\":true}}'"
+      "defaultValue": "'{\"sqm-widget-verification-controller\":{\"isAuth\":true}, \"sqm-tax-and-cash\":{\"step\":\"/1\"}}'"
     }
   }; }
 }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -1116,7 +1116,7 @@ export class TaxAndCashMonolith {
     /**
      *
      * @undocumented
-     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
+     * @componentState { "title": "Step 1: Personal information", "default": true, "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
      * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" }
      * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" }
      * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" }
@@ -5841,7 +5841,7 @@ export class TaxAndCashMonolith {
             "text": undefined,
             "name": "undocumented"
           }, {
-            "text": "{ \"title\": \"Step 1: Personal information\", \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"], \"uiGroup\": \"Step 1 Properties\" }",
+            "text": "{ \"title\": \"Step 1: Personal information\", \"default\": true, \"props\": { \"step\": \"/1\" }, \"dependencies\": [\"sqm-user-info-form\"], \"uiGroup\": \"Step 1 Properties\" }",
             "name": "componentState"
           }, {
             "text": "{ \"title\": \"Step 2: Indirect tax\", \"props\": { \"step\": \"/2\" }, \"dependencies\": [\"sqm-indirect-tax-form\"], \"uiGroup\": \"Step 2 Properties\" }",

package/dist/collection/tables/GenericTableView.js

@@ -6,6 +6,9 @@ export function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Non-string columns are the editor's raisins plop targets, so the header has to stay rendered for them
+  const hasDropZones = !!(columns === null || columns === void 0 ? void 0 : columns.some((column) => typeof column !== "string"));
+  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 +29,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 +43,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 +128,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,
+      (showLabels || hasDropZones) && (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);
+            return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
+          return h("th", { class: "drop-zone" }, column);
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -108,7 +143,7 @@ export function GenericTableView(props) {
             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",
-              } }, cell)) : (h("td", null, cell));
+              } }, cell)) : (h("td", { class: "drop-zone" }, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },

package/dist/esm/{GenericTableView-8c72ac30.js → GenericTableView-2555736c.js}

@@ -7,6 +7,9 @@ function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  // Non-string columns are the editor's raisins plop targets, so the header has to stay rendered for them
+  const hasDropZones = !!(columns === null || columns === void 0 ? void 0 : columns.some((column) => typeof column !== "string"));
+  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 +30,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 +44,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 +129,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,
+      (showLabels || hasDropZones) && (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);
+            return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
+          return h("th", { class: "drop-zone" }, column);
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -109,7 +144,7 @@ function GenericTableView(props) {
             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",
-              } }, cell)) : (h("td", null, cell));
+              } }, cell)) : (h("td", { class: "drop-zone" }, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },

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

@@ -9,7 +9,7 @@ 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-2555736c.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-bf46ba54.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';

package/dist/esm/sqm-big-stat_47.entry.js

@@ -7977,7 +7977,7 @@ const TaxAndCashMonolith = class {
     /**
      *
      * @undocumented
-     * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
+     * @componentState { "title": "Step 1: Personal information", "default": true, "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" }
      * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" }
      * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" }
      * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" }

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

@@ -7,7 +7,7 @@ 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-2555736c.js';
 import { a as useRequestRerender, u as useRerenderListener } from './re-render-bf46ba54.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';

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

@@ -6,7 +6,7 @@ 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-2555736c.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-bf46ba54.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';

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-2555736c.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/sqm-widget-verification-controller.entry.js

@@ -38,7 +38,7 @@ const WidgetVerificationController = class {
      * @componentState { "title": "Tax and cash", "default": true, "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
      * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
      */
-    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}}';
+    this.stateController = '{"sqm-widget-verification-controller":{"isAuth":true}, "sqm-tax-and-cash":{"step":"/1"}}';
     h(this);
   }
   disconnectedCallback() { }

package/dist/esm-es5/GenericTableView-2555736c.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++){t=arguments[a];for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]}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 t;var a=e.states,r=e.data,o=e.callbacks,s=e.elements;var l=s.columns,i=s.rows;var n=a.show;var d=r.hiddenColumns&&r.hiddenColumns.split(",").map(Number);var p=!!(l===null||l===void 0?void 0:l.some((function(e){return typeof e!=="string"})));var c=r.textOverrides.showLabels;var m="@media (max-width: "+r.mdBreakpoint+"px)";var b="@media (min-width: "+(Boolean(i.length<2)?r.mdBreakpoint:r.smBreakpoint)+"px) and (max-width: "+r.mdBreakpoint+"px)";var g={Table:(t={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"}},t[m]={"& thead":{display:p?"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"}}},t[b]={"& tbody":{display:"grid",gridTemplateColumns:"0.5fr 0.5fr",gap:"25px"}},t),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 v=createStyleSheet(g);var u=v.toString();if(n==="empty")return s.emptyElement;return h("div",null,h("style",{type:"text/css"},u),h("table",{class:v.classes.Table},(c||p)&&h("thead",null,h("tr",null,l===null||l===void 0?void 0:l.map((function(e){if(typeof e==="string")return h("th",{class:c?"label":"collapsed"},e);return h("th",{class:"drop-zone"},e)})))),h("tbody",null,n==="loading"&&s.loadingElement,n==="rows"&&(i===null||i===void 0?void 0:i.map((function(e,t){return h("tr",{style:{borderTop:""+(!r.textOverrides.showLabels&&t===0?"none":"")},part:"table-row"},e.map((function(e,t){return typeof l[t]==="string"?h("td",{class:(d===null||d===void 0?void 0:d.includes(t))?"hidden":"","data-label":l[t]+":",style:{gridTemplateColumns:(d===null||d===void 0?void 0:d.includes(t))?"1fr":"0.5fr 0.5fr"}},e):h("td",{class:"drop-zone"},e)})))}))))),h("div",{class:v.classes.ButtonContainer,part:a.namespace+"-button-wrapper"},h("sl-button",{size:"small",disabled:!a.hasPrev,loading:n==="loading",onClick:o.prevPage,exportparts:"base: secondarybutton-base",class:!a.hasPrev?v.classes.ButtonDisabled:""},r.textOverrides.prevLabel),h("sl-button",{size:"small",loading:n==="loading",disabled:!a.hasNext,onClick:o.nextPage,exportparts:"base: secondarybutton-base",class:!a.hasNext?v.classes.ButtonDisabled:""},r.textOverrides.moreLabel)))}export{GenericTableView as G};