@molecule/app-pricing-table-angular 0.0.0-stage → 0.0.1-stage

package/dist/index.js

@@ -0,0 +1,50 @@
+/**
+ * Angular side-by-side pricing comparison table.
+ *
+ * Exports `<PricingTable>` (selector `div[mol-pricing-table]`) and
+ * `PricingPlan` / `PricingFeature` types — the Angular counterpart of
+ * `@molecule/app-pricing-table-react`, with the same props and the same DOM
+ * for the same input.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core'
+ * import { PricingTable } from '@molecule/app-pricing-table-angular'
+ *
+ * @Component({
+ *   selector: 'plans',
+ *   standalone: true,
+ *   imports: [PricingTable],
+ *   template: `
+ *     <div mol-pricing-table [plans]="plans" [features]="features"></div>
+ *
+ *     <ng-template #proName><strong>Pro</strong></ng-template>
+ *   `,
+ * })
+ * export class Plans {
+ *   plans = [
+ *     { id: 'starter', name: 'Starter', price: '$9', interval: '/mo',
+ *       cta: { label: 'Get started', onClick: () => this.checkout('starter') } },
+ *     { id: 'pro', name: this.proName, price: '$29', interval: '/mo', recommended: true,
+ *       cta: { label: 'Get started', onClick: () => this.checkout('pro') } },
+ *   ]
+ *   features = [
+ *     { label: 'Projects', values: { starter: '3', pro: 'Unlimited' } },
+ *     { label: 'Team members', values: { starter: false, pro: true } },
+ *   ]
+ *   checkout(planId: string): void {
+ *     window.location.assign(`/checkout?plan=${planId}`)
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * All text arrives via inputs — pass pre-translated strings; requires a wired
+ * ClassMap bond. Node-valued plan/feature fields are projected templates
+ * (`<ng-template #ref>`), not input values; pass the template reference.
+ *
+ * @module
+ */
+export * from './pricing-table.component.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,cAAc,8BAA8B,CAAA;AAC5C,cAAc,YAAY,CAAA"}

package/dist/pricing-table.component.d.ts

