@manifoldco/component-plan-matrix - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
+    core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"tableRef":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/manifold-button_7.cjs.entry.js

@@ -155,4 +155,2 @@ 'use strict';
         this.graphqlUrl = GRAPHQL_ENDPOINT;
-        // Table labels
-        this.labels = [];
         // Loading state
@@ -183,14 +181,51 @@ this.loading = true;
     createPlans() {
+        var _a, _b, _c, _d, _e;
         if (this.product) {
-            const plan = this.product.plans.edges.slice(0, 1).pop();
-            if (plan) {
-                const fixedFeatures = plan.node.fixedFeatures.edges.map(edge => edge.node.displayName);
-                const meteredFeatures = plan.node.meteredFeatures.edges.map(edge => edge.node.displayName);
-                // const configurableFeatures = plan.node.configurableFeatures.edges.map(
-                //   edge => edge.node.displayName
+            // Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell.
+            const features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce((acc, { node }) => {
+                var _a, _b, _c, _d;
+                // Grab unique fixed
+                const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: fixedFeature }) => {
+                    // Check if key exists
+                    if (fixedAccumulator[fixedFeature.displayName]) {
+                        return fixedAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [fixedFeature.displayName]: {
+                            label: fixedFeature.displayName,
+                            index: Object.keys(fixedAccumulator).length + 1,
+                        } }, fixedAccumulator);
+                }, {});
+                // Grab unique metered
+                const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: meteredFeature }) => {
+                    // Check if key exists
+                    if (meteredAccumulator[meteredFeature.displayName]) {
+                        return meteredAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [meteredFeature.displayName]: {
+                            label: meteredFeature.displayName,
+                            index: Object.keys(meteredFeature).length + 1,
+                        } }, meteredAccumulator);
+                }, {});
+                // const meteredFeatures = node?.meteredFeatures?.edges.reduce(
+                //   (fixedAccumulator: TableRef, { node: meteredFeatures }) => {
+                //     if (fixedAccumulator[meteredFeatures.displayName]) {
+                //       return fixedAccumulator;
+                //     }
+                //     return {
+                //       [meteredFeatures.displayName]: {
+                //         label: meteredFeatures.displayName,
+                //         index: Object.keys(fixedAccumulator).length + 1,
+                //       },
+                //       ...fixedAccumulator,
+                //     };
+                //   },
+                //   {}
                 // );
-                this.labels = [...fixedFeatures, ...meteredFeatures];
-                this.plans = this.product.plans.edges;
-                this.loading = false;
-            }
+                return Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), acc);
+            }, {});
+            this.tableRef = features || {};
+            this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
+            this.loading = false;
         }
@@ -205,5 +240,5 @@ else {
     }
