@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-pricing.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbButton } from '@caribeng/ui/button';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Tabla de precios de CaribeNG: selector Mensual/Anual opcional y planes
@@ -15,6 +16,9 @@ import { CbButton } from '@caribeng/ui/button';
  */
 class CbPricing {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.host = inject(ElementRef);
         /** Planes a mostrar. */
         this.plans = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "plans" }] : /* istanbul ignore next */ []));
@@ -24,37 +28,86 @@ class CbPricing {
         /** Muestra el selector Mensual/Anual. */
         this.showToggle = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
-        /** Disposición de los planes: 'grid' (tarjetas) u 'horizontal' (filas). */
+        /** Disposición de los planes (ver {@link CbPricingLayout}). */
         this.layout = input('grid', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         /** Título opcional sobre la tabla. */
         this.title = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Texto de ayuda bajo el título (solo en `horizontal`). */
+        this.subtitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Etiqueta junto a la opción anual (p. ej. "25% OFF"; solo en `horizontal`). */
+        this.annualBadge = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "annualBadge" }] : /* istanbul ignore next */ []));
+        /**
+         * Cómo se muestra el precio anual: `total` (importe del año, "/año") o `monthly`
+         * (equivalente mensual, "/mes", con el total facturado y el ahorro debajo).
+         * Por defecto `monthly` en `horizontal` y `total` en el resto.
+         */
+        this.annualDisplay = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "annualDisplay" }] : /* istanbul ignore next */ []));
         /** Símbolo de moneda. */
         this.currency = input('$', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
         /** Etiquetas configurables. */
-        this.monthlyLabel = input('Mensual', /* @ts-ignore */
+        this.monthlyLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthlyLabel" }] : /* istanbul ignore next */ []));
-        this.annualLabel = input('Anual', /* @ts-ignore */
+        this.annualLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "annualLabel" }] : /* istanbul ignore next */ []));
-        this.perMonthLabel = input('/mes', /* @ts-ignore */
+        this.perMonthLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "perMonthLabel" }] : /* istanbul ignore next */ []));
-        this.perYearLabel = input('/año', /* @ts-ignore */
+        this.perYearLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "perYearLabel" }] : /* istanbul ignore next */ []));
         /** Prefijo del CTA cuando el plan no define `ctaLabel`. */
-        this.ctaLabel = input('Elegir', /* @ts-ignore */
+        this.ctaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
         /** Emite el plan elegido. */
         this.planSelect = output();
+        this.choices = ['annual', 'monthly'];
+        this.horizontal = computed(() => this.layout() === 'horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
         this.annual = computed(() => this.billing() === 'annual', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "annual" }] : /* istanbul ignore next */ []));
