@saasquatch/mint-components 1.6.2-17 → 1.6.2-18

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

@@ -1,357 +1,357 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { GenericTableView, } from "../../tables/GenericTableView";
-import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
-import { useChildElements } from "../../tables/useChildElements";
-import mockRewardData from "./mockRewardData";
-import { tryMethod, useRewardsTable } from "./useRewardsTable";
-/**
- * @uiName Reward Table
- * @exampleGroup Rewards
- * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
- */
-export class RewardsTable {
-  constructor() {
-    /** @uiName Number of rewards per page */
-    this.perPage = 4;
-    /** @uiName Hide Column Labels */
-    this.hideLabels = false;
-    /** @uiName Previous button text  */
-    this.prevLabel = "Prev";
-    /** @uiName View More button text  */
-    this.moreLabel = "Next";
-    /**
-     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
-     *
-     *  @uiName Mobile Hidden Columns  */
-    this.hiddenColumns = "0";
-    /** @uiName Mobile Breakpoint  */
-    this.smBreakpoint = 599;
-    /** @uiName Tablet Breakpoint  */
-    this.mdBreakpoint = 799;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const empty = h(EmptySlot, null);
-    const loading = h(LoadingSlot, null);
-    const { states, data, callbacks, elements } = isDemo()
-      ? useRewardsTableDemo(this, empty, loading)
-      : useRewardsTable(this, empty, loading);
-    useRequestRerender([this.perPage]);
-    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
-  }
-  static get is() { return "sqm-rewards-table"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "programId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Program",
-            "name": "uiName"
-          }, {
-            "text": "programSelector",
-            "name": "uiWidget"
-          }],
-        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
-    "perPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Number of rewards per page",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "per-page",
-      "reflect": false,
-      "defaultValue": "4"
-    },
-    "hideLabels": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Hide Column Labels",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "hide-labels",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "prevLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Previous button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "prev-label",
-      "reflect": false,
-      "defaultValue": "\"Prev\""
-    },
-    "moreLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "View More button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "more-label",
-      "reflect": false,
-      "defaultValue": "\"Next\""
-    },
-    "hiddenColumns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Mobile Hidden Columns",
-            "name": "uiName"
-          }],
-        "text": "Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3"
-      },
-      "attribute": "hidden-columns",
-      "reflect": false,
-      "defaultValue": "\"0\""
-    },
-    "smBreakpoint": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Mobile Breakpoint",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "sm-breakpoint",
-      "reflect": false,
-      "defaultValue": "599"
-    },
-    "mdBreakpoint": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Tablet Breakpoint",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "md-breakpoint",
-      "reflect": false,
-      "defaultValue": "799"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "GenericTableViewProps": {
-            "location": "import",
-            "path": "../../tables/GenericTableView"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-}
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
-}
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h(LoadingRow, null),
-    h(LoadingRow, null),
-    h(LoadingRow, null),
-    h(LoadingRow, null)));
-}
-function LoadingRow() {
-  return (h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))));
-}
-function useRewardsTableDemo(props, emptyElement, loadingElement) {
-  const [content, setContent] = useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    columns: [],
-    rows: [],
-    loading: false,
-    page: 0,
-  });
-  const tick = useRerenderListener();
-  const { data } = useMemo(() => mockRewardData(props.perPage), [props.perPage]);
-  const components = useChildElements();
-  async function getComponentData(components) {
-    let componentData = data;
-    componentData = data.slice(0, props.perPage);
-    // filter out loading and empty states from columns array
-    const columnComponents = components.filter((component) => {
-      var _a, _b;
-      return component.slot !== "loading" &&
-        component.slot !== "empty" &&
-        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
-        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
-    });
-    // get the column titles (renderLabel is asynchronous)
-    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
-      var _a;
-      const slot = (_a = c === null || c === void 0 ? void 0 : c.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot");
-      // Custom plop targets
-      if (c.tagName === "RAISINS-PLOP-TARGET" &&
-        slot !== "loading" &&
-        slot !== "empty") {
-        c.style.position = "absolute";
-        c.setAttribute("slot", "column-" + idx);
-        // Replace add text with a simple + button
-        const plopTarget = c.firstElementChild.childNodes[1];
-        plopTarget.innerHTML = "＋";
-        plopTarget.style.lineHeight = "20px";
-        return tryMethod(c, () => c.renderLabel(idx));
-      }
-      return tryMethod(c, () => c.renderLabel());
-    });
-    // get the column cells (renderCell is asynchronous)
-    //@ts-ignore
-    const cellsPromise = componentData === null || componentData === void 0 ? void 0 : componentData.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, undefined)));
-      const cells = (await Promise.all(cellPromise));
-      return cells;
-    });
-    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
-    setContent({ rows });
-    const columns = columnsPromise && (await Promise.all(columnsPromise));
-    // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: 0 });
-  }
-  useEffect(() => {
-    setContent({ loading: true });
-    data && getComponentData(components);
-  }, [data, components, tick]);
-  const demoProps = deepmerge({
-    states: {
-      hasPrev: false,
-      hasNext: false,
-      loading: false,
-      show: "rows",
-    },
-    callbacks: {
-      prevPage: () => console.log("Prev"),
-      nextPage: () => console.log("Next"),
-    },
-    data: {
-      textOverrides: {
-        showLabels: !props.hideLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-      referralData: [],
-      mdBreakpoint: 799,
-      smBreakpoint: 599,
-    },
-    elements: {
-      columns: content.columns,
-      rows: content.rows,
-      emptyElement,
-      loadingElement,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-  return demoProps;
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { GenericTableView, } from "../../tables/GenericTableView";
+import { useRequestRerender, useRerenderListener, } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+import mockRewardData from "./mockRewardData";
+import { tryMethod, useRewardsTable } from "./useRewardsTable";
+/**
+ * @uiName Reward Table
+ * @exampleGroup Rewards
+ * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
+ */
+export class RewardsTable {
+  constructor() {
+    /** @uiName Number of rewards per page */
+    this.perPage = 4;
+    /** @uiName Hide Column Labels */
+    this.hideLabels = false;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /**
+     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
+     *
+     *  @uiName Mobile Hidden Columns  */
+    this.hiddenColumns = "0";
+    /** @uiName Mobile Breakpoint  */
+    this.smBreakpoint = 599;
+    /** @uiName Tablet Breakpoint  */
+    this.mdBreakpoint = 799;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot, null);
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = isDemo()
+      ? useRewardsTableDemo(this, empty, loading)
+      : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+  static get is() { return "sqm-rewards-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "perPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of rewards per page",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "per-page",
+      "reflect": false,
+      "defaultValue": "4"
+    },
+    "hideLabels": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Column Labels",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-labels",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "prevLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Previous button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "prev-label",
+      "reflect": false,
+      "defaultValue": "\"Prev\""
+    },
+    "moreLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "View More button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "more-label",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "hiddenColumns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Mobile Hidden Columns",
+            "name": "uiName"
+          }],
+        "text": "Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3"
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Mobile Breakpoint",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "599"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Tablet Breakpoint",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "799"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "GenericTableViewProps": {
+            "location": "import",
+            "path": "../../tables/GenericTableView"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
+}
+function useRewardsTableDemo(props, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = useMemo(() => mockRewardData(props.perPage), [props.perPage]);
+  const components = useChildElements();
+  async function getComponentData(components) {
+    let componentData = data;
+    componentData = data.slice(0, props.perPage);
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => {
+      var _a, _b;
+      return component.slot !== "loading" &&
+        component.slot !== "empty" &&
+        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
+        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
+    });
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
+      var _a;
+      const slot = (_a = c === null || c === void 0 ? void 0 : c.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot");
+      // Custom plop targets
+      if (c.tagName === "RAISINS-PLOP-TARGET" &&
+        slot !== "loading" &&
+        slot !== "empty") {
+        c.style.position = "absolute";
+        c.setAttribute("slot", "column-" + idx);
+        // Replace add text with a simple + button
+        const plopTarget = c.firstElementChild.childNodes[1];
+        plopTarget.innerHTML = "＋";
+        plopTarget.style.lineHeight = "20px";
+        return tryMethod(c, () => c.renderLabel(idx));
+      }
+      return tryMethod(c, () => c.renderLabel());
+    });
+    // get the column cells (renderCell is asynchronous)
+    //@ts-ignore
+    const cellsPromise = componentData === null || componentData === void 0 ? void 0 : componentData.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, undefined)));
+      const cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: 0 });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    data && getComponentData(components);
+  }, [data, components, tick]);
+  const demoProps = deepmerge({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      show: "rows",
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: !props.hideLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+      mdBreakpoint: 799,
+      smBreakpoint: 599,
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
+}