@@ -0,0 +1,75 @@
+import { TemplateRef } from '@angular/core';
+import type { UIClassMap } from '@molecule/app-ui';
+import type { PricingFeature, PricingPlan } from './types.js';
+import * as i0 from "@angular/core";
+/**
+ * PricingTable component.
+ *
+ * Side-by-side pricing comparison — features × plans matrix. A header row
+ * holds plan cards (name, description, price, interval, CTA); body rows show
+ * per-feature availability (`true` → ✓, `false` → —, strings/templates pass
+ * through). The wrapper scrolls horizontally when columns overflow.
+ *
+ * The host IS the outer `<div>` (`div[mol-pricing-table]`), matching React's
+ * root exactly. Node-valued fields (`plans[].name`, …) are projected templates
+ * in Angular (an input cannot carry a node), rendered through
+ * `ngTemplateOutlet`; plain strings render as text.
+ */
+export declare class PricingTable {
+    /** The plan columns, left to right. */
+    plans: PricingPlan[];
+    /** The feature rows, top to bottom. */
+    features: PricingFeature[];
+    /** Extra classes on the outer wrapper. */
+    className?: string;
+    /**
+     * The current class map.
+     * @returns The UIClassMap.
+     */
+    cm(): UIClassMap;
+    /**
+     * Computes the wrapper class list.
+     * @returns The class string.
+     */
+    classes(): string;
+    /**
+     * The recommended plan's outline style, in React's shape.
+     * @param plan - The plan.
+     * @returns The style object, or undefined for a plain column.
+     */
+    cardStyle(plan: PricingPlan): Record<string, string> | undefined;
+    /**
+     * Whether a node-valued field arrived as a projected template.
+     * @param value - The field value.
+     * @returns True for a template.
+     */
+    isTemplate(value: unknown): value is TemplateRef<unknown>;
+    /**
+     * A node-valued field as a template (the `@if` above already checked it).
+     * @param value - The field value.
+     * @returns The template, or null when it is not one.
+     */
+    asTemplate(value: unknown): TemplateRef<unknown> | null;
+    /**
+     * A node-valued field as display text.
+     * @param value - The field value.
+     * @returns Its text, or an empty string when absent.
+     */
+    text(value: unknown): string;
+    /**
+     * Renders a feature cell value: `true` → ✓, `false` → —, anything else
+     * pass-through.
+     * @param value - The per-plan feature value.
+     * @returns The content to render.
+     */
+    renderValue(value: unknown): unknown;
+    /**
+     * Calls a plan's click handler with the DOM event, as React's `Button` does.
+     * @param handler - The plan's `onClick`, when it has one.
+     * @param event - The click event.
+     */
+    invoke(handler: ((event?: MouseEvent) => void) | undefined, event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PricingTable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PricingTable, "div[mol-pricing-table]", never, { "plans": { "alias": "plans"; "required": false; }; "features": { "alias": "features"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=pricing-table.component.d.ts.map

package/dist/pricing-table.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-table.component.d.ts","sourceRoot":"","sources":["../src/pricing-table.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,WAAW,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;;AAE7D;;;;;;;;;;;;GAYG;AACH,qBAyIa,YAAY;IACvB,uCAAuC;IACvC,KAAK,EAAE,WAAW,EAAE,CAAK;IACzB,uCAAuC;IACvC,QAAQ,EAAE,cAAc,EAAE,CAAK;IAC/B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,EAAE,IAAI,UAAU;IAIhB;;;OAGG;IACH,OAAO,IAAI,MAAM;IAIjB;;;;OAIG;IACH,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS;IAMhE;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC;IAIzD;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI;IAIvD;;;;OAIG;IACH,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM;IAI5B;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO;IAMpC;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;yCA/EzE,YAAY;2CAAZ,YAAY;CAkFxB"}

package/dist/pricing-table.component.js

@@ -0,0 +1,526 @@
+/**
+ * PricingTable component (React parity).
+ *
+ * @module
+ */
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, TemplateRef } from '@angular/core';
+import { getClassMap } from '@molecule/app-ui';
+import { Button, Card } from '@molecule/app-ui-angular';
+import * as i0 from "@angular/core";
+const _c0 = () => ({ align: "baseline", gap: "xs" });
+const _forTrack0 = ($index, $item) => $item.id;
+function PricingTable_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.name));
+} }
+function PricingTable_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.name), " ");
+} }
+function PricingTable_For_5_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.description));
+} }
+function PricingTable_For_5_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.description), " ");
+} }
+function PricingTable_For_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵconditionalCreate(1, PricingTable_For_5_Conditional_6_Conditional_1_Template, 1, 1, "ng-container", 4)(2, PricingTable_For_5_Conditional_6_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.cm().textSize("sm"));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.description) ? 1 : 2);
+} }
+function PricingTable_For_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.price));
+} }
+function PricingTable_For_5_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.price), " ");
+} }
+function PricingTable_For_5_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.interval));
+} }
+function PricingTable_For_5_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.interval), " ");
+} }
+function PricingTable_For_5_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵconditionalCreate(1, PricingTable_For_5_Conditional_11_Conditional_1_Template, 1, 1, "ng-container", 4)(2, PricingTable_For_5_Conditional_11_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.cm().textSize("xs"));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.interval) ? 1 : 2);
+} }
+function PricingTable_For_5_Conditional_12_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.cta.label));
+} }
+function PricingTable_For_5_Conditional_12_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.cta.label), " ");
+} }
+function PricingTable_For_5_Conditional_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a")(1, "button", 6);
+    i0.ɵɵconditionalCreate(2, PricingTable_For_5_Conditional_12_Conditional_0_Conditional_2_Template, 1, 1, "ng-container", 4)(3, PricingTable_For_5_Conditional_12_Conditional_0_Conditional_3_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("href", plan_r1.cta.href, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("variant", "solid")("color", plan_r1.recommended ? "primary" : "secondary");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.cta.label) ? 2 : 3);
+} }
+function PricingTable_For_5_Conditional_12_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(plan_r1.cta.label));
+} }
+function PricingTable_For_5_Conditional_12_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(plan_r1.cta.label), " ");
+} }
+function PricingTable_For_5_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵlistener("click", function PricingTable_For_5_Conditional_12_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const plan_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.invoke(plan_r1.cta.onClick, $event)); });
+    i0.ɵɵconditionalCreate(1, PricingTable_For_5_Conditional_12_Conditional_1_Conditional_1_Template, 1, 1, "ng-container", 4)(2, PricingTable_For_5_Conditional_12_Conditional_1_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("variant", "solid")("color", plan_r1.recommended ? "primary" : "secondary");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.cta.label) ? 1 : 2);
+} }
+function PricingTable_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PricingTable_For_5_Conditional_12_Conditional_0_Template, 4, 4, "a")(1, PricingTable_For_5_Conditional_12_Conditional_1_Template, 3, 3, "button", 6);
+} if (rf & 2) {
+    const plan_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(plan_r1.cta.href ? 0 : 1);
+} }
+function PricingTable_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th", 2)(1, "div", 3)(2, "div")(3, "h3");
+    i0.ɵɵconditionalCreate(4, PricingTable_For_5_Conditional_4_Template, 1, 1, "ng-container", 4)(5, PricingTable_For_5_Conditional_5_Template, 1, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, PricingTable_For_5_Conditional_6_Template, 3, 3, "p", 5);
+    i0.ɵɵelementStart(7, "div")(8, "span");
+    i0.ɵɵconditionalCreate(9, PricingTable_For_5_Conditional_9_Template, 1, 1, "ng-container", 4)(10, PricingTable_For_5_Conditional_10_Template, 1, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, PricingTable_For_5_Conditional_11_Template, 3, 3, "span", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, PricingTable_For_5_Conditional_12_Template, 2, 1);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const plan_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r1.cardStyle(plan_r1));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.cm().stack(2));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.cm().cn(ctx_r1.cm().textSize("lg"), ctx_r1.cm().fontWeight("bold")));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.name) ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(plan_r1.description ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.cm().flex(i0.ɵɵpureFunction0(15, _c0)));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.cm().cn(ctx_r1.cm().textSize("2xl"), ctx_r1.cm().fontWeight("bold")));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(plan_r1.price) ? 9 : 10);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(plan_r1.interval ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(plan_r1.cta ? 12 : -1);
+} }
+function PricingTable_For_8_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const feature_r4 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(feature_r4.groupHeading));
+} }
+function PricingTable_For_8_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const feature_r4 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(feature_r4.groupHeading), " ");
+} }
+function PricingTable_For_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "th", 10)(2, "span");
+    i0.ɵɵconditionalCreate(3, PricingTable_For_8_Conditional_0_Conditional_3_Template, 1, 1, "ng-container", 4)(4, PricingTable_For_8_Conditional_0_Conditional_4_Template, 1, 1);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const feature_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("colspan", ctx_r1.plans.length + 1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.cm().cn(ctx_r1.cm().textSize("xs"), ctx_r1.cm().fontWeight("semibold")));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(feature_r4.groupHeading) ? 3 : 4);
+} }
+function PricingTable_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const feature_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(feature_r4.label));
+} }
+function PricingTable_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const feature_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(feature_r4.label), " ");
+} }
+function PricingTable_For_8_For_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const value_r5 = i0.ɵɵreadContextLet(0);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.asTemplate(value_r5));
+} }
+function PricingTable_For_8_For_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const value_r5 = i0.ɵɵreadContextLet(0);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.text(value_r5), " ");
+} }
+function PricingTable_For_8_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdeclareLet(0);
+    i0.ɵɵelementStart(1, "td", 9)(2, "span");
+    i0.ɵɵconditionalCreate(3, PricingTable_For_8_For_7_Conditional_3_Template, 1, 1, "ng-container", 4)(4, PricingTable_For_8_For_7_Conditional_4_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const plan_r6 = ctx.$implicit;
+    const feature_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    const value_r7 = i0.ɵɵstoreLet(ctx_r1.renderValue(feature_r4.values[plan_r6.id]));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.cm().textSize("sm"));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(value_r7) ? 3 : 4);
+} }
+function PricingTable_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PricingTable_For_8_Conditional_0_Template, 5, 4, "tr");
+    i0.ɵɵelementStart(1, "tr")(2, "td", 8)(3, "span");
+    i0.ɵɵconditionalCreate(4, PricingTable_For_8_Conditional_4_Template, 1, 1, "ng-container", 4)(5, PricingTable_For_8_Conditional_5_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(6, PricingTable_For_8_For_7_Template, 5, 4, "td", 9, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const feature_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(feature_r4.groupHeading ? 0 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r1.cm().textSize("sm"));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isTemplate(feature_r4.label) ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.plans);
+} }
+/**
+ * PricingTable component.
+ *
+ * Side-by-side pricing comparison — features × plans matrix. A header row
+ * holds plan cards (name, description, price, interval, CTA); body rows show
+ * per-feature availability (`true` → ✓, `false` → —, strings/templates pass
+ * through). The wrapper scrolls horizontally when columns overflow.
+ *
+ * The host IS the outer `<div>` (`div[mol-pricing-table]`), matching React's
+ * root exactly. Node-valued fields (`plans[].name`, …) are projected templates
+ * in Angular (an input cannot carry a node), rendered through
+ * `ngTemplateOutlet`; plain strings render as text.
+ */
+export class PricingTable {
+    /** The plan columns, left to right. */
+    plans = [];
+    /** The feature rows, top to bottom. */
+    features = [];
+    /** Extra classes on the outer wrapper. */
+    className;
+    /**
+     * The current class map.
+     * @returns The UIClassMap.
+     */
+    cm() {
+        return getClassMap();
+    }
+    /**
+     * Computes the wrapper class list.
+     * @returns The class string.
+     */
+    classes() {
+        return this.cm().cn(this.cm().stack(0), this.className);
+    }
+    /**
+     * The recommended plan's outline style, in React's shape.
+     * @param plan - The plan.
+     * @returns The style object, or undefined for a plain column.
+     */
+    cardStyle(plan) {
+        return plan.recommended
+            ? { outline: '2px solid currentColor', outlineOffset: '-2px' }
+            : undefined;
+    }
+    /**
+     * Whether a node-valued field arrived as a projected template.
+     * @param value - The field value.
+     * @returns True for a template.
+     */
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    /**
+     * A node-valued field as a template (the `@if` above already checked it).
+     * @param value - The field value.
+     * @returns The template, or null when it is not one.
+     */
+    asTemplate(value) {
+        return value instanceof TemplateRef ? value : null;
+    }
+    /**
+     * A node-valued field as display text.
+     * @param value - The field value.
+     * @returns Its text, or an empty string when absent.
+     */
+    text(value) {
+        return value === null || value === undefined ? '' : String(value);
+    }
+    /**
+     * Renders a feature cell value: `true` → ✓, `false` → —, anything else
+     * pass-through.
+     * @param value - The per-plan feature value.
+     * @returns The content to render.
+     */
+    renderValue(value) {
+        if (value === true)
+            return '✓';
+        if (value === false)
+            return '—';
+        return value;
+    }
+    /**
+     * Calls a plan's click handler with the DOM event, as React's `Button` does.
+     * @param handler - The plan's `onClick`, when it has one.
+     * @param event - The click event.
+     */
+    invoke(handler, event) {
+        handler?.(event);
+    }
+    static ɵfac = function PricingTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PricingTable)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PricingTable, selectors: [["div", "mol-pricing-table", ""]], hostAttrs: [2, "overflow-x", "auto"], hostVars: 2, hostBindings: function PricingTable_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap(ctx.classes());
+        } }, inputs: { plans: "plans", features: "features", className: "className" }, decls: 9, vars: 0, consts: [[2, "width", "100%", "border-collapse", "separate", "border-spacing", "0px"], [2, "min-width", "160px", "text-align", "left"], [2, "vertical-align", "top", "padding", "12px"], ["mol-card", ""], [3, "ngTemplateOutlet"], [3, "class"], ["mol-button", "", 3, "variant", "color"], ["mol-button", "", 3, "click", "variant", "color"], [2, "padding", "8px", "text-align", "left"], [2, "padding", "8px", "text-align", "center"], [2, "text-align", "left", "padding", "12px 8px"]], template: function PricingTable_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "table", 0)(1, "thead")(2, "tr");
+            i0.ɵɵelement(3, "th", 1);
+            i0.ɵɵrepeaterCreate(4, PricingTable_For_5_Template, 13, 16, "th", 2, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "tbody");
+            i0.ɵɵrepeaterCreate(7, PricingTable_For_8_Template, 8, 4, null, null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.plans);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.features);
+        } }, dependencies: [Button, Card, NgTemplateOutlet], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PricingTable, [{
+        type: Component,
+        args: [{
+                selector: 'div[mol-pricing-table]',
+                standalone: true,
+                imports: [Button, Card, NgTemplateOutlet],
+                inputs: ['plans', 'features', 'className'],
+                host: {
+                    style: 'overflow-x: auto',
+                    '[class]': 'classes()',
+                },
+                template: `<table style="width: 100%; border-collapse: separate; border-spacing: 0px">
+    <thead>
+      <tr>
+        <th style="min-width: 160px; text-align: left"></th>
+        @for (plan of plans; track plan.id) {
+          <th style="vertical-align: top; padding: 12px">
+            <div mol-card [style]="cardStyle(plan)">
+              <div [class]="cm().stack(2)">
+                <h3 [class]="cm().cn(cm().textSize('lg'), cm().fontWeight('bold'))">
+                  @if (isTemplate(plan.name)) {
+                    <ng-container [ngTemplateOutlet]="asTemplate(plan.name)"></ng-container>
+                  } @else {
+                    {{ text(plan.name) }}
+                  }
+                </h3>
+                @if (plan.description) {
+                  <p [class]="cm().textSize('sm')">
+                    @if (isTemplate(plan.description)) {
+                      <ng-container
+                        [ngTemplateOutlet]="asTemplate(plan.description)"
+                      ></ng-container>
+                    } @else {
+                      {{ text(plan.description) }}
+                    }
+                  </p>
+                }
+                <div [class]="cm().flex({ align: 'baseline', gap: 'xs' })">
+                  <span [class]="cm().cn(cm().textSize('2xl'), cm().fontWeight('bold'))">
+                    @if (isTemplate(plan.price)) {
+                      <ng-container [ngTemplateOutlet]="asTemplate(plan.price)"></ng-container>
+                    } @else {
+                      {{ text(plan.price) }}
+                    }
+                  </span>
+                  @if (plan.interval) {
+                    <span [class]="cm().textSize('xs')">
+                      @if (isTemplate(plan.interval)) {
+                        <ng-container [ngTemplateOutlet]="asTemplate(plan.interval)"></ng-container>
+                      } @else {
+                        {{ text(plan.interval) }}
+                      }
+                    </span>
+                  }
+                </div>
+                @if (plan.cta) {
+                  @if (plan.cta.href) {
+                    <a [attr.href]="plan.cta.href">
+                      <button
+                        mol-button
+                        [variant]="'solid'"
+                        [color]="plan.recommended ? 'primary' : 'secondary'"
+                      >
+                        @if (isTemplate(plan.cta.label)) {
+                          <ng-container
+                            [ngTemplateOutlet]="asTemplate(plan.cta.label)"
+                          ></ng-container>
+                        } @else {
+                          {{ text(plan.cta.label) }}
+                        }
+                      </button>
+                    </a>
+                  } @else {
+                    <button
+                      mol-button
+                      [variant]="'solid'"
+                      [color]="plan.recommended ? 'primary' : 'secondary'"
+                      (click)="invoke(plan.cta.onClick, $event)"
+                    >
+                      @if (isTemplate(plan.cta.label)) {
+                        <ng-container
+                          [ngTemplateOutlet]="asTemplate(plan.cta.label)"
+                        ></ng-container>
+                      } @else {
+                        {{ text(plan.cta.label) }}
+                      }
+                    </button>
+                  }
+                }
+              </div>
+            </div>
+          </th>
+        }
+      </tr>
+    </thead>
+    <tbody>
+      @for (feature of features; track $index) {
+        @if (feature.groupHeading) {
+          <tr>
+            <th [attr.colspan]="plans.length + 1" style="text-align: left; padding: 12px 8px">
+              <span [class]="cm().cn(cm().textSize('xs'), cm().fontWeight('semibold'))">
+                @if (isTemplate(feature.groupHeading)) {
+                  <ng-container
+                    [ngTemplateOutlet]="asTemplate(feature.groupHeading)"
+                  ></ng-container>
+                } @else {
+                  {{ text(feature.groupHeading) }}
+                }
+              </span>
+            </th>
+          </tr>
+        }
+        <tr>
+          <td style="padding: 8px; text-align: left">
+            <span [class]="cm().textSize('sm')">
+              @if (isTemplate(feature.label)) {
+                <ng-container [ngTemplateOutlet]="asTemplate(feature.label)"></ng-container>
+              } @else {
+                {{ text(feature.label) }}
+              }
+            </span>
+          </td>
+          @for (plan of plans; track plan.id) {
+            @let value = renderValue(feature.values[plan.id]);
+            <td style="padding: 8px; text-align: center">
+              <span [class]="cm().textSize('sm')">
+                @if (isTemplate(value)) {
+                  <ng-container [ngTemplateOutlet]="asTemplate(value)"></ng-container>
+                } @else {
+                  {{ text(value) }}
+                }
+              </span>
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+  </table>`,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PricingTable, { className: "PricingTable", filePath: "pricing-table.component.ts", lineNumber: 166 }); })();
+//# sourceMappingURL=pricing-table.component.js.map

package/dist/pricing-table.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-table.component.js","sourceRoot":"","sources":["../src/pricing-table.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;;;;;IAoCnC,2BAAwE;;;;IAA1D,kEAA0C;;;IAExD,YACF;;;;IADE,0DACF;;;IAKI,2BAEgB;;;;IADd,yEAAiD;;;IAGnD,YACF;;;;IADE,iEACF;;;IAPF,yBAAiC;IAK7B,AAJF,2GAAoC,kEAI3B;IAGX,iBAAI;;;;IARD,yCAA6B;IAC9B,cAMC;IAND,gEAMC;;;IAMC,2BAAyE;;;;IAA3D,mEAA2C;;;IAEzD,YACF;;;;IADE,2DACF;;;IAKI,2BAA4E;;;;IAA9D,sEAA8C;;;IAE5D,YACF;;;;IADE,8DACF;;;IALF,4BAAoC;IAGhC,AAFF,4GAAiC,mEAExB;IAGX,iBAAO;;;;IAND,yCAA6B;IACjC,cAIC;IAJD,6DAIC;;;IAaG,2BAEgB;;;;IADd,uEAA+C;;;IAGjD,YACF;;;;IADE,+DACF;;;IAXF,AADF,yBAA+B,gBAK5B;IAKG,AAJF,0HAAkC,iFAIzB;IAIb,AADE,iBAAS,EACP;;;;;IAXA,cAAmB;IACnB,AADA,iCAAmB,wDACiC;IAEpD,cAMC;IAND,8DAMC;;;IAWD,2BAEgB;;;;IADd,uEAA+C;;;IAGjD,YACF;;;;IADE,+DACF;;;;IAZF,iCAKC;IADC,0PAAS,0CAAgC,KAAC;IAMxC,AAJF,0HAAkC,iFAIzB;IAGX,iBAAS;;;;IAVP,AADA,iCAAmB,wDACiC;IAGpD,cAMC;IAND,8DAMC;;;IAbH,AAhBF,8FAAqB,gFAgBZ;;;IAhBT,0CA+BC;;;IApEH,AADF,AADF,AADF,6BAA+C,aACL,UACT,SACyC;IAGhE,AAFF,6FAA6B,oDAEpB;IAGX,iBAAK;IACL,kFAAwB;IAYtB,AADF,2BAA2D,WACc;IAGnE,AAFF,6FAA8B,sDAErB;IAGX,iBAAO;IACP,uFAAqB;IASvB,iBAAM;IACN,4EAAgB;IAoCtB,AADE,AADE,iBAAM,EACF,EACH;;;;IA1EW,cAAyB;IAAzB,wCAAyB;IAChC,cAAuB;IAAvB,mCAAuB;IACtB,cAA+D;IAA/D,yFAA+D;IACjE,cAIC;IAJD,yDAIC;IAEH,eAUC;IAVD,8CAUC;IACI,cAAqD;IAArD,4DAAqD;IAClD,cAAgE;IAAhE,0FAAgE;IACpE,cAIC;IAJD,2DAIC;IAEH,eAQC;IARD,4CAQC;IAEH,cAiCC;IAjCD,uCAiCC;;;IAcC,2BAEgB;;;;IADd,6EAAqD;;;IAGvD,YACF;;;;IADE,qEACF;;;IAPF,AADF,AADF,0BAAI,aACgF,WACN;IAKtE,AAJF,2GAAwC,kEAI/B;IAKf,AADE,AADE,iBAAO,EACJ,EACF;;;;IAXC,cAAiC;;IAC7B,cAAmE;IAAnE,6FAAmE;IACvE,cAMC;IAND,oEAMC;;;IASD,2BAA4E;;;;IAA9D,sEAA8C;;;IAE5D,YACF;;;;IADE,8DACF;;;IAQI,2BAAoE;;;;;IAAtD,8DAAsC;;;IAEpD,YACF;;;;;IADE,sDACF;;;IAPJ,kBAAkD;IAEhD,AADF,6BAA6C,WACP;IAGhC,AAFF,mGAAyB,0DAEhB;IAIb,AADE,iBAAO,EACJ;;;;;qBATL,cAAa,iDAAoC,CAAC;IAE1C,eAA6B;IAA7B,yCAA6B;IACjC,cAIC;IAJD,qDAIC;;;IAjCT,gFAA4B;IAiBxB,AADF,AADF,0BAAI,YACyC,WACL;IAGhC,AAFF,6FAAiC,oDAExB;IAIb,AADE,iBAAO,EACJ;IACL,oFAWC;IACH,iBAAK;;;;IArCL,kDAcC;IAGS,eAA6B;IAA7B,yCAA6B;IACjC,cAIC;IAJD,6DAIC;IAGL,eAWC;IAXD,2BAWC;;AAhJX;;;;;;;;;;;;GAYG;AA0IH,MAAM,OAAO,YAAY;IACvB,uCAAuC;IACvC,KAAK,GAAkB,EAAE,CAAA;IACzB,uCAAuC;IACvC,QAAQ,GAAqB,EAAE,CAAA;IAC/B,0CAA0C;IAC1C,SAAS,CAAS;IAElB;;;OAGG;IACH,EAAE;QACA,OAAO,WAAW,EAAE,CAAA;IACtB,CAAC;IAED;;;OAGG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IACzD,CAAC;IAED;;;;OAIG;IACH,SAAS,CAAC,IAAiB;QACzB,OAAO,IAAI,CAAC,WAAW;YACrB,CAAC,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,EAAE;YAC9D,CAAC,CAAC,SAAS,CAAA;IACf,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,KAAc;QACvB,OAAO,KAAK,YAAY,WAAW,CAAA;IACrC,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,KAAc;QACvB,OAAO,KAAK,YAAY,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;IACpD,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,KAAc;QACjB,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACnE,CAAC;IAED;;;;;OAKG;IACH,WAAW,CAAC,KAAc;QACxB,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,GAAG,CAAA;QAC9B,IAAI,KAAK,KAAK,KAAK;YAAE,OAAO,GAAG,CAAA;QAC/B,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,OAAmD,EAAE,KAAiB;QAC3E,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC;sGAjFU,YAAY;6DAAZ,YAAY;YAAZ,cAAA,aAAS,CAAG;;YA9HnB,AADF,AADS,gCAA2E,YAC7E,SACD;YACF,wBAAoD;YACpD,gFA6EC;YAEL,AADE,iBAAK,EACC;YACR,6BAAO;YACL,gGAuCC;YAEL,AADE,iBAAQ,EACF;;YA1HF,eA6EC;YA7ED,wBA6EC;YAIH,eAuCC;YAvCD,2BAuCC;4BAlIK,MAAM,EAAE,IAAI,EAAE,gBAAgB;;iFAsI7B,YAAY;cAzIxB,SAAS;eAAC;gBACT,QAAQ,EAAE,wBAAwB;gBAClC,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,gBAAgB,CAAC;gBACzC,MAAM,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,WAAW,CAAC;gBAC1C,IAAI,EAAE;oBACJ,KAAK,EAAE,kBAAkB;oBACzB,SAAS,EAAE,WAAW;iBACvB;gBACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA8HD;aACV;;kFACY,YAAY"}