-    fixedFeatures(displayValue, planIndex, rowIndex) {
+    fixedFeatures(displayValue, planIndex) {
         if (displayValue === 'true' || displayValue === 'false') {
-            return (core.h("div", { class: "mp--cell mp--cell__body" }, core.h("manifold-checkbox", { "input-id": `${planIndex}-${this.labels[rowIndex]}`, name: this.labels[rowIndex], checked: displayValue === 'true' })));
+            return (core.h("div", { class: "mp--cell mp--cell__body" }, core.h("manifold-checkbox", { "input-id": `${planIndex}-${displayValue}`, name: displayValue, checked: displayValue === 'true' })));
         }
@@ -233,8 +268,9 @@ return core.h("div", { class: "mp--cell mp--cell__body" }, displayValue);
         }
+        const labels = Object.keys(this.tableRef);
         const gridColumns = this.plans.length + 1;
-        const gridRows = this.labels.length + 2; // +1 for the "Get Started" row
+        const gridRows = labels.length + 2; // +1 for the "Get Started" row
         // Pass column count into css grid
         this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`);
         this.el.style.setProperty('--manifold-table-rows', `${gridRows}`);
-        return (core.h("div", { class: "mp" }, core.h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), this.labels.map(label => {
+        return (core.h("div", { class: "mp" }, core.h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), labels.map(label => {
             return (core.h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
@@ -247,5 +283,17 @@ }), core.h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th mp--cell__rounded-bl" }), this.plans
                 }, 'mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th') }, core.h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-            plan.node.fixedFeatures.edges.map((value, ii) => this.fixedFeatures(value.node.displayValue, i, ii)),
-            plan.node.meteredFeatures.edges.map(value => this.meteredFeatures(value.node.numericDetails)),
-            // plan.node.configurableFeatures.edges.map(() => this.configurableFeatures()),
+            Object.values(this.tableRef).map(({ label }, ii) => {
+                const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { displayName } }) => {
+                    return label === displayName;
+                });
+                const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { displayName } }) => {
+                    return label === displayName;
+                });
+                if (fixedFeatureMatch) {
+                    return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
+                }
+                if (meteredFeaturesMatch) {
+                    return this.meteredFeatures(meteredFeaturesMatch.node.numericDetails);
+                }
+                return (core.h("div", { class: "mp--cell mp--cell__body" }, core.h("manifold-empty-cell", null)));
+            }),
             core.h("div", { class: this.addClass({
@@ -252,0 +300,0 @@ 'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2,

dist/cjs/manifold-plan-matrix.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
+  return core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"tableRef":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
 });

dist/collection/collection-manifest.json

@@ -8,4 +8,4 @@ {
     "components/manifold-metered/manifold-metered.js",
-    "components/manifold-plan-matrix/manifold-plan-matrix.js",
-    "components/manifold-thead/manifold-thead.js"
+    "components/manifold-thead/manifold-thead.js",
+    "components/manifold-plan-matrix/manifold-plan-matrix.js"
   ],
@@ -12,0 +12,0 @@ "compiler": {

dist/collection/components/manifold-plan-matrix/manifold-plan-matrix.js

@@ -14,4 +14,2 @@ import { h } from "@stencil/core";
         this.graphqlUrl = GRAPHQL_ENDPOINT;
-        // Table labels
-        this.labels = [];
         // Loading state
@@ -42,14 +40,51 @@ this.loading = true;
     createPlans() {
+        var _a, _b, _c, _d, _e;
         if (this.product) {
-            const plan = this.product.plans.edges.slice(0, 1).pop();
-            if (plan) {
-                const fixedFeatures = plan.node.fixedFeatures.edges.map(edge => edge.node.displayName);
-                const meteredFeatures = plan.node.meteredFeatures.edges.map(edge => edge.node.displayName);
-                // const configurableFeatures = plan.node.configurableFeatures.edges.map(
-                //   edge => edge.node.displayName
+            // Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell.
+            const features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce((acc, { node }) => {
+                var _a, _b, _c, _d;
+                // Grab unique fixed
+                const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: fixedFeature }) => {
+                    // Check if key exists
+                    if (fixedAccumulator[fixedFeature.displayName]) {
+                        return fixedAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [fixedFeature.displayName]: {
+                            label: fixedFeature.displayName,
+                            index: Object.keys(fixedAccumulator).length + 1,
+                        } }, fixedAccumulator);
+                }, {});
+                // Grab unique metered
+                const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: meteredFeature }) => {
+                    // Check if key exists
+                    if (meteredAccumulator[meteredFeature.displayName]) {
+                        return meteredAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [meteredFeature.displayName]: {
+                            label: meteredFeature.displayName,
+                            index: Object.keys(meteredFeature).length + 1,
+                        } }, meteredAccumulator);
+                }, {});
+                // const meteredFeatures = node?.meteredFeatures?.edges.reduce(
+                //   (fixedAccumulator: TableRef, { node: meteredFeatures }) => {
+                //     if (fixedAccumulator[meteredFeatures.displayName]) {
+                //       return fixedAccumulator;
+                //     }
+                //     return {
+                //       [meteredFeatures.displayName]: {
+                //         label: meteredFeatures.displayName,
+                //         index: Object.keys(fixedAccumulator).length + 1,
+                //       },
+                //       ...fixedAccumulator,
+                //     };
+                //   },
+                //   {}
                 // );
-                this.labels = [...fixedFeatures, ...meteredFeatures];
-                this.plans = this.product.plans.edges;
-                this.loading = false;
-            }
+                return Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), acc);
+            }, {});
+            this.tableRef = features || {};
+            this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
+            this.loading = false;
         }
@@ -64,6 +99,6 @@ else {
     }
-    fixedFeatures(displayValue, planIndex, rowIndex) {
+    fixedFeatures(displayValue, planIndex) {
         if (displayValue === 'true' || displayValue === 'false') {
             return (h("div", { class: "mp--cell mp--cell__body" },
-                h("manifold-checkbox", { "input-id": `${planIndex}-${this.labels[rowIndex]}`, name: this.labels[rowIndex], checked: displayValue === 'true' })));
+                h("manifold-checkbox", { "input-id": `${planIndex}-${displayValue}`, name: displayValue, checked: displayValue === 'true' })));
         }
@@ -96,4 +131,5 @@ return h("div", { class: "mp--cell mp--cell__body" }, displayValue);
         }
+        const labels = Object.keys(this.tableRef);
         const gridColumns = this.plans.length + 1;
-        const gridRows = this.labels.length + 2; // +1 for the "Get Started" row
+        const gridRows = labels.length + 2; // +1 for the "Get Started" row
         // Pass column count into css grid
@@ -104,3 +140,3 @@ this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`);
             h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }),