+        this.annualMonthly = computed(() => (this.annualDisplay() ?? (this.horizontal() ? 'monthly' : 'total')) === 'monthly', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "annualMonthly" }] : /* istanbul ignore next */ []));
+        /** El precio visible es mensual (ciclo mensual, o anual expresado por mes). */
+        this.perMonthShown = computed(() => !this.annual() || this.annualMonthly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "perMonthShown" }] : /* istanbul ignore next */ []));
+        this.numberFormat = computed(() => ({
+            whole: new Intl.NumberFormat(this.t().intlLocale, { maximumFractionDigits: 0 }),
+            cents: new Intl.NumberFormat(this.t().intlLocale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+    }
+    num(n) {
+        const f = this.numberFormat();
+        return Number.isInteger(Math.round(n * 100) / 100) ? f.whole.format(n) : f.cents.format(n);
+    }
+    annualOf(p) {
+        return p.priceAnnual ?? p.priceMonthly * 10;
     }
     priceOf(p) {
-        return this.annual() ? (p.priceAnnual ?? p.priceMonthly * 10) : p.priceMonthly;
+        if (!this.annual())
+            return p.priceMonthly;
+        return this.annualMonthly() ? this.annualOf(p) / 12 : this.annualOf(p);
     }
     oldPriceOf(p) {
-        return this.annual() ? p.oldAnnual : p.oldMonthly;
+        if (!this.annual())
+            return p.oldMonthly;
+        return p.oldAnnual !== undefined && this.annualMonthly() ? p.oldAnnual / 12 : p.oldAnnual;
+    }
+    billedOf(p) {
+        return cbFormat(this.t().billedAnnually, this.currency() + this.num(this.annualOf(p)));
+    }
+    savingOf(p) {
+        return Math.round((p.priceMonthly * 12 - this.annualOf(p)) * 100) / 100;
+    }
+    savingLabel(p) {
+        return cbFormat(this.t().youSave, this.currency() + this.num(this.savingOf(p)));
+    }
+    badgeOf(p) {
+        return p.badge ?? (p.featured ? this.t().recommended : '');
     }
     labelOf(f) {
         return typeof f === 'string' ? f : f.label;
@@ -62,50 +115,128 @@ class CbPricing {
     includedOf(f) {
         return typeof f === 'string' ? true : f.included !== false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPricing, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPricing, isStandalone: true, selector: "cb-pricing", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: false, transformFunction: null }, billing: { classPropertyName: "billing", publicName: "billing", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, monthlyLabel: { classPropertyName: "monthlyLabel", publicName: "monthlyLabel", isSignal: true, isRequired: false, transformFunction: null }, annualLabel: { classPropertyName: "annualLabel", publicName: "annualLabel", isSignal: true, isRequired: false, transformFunction: null }, perMonthLabel: { classPropertyName: "perMonthLabel", publicName: "perMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, perYearLabel: { classPropertyName: "perYearLabel", publicName: "perYearLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { billing: "billingChange", planSelect: "planSelect" }, host: { properties: { "class.cb-pricing--horizontal": "layout() === 'horizontal'" }, classAttribute: "cb-pricing" }, ngImport: i0, template: `
-    @if (title()) {
-      <h2 class="cb-pricing__title">{{ title() }}</h2>
+    iconOf(f) {
+        if (!this.includedOf(f))
+            return 'x';
+        return (typeof f === 'string' ? undefined : f.icon) ?? 'check';
+    }
+    /** Flechas dentro del grupo de opciones de facturación (patrón radiogroup). */
+    onChoiceKey(event) {
+        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        const i = this.choices.indexOf(this.billing());
+        const next = event.key === 'Home'
+            ? this.choices[0]
+            : event.key === 'End'
+                ? this.choices[this.choices.length - 1]
+                : this.choices[(i + (event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? -1 : 1) + this.choices.length) % this.choices.length];
+        this.billing.set(next);
+        this.host.nativeElement.querySelector(`.cb-pricing__choice[data-billing="${next}"]`)?.focus();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPricing, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPricing, isStandalone: true, selector: "cb-pricing", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: false, transformFunction: null }, billing: { classPropertyName: "billing", publicName: "billing", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, annualBadge: { classPropertyName: "annualBadge", publicName: "annualBadge", isSignal: true, isRequired: false, transformFunction: null }, annualDisplay: { classPropertyName: "annualDisplay", publicName: "annualDisplay", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, monthlyLabel: { classPropertyName: "monthlyLabel", publicName: "monthlyLabel", isSignal: true, isRequired: false, transformFunction: null }, annualLabel: { classPropertyName: "annualLabel", publicName: "annualLabel", isSignal: true, isRequired: false, transformFunction: null }, perMonthLabel: { classPropertyName: "perMonthLabel", publicName: "perMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, perYearLabel: { classPropertyName: "perYearLabel", publicName: "perYearLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { billing: "billingChange", planSelect: "planSelect" }, host: { properties: { "class.cb-pricing--horizontal": "layout() === 'horizontal'", "class.cb-pricing--list": "layout() === 'list'" }, classAttribute: "cb-pricing" }, ngImport: i0, template: `
+    @if (horizontal()) {
+      @if (title() || subtitle() || showToggle()) {
+        <div class="cb-pricing__top">
+          <div class="cb-pricing__intro">
+            @if (title()) {
+              <h2 class="cb-pricing__title">{{ title() }}</h2>
+            }
+            @if (subtitle()) {
+              <p class="cb-pricing__subtitle">
+                <cb-icon name="info" [size]="16" aria-hidden="true" />
+                {{ subtitle() }}
+              </p>
+            }
+          </div>
+          @if (showToggle()) {
+            <div class="cb-pricing__choices" role="radiogroup" [attr.aria-label]="t().billingCycle" (keydown)="onChoiceKey($event)">
+              @for (c of choices; track c) {
+                <button
+                  type="button"
+                  role="radio"
+                  class="cb-pricing__choice"
+                  [attr.data-billing]="c"
+                  [attr.aria-checked]="billing() === c"
+                  [attr.tabindex]="billing() === c ? 0 : -1"
+                  (click)="billing.set(c)"
+                >
+                  <span class="cb-pricing__box" aria-hidden="true">
+                    @if (billing() === c) {
+                      <cb-icon name="check" [size]="12" />
+                    }
+                  </span>
+                  {{ c === 'annual' ? (annualLabel() ?? t().payAnnually) : (monthlyLabel() ?? t().payMonthly) }}
+                  @if (c === 'annual' && annualBadge()) {
+                    <span class="cb-pricing__discount">{{ annualBadge() }}</span>
+                  }
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    } @else {
+      @if (title()) {
+        <h2 class="cb-pricing__title">{{ title() }}</h2>
+      }
 
-    @if (showToggle()) {
-      <div class="cb-pricing__toggle-wrap">
-        <div class="cb-pricing__toggle" [class.cb-pricing__toggle--annual]="billing() === 'annual'">
-          <span class="cb-pricing__toggle-thumb"></span>
-          <button
-            type="button"
-            class="cb-pricing__toggle-btn"
-            [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
-            (click)="billing.set('monthly')"
-          >
-            {{ monthlyLabel() }}
-          </button>
-          <button
-            type="button"
-            class="cb-pricing__toggle-btn"
-            [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
-            (click)="billing.set('annual')"
-          >
-            {{ annualLabel() }}
-          </button>
+      @if (showToggle()) {
+        <div class="cb-pricing__toggle-wrap">
+          <div class="cb-pricing__toggle" [class.cb-pricing__toggle--annual]="billing() === 'annual'" role="group" [attr.aria-label]="t().billingCycle">
+            <span class="cb-pricing__toggle-thumb"></span>
+            <button
+              type="button"
+              class="cb-pricing__toggle-btn"
+              [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
+              [attr.aria-pressed]="billing() === 'monthly'"
+              (click)="billing.set('monthly')"
+            >
+              {{ (monthlyLabel() ?? t().monthly) }}
+            </button>
+            <button
+              type="button"
+              class="cb-pricing__toggle-btn"
+              [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
+              [attr.aria-pressed]="billing() === 'annual'"
+              (click)="billing.set('annual')"
+            >
+              {{ (annualLabel() ?? t().yearly) }}
+            </button>
+          </div>
         </div>
-      </div>
+      }
     }
 
     <div class="cb-pricing__grid">
       @for (p of plans(); track p.name) {
         <div class="cb-pricing__plan" [class.cb-pricing__plan--featured]="p.featured">
           <div class="cb-pricing__head">
-            <span class="cb-pricing__plan-name">{{ p.name }}</span>
+            <span class="cb-pricing__plan-name">
+              {{ p.name }}
+              @if (badgeOf(p); as badge) {
+                <span class="cb-pricing__badge">
+                  <cb-icon name="star" [size]="12" aria-hidden="true" />
+                  {{ badge }}
+                </span>
+              }
+            </span>
             <div class="cb-pricing__price-row">
               <div class="cb-pricing__price">
-                <strong>{{ currency() }}{{ priceOf(p) }}</strong>
-                <span class="cb-pricing__per">{{ billing() === 'annual' ? perYearLabel() : perMonthLabel() }}</span>
+                <strong><span class="cb-pricing__currency">{{ currency() }}</span>{{ num(priceOf(p)) }}</strong>
+                <span class="cb-pricing__per">{{ perMonthShown() ? (perMonthLabel() ?? t().perMonth) : (perYearLabel() ?? t().perYear) }}</span>
               </div>
               @if (oldPriceOf(p); as old) {
-                <span class="cb-pricing__old">{{ currency() }}{{ old }}</span>
+                <span class="cb-pricing__old">{{ currency() }}{{ num(old) }}</span>
               }
             </div>
+            @if (perMonthShown() && annual()) {
+              <p class="cb-pricing__billed">{{ billedOf(p) }}</p>
+              @if (savingOf(p) > 0) {
+                <span class="cb-pricing__saving">{{ savingLabel(p) }}</span>
+              }
+            }
             @if (p.description) {
               <p class="cb-pricing__desc">{{ p.description }}</p>
             }
@@ -115,8 +246,11 @@ class CbPricing {
             <ul class="cb-pricing__features">
               @for (f of p.features; track labelOf(f)) {
                 <li [class.cb-pricing__feature--off]="!includedOf(f)">
-                  <cb-icon [name]="includedOf(f) ? 'check' : 'x'" [size]="16" class="cb-pricing__check" aria-hidden="true" />
+                  <cb-icon [name]="iconOf(f)" [size]="16" class="cb-pricing__check" aria-hidden="true" />
                   {{ labelOf(f) }}
+                  @if (!includedOf(f)) {
+                    <span class="cb-pricing__sr">({{ t().notIncluded }})</span>
+                  }
                 </li>
               }
             </ul>
@@ -124,65 +258,125 @@ class CbPricing {
           <cb-button
             class="cb-pricing__cta"
             [fullWidth]="true"
-            [severity]="p.featured ? 'primary' : 'secondary'"
+            [severity]="p.featured || horizontal() ? 'primary' : 'secondary'"
             [variant]="p.featured ? 'solid' : 'outlined'"
             (click)="planSelect.emit(p)"
           >
-            {{ p.ctaLabel || ctaLabel() + ' ' + p.name }}
+            {{ p.ctaLabel || (ctaLabel() ?? t().choose) + ' ' + p.name }}
           </cb-button>
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{display:none}:host(.cb-pricing--horizontal) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:none}:host(.cb-pricing--horizontal) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--list) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--list) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--list) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--list) .cb-pricing__divider{display:none}:host(.cb-pricing--list) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--list) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--list) .cb-pricing__head{flex:none}:host(.cb-pricing--list) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__cta{flex:none}}.cb-pricing__plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-pricing__badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.75rem;font-weight:600;white-space:nowrap}.cb-pricing__badge cb-icon ::ng-deep svg{fill:currentColor}.cb-pricing__billed{margin:.5rem 0 0;font-size:.75rem;opacity:.7}.cb-pricing__saving{align-self:flex-start;margin-top:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text));font-size:.75rem;font-weight:600}.cb-pricing__plan--featured .cb-pricing__saving{background:#fff3;color:inherit}.cb-pricing__head{display:flex;flex-direction:column}.cb-pricing__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}:host(.cb-pricing--horizontal) .cb-pricing__title{max-width:none;margin:0;text-align:left;font-size:2rem;line-height:1.2}.cb-pricing__subtitle{display:flex;align-items:center;gap:.375rem;margin:.75rem 0 0;color:var(--cb-color-text-muted);font-size:.875rem}.cb-pricing__choices{display:flex;flex-direction:column;gap:.25rem}.cb-pricing__choice{display:inline-flex;align-items:center;gap:.625rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.cb-pricing__choice:hover{background:var(--cb-color-surface-hover)}.cb-pricing__choice:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pricing__box{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-surface)}.cb-pricing__choice[aria-checked=true] .cb-pricing__box{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-pricing__discount{padding:.125rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-text);color:var(--cb-color-surface);font-size:.75rem;font-weight:700;white-space:nowrap}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,1fr);align-items:stretch;overflow-x:auto;padding:.25rem .25rem .5rem}:host(.cb-pricing--horizontal) .cb-pricing__plan{padding:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:1rem;font-size:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__price{align-items:baseline}:host(.cb-pricing--horizontal) .cb-pricing__price strong{display:inline-block;font-size:2rem;letter-spacing:-.02em}:host(.cb-pricing--horizontal) .cb-pricing__currency{display:inline-block;margin:.2rem .25rem 0 0;vertical-align:top;letter-spacing:0;font-size:.8rem;font-weight:500;opacity:.7}:host(.cb-pricing--horizontal) .cb-pricing__per{font-size:.9rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{margin:.75rem 0 1rem}:host(.cb-pricing--horizontal) .cb-pricing__features li{align-items:flex-start;line-height:1.45}:host(.cb-pricing--horizontal) .cb-pricing__check{margin-top:.125rem;color:var(--cb-color-primary)}:host(.cb-pricing--horizontal) .cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured{border-color:color-mix(in srgb,var(--cb-color-primary) 45%,transparent);background:radial-gradient(circle at 30% 35%,color-mix(in srgb,var(--cb-color-primary) 18%,var(--cb-color-surface)),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--cb-color-primary) 42%,var(--cb-color-surface)),color-mix(in srgb,var(--cb-color-primary) 26%,var(--cb-color-surface)) 50%,color-mix(in srgb,var(--cb-color-primary) 48%,var(--cb-color-surface)));box-shadow:var(--cb-shadow-md, 0 6px 20px rgba(0, 0, 0, .08));color:var(--cb-color-text)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__badge{background:var(--cb-color-surface);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__saving{background:color-mix(in srgb,var(--cb-color-surface) 55%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__check{color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPricing, decorators: [{
             type: Component,
             args: [{ selector: 'cb-pricing', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbButton], host: {
                         class: 'cb-pricing',
                         '[class.cb-pricing--horizontal]': "layout() === 'horizontal'",
+                        '[class.cb-pricing--list]': "layout() === 'list'",
                     }, template: `
-    @if (title()) {
-      <h2 class="cb-pricing__title">{{ title() }}</h2>
-    }
+    @if (horizontal()) {
+      @if (title() || subtitle() || showToggle()) {
+        <div class="cb-pricing__top">
+          <div class="cb-pricing__intro">
+            @if (title()) {
+              <h2 class="cb-pricing__title">{{ title() }}</h2>
+            }
+            @if (subtitle()) {
+              <p class="cb-pricing__subtitle">
+                <cb-icon name="info" [size]="16" aria-hidden="true" />
+                {{ subtitle() }}
+              </p>
+            }
+          </div>
+          @if (showToggle()) {
+            <div class="cb-pricing__choices" role="radiogroup" [attr.aria-label]="t().billingCycle" (keydown)="onChoiceKey($event)">
+              @for (c of choices; track c) {
+                <button
+                  type="button"
+                  role="radio"
+                  class="cb-pricing__choice"
+                  [attr.data-billing]="c"
+                  [attr.aria-checked]="billing() === c"
+                  [attr.tabindex]="billing() === c ? 0 : -1"
+                  (click)="billing.set(c)"
+                >
+                  <span class="cb-pricing__box" aria-hidden="true">
+                    @if (billing() === c) {
+                      <cb-icon name="check" [size]="12" />
+                    }
+                  </span>
+                  {{ c === 'annual' ? (annualLabel() ?? t().payAnnually) : (monthlyLabel() ?? t().payMonthly) }}
+                  @if (c === 'annual' && annualBadge()) {
+                    <span class="cb-pricing__discount">{{ annualBadge() }}</span>
+                  }
+                </button>
+              }
+            </div>
+          }
+        </div>
+      }
+    } @else {
+      @if (title()) {
+        <h2 class="cb-pricing__title">{{ title() }}</h2>
+      }
 
-    @if (showToggle()) {
-      <div class="cb-pricing__toggle-wrap">
-        <div class="cb-pricing__toggle" [class.cb-pricing__toggle--annual]="billing() === 'annual'">
-          <span class="cb-pricing__toggle-thumb"></span>
-          <button
-            type="button"
-            class="cb-pricing__toggle-btn"
-            [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
-            (click)="billing.set('monthly')"
-          >
-            {{ monthlyLabel() }}
-          </button>
-          <button
-            type="button"
-            class="cb-pricing__toggle-btn"
-            [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
-            (click)="billing.set('annual')"
-          >
-            {{ annualLabel() }}
-          </button>
+      @if (showToggle()) {
+        <div class="cb-pricing__toggle-wrap">
+          <div class="cb-pricing__toggle" [class.cb-pricing__toggle--annual]="billing() === 'annual'" role="group" [attr.aria-label]="t().billingCycle">
+            <span class="cb-pricing__toggle-thumb"></span>
+            <button
+              type="button"
+              class="cb-pricing__toggle-btn"
+              [class.cb-pricing__toggle-btn--on]="billing() === 'monthly'"
+              [attr.aria-pressed]="billing() === 'monthly'"
+              (click)="billing.set('monthly')"
+            >
+              {{ (monthlyLabel() ?? t().monthly) }}
+            </button>
+            <button
+              type="button"
+              class="cb-pricing__toggle-btn"
+              [class.cb-pricing__toggle-btn--on]="billing() === 'annual'"
+              [attr.aria-pressed]="billing() === 'annual'"
+              (click)="billing.set('annual')"
+            >
+              {{ (annualLabel() ?? t().yearly) }}
+            </button>
+          </div>
         </div>
-      </div>
+      }
     }
 
     <div class="cb-pricing__grid">
       @for (p of plans(); track p.name) {
         <div class="cb-pricing__plan" [class.cb-pricing__plan--featured]="p.featured">
           <div class="cb-pricing__head">
-            <span class="cb-pricing__plan-name">{{ p.name }}</span>
+            <span class="cb-pricing__plan-name">
+              {{ p.name }}
+              @if (badgeOf(p); as badge) {
+                <span class="cb-pricing__badge">
+                  <cb-icon name="star" [size]="12" aria-hidden="true" />
+                  {{ badge }}
+                </span>
+              }
+            </span>
             <div class="cb-pricing__price-row">
               <div class="cb-pricing__price">
-                <strong>{{ currency() }}{{ priceOf(p) }}</strong>
-                <span class="cb-pricing__per">{{ billing() === 'annual' ? perYearLabel() : perMonthLabel() }}</span>
+                <strong><span class="cb-pricing__currency">{{ currency() }}</span>{{ num(priceOf(p)) }}</strong>
+                <span class="cb-pricing__per">{{ perMonthShown() ? (perMonthLabel() ?? t().perMonth) : (perYearLabel() ?? t().perYear) }}</span>
               </div>
               @if (oldPriceOf(p); as old) {
-                <span class="cb-pricing__old">{{ currency() }}{{ old }}</span>
+                <span class="cb-pricing__old">{{ currency() }}{{ num(old) }}</span>
               }
             </div>
+            @if (perMonthShown() && annual()) {
+              <p class="cb-pricing__billed">{{ billedOf(p) }}</p>
+              @if (savingOf(p) > 0) {
+                <span class="cb-pricing__saving">{{ savingLabel(p) }}</span>
+              }
+            }
             @if (p.description) {
               <p class="cb-pricing__desc">{{ p.description }}</p>
             }
@@ -192,8 +386,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <ul class="cb-pricing__features">
               @for (f of p.features; track labelOf(f)) {
                 <li [class.cb-pricing__feature--off]="!includedOf(f)">
-                  <cb-icon [name]="includedOf(f) ? 'check' : 'x'" [size]="16" class="cb-pricing__check" aria-hidden="true" />
+                  <cb-icon [name]="iconOf(f)" [size]="16" class="cb-pricing__check" aria-hidden="true" />
                   {{ labelOf(f) }}
+                  @if (!includedOf(f)) {
+                    <span class="cb-pricing__sr">({{ t().notIncluded }})</span>
+                  }
                 </li>
               }
             </ul>
@@ -201,17 +398,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <cb-button
             class="cb-pricing__cta"
             [fullWidth]="true"
-            [severity]="p.featured ? 'primary' : 'secondary'"
+            [severity]="p.featured || horizontal() ? 'primary' : 'secondary'"
             [variant]="p.featured ? 'solid' : 'outlined'"
             (click)="planSelect.emit(p)"
           >
-            {{ p.ctaLabel || ctaLabel() + ' ' + p.name }}
+            {{ p.ctaLabel || (ctaLabel() ?? t().choose) + ' ' + p.name }}
           </cb-button>
         </div>
       }
     </div>
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{display:none}:host(.cb-pricing--horizontal) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--horizontal) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--horizontal) .cb-pricing__head{flex:none}:host(.cb-pricing--horizontal) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--horizontal) .cb-pricing__cta{flex:none}}\n"] }]
-        }], propDecorators: { plans: [{ type: i0.Input, args: [{ isSignal: true, alias: "plans", required: false }] }], billing: [{ type: i0.Input, args: [{ isSignal: true, alias: "billing", required: false }] }, { type: i0.Output, args: ["billingChange"] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], monthlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyLabel", required: false }] }], annualLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualLabel", required: false }] }], perMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perMonthLabel", required: false }] }], perYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perYearLabel", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], planSelect: [{ type: i0.Output, args: ["planSelect"] }] } });
+  `, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-600, #059669);border-color:var(--cb-color-primary-600, #059669);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--list) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--list) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--list) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--list) .cb-pricing__divider{display:none}:host(.cb-pricing--list) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--list) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--list) .cb-pricing__head{flex:none}:host(.cb-pricing--list) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__cta{flex:none}}.cb-pricing__plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-pricing__badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.75rem;font-weight:600;white-space:nowrap}.cb-pricing__badge cb-icon ::ng-deep svg{fill:currentColor}.cb-pricing__billed{margin:.5rem 0 0;font-size:.75rem;opacity:.7}.cb-pricing__saving{align-self:flex-start;margin-top:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text));font-size:.75rem;font-weight:600}.cb-pricing__plan--featured .cb-pricing__saving{background:#fff3;color:inherit}.cb-pricing__head{display:flex;flex-direction:column}.cb-pricing__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}:host(.cb-pricing--horizontal) .cb-pricing__title{max-width:none;margin:0;text-align:left;font-size:2rem;line-height:1.2}.cb-pricing__subtitle{display:flex;align-items:center;gap:.375rem;margin:.75rem 0 0;color:var(--cb-color-text-muted);font-size:.875rem}.cb-pricing__choices{display:flex;flex-direction:column;gap:.25rem}.cb-pricing__choice{display:inline-flex;align-items:center;gap:.625rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.cb-pricing__choice:hover{background:var(--cb-color-surface-hover)}.cb-pricing__choice:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pricing__box{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-surface)}.cb-pricing__choice[aria-checked=true] .cb-pricing__box{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-pricing__discount{padding:.125rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-text);color:var(--cb-color-surface);font-size:.75rem;font-weight:700;white-space:nowrap}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,1fr);align-items:stretch;overflow-x:auto;padding:.25rem .25rem .5rem}:host(.cb-pricing--horizontal) .cb-pricing__plan{padding:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:1rem;font-size:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__price{align-items:baseline}:host(.cb-pricing--horizontal) .cb-pricing__price strong{display:inline-block;font-size:2rem;letter-spacing:-.02em}:host(.cb-pricing--horizontal) .cb-pricing__currency{display:inline-block;margin:.2rem .25rem 0 0;vertical-align:top;letter-spacing:0;font-size:.8rem;font-weight:500;opacity:.7}:host(.cb-pricing--horizontal) .cb-pricing__per{font-size:.9rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{margin:.75rem 0 1rem}:host(.cb-pricing--horizontal) .cb-pricing__features li{align-items:flex-start;line-height:1.45}:host(.cb-pricing--horizontal) .cb-pricing__check{margin-top:.125rem;color:var(--cb-color-primary)}:host(.cb-pricing--horizontal) .cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured{border-color:color-mix(in srgb,var(--cb-color-primary) 45%,transparent);background:radial-gradient(circle at 30% 35%,color-mix(in srgb,var(--cb-color-primary) 18%,var(--cb-color-surface)),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--cb-color-primary) 42%,var(--cb-color-surface)),color-mix(in srgb,var(--cb-color-primary) 26%,var(--cb-color-surface)) 50%,color-mix(in srgb,var(--cb-color-primary) 48%,var(--cb-color-surface)));box-shadow:var(--cb-shadow-md, 0 6px 20px rgba(0, 0, 0, .08));color:var(--cb-color-text)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__badge{background:var(--cb-color-surface);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__saving{background:color-mix(in srgb,var(--cb-color-surface) 55%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__check{color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}\n"] }]
+        }], propDecorators: { plans: [{ type: i0.Input, args: [{ isSignal: true, alias: "plans", required: false }] }], billing: [{ type: i0.Input, args: [{ isSignal: true, alias: "billing", required: false }] }, { type: i0.Output, args: ["billingChange"] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], annualBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualBadge", required: false }] }], annualDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualDisplay", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], monthlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyLabel", required: false }] }], annualLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualLabel", required: false }] }], perMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perMonthLabel", required: false }] }], perYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perYearLabel", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], planSelect: [{ type: i0.Output, args: ["planSelect"] }] } });
 
 /*
  * Public API Surface de @caribeng/ui/pricing