@c-code/c-code-fw 1.3.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-code/c-code-fw",
-  "version": "1.3.0",
+  "version": "2.1.0",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/ui/lib/components/button/button.component.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'whatsapp' | 'inverse';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Shared button look for links and buttons. Every component in the library uses it,
+ * so all calls to action share size, focus and colors.
+ *
+ * ```html
+ * <a ccButton [href]="whatsapp" target="_blank">Reservar</a>
+ * <button ccButton variant="secondary" size="sm" type="button">Limpiar</button>
+ * ```
+ *
+ * Tokens: --cc-btn-bg, --cc-btn-color, --cc-btn-hover-bg, --cc-btn-hover-color,
+ * --cc-btn-border, --cc-btn-radius, --cc-btn-padding-x, --cc-btn-font-weight,
+ * --cc-btn-letter-spacing, --cc-btn-text-transform.
+ */
+export declare class ButtonComponent {
+    readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
+    readonly size: import("@angular/core").InputSignal<ButtonSize>;
+    /** Full width. */
+    readonly block: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "a[ccButton], button[ccButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/ui/lib/components/category-menu/category-menu.component.d.ts

@@ -1,19 +1,28 @@
 import { CategoryOption } from '../../models/plan.models';
 import * as i0 from "@angular/core";
 /**
- * Vertical category list with a single selected option.
- * Replaces the `appElementActive` markup the sites used for plan categories.
+ * Category selector with a single selected option. Each option is a toggle button
+ * (`aria-pressed`), so it works with Tab and Enter/Space.
+ *
+ * `layout`:
+ * - `list`: vertical list, for sidebars.
+ * - `chips`: one scrollable row of pills, for small screens.
+ * - `auto` (default): chips below 1024px, list from 1024px.
  *
  * ```html
  * <cc-category-menu [options]="categories" [(selected)]="category" />
  * ```
+ *
+ * Tokens: --cc-category-color, --cc-category-hover-bg, --cc-category-active-bg,
+ * --cc-category-active-color, --cc-category-chip-border.
  */
 export declare class CategoryMenuComponent<T = unknown> {
     readonly options: import("@angular/core").InputSignal<CategoryOption<T>[]>;
     /** Selected value. Use `[(selected)]` to bind both ways. */
     readonly selected: import("@angular/core").ModelSignal<T | null>;
     readonly title: import("@angular/core").InputSignal<string>;
+    readonly layout: import("@angular/core").InputSignal<"auto" | "list" | "chips">;
     select(value: T): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CategoryMenuComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CategoryMenuComponent<any>, "cc-category-menu", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CategoryMenuComponent<any>, "cc-category-menu", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
 }

package/ui/lib/components/faq/faq.component.d.ts

@@ -1,16 +1,23 @@
 import { FaqItem } from '../../models/ui.models';
 import * as i0 from "@angular/core";
 /**
- * Frequently asked questions as native `<details>` elements, so the answers
- * stay in the prerendered HTML for search engines.
+ * Frequently asked questions as native `<details>` elements, so the answers stay in
+ * the prerendered HTML for search engines. Pass plain `items`, or project
+ * `<cc-faq-item>` elements when an answer needs links.
  *
  * ```html
- * <cc-faq title="PREGUNTAS FRECUENTES" [items]="faq" />
+ * <cc-faq title="Preguntas frecuentes" [items]="faq" />
+ * <cc-faq title="Preguntas frecuentes">
+ *   <cc-faq-item question="¿Qué planes tienen?">Míralos en <a routerLink="/planes">planes</a>.</cc-faq-item>
+ * </cc-faq>
  * ```
+ *
+ * Tokens: --cc-faq-title-color, --cc-faq-gap, plus the ones of `cc-faq-item`.
  */
 export declare class FaqComponent {
     readonly items: import("@angular/core").InputSignal<FaqItem[]>;
     readonly title: import("@angular/core").InputSignal<string>;
+    readonly headingLevel: import("@angular/core").InputSignal<"h2" | "h3">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FaqComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FaqComponent, "cc-faq", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FaqComponent, "cc-faq", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/ui/lib/components/faq-item/faq-item.component.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+/**
+ * One question of `cc-faq`. The answer is projected, so it can contain links.
+ *
+ * ```html
+ * <cc-faq title="Preguntas frecuentes">
+ *   <cc-faq-item question="¿Qué planes tienen?">
+ *     Míralos todos en <a routerLink="/planes">planes</a>.
+ *   </cc-faq-item>
+ * </cc-faq>
+ * ```
+ *
+ * Tokens: --cc-faq-bg, --cc-faq-question-color, --cc-faq-answer-color.
+ */
+export declare class FaqItemComponent {
+    readonly question: import("@angular/core").InputSignal<string>;
+    /** Starts expanded. */
+    readonly open: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FaqItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FaqItemComponent, "cc-faq-item", never, { "question": { "alias": "question"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/ui/lib/components/gallery/gallery.component.d.ts

@@ -1,21 +1,25 @@
 import { GalleryImage } from '../../models/ui.models';
 import * as i0 from "@angular/core";
 /**
- * Thumbnail grid that opens a lightbox on click.
+ * Grid of square thumbnails that opens a lightbox on click.
  *
  * ```html
- * <cc-gallery [images]="images" />
+ * <cc-gallery [images]="images" [columns]="4" />
  * ```
  *
  * `numberedImages()` builds the list for folders named 1.jpeg, 2.jpeg, …
+ *
+ * Tokens: --cc-gallery-gap, --cc-gallery-radius, --cc-gallery-bg.
  */
 export declare class GalleryComponent {
     readonly images: import("@angular/core").InputSignal<GalleryImage[]>;
+    /** Columns from 1024px. Small screens use 2, tablets 3. */
+    readonly columns: import("@angular/core").InputSignal<number>;
     readonly backgroundImage: import("@angular/core").InputSignal<string>;
     readonly openLabel: import("@angular/core").InputSignal<string>;
     protected readonly open: import("@angular/core").WritableSignal<number | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GalleryComponent, "cc-gallery", never, { "images": { "alias": "images"; "required": true; "isSignal": true; }; "backgroundImage": { "alias": "backgroundImage"; "required": false; "isSignal": true; }; "openLabel": { "alias": "openLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GalleryComponent, "cc-gallery", never, { "images": { "alias": "images"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "backgroundImage": { "alias": "backgroundImage"; "required": false; "isSignal": true; }; "openLabel": { "alias": "openLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Builds a gallery list for numbered files.

package/ui/lib/components/info-item/info-item.component.d.ts

@@ -5,14 +5,22 @@ import * as i0 from "@angular/core";
  *
  * ```html
  * <cc-info-item title="Pagos" text="Aceptamos Nequi, Daviplata y efectivo." />
- * <cc-info-item title="Reservaciones" [text]="texto">
+ * <cc-info-item title="Bonos Spa" [text]="texto" headingId="bonos">
  *   <ul><li>…</li></ul>
  * </cc-info-item>
  * ```
+ *
+ * Tokens: --cc-info-title-color, --cc-info-text-color, --cc-info-text-align, --cc-info-max-width.
  */
 export declare class InfoItemComponent {
     readonly title: import("@angular/core").InputSignal<string>;
     readonly text: import("@angular/core").InputSignal<string>;
+    /** `accent` colors the title with the accent text color, `neutral` with the heading color. */
+    readonly tone: import("@angular/core").InputSignal<"accent" | "neutral">;
+    readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+    readonly headingLevel: import("@angular/core").InputSignal<"h2" | "h3">;
+    /** Id of the heading, for anchors from a table of contents. */
+    readonly headingId: import("@angular/core").InputSignal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<InfoItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InfoItemComponent, "cc-info-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InfoItemComponent, "cc-info-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "headingId": { "alias": "headingId"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/ui/lib/components/lightbox/lightbox.component.d.ts

@@ -2,11 +2,15 @@ import { GalleryImage } from '../../models/ui.models';
 import * as i0 from "@angular/core";
 /**
  * Full-screen image viewer. It is open while `index` is not null.
- * Arrow keys move between images and Escape closes it.
+ * Arrow keys and swipe move between images; Escape and the backdrop close it.
+ * Focus moves into the viewer on open, stays inside while open, and returns to the
+ * element that opened it on close.
  *
  * ```html
  * <cc-lightbox [images]="images" [(index)]="openIndex" />
  * ```
+ *
+ * Tokens: --cc-lightbox-backdrop, --cc-lightbox-control-bg, --cc-lightbox-color.
  */
 export declare class LightboxComponent {
     readonly images: import("@angular/core").InputSignal<GalleryImage[]>;
@@ -15,12 +19,23 @@ export declare class LightboxComponent {
     readonly closeLabel: import("@angular/core").InputSignal<string>;
     readonly prevLabel: import("@angular/core").InputSignal<string>;
     readonly nextLabel: import("@angular/core").InputSignal<string>;
+    /** Text of the position counter, for example "3 de 18". */
+    readonly counterSeparator: import("@angular/core").InputSignal<string>;
     protected readonly current: import("@angular/core").Signal<GalleryImage | null>;
-    private document;
+    /** Changes only on open/close, not when moving between images. */
+    private readonly isOpen;
+    private readonly document;
+    private readonly dialog;
+    private readonly closeButton;
+    private touchStartX;
     constructor();
     close(): void;
     next(): void;
     prev(): void;
+    /** Keeps Tab and Shift+Tab inside the viewer. */
+    protected trapFocus(event: KeyboardEvent): void;
+    protected onTouchStart(event: TouchEvent): void;
+    protected onTouchEnd(event: TouchEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LightboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LightboxComponent, "cc-lightbox", never, { "images": { "alias": "images"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; }, { "index": "indexChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LightboxComponent, "cc-lightbox", never, { "images": { "alias": "images"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "counterSeparator": { "alias": "counterSeparator"; "required": false; "isSignal": true; }; }, { "index": "indexChange"; }, never, never, true, never>;
 }

package/ui/lib/components/notice/notice.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * Highlighted note for important conditions, warnings or tips. The content is projected.
+ *
+ * ```html
+ * <cc-notice tone="warning" title="Importante">Su bono tiene vigencia de 30 días.</cc-notice>
+ * ```
+ *
+ * Tokens: --cc-notice-bg, --cc-notice-border, --cc-notice-color.
+ */
+export declare class NoticeComponent {
+    /** `info` uses the brand colors, `warning` a red accent, `success` the primary color. */
+    readonly tone: import("@angular/core").InputSignal<"info" | "warning" | "success">;
+    readonly title: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoticeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NoticeComponent, "cc-notice", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/ui/lib/components/page-banner/page-banner.component.d.ts

@@ -6,18 +6,24 @@ import * as i0 from "@angular/core";
  *
  * ```html
  * <cc-page-banner title="Reserva tu plan - Pareja" />
- * <cc-page-banner [title]="plan.name" backLink="/planes" iconSrc="assets/icons/hoja.png" variant="plain" />
+ * <cc-page-banner [title]="plan.name" backLink="/planes" iconSrc="assets/icons/hoja.png" size="lg" italic />
  * ```
+ *
+ * Tokens: --cc-banner-bg, --cc-banner-color, --cc-banner-padding.
  */
 export declare class PageBannerComponent {
     readonly title: import("@angular/core").InputSignal<string>;
-    /** `band` uses the surface color; `plain` uses the page background. */
+    readonly subtitle: import("@angular/core").InputSignal<string>;
+    /** `band` draws a surface-colored strip; `plain` has no background. */
     readonly variant: import("@angular/core").InputSignal<"band" | "plain">;
+    readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+    readonly italic: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly align: import("@angular/core").InputSignal<"center" | "start">;
     readonly iconSrc: import("@angular/core").InputSignal<string>;
     /** Shows a back arrow that links here. */
     readonly backLink: import("@angular/core").InputSignal<LinkTarget | null>;
     readonly backIconSrc: import("@angular/core").InputSignal<string>;
     readonly backLabel: import("@angular/core").InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PageBannerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PageBannerComponent, "cc-page-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "backLink": { "alias": "backLink"; "required": false; "isSignal": true; }; "backIconSrc": { "alias": "backIconSrc"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageBannerComponent, "cc-page-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "italic": { "alias": "italic"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "backLink": { "alias": "backLink"; "required": false; "isSignal": true; }; "backIconSrc": { "alias": "backIconSrc"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/ui/lib/components/plan-card/plan-card.component.d.ts

@@ -1,23 +1,46 @@
 import { LinkTarget } from '../../models/ui.models';
+import { PriceFormat } from '../../utils/text.utils';
+import { ButtonVariant } from '../button/button.component';
 import * as i0 from "@angular/core";
 /**
- * Plan card: image, name and a button.
- * With `link` the button navigates with the router; without it, it emits `ctaClick`.
+ * Plan card: photo, name, details, price and a call to action.
+ * With `link`, the whole card is clickable and navigates with the router; without it,
+ * the button emits `ctaClick`. With `skeleton`, it renders a loading placeholder.
  *
  * ```html
- * <cc-plan-card [name]="plan.name" [imageSrc]="plan.imgPath" [link]="['/planes', slug]" />
+ * <cc-plan-card [name]="plan.name" [imageSrc]="plan.imgPath" [price]="plan.price"
+ *               meta="2 h · 2 personas" [link]="['/planes', slug]" />
  * ```
+ *
+ * Tokens: --cc-plan-card-bg, --cc-plan-card-color, --cc-plan-card-border,
+ * --cc-plan-card-radius, --cc-plan-card-shadow, --cc-plan-card-image-ratio,
+ * --cc-plan-card-price-color.
  */
 export declare class PlanCardComponent {
     readonly name: import("@angular/core").InputSignal<string>;
     readonly imageSrc: import("@angular/core").InputSignal<string>;
     /** Defaults to `name`. */
     readonly imageAlt: import("@angular/core").InputSignal<string>;
-    /** Optional line under the name, for example the formatted price. */
-    readonly subtitle: import("@angular/core").InputSignal<string>;
+    /** Short line under the name, for example "2 h 20 min · 2 personas". */
+    readonly meta: import("@angular/core").InputSignal<string>;
+    /** Price to show. Leave it null to hide it. */
+    readonly price: import("@angular/core").InputSignal<number | null>;
+    /** Text before the price, for example "Desde". */
+    readonly priceLabel: import("@angular/core").InputSignal<string>;
+    readonly priceFormat: import("@angular/core").InputSignal<PriceFormat>;
     readonly link: import("@angular/core").InputSignal<LinkTarget | null>;
+    /** Query params of `link`, for example `{ categoria: 'pareja' }`. */
+    readonly queryParams: import("@angular/core").InputSignal<Record<string, string> | null>;
     readonly ctaLabel: import("@angular/core").InputSignal<string>;
+    readonly ctaVariant: import("@angular/core").InputSignal<ButtonVariant>;
+    /** `filled` uses the surface color, `outlined` a border on white, `plain` no box. */
+    readonly appearance: import("@angular/core").InputSignal<"plain" | "filled" | "outlined">;
+    /** Heading level of the name inside the page outline. */
+    readonly headingLevel: import("@angular/core").InputSignal<"h2" | "h3">;
+    /** Renders a loading placeholder instead of the content. */
+    readonly skeleton: import("@angular/core").InputSignal<boolean>;
     readonly ctaClick: import("@angular/core").OutputEmitterRef<void>;
+    protected readonly formattedPrice: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlanCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlanCardComponent, "cc-plan-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": true; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; }, { "ctaClick": "ctaClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanCardComponent, "cc-plan-card", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "price": { "alias": "price"; "required": false; "isSignal": true; }; "priceLabel": { "alias": "priceLabel"; "required": false; "isSignal": true; }; "priceFormat": { "alias": "priceFormat"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "ctaVariant": { "alias": "ctaVariant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "skeleton": { "alias": "skeleton"; "required": false; "isSignal": true; }; }, { "ctaClick": "ctaClick"; }, never, never, true, never>;
 }

package/ui/lib/components/plan-catalog/plan-catalog.component.d.ts

@@ -1,6 +1,8 @@
 import { TemplateRef } from '@angular/core';
 import { AdditionalService, CategoryOption, Plan, PlanCategory, PlanFilter, PriceRange } from '../../models/plan.models';
 import { LinkTarget } from '../../models/ui.models';
+import { PriceFormat } from '../../utils/text.utils';
+import { ButtonVariant } from '../button/button.component';
 import * as i0 from "@angular/core";
 /** Context of a custom card template: `<ng-template ccPlanCard let-plan let-link="link">`. */
 export interface PlanCardContext {
@@ -13,25 +15,30 @@ export declare class PlanCardTemplateDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<PlanCardTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PlanCardTemplateDirective, "ng-template[ccPlanCard]", never, {}, {}, never, never, true, never>;
 }
+/** Default detail line of a card: "2 horas 20 minutos · 2 personas". */
+export declare function defaultPlanMeta(plan: Plan): string;
 /**
  * Full plan list page: title, name search, category menu, filter and card grid.
  * It only needs the plans; the rest has Spanish defaults you can override.
  *
- * Selecting a category shows its plans. Searching by name or applying the filter
- * looks across every category, as the sites already did.
+ * - `plans` set to `null` means "loading" and shows placeholder cards.
+ * - `[(category)]` is two-way, so a page can keep it in the URL (`?categoria=pareja`).
+ * - Selecting a category shows its plans. Searching by name or filtering looks across
+ *   every category; clearing the search goes back to the selected category.
  *
  * ```html
- * <cc-plan-catalog
- *   [plans]="plans()"
- *   [services]="services()"
- *   [priceRanges]="ranges()"
- *   imageAltSuffix=" - Laurel Spa Medellín"
- * />
+ * <cc-plan-catalog [plans]="plans()" [services]="services()" [priceRanges]="ranges()" [(category)]="category" />
  * ```
+ *
+ * Tokens: --cc-catalog-panel-bg, --cc-catalog-sidebar-width, --cc-catalog-column-min,
+ * --cc-catalog-gap.
  */
 export declare class PlanCatalogComponent {
-    readonly plans: import("@angular/core").InputSignal<Plan[]>;
+    /** The plans, or `null` while they load. */
+    readonly plans: import("@angular/core").InputSignal<Plan[] | null>;
     readonly categories: import("@angular/core").InputSignal<CategoryOption<number>[]>;
+    /** Selected category. Use `[(category)]` to bind it; `null` means `initialCategory`. */
+    readonly category: import("@angular/core").ModelSignal<number | null>;
     readonly initialCategory: import("@angular/core").InputSignal<number>;
     /** Shows how many plans each category has, counted from `plans`. */
     readonly showCounts: import("@angular/core").InputSignal<boolean>;
@@ -40,30 +47,43 @@ export declare class PlanCatalogComponent {
     readonly priceRanges: import("@angular/core").InputSignal<PriceRange[]>;
     /** Where each card links to. Defaults to `/planes/<slug>`. */
     readonly detailsLink: import("@angular/core").InputSignal<(plan: Plan) => LinkTarget>;
+    readonly showPrice: import("@angular/core").InputSignal<boolean>;
+    readonly priceLabel: import("@angular/core").InputSignal<string>;
+    readonly priceFormat: import("@angular/core").InputSignal<PriceFormat>;
+    /** Detail line of each card. Defaults to duration and number of people. */
+    readonly planMeta: import("@angular/core").InputSignal<(plan: Plan) => string>;
+    readonly cardAppearance: import("@angular/core").InputSignal<"plain" | "filled" | "outlined">;
+    readonly ctaLabel: import("@angular/core").InputSignal<string>;
+    readonly ctaVariant: import("@angular/core").InputSignal<ButtonVariant>;
+    /** Added after the plan name in each image's alt text. */
+    readonly imageAltSuffix: import("@angular/core").InputSignal<string>;
+    readonly skeletonCount: import("@angular/core").InputSignal<number>;
     readonly showBanner: import("@angular/core").InputSignal<boolean>;
     readonly showSearch: import("@angular/core").InputSignal<boolean>;
     readonly titlePrefix: import("@angular/core").InputSignal<string>;
     readonly resultsTitle: import("@angular/core").InputSignal<string>;
     readonly categoriesTitle: import("@angular/core").InputSignal<string>;
+    readonly categoriesLayout: import("@angular/core").InputSignal<"auto" | "list" | "chips">;
     readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
     readonly searchIconSrc: import("@angular/core").InputSignal<string>;
     readonly filterTitle: import("@angular/core").InputSignal<string>;
     readonly filterIconSrc: import("@angular/core").InputSignal<string>;
-    readonly ctaLabel: import("@angular/core").InputSignal<string>;
-    /** Added after the plan name in each image's alt text. */
-    readonly imageAltSuffix: import("@angular/core").InputSignal<string>;
     readonly emptyMessage: import("@angular/core").InputSignal<string>;
-    readonly categoryChange: import("@angular/core").OutputEmitterRef<number>;
+    readonly emptyActionLabel: import("@angular/core").InputSignal<string>;
+    /** Optional contact link shown in the empty state, for example WhatsApp. */
+    readonly contactHref: import("@angular/core").InputSignal<string>;
+    readonly contactLabel: import("@angular/core").InputSignal<string>;
     protected readonly cardTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
-    protected readonly category: import("@angular/core").WritableSignal<number | null>;
+    private readonly filterForm;
     protected readonly query: import("@angular/core").WritableSignal<string>;
     protected readonly filter: import("@angular/core").WritableSignal<PlanFilter | null>;
     protected readonly filterOpen: import("@angular/core").WritableSignal<boolean>;
     /** Set when the user searched or filtered; results then cover every category. */
     protected readonly searching: import("@angular/core").WritableSignal<boolean>;
-    /** Category that was open before searching, to return to it when the search is cleared. */
-    private lastCategory;
-    constructor();
+    protected readonly loading: import("@angular/core").Signal<boolean>;
+    protected readonly skeletons: import("@angular/core").Signal<number[]>;
+    /** Category shown in the menu: none while searching. */
+    protected readonly activeCategory: import("@angular/core").Signal<number | null>;
     protected readonly categoryOptions: import("@angular/core").Signal<CategoryOption<number>[]>;
     protected readonly hasFilter: import("@angular/core").Signal<boolean>;
     protected readonly visiblePlans: import("@angular/core").Signal<Plan[]>;
@@ -71,8 +91,12 @@ export declare class PlanCatalogComponent {
     protected selectCategory(value: PlanCategory | number | null): void;
     protected onSearch(query: string): void;
     protected onFilter(filter: PlanFilter): void;
+    /** Clears search and filter and shows the selected category again. */
+    protected showAll(): void;
     protected linkFor(plan: Plan): LinkTarget;
-    private startSearch;
+    protected metaFor(plan: Plan): string;
+    private clearSearch;
+    private updateSearching;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlanCatalogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlanCatalogComponent, "cc-plan-catalog", never, { "plans": { "alias": "plans"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "initialCategory": { "alias": "initialCategory"; "required": false; "isSignal": true; }; "showCounts": { "alias": "showCounts"; "required": false; "isSignal": true; }; "services": { "alias": "services"; "required": false; "isSignal": true; }; "priceRanges": { "alias": "priceRanges"; "required": false; "isSignal": true; }; "detailsLink": { "alias": "detailsLink"; "required": false; "isSignal": true; }; "showBanner": { "alias": "showBanner"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "titlePrefix": { "alias": "titlePrefix"; "required": false; "isSignal": true; }; "resultsTitle": { "alias": "resultsTitle"; "required": false; "isSignal": true; }; "categoriesTitle": { "alias": "categoriesTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchIconSrc": { "alias": "searchIconSrc"; "required": false; "isSignal": true; }; "filterTitle": { "alias": "filterTitle"; "required": false; "isSignal": true; }; "filterIconSrc": { "alias": "filterIconSrc"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "imageAltSuffix": { "alias": "imageAltSuffix"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "categoryChange": "categoryChange"; }, ["cardTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanCatalogComponent, "cc-plan-catalog", never, { "plans": { "alias": "plans"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "category": { "alias": "category"; "required": false; "isSignal": true; }; "initialCategory": { "alias": "initialCategory"; "required": false; "isSignal": true; }; "showCounts": { "alias": "showCounts"; "required": false; "isSignal": true; }; "services": { "alias": "services"; "required": false; "isSignal": true; }; "priceRanges": { "alias": "priceRanges"; "required": false; "isSignal": true; }; "detailsLink": { "alias": "detailsLink"; "required": false; "isSignal": true; }; "showPrice": { "alias": "showPrice"; "required": false; "isSignal": true; }; "priceLabel": { "alias": "priceLabel"; "required": false; "isSignal": true; }; "priceFormat": { "alias": "priceFormat"; "required": false; "isSignal": true; }; "planMeta": { "alias": "planMeta"; "required": false; "isSignal": true; }; "cardAppearance": { "alias": "cardAppearance"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "ctaVariant": { "alias": "ctaVariant"; "required": false; "isSignal": true; }; "imageAltSuffix": { "alias": "imageAltSuffix"; "required": false; "isSignal": true; }; "skeletonCount": { "alias": "skeletonCount"; "required": false; "isSignal": true; }; "showBanner": { "alias": "showBanner"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "titlePrefix": { "alias": "titlePrefix"; "required": false; "isSignal": true; }; "resultsTitle": { "alias": "resultsTitle"; "required": false; "isSignal": true; }; "categoriesTitle": { "alias": "categoriesTitle"; "required": false; "isSignal": true; }; "categoriesLayout": { "alias": "categoriesLayout"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchIconSrc": { "alias": "searchIconSrc"; "required": false; "isSignal": true; }; "filterTitle": { "alias": "filterTitle"; "required": false; "isSignal": true; }; "filterIconSrc": { "alias": "filterIconSrc"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyActionLabel": { "alias": "emptyActionLabel"; "required": false; "isSignal": true; }; "contactHref": { "alias": "contactHref"; "required": false; "isSignal": true; }; "contactLabel": { "alias": "contactLabel"; "required": false; "isSignal": true; }; }, { "category": "categoryChange"; }, ["cardTemplate"], never, true, never>;
 }

package/ui/lib/components/plan-details/plan-details.component.d.ts

@@ -1,20 +1,32 @@
 import { Plan } from '../../models/plan.models';
 import { LinkTarget } from '../../models/ui.models';
+import { PriceFormat } from '../../utils/text.utils';
+import { ButtonVariant } from '../button/button.component';
 import * as i0 from "@angular/core";
 /**
- * Plan detail view: title with a back link, photo, price, description, duration,
- * number of people, included services, and a gift box with the booking button.
- * It only renders; the page loads the plan and handles SEO.
+ * Plan detail view: title with a back link, photo, price with an early booking button,
+ * description, duration, number of people, included services and a gift box.
+ * On screens below 1024px a bar with the price and the booking button stays fixed at
+ * the bottom while the plan is on screen. It only renders; the page loads the plan and
+ * handles SEO.
  *
  * ```html
- * <cc-plan-details [plan]="plan" [bookingUrl]="whatsappLink" imageAltSuffix=" en Laurel Spa Medellín" />
+ * <cc-plan-details [plan]="plan" [bookingUrl]="bookingFor" imageAltSuffix=" en Laurel Spa" />
  * ```
+ *
+ * Tokens: --cc-details-panel-bg, --cc-details-price-bg, --cc-details-price-color,
+ * --cc-details-gift-border, --cc-details-bar-bg, --cc-details-image-ratio.
  */
 export declare class PlanDetailsComponent {
     readonly plan: import("@angular/core").InputSignal<Plan>;
-    /** Link of the booking button, usually WhatsApp. */
-    readonly bookingUrl: import("@angular/core").InputSignal<string>;
+    /** Booking link, usually WhatsApp. A function receives the plan, to mention it in the message. */
+    readonly bookingUrl: import("@angular/core").InputSignal<string | ((plan: Plan) => string)>;
     readonly bookingLabel: import("@angular/core").InputSignal<string>;
+    /** Shorter label for the bottom bar on small screens. */
+    readonly barBookingLabel: import("@angular/core").InputSignal<string>;
+    readonly bookingVariant: import("@angular/core").InputSignal<ButtonVariant>;
+    /** Keeps a bar with price and booking button at the bottom on small screens. */
+    readonly stickyBar: import("@angular/core").InputSignal<boolean>;
     readonly showBanner: import("@angular/core").InputSignal<boolean>;
     readonly backLink: import("@angular/core").InputSignal<LinkTarget | null>;
     readonly backLabel: import("@angular/core").InputSignal<string>;
@@ -22,13 +34,14 @@ export declare class PlanDetailsComponent {
     readonly titleIconSrc: import("@angular/core").InputSignal<string>;
     /** Added after the plan name in the photo's alt text. */
     readonly imageAltSuffix: import("@angular/core").InputSignal<string>;
-    /** Arguments of Angular's `currency` pipe. */
-    readonly currencyCode: import("@angular/core").InputSignal<string>;
-    readonly currencyDisplay: import("@angular/core").InputSignal<string>;
-    readonly currencyDigits: import("@angular/core").InputSignal<string>;
+    readonly priceFormat: import("@angular/core").InputSignal<PriceFormat>;
+    /** Small text under the price. Defaults to "Precio por plan". */
+    readonly priceNote: import("@angular/core").InputSignal<string>;
     readonly durationIconSrc: import("@angular/core").InputSignal<string>;
     readonly personIconSrc: import("@angular/core").InputSignal<string>;
     readonly peopleIconSrc: import("@angular/core").InputSignal<string>;
+    readonly durationLabel: import("@angular/core").InputSignal<string>;
+    readonly peopleCaption: import("@angular/core").InputSignal<string>;
     readonly personLabel: import("@angular/core").InputSignal<string>;
     readonly peopleLabel: import("@angular/core").InputSignal<string>;
     readonly includesLabel: import("@angular/core").InputSignal<string>;
@@ -39,6 +52,8 @@ export declare class PlanDetailsComponent {
     readonly perksImageAlt: import("@angular/core").InputSignal<string>;
     protected readonly people: import("@angular/core").Signal<number>;
     protected readonly services: import("@angular/core").Signal<import("@c-code/c-code-fw/ui").AdditionalService[]>;
+    protected readonly price: import("@angular/core").Signal<string>;
+    protected readonly booking: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlanDetailsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlanDetailsComponent, "cc-plan-details", never, { "plan": { "alias": "plan"; "required": true; "isSignal": true; }; "bookingUrl": { "alias": "bookingUrl"; "required": true; "isSignal": true; }; "bookingLabel": { "alias": "bookingLabel"; "required": false; "isSignal": true; }; "showBanner": { "alias": "showBanner"; "required": false; "isSignal": true; }; "backLink": { "alias": "backLink"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "backIconSrc": { "alias": "backIconSrc"; "required": false; "isSignal": true; }; "titleIconSrc": { "alias": "titleIconSrc"; "required": false; "isSignal": true; }; "imageAltSuffix": { "alias": "imageAltSuffix"; "required": false; "isSignal": true; }; "currencyCode": { "alias": "currencyCode"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "currencyDigits": { "alias": "currencyDigits"; "required": false; "isSignal": true; }; "durationIconSrc": { "alias": "durationIconSrc"; "required": false; "isSignal": true; }; "personIconSrc": { "alias": "personIconSrc"; "required": false; "isSignal": true; }; "peopleIconSrc": { "alias": "peopleIconSrc"; "required": false; "isSignal": true; }; "personLabel": { "alias": "personLabel"; "required": false; "isSignal": true; }; "peopleLabel": { "alias": "peopleLabel"; "required": false; "isSignal": true; }; "includesLabel": { "alias": "includesLabel"; "required": false; "isSignal": true; }; "perksTitle": { "alias": "perksTitle"; "required": false; "isSignal": true; }; "perks": { "alias": "perks"; "required": false; "isSignal": true; }; "perksImageSrc": { "alias": "perksImageSrc"; "required": false; "isSignal": true; }; "perksImageAlt": { "alias": "perksImageAlt"; "required": false; "isSignal": true; }; }, {}, never, ["[ccDetailsMedia]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanDetailsComponent, "cc-plan-details", never, { "plan": { "alias": "plan"; "required": true; "isSignal": true; }; "bookingUrl": { "alias": "bookingUrl"; "required": true; "isSignal": true; }; "bookingLabel": { "alias": "bookingLabel"; "required": false; "isSignal": true; }; "barBookingLabel": { "alias": "barBookingLabel"; "required": false; "isSignal": true; }; "bookingVariant": { "alias": "bookingVariant"; "required": false; "isSignal": true; }; "stickyBar": { "alias": "stickyBar"; "required": false; "isSignal": true; }; "showBanner": { "alias": "showBanner"; "required": false; "isSignal": true; }; "backLink": { "alias": "backLink"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "backIconSrc": { "alias": "backIconSrc"; "required": false; "isSignal": true; }; "titleIconSrc": { "alias": "titleIconSrc"; "required": false; "isSignal": true; }; "imageAltSuffix": { "alias": "imageAltSuffix"; "required": false; "isSignal": true; }; "priceFormat": { "alias": "priceFormat"; "required": false; "isSignal": true; }; "priceNote": { "alias": "priceNote"; "required": false; "isSignal": true; }; "durationIconSrc": { "alias": "durationIconSrc"; "required": false; "isSignal": true; }; "personIconSrc": { "alias": "personIconSrc"; "required": false; "isSignal": true; }; "peopleIconSrc": { "alias": "peopleIconSrc"; "required": false; "isSignal": true; }; "durationLabel": { "alias": "durationLabel"; "required": false; "isSignal": true; }; "peopleCaption": { "alias": "peopleCaption"; "required": false; "isSignal": true; }; "personLabel": { "alias": "personLabel"; "required": false; "isSignal": true; }; "peopleLabel": { "alias": "peopleLabel"; "required": false; "isSignal": true; }; "includesLabel": { "alias": "includesLabel"; "required": false; "isSignal": true; }; "perksTitle": { "alias": "perksTitle"; "required": false; "isSignal": true; }; "perks": { "alias": "perks"; "required": false; "isSignal": true; }; "perksImageSrc": { "alias": "perksImageSrc"; "required": false; "isSignal": true; }; "perksImageAlt": { "alias": "perksImageAlt"; "required": false; "isSignal": true; }; }, {}, never, ["[ccDetailsMedia]", "*"], true, never>;
 }

package/ui/lib/components/plan-filter-form/plan-filter-form.component.d.ts

@@ -4,25 +4,35 @@ import * as i0 from "@angular/core";
  * Filter by included service and price range. The options come in as inputs,
  * so the form does not load data by itself.
  *
+ * `mode`:
+ * - `instant` (default): emits `filterChange` as soon as an option changes.
+ * - `submit`: emits when the user presses the submit button.
+ *
  * ```html
  * <cc-plan-filter-form [services]="services" [priceRanges]="ranges" (filterChange)="apply($event)" />
  * ```
+ *
+ * Tokens: --cc-filter-field-bg, --cc-filter-field-border, --cc-filter-label-color.
  */
 export declare class PlanFilterFormComponent {
     readonly services: import("@angular/core").InputSignal<AdditionalService[]>;
     readonly priceRanges: import("@angular/core").InputSignal<PriceRange[]>;
+    readonly mode: import("@angular/core").InputSignal<"instant" | "submit">;
     readonly serviceLabel: import("@angular/core").InputSignal<string>;
     readonly priceLabel: import("@angular/core").InputSignal<string>;
     readonly anyLabel: import("@angular/core").InputSignal<string>;
     readonly submitLabel: import("@angular/core").InputSignal<string>;
     readonly resetLabel: import("@angular/core").InputSignal<string>;
-    /** Emits on submit, and with an empty filter on reset. */
+    /** Emits the current filter, and an empty filter on reset. */
     readonly filterChange: import("@angular/core").OutputEmitterRef<PlanFilter>;
-    protected serviceIndex: import("@angular/core").WritableSignal<number>;
-    protected rangeIndex: import("@angular/core").WritableSignal<number>;
-    protected toIndex(event: Event): number;
+    protected readonly serviceIndex: import("@angular/core").WritableSignal<number>;
+    protected readonly rangeIndex: import("@angular/core").WritableSignal<number>;
+    protected readonly hasSelection: import("@angular/core").Signal<boolean>;
+    protected onServiceChange(event: Event): void;
+    protected onRangeChange(event: Event): void;
     submit(): void;
     reset(): void;
+    private toIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlanFilterFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlanFilterFormComponent, "cc-plan-filter-form", never, { "services": { "alias": "services"; "required": false; "isSignal": true; }; "priceRanges": { "alias": "priceRanges"; "required": false; "isSignal": true; }; "serviceLabel": { "alias": "serviceLabel"; "required": false; "isSignal": true; }; "priceLabel": { "alias": "priceLabel"; "required": false; "isSignal": true; }; "anyLabel": { "alias": "anyLabel"; "required": false; "isSignal": true; }; "submitLabel": { "alias": "submitLabel"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanFilterFormComponent, "cc-plan-filter-form", never, { "services": { "alias": "services"; "required": false; "isSignal": true; }; "priceRanges": { "alias": "priceRanges"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "serviceLabel": { "alias": "serviceLabel"; "required": false; "isSignal": true; }; "priceLabel": { "alias": "priceLabel"; "required": false; "isSignal": true; }; "anyLabel": { "alias": "anyLabel"; "required": false; "isSignal": true; }; "submitLabel": { "alias": "submitLabel"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
 }