-            this.labels.map(label => {
+            labels.map(label => {
                 return (h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
@@ -116,5 +152,18 @@ }),
                     h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-                plan.node.fixedFeatures.edges.map((value, ii) => this.fixedFeatures(value.node.displayValue, i, ii)),
-                plan.node.meteredFeatures.edges.map(value => this.meteredFeatures(value.node.numericDetails)),
-                // plan.node.configurableFeatures.edges.map(() => this.configurableFeatures()),
+                Object.values(this.tableRef).map(({ label }, ii) => {
+                    const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { displayName } }) => {
+                        return label === displayName;
+                    });
+                    const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { displayName } }) => {
+                        return label === displayName;
+                    });
+                    if (fixedFeatureMatch) {
+                        return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
+                    }
+                    if (meteredFeaturesMatch) {
+                        return this.meteredFeatures(meteredFeaturesMatch.node.numericDetails);
+                    }
+                    return (h("div", { class: "mp--cell mp--cell__body" },
+                        h("manifold-empty-cell", null)));
+                }),
                 h("div", { class: this.addClass({
@@ -210,3 +259,3 @@ 'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2,
         "plans": {},
-        "labels": {},
+        "tableRef": {},
         "loading": {}
@@ -213,0 +262,0 @@ }; }

dist/esm-es5/manifold-button_7.entry.js

@@ -1,8 +0,1 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import { r as registerInstance, h, g as getElement } from './core-c0e836f9.js';
@@ -173,4 +166,2 @@ var ManifoldButton = /** @class */ (function () {
         this.graphqlUrl = GRAPHQL_ENDPOINT;
-        // Table labels
-        this.labels = [];
         // Loading state
@@ -194,4 +185,4 @@ this.loading = true;
         })
-            .then(function (_b) {
-            var data = _b.data;
+            .then(function (_f) {
+            var data = _f.data;
             if (data.product) {
@@ -204,14 +195,56 @@ _this.product = data.product;
     ManifoldPricing.prototype.createPlans = function () {
+        var _a, _b, _c, _d, _e;
         if (this.product) {
-            var plan = this.product.plans.edges.slice(0, 1).pop();
-            if (plan) {
-                var fixedFeatures = plan.node.fixedFeatures.edges.map(function (edge) { return edge.node.displayName; });
-                var meteredFeatures = plan.node.meteredFeatures.edges.map(function (edge) { return edge.node.displayName; });
-                // const configurableFeatures = plan.node.configurableFeatures.edges.map(
-                //   edge => edge.node.displayName
+            // Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell.
+            var features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce(function (acc, _f) {
+                var node = _f.node;
+                var _a, _b, _c, _d;
+                // Grab unique fixed
+                var fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce(function (fixedAccumulator, _f) {
+                    var _g;
+                    var fixedFeature = _f.node;
+                    // Check if key exists
+                    if (fixedAccumulator[fixedFeature.displayName]) {
+                        return fixedAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign((_g = {}, _g[fixedFeature.displayName] = {
+                        label: fixedFeature.displayName,
+                        index: Object.keys(fixedAccumulator).length + 1,
+                    }, _g), fixedAccumulator);
+                }, {});
+                // Grab unique metered
+                var meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce(function (meteredAccumulator, _f) {
+                    var _g;
+                    var meteredFeature = _f.node;
+                    // Check if key exists
+                    if (meteredAccumulator[meteredFeature.displayName]) {
+                        return meteredAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign((_g = {}, _g[meteredFeature.displayName] = {
+                        label: meteredFeature.displayName,
+                        index: Object.keys(meteredFeature).length + 1,
+                    }, _g), meteredAccumulator);
+                }, {});
+                // const meteredFeatures = node?.meteredFeatures?.edges.reduce(
+                //   (fixedAccumulator: TableRef, { node: meteredFeatures }) => {
+                //     if (fixedAccumulator[meteredFeatures.displayName]) {
+                //       return fixedAccumulator;
+                //     }
+                //     return {
+                //       [meteredFeatures.displayName]: {
+                //         label: meteredFeatures.displayName,
+                //         index: Object.keys(fixedAccumulator).length + 1,
+                //       },
+                //       ...fixedAccumulator,
+                //     };
+                //   },
+                //   {}
                 // );
-                this.labels = __spreadArrays(fixedFeatures, meteredFeatures);
-                this.plans = this.product.plans.edges;
-                this.loading = false;
-            }
+                return Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), acc);
+            }, {});
+            this.tableRef = features || {};
+            this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
+            this.loading = false;
         }
@@ -227,5 +260,5 @@ else {
     };
-    ManifoldPricing.prototype.fixedFeatures = function (displayValue, planIndex, rowIndex) {
+    ManifoldPricing.prototype.fixedFeatures = function (displayValue, planIndex) {
         if (displayValue === 'true' || displayValue === 'false') {
-            return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-checkbox", { "input-id": planIndex + "-" + this.labels[rowIndex], name: this.labels[rowIndex], checked: displayValue === 'true' })));
+            return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-checkbox", { "input-id": planIndex + "-" + displayValue, name: displayValue, checked: displayValue === 'true' })));
         }
@@ -238,4 +271,4 @@ return h("div", { class: "mp--cell mp--cell__body" }, displayValue);
         }
-        return (h("div", { class: "mp--cell mp--cell__body mp--cell__block" }, h("manifold-metered", null, numericDetails.costTiers.map(function (_b, i) {
-            var limit = _b.limit, cost = _b.cost;
+        return (h("div", { class: "mp--cell mp--cell__body mp--cell__block" }, h("manifold-metered", null, numericDetails.costTiers.map(function (_f, i) {
+            var limit = _f.limit, cost = _f.cost;
             var _a;
@@ -258,8 +291,9 @@ var previous = numericDetails.costTiers[i - 1];
         }
+        var labels = Object.keys(this.tableRef);
         var gridColumns = this.plans.length + 1;
-        var gridRows = this.labels.length + 2; // +1 for the "Get Started" row
+        var gridRows = labels.length + 2; // +1 for the "Get Started" row
         // Pass column count into css grid
         this.el.style.setProperty('--manifold-table-columns', "" + gridColumns);
         this.el.style.setProperty('--manifold-table-rows', "" + gridRows);
-        return (h("div", { class: "mp" }, h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), this.labels.map(function (label) {
+        return (h("div", { class: "mp" }, h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), labels.map(function (label) {
             return (h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
@@ -272,5 +306,20 @@ }), h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th mp--cell__rounded-bl" }), this.plans
                 }, 'mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th') }, h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-            plan.node.fixedFeatures.edges.map(function (value, ii) { return _this.fixedFeatures(value.node.displayValue, i, ii); }),
-            plan.node.meteredFeatures.edges.map(function (value) { return _this.meteredFeatures(value.node.numericDetails); }),
-            // plan.node.configurableFeatures.edges.map(() => this.configurableFeatures()),
+            Object.values(_this.tableRef).map(function (_f, ii) {
+                var label = _f.label;
+                var fixedFeatureMatch = plan.node.fixedFeatures.edges.find(function (_f) {
+                    var displayName = _f.node.displayName;
+                    return label === displayName;
+                });
+                var meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(function (_f) {
+                    var displayName = _f.node.displayName;
+                    return label === displayName;
+                });
+                if (fixedFeatureMatch) {
+                    return _this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
+                }
+                if (meteredFeaturesMatch) {
+                    return _this.meteredFeatures(meteredFeaturesMatch.node.numericDetails);
+                }
+                return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-empty-cell", null)));
+            }),
             h("div", { class: _this.addClass({
@@ -277,0 +326,0 @@ 'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2,

dist/esm/manifold-button_7.entry.js

@@ -151,4 +151,2 @@ import { r as registerInstance, h, g as getElement } from './core-c0e836f9.js';
         this.graphqlUrl = GRAPHQL_ENDPOINT;
-        // Table labels
-        this.labels = [];
         // Loading state
@@ -179,14 +177,51 @@ this.loading = true;
     createPlans() {
+        var _a, _b, _c, _d, _e;
         if (this.product) {
-            const plan = this.product.plans.edges.slice(0, 1).pop();
-            if (plan) {
-                const fixedFeatures = plan.node.fixedFeatures.edges.map(edge => edge.node.displayName);
-                const meteredFeatures = plan.node.meteredFeatures.edges.map(edge => edge.node.displayName);
-                // const configurableFeatures = plan.node.configurableFeatures.edges.map(
-                //   edge => edge.node.displayName
+            // Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell.
+            const features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce((acc, { node }) => {
+                var _a, _b, _c, _d;
+                // Grab unique fixed
+                const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: fixedFeature }) => {
+                    // Check if key exists
+                    if (fixedAccumulator[fixedFeature.displayName]) {
+                        return fixedAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [fixedFeature.displayName]: {
+                            label: fixedFeature.displayName,
+                            index: Object.keys(fixedAccumulator).length + 1,
+                        } }, fixedAccumulator);
+                }, {});
+                // Grab unique metered
+                const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: meteredFeature }) => {
+                    // Check if key exists
+                    if (meteredAccumulator[meteredFeature.displayName]) {
+                        return meteredAccumulator;
+                    }
+                    // Add new key
+                    return Object.assign({ [meteredFeature.displayName]: {
+                            label: meteredFeature.displayName,
+                            index: Object.keys(meteredFeature).length + 1,
+                        } }, meteredAccumulator);
+                }, {});
+                // const meteredFeatures = node?.meteredFeatures?.edges.reduce(
+                //   (fixedAccumulator: TableRef, { node: meteredFeatures }) => {
+                //     if (fixedAccumulator[meteredFeatures.displayName]) {
+                //       return fixedAccumulator;
+                //     }
+                //     return {
+                //       [meteredFeatures.displayName]: {
+                //         label: meteredFeatures.displayName,
+                //         index: Object.keys(fixedAccumulator).length + 1,
+                //       },
+                //       ...fixedAccumulator,
+                //     };
+                //   },
+                //   {}
                 // );
-                this.labels = [...fixedFeatures, ...meteredFeatures];
-                this.plans = this.product.plans.edges;
-                this.loading = false;
-            }
+                return Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), acc);
+            }, {});
+            this.tableRef = features || {};
+            this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
+            this.loading = false;
         }
@@ -201,5 +236,5 @@ else {
     }
-    fixedFeatures(displayValue, planIndex, rowIndex) {
+    fixedFeatures(displayValue, planIndex) {
         if (displayValue === 'true' || displayValue === 'false') {
-            return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-checkbox", { "input-id": `${planIndex}-${this.labels[rowIndex]}`, name: this.labels[rowIndex], checked: displayValue === 'true' })));
+            return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-checkbox", { "input-id": `${planIndex}-${displayValue}`, name: displayValue, checked: displayValue === 'true' })));
         }
@@ -229,8 +264,9 @@ return h("div", { class: "mp--cell mp--cell__body" }, displayValue);
         }
+        const labels = Object.keys(this.tableRef);
         const gridColumns = this.plans.length + 1;
-        const gridRows = this.labels.length + 2; // +1 for the "Get Started" row
+        const gridRows = labels.length + 2; // +1 for the "Get Started" row
         // Pass column count into css grid
         this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`);
         this.el.style.setProperty('--manifold-table-rows', `${gridRows}`);
-        return (h("div", { class: "mp" }, h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), this.labels.map(label => {
+        return (h("div", { class: "mp" }, h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), labels.map(label => {
             return (h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
@@ -243,5 +279,17 @@ }), h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th mp--cell__rounded-bl" }), this.plans
                 }, 'mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th') }, h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-            plan.node.fixedFeatures.edges.map((value, ii) => this.fixedFeatures(value.node.displayValue, i, ii)),
-            plan.node.meteredFeatures.edges.map(value => this.meteredFeatures(value.node.numericDetails)),
-            // plan.node.configurableFeatures.edges.map(() => this.configurableFeatures()),
+            Object.values(this.tableRef).map(({ label }, ii) => {
+                const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { displayName } }) => {
+                    return label === displayName;
+                });
+                const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { displayName } }) => {
+                    return label === displayName;
+                });
+                if (fixedFeatureMatch) {
+                    return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
+                }
+                if (meteredFeaturesMatch) {
+                    return this.meteredFeatures(meteredFeaturesMatch.node.numericDetails);
+                }
+                return (h("div", { class: "mp--cell mp--cell__body" }, h("manifold-empty-cell", null)));
+            }),
             h("div", { class: this.addClass({
@@ -248,0 +296,0 @@ 'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2,

dist/manifold-plan-matrix/manifold-plan-matrix.esm.js

@@ -1,1 +0,1 @@
-import{p as t,b as i}from"./p-3fb78b3a.js";t().then(t=>i([["p-ch74kysj",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],labels:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16]}],[0,"manifold-empty-cell"]]]],t));
+import{p as t,b as i}from"./p-3fb78b3a.js";t().then(t=>i([["p-72ihjdw6",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],tableRef:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16]}],[0,"manifold-empty-cell"]]]],t));

dist/manifold-plan-matrix/p-4226887f.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-7182637e.system.js"],(function(){"use strict";var t,e;return{setters:[function(i){t=i.p;e=i.b}],execute:function(){t().then((function(t){return e([["p-vdwt4e6m.system",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],labels:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16]}],[0,"manifold-empty-cell"]]]],t)}))}}}));
+System.register(["./p-7182637e.system.js"],(function(){"use strict";var t,e;return{setters:[function(i){t=i.p;e=i.b}],execute:function(){t().then((function(t){return e([["p-ybgoiwvq.system",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],tableRef:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16]}],[0,"manifold-empty-cell"]]]],t)}))}}}));

dist/types/components/manifold-plan-matrix/manifold-plan-matrix.d.ts

@@ -5,2 +5,8 @@ import { ProductQuery } from '../../types/graphql';
 };
+declare type TableRef = {
+    [key: string]: {
+        label: string;
+        index: number;
+    };
+};
 declare type NumericDetails = ProductQuery['product']['plans']['edges'][0]['node']['meteredFeatures']['edges'][0]['node']['numericDetails'];
@@ -15,3 +21,3 @@ export declare class ManifoldPricing {
     plans: ProductQuery['product']['plans']['edges'];
-    labels: string[];
+    tableRef: TableRef;
     loading: boolean;
@@ -21,3 +27,3 @@ componentWillLoad(): void;
     addClass(obj: conditionalClassesObj, baseClass?: string): string;
-    fixedFeatures(displayValue: string, planIndex: number, rowIndex: number): any;
+    fixedFeatures(displayValue: string, planIndex: number): any;
     meteredFeatures(numericDetails: NumericDetails): any;
@@ -24,0 +30,0 @@ configurableFeatures(): any;

package.json

 {
   "name": "@manifoldco/component-plan-matrix",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Stencil Component Starter",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

917036

increased by1.43%

Lines of code

14790

increased by1.37%

No dependency changes