@manifoldco/web-components - npm Package Compare versions

Comparing version 0.0.34 to 0.0.35

dist/cjs/loader.cjs.js

@@ -5,8 +5,8 @@ 'use strict';
 
-const index = require('./index-8032060c.js');
+const index = require('./index-5afde02e.js');
 
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"planOptions":[16],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32],"breakpoint":[32],"scrolled":[32]},[[1,"scroll","scrollHandler"]]]]]], options);
+  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"planOptions":[16],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32],"breakpoint":[32],"scrolled":[32],"maxRowHeights":[32],"currentSlide":[32]},[[1,"scroll","scrollHandler"]]]]]], options);
 });
 
 exports.defineCustomElements = defineCustomElements;

dist/cjs/manifold.cjs.js

 'use strict';
 
-const index = require('./index-8032060c.js');
+const index = require('./index-5afde02e.js');
 
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"planOptions":[16],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32],"breakpoint":[32],"scrolled":[32]},[[1,"scroll","scrollHandler"]]]]]], options);
+  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"planOptions":[16],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32],"breakpoint":[32],"scrolled":[32],"maxRowHeights":[32],"currentSlide":[32]},[[1,"scroll","scrollHandler"]]]]]], options);
 });

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

@@ -22,4 +22,8 @@ import { Component, Element, Event, Host, State, Prop, h, Watch, Listen, } from '@stencil/core';
         this.scrolled = false;
+        this.currentSlide = 0;
+        this.carouselRows = new Map();
+        this.slides = new Map();
         this.resizeObserver = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
+                // Set current breakpoint based on size of containing element
                 if (entry.target === this.el) {
@@ -35,2 +39,3 @@ let breakpoint = 'lg';
                     this.breakpoint = breakpoint;
+                    this.setMaxRowHeights();
                 }
@@ -200,2 +205,32 @@ });
     }
+    setMaxRowHeights() {
+        const heights = new Map();
+        [...this.featureSlugs.map((fs) => fs.slug), '__header__'].forEach((featureSlug) => {
+            heights.set(featureSlug, 0);
+            this.plans.forEach((plan) => {
+                if (this.carouselRows.get(featureSlug)) {
+                    const rowHeight = this.carouselRows.get(featureSlug).get(plan.slug).offsetHeight;
+                    if (rowHeight > heights.get(featureSlug)) {
+                        heights.set(featureSlug, rowHeight);
+                    }
+                }
+            });
+        });
+        this.maxRowHeights = heights;
+    }
+    scrollCarouselTo(index) {
+        const slide = this.slides.get(index);
+        if (!slide) {
+            return;
+        }
+        this.slidesContainer.scrollTo({
+            left: slide.offsetLeft,
+            behavior: 'smooth',
+        });
+    }
+    handleCarouselScroll() {
+        this.currentSlide = Math.round((this.slidesContainer.scrollLeft /
+            (this.slidesContainer.scrollWidth - this.slidesContainer.offsetWidth)) *
+            (this.plans.length - 1));
+    }
     get plans() {
@@ -318,2 +353,97 @@ if (!this.product || !this.product.plans) {
     }
+    renderHeaderCell({ slug, name, cost }) {
+        var _a, _b;
+        return (h("th", { class: "header-cell", part: `plan--${slug} plan-header plan-header--${slug} cell header-cell` },
+            h("div", { style: {
+                    minHeight: this.maxRowHeights
+                        ? `calc(${this.maxRowHeights.get('__header__')}px - 2px - 4rem)` // account for borders + padding
+                        : '0',
+                } },
+                h("h3", { class: "Manifold-Typography--Heading" }, name),
+                h("label", { class: "Manifold-Typography--SubheadingSmall", part: `plan-cost plan-cost--${slug}` }, ((_b = (_a = this.planOptions) === null || _a === void 0 ? void 0 : _a[slug]) === null || _b === void 0 ? void 0 : _b.cost) || planCost(cost)))));
+    }
+    renderCTA(plan) {
+        var _a, _b, _c, _d;
+        const eventDetails = {
+            planSlug: plan.slug,
+            displayName: plan.name,
+            featureSelection: this.featureSelections[plan.slug] || [],
+        };
+        const cta = (_b = (_a = this.planOptions) === null || _a === void 0 ? void 0 : _a[plan.slug]) === null || _b === void 0 ? void 0 : _b.cta;
+        const ctaText = (cta === null || cta === void 0 ? void 0 : cta.text) || this.ctaText || ((_c = plan.cta) === null || _c === void 0 ? void 0 : _c.text) || 'Get Started';
+        const uri = this.baseUrl || ((_d = plan.cta) === null || _d === void 0 ? void 0 : _d.uri);
+        if (uri) {
+            const params = new URLSearchParams();
+            Object.entries(eventDetails).forEach(([key, val]) => {
+                if (typeof val !== 'string') {
+                    if (val.length > 0) {
+                        const selection = btoa(JSON.stringify(val));
+                        params.set(key, selection);
+                    }
+                }
+                else {
+                    params.set(key, val);
+                }
+            });
+            const url = `${uri}?${params}`;
+            return (h("td", { part: `plan--${plan.slug} cell cta-cell footer-cell` },
+                h("a", { class: "button", part: `cta cta--${plan.slug}`, href: url }, ctaText)));
+        }
+        return (h("td", { class: "footer-cell", part: `plan--${plan.slug} cell cta-cell footer-cell` },
+            h("button", { part: `cta cta--${plan.slug}`, disabled: (cta === null || cta === void 0 ? void 0 : cta.disabled) || this.featureErrors.some((e) => e.planSlug === plan.slug), onClick: () => this.ctaClick.emit(eventDetails) }, ctaText)));
+    }
+    renderTable() {
+        return (h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" },
+            h("thead", null,
+                h("tr", null,
+                    h("th", { class: "feature-name", part: "plan-header plan-header--features cell feature-cell header-cell" }),
+                    this.plans.map((plan) => this.renderHeaderCell(plan)))),
+            h("tbody", null,
+                this.featureSlugs.map((featureSlug) => (h("tr", null,
+                    h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name),
+                    this.plans.map((plan) => (h("td", { part: `plan--${plan.slug} cell value-cell` },
+                        h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))),
+                h("tr", null,
+                    h("td", { class: "feature-name", part: "footer-cell feature-cell" }),
+                    this.plans.map((plan) => this.renderCTA(plan))))));
+    }
+    renderCarousel() {
+        return (h("div", { class: `Manifold-Typography--Body plan-carousel ${this.breakpoint}` },
+            h("div", { class: "slides", ref: (el) => {
+                    this.slidesContainer = el;
+                }, onScroll: () => this.handleCarouselScroll() }, this.plans.map((plan, index) => (h("div", { class: "slide", ref: (el) => {
+                    this.slides.set(index, el);
+                } },
+                h("table", { class: "plan-table" },
+                    h("thead", null,
+                        h("tr", { ref: (el) => {
+                                if (!this.carouselRows.get('__header__')) {
+                                    this.carouselRows.set('__header__', new Map());
+                                }
+                                this.carouselRows
+                                    .get('__header__')
+                                    .set(plan.slug, el);
+                            } }, this.renderHeaderCell(plan))),
+                    h("tbody", null,
+                        this.featureSlugs.map((featureSlug) => (h("tr", { class: "feature-row", ref: (el) => {
+                                if (!this.carouselRows.get(featureSlug.slug)) {
+                                    this.carouselRows.set(featureSlug.slug, new Map());
+                                }
+                                this.carouselRows
+                                    .get(featureSlug.slug)
+                                    .set(plan.slug, el);
+                            } },
+                            h("td", null,
+                                h("div", { style: {
+                                        minHeight: this.maxRowHeights
+                                            ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
+                                            : '0',
+                                    } },
+                                    h("div", { class: "feature-name feature-cell", part: "cell feature-cell" }, featureSlug.name),
+                                    h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` },
+                                        h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))),
+                        h("tr", null, this.renderCTA(plan)))))))),
+            h("nav", null,
+                h("ol", null, this.plans.map((_plan, index) => (h("li", { class: index === this.currentSlide ? 'active' : '', onClick: () => this.scrollCarouselTo(index) })))))));
+    }
     render() {
@@ -323,50 +453,3 @@ if (!this.product) {
         }
-        return (h(Host, null,
-            h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" },
-                h("thead", null,
-                    h("tr", null,
-                        h("th", { class: "feature-name", part: "plan-header plan-header--features cell feature-cell header-cell" }),
-                        this.plans.map(({ slug, name, cost }) => {
-                            var _a, _b;
-                            return (h("th", { part: `plan--${slug} plan-header plan-header--${slug} cell header-cell` },
-                                h("h3", { class: "Manifold-Typography--Heading" }, name),
-                                h("label", { class: "Manifold-Typography--SubheadingSmall", part: `plan-cost plan-cost--${slug}` }, ((_b = (_a = this.planOptions) === null || _a === void 0 ? void 0 : _a[slug]) === null || _b === void 0 ? void 0 : _b.cost) || planCost(cost))));
-                        }))),
-                h("tbody", null,
-                    this.featureSlugs.map((featureSlug) => (h("tr", null,
-                        h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name),
-                        this.plans.map((plan) => (h("td", { part: `plan--${plan.slug} cell value-cell` },
-                            h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))),
-                    h("tr", null,
-                        h("td", { class: "feature-name", part: "footer-cell feature-cell" }),
-                        this.plans.map((p) => {
-                            var _a, _b, _c, _d;
-                            const eventDetails = {
-                                planSlug: p.slug,
-                                displayName: p.name,
-                                featureSelection: this.featureSelections[p.slug] || [],
-                            };
-                            const cta = (_b = (_a = this.planOptions) === null || _a === void 0 ? void 0 : _a[p.slug]) === null || _b === void 0 ? void 0 : _b.cta;
-                            const ctaText = (cta === null || cta === void 0 ? void 0 : cta.text) || this.ctaText || ((_c = p.cta) === null || _c === void 0 ? void 0 : _c.text) || 'Get Started';
-                            const uri = this.baseUrl || ((_d = p.cta) === null || _d === void 0 ? void 0 : _d.uri);
-                            if (uri) {
-                                const params = new URLSearchParams();
-                                Object.entries(eventDetails).forEach(([key, val]) => {
-                                    if (typeof val !== 'string') {
-                                        if (val.length > 0) {
-                                            const selection = btoa(JSON.stringify(val));
-                                            params.set(key, selection);
-                                        }
-                                    }
-                                    else {
-                                        params.set(key, val);
-                                    }
-                                });
-                                const url = `${uri}?${params}`;
-                                return (h("td", { part: `plan--${p.slug} cell cta-cell footer-cell` },
-                                    h("a", { class: "button", part: `cta cta--${p.slug}`, href: url }, ctaText)));
-                            }
-                            return (h("td", { part: `plan--${p.slug} cell cta-cell footer-cell` },
-                                h("button", { part: `cta cta--${p.slug}`, disabled: (cta === null || cta === void 0 ? void 0 : cta.disabled) || this.featureErrors.some((e) => e.planSlug === p.slug), onClick: () => this.ctaClick.emit(eventDetails) }, ctaText)));
-                        }))))));
+        return (h(Host, null, ['xs', 'sm'].includes(this.breakpoint) ? this.renderCarousel() : this.renderTable()));
     }
@@ -497,3 +580,5 @@ static get is() { return "manifold-plan-table"; }
         "breakpoint": {},
-        "scrolled": {}
+        "scrolled": {},
+        "maxRowHeights": {},
+        "currentSlide": {}
     }; }
@@ -500,0 +585,0 @@ static get events() { return [{

dist/collection/components/manifold-plan-table/manifold-plan-table.stories.js

@@ -69,5 +69,90 @@ import { withKnobs, text, select } from '@storybook/addon-knobs';
 };
+export const withTheme = () => {
+    const defaultTheme = `
+    :root {
+      --manifold-color-brand: #00a1d3;
+      --manifold-color-brand-accent: white;
+      --manifold-color-text: #fff;
+      --manifold-color-text-secondary: #ccc;
+      --manifold-color-background: #323940;
+      --manifold-border: 1px solid #444;
+    }
+
+    manifold-plan-table::part(plan--plan-2) {
+      --manifold-color-brand: #c04de9;
+      --manifold-color-brand-accent: white;
+    }
+
+    manifold-plan-table::part(plan-cost) {
+      font-size: 1.5rem;
+    }
+
+    manifold-plan-table::part(plan-header) {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+
+    manifold-plan-table::part(cell) {
+      border-bottom: none;
+    }
+
+    manifold-plan-table::part(feature-cell) {
+      background: #252a2f;
+    }
+
+    manifold-plan-table::part(feature-cell)::part(header-cell) {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+    manifold-plan-table::part(feature-cell)::part(footer-cell) {
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+
+    manifold-plan-table::part(plan-cost--plan-2) {
+      font-size: 2rem;
+    }
+
+    manifold-plan-table::part(cta) {
+      font-weight: bold;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      border-radius: 2rem;
+    }
+  `;
+    const theme = text('Theme', defaultTheme);
+    const wrapper = document.createElement('div');
+    const style = document.createElement('style');
+    style.innerHTML = theme;
+    const table = document.createElement('manifold-plan-table');
+    table.productData = sampleProduct.data.product;
+    table.addEventListener('featureSelected', (e) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // manually update price when boolean feature on plan1 / feature3 is toggled to simulate the
+        // query result.
+        if (e && ((_b = (_a = e) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.planSlug) === 'plan-1') {
+            const feature = (_d = (_c = e) === null || _c === void 0 ? void 0 : _c.detail) === null || _d === void 0 ? void 0 : _d.featureSelections.find((f) => {
+                return f.slug === 'feature-3';
+            });
+            if (feature && ((_f = (_e = table === null || table === void 0 ? void 0 : table.productData) === null || _e === void 0 ? void 0 : _e.plans) === null || _f === void 0 ? void 0 : _f.plans[0])) {
+                const pd = Object.assign({}, table.productData);
+                if ((_g = pd.plans) === null || _g === void 0 ? void 0 : _g.plans[0]) {
+                    if (feature.booleanSelection) {
+                        pd.plans.plans[0].cost += plan1Feature3Cost;
+                    }
+                    else {
+                        pd.plans.plans[0].cost -= plan1Feature3Cost;
+                    }
+                    table.productData = pd;
+                }
+            }
+        }
+    });
+    wrapper.appendChild(table);
+    wrapper.appendChild(style);
+    return wrapper;
+};
 export const withResponsiveLayout = () => {
     const breakpoints = { xs: 477, sm: 766, md: 990, lg: 1400 };
-    const width = select('Width', breakpoints, 990);
+    const width = select('Width', breakpoints, 766);
     const wrapper = document.createElement('div');
@@ -74,0 +159,0 @@ wrapper.style.maxWidth = `${width}px`;

dist/manifold/manifold.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-bef5c548.js";e().then(e=>a([["p-27fda764",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32]},[[1,"scroll","scrollHandler"]]]]]],e));
+import{p as e,b as r}from"./p-1fc48257.js";e().then(e=>r([["p-f9b57cdd",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]]],e));

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

@@ -22,2 +22,3 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 declare type breakpointLabel = 'lg' | 'md' | 'sm' | 'xs';
+declare type plan = NonNullable<NonNullable<EmbeddedProductQuery['embeddedProduct']>['plans']>['plans'][0];
 export declare class ManifoldPlanTable implements ComponentInterface {
@@ -39,4 +40,9 @@ el: HTMLElement;
     scrolled: boolean;
+    maxRowHeights: Map<string, number>;
+    currentSlide: number;
     updateProductData(newValue: EmbeddedProductQuery['embeddedProduct']): void;
     scrollHandler(e: Event): void;
+    carouselRows: Map<string, Map<string, HTMLTableRowElement>>;
+    slidesContainer: HTMLDivElement;
+    slides: Map<number, HTMLElement>;
     resizeObserver: ResizeObserver;
@@ -56,2 +62,5 @@ queryProduct(): void;
     componentWillLoad(): void;
+    setMaxRowHeights(): void;
+    scrollCarouselTo(index: number): void;
+    handleCarouselScroll(): void;
     get plans(): ({
@@ -118,4 +127,12 @@ __typename?: "Plan" | undefined;
     planCellForFeature(planSlug: string, featureSlug: string): any;
+    renderHeaderCell({ slug, name, cost }: {
+        slug: string;
+        name: string;
+        cost: number;
+    }): any;
+    renderCTA(plan: plan): any;
+    renderTable(): any;
+    renderCarousel(): any;
     render(): any;
 }
 export {};

dist/types/components/manifold-plan-table/manifold-plan-table.stories.d.ts

@@ -12,2 +12,3 @@ declare const _default: {
 export declare const withCTAEventHandler: () => HTMLDivElement;
+export declare const withTheme: () => HTMLDivElement;
 export declare const withResponsiveLayout: () => HTMLDivElement;

package.json

 {
   "name": "@manifoldco/web-components",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Manifold's Web Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1805463

increased by1.96%

Lines of code

29858

increased by1.78%

No dependency changes