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

package/ui/lib/components/promo-modal/promo-modal.component.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+/**
+ * Modal over the page, for example a promotion shown when the site opens.
+ * Shows `imageSrc`, or the projected content when there is no image.
+ * Closes with the ✕ button, a backdrop click or the Escape key.
+ *
+ * ```html
+ * <cc-promo-modal [(open)]="showPromo" imageSrc="assets/images/pop.jpeg" imageAlt="Promoción" />
+ * ```
+ */
+export declare class PromoModalComponent {
+    /** Whether the modal is visible. Use `[(open)]` to bind both ways. */
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    readonly imageSrc: import("@angular/core").InputSignal<string>;
+    readonly imageAlt: import("@angular/core").InputSignal<string>;
+    /** Makes the image a link, for example to WhatsApp. */
+    readonly link: import("@angular/core").InputSignal<string>;
+    readonly closeOnBackdrop: import("@angular/core").InputSignal<boolean>;
+    readonly closeLabel: import("@angular/core").InputSignal<string>;
+    readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PromoModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PromoModalComponent, "cc-promo-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*"], true, never>;
+}

package/ui/lib/components/search-box/search-box.component.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+/**
+ * Text field with a search button. Emits `search` on Enter or on the button.
+ *
+ * ```html
+ * <cc-search-box placeholder="Buscar plan" [(value)]="query" (search)="onSearch($event)" />
+ * ```
+ */
+export declare class SearchBoxComponent {
+    readonly value: import("@angular/core").ModelSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly buttonLabel: import("@angular/core").InputSignal<string>;
+    readonly iconSrc: import("@angular/core").InputSignal<string>;
+    readonly search: import("@angular/core").OutputEmitterRef<string>;
+    onInput(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBoxComponent, "cc-search-box", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; }, never, never, true, never>;
+}

package/ui/lib/components/social-links/social-links.component.d.ts

@@ -0,0 +1,17 @@
+import { SocialLink } from '../../models/ui.models';
+import * as i0 from "@angular/core";
+/**
+ * Row of social network icons that open in a new tab.
+ *
+ * ```html
+ * <cc-social-links [links]="socials" size="1.25rem" />
+ * ```
+ */
+export declare class SocialLinksComponent {
+    readonly links: import("@angular/core").InputSignal<SocialLink[]>;
+    /** Icon width, any CSS length. */
+    readonly size: import("@angular/core").InputSignal<string>;
+    readonly gap: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SocialLinksComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SocialLinksComponent, "cc-social-links", never, { "links": { "alias": "links"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+/**
+ * Floating WhatsApp button, fixed to a corner of the screen.
+ *
+ * ```html
+ * <cc-whatsapp-button [href]="whatsappLink" />
+ * <cc-whatsapp-button [href]="whatsappLink" iconSrc="assets/icons/whatsapp.png" position="left" />
+ * ```
+ */
+export declare class WhatsappButtonComponent {
+    /** WhatsApp link. Build it with `whatsappUrl(phone, message)`. */
+    readonly href: import("@angular/core").InputSignal<string>;
+    /** Custom icon. Without it, the WhatsApp logo is drawn as SVG. */
+    readonly iconSrc: import("@angular/core").InputSignal<string>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly position: import("@angular/core").InputSignal<"right" | "left">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WhatsappButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WhatsappButtonComponent, "cc-whatsapp-button", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/ui/lib/models/plan.models.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Plan category. The numeric values match the `category` field stored in the sites' `plans.json`.
+ */
+export declare enum PlanCategory {
+    Individual = 0,
+    Couple = 1,
+    Group = 2,
+    None = 3
+}
+/** Add-on service that a plan includes (an entry in `additionals.json`). */
+export interface AdditionalService {
+    id: number;
+    iconPath: string;
+    name: string;
+}
+/** A spa plan (an entry in `plans.json`). */
+export interface Plan {
+    id: number;
+    name: string;
+    description: string;
+    duration: string;
+    price: number;
+    /** Number of people the plan is for. The spelling matches the existing JSON files. */
+    cuantity: number;
+    imgPath: string;
+    category: PlanCategory | number;
+    additionalServicesId: number[];
+    /** Filled in by `PlanCatalogService` by joining `additionalServicesId` with `additionals.json`. */
+    additionalServices?: AdditionalService[];
+}
+/** Price range option for the filter form (an entry in `priceRanges.json`). */
+export interface PriceRange {
+    description: string;
+    min: number;
+    max: number;
+}
+/** Filter produced by `cc-plan-filter-form`. Empty fields are not applied. */
+export interface PlanFilter {
+    service?: AdditionalService | null;
+    priceRange?: PriceRange | null;
+}
+/** Entry in `cc-category-menu`. */
+export interface CategoryOption<T = PlanCategory | number> {
+    value: T;
+    label: string;
+    /** Number shown next to the label. Leave it empty to hide it. */
+    count?: number;
+}
+/** Default Spanish labels for the plan categories. */
+export declare const DEFAULT_PLAN_CATEGORIES: CategoryOption[];

package/ui/lib/models/ui.models.d.ts

@@ -0,0 +1,24 @@
+/** Image for `cc-gallery` and `cc-lightbox`. */
+export interface GalleryImage {
+    src: string;
+    /** Smaller version for the grid. Defaults to `src`. */
+    thumb?: string;
+    /** Alternative text. Defaults to `caption`. */
+    alt?: string;
+    /** Text shown under the image in the lightbox. */
+    caption?: string;
+}
+/** Link for `cc-social-links`. */
+export interface SocialLink {
+    href: string;
+    iconSrc: string;
+    /** Accessible name, for example "Instagram de Laurel Spa". */
+    label: string;
+}
+/** Question for `cc-faq`. */
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+/** Router link accepted by the components: a path string or a commands array. */
+export type LinkTarget = string | any[];

package/ui/lib/services/plan-catalog.service.d.ts

@@ -0,0 +1,43 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AdditionalService, Plan, PlanCategory, PlanFilter, PriceRange } from '../models/plan.models';
+import * as i0 from "@angular/core";
+/** Where `PlanCatalogService` loads the JSON files from. */
+export interface PlanCatalogConfig {
+    plansUrl: string;
+    additionalsUrl: string;
+    /** Leave it empty if the site has no `priceRanges.json`; `getPriceRanges()` then returns `[]`. */
+    priceRangesUrl?: string | null;
+}
+export declare const DEFAULT_PLAN_CATALOG_CONFIG: PlanCatalogConfig;
+export declare const PLAN_CATALOG_CONFIG: InjectionToken<PlanCatalogConfig>;
+/**
+ * Overrides the JSON locations. Without it, the service reads `assets/data/*.json`.
+ *
+ * ```ts
+ * providers: [provideHttpClient(withFetch()), providePlanCatalog({ priceRangesUrl: null })]
+ * ```
+ */
+export declare function providePlanCatalog(config?: Partial<PlanCatalogConfig>): EnvironmentProviders;
+/**
+ * Reads plans, add-on services and price ranges from static JSON.
+ * Each file is requested once and cached; filtering happens in memory.
+ * Needs `provideHttpClient()` in the app.
+ */
+export declare class PlanCatalogService {
+    private http;
+    private config;
+    private additionals$;
+    private plans$;
+    private priceRanges$;
+    /** Every plan, with `additionalServices` filled in. */
+    getPlans(): Observable<Plan[]>;
+    getAdditionalServices(): Observable<AdditionalService[]>;
+    getPriceRanges(): Observable<PriceRange[]>;
+    getPlansByCategory(category: PlanCategory | number): Observable<Plan[]>;
+    getPlansByFilter(filter: PlanFilter): Observable<Plan[]>;
+    getPlansByName(name: string): Observable<Plan[]>;
+    getPlanBySlug(slug: string): Observable<Plan | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlanCatalogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PlanCatalogService>;
+}

package/ui/lib/services/seo.service.d.ts

@@ -0,0 +1,39 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface SeoConfig {
+    /** Production domain without a trailing slash: "https://www.laurelspamedellin.com". */
+    siteUrl: string;
+    /** Image used when a page does not set one. Relative paths are resolved against `siteUrl`. */
+    defaultImage?: string;
+}
+export interface SeoData {
+    title: string;
+    description: string;
+    /** Page path, for example "/planes". */
+    path: string;
+    /** Image for the share preview. Defaults to `SeoConfig.defaultImage`. */
+    image?: string;
+}
+export declare const SEO_CONFIG: InjectionToken<SeoConfig>;
+/** Registers the site data `SeoService` needs. */
+export declare function provideSeo(config: SeoConfig): EnvironmentProviders;
+/**
+ * Sets the title, description, canonical URL, Open Graph and Twitter tags, and JSON-LD blocks.
+ * Works during SSR and prerendering. Requires `provideSeo()`.
+ */
+export declare class SeoService {
+    private title;
+    private meta;
+    private document;
+    private config;
+    get siteUrl(): string;
+    /** Turns a site path or relative asset into an absolute URL. Absolute URLs are returned unchanged. */
+    absoluteUrl(pathOrUrl: string): string;
+    update({ title, description, path, image }: SeoData): void;
+    /** Adds or replaces a `<script type="application/ld+json">` with the given id. */
+    setJsonLd(id: string, data: object): void;
+    removeJsonLd(id: string): void;
+    private setCanonical;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SeoService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SeoService>;
+}

package/ui/lib/utils/plan.utils.d.ts

@@ -0,0 +1,16 @@
+import { AdditionalService, CategoryOption, Plan, PlanCategory, PlanFilter } from '../models/plan.models';
+/** Fills `plan.additionalServices` from `additionalServicesId`. Unknown ids are skipped. */
+export declare function joinAdditionalServices(plans: Plan[], additionals: AdditionalService[]): Plan[];
+/** URL slug of a plan, derived from its name. */
+export declare function planSlug(plan: Plan | string): string;
+export declare function findPlanBySlug(plans: Plan[], slug: string): Plan | undefined;
+export declare function filterPlansByCategory(plans: Plan[], category: PlanCategory | number): Plan[];
+/** Case- and accent-insensitive search on the plan name. An empty query returns every plan. */
+export declare function searchPlansByName(plans: Plan[], query: string): Plan[];
+/**
+ * Applies a `PlanFilter`. Price uses `min < price <= max`, the same rule the sites had,
+ * except that `min = 0` also includes free plans.
+ */
+export declare function filterPlans(plans: Plan[], filter: PlanFilter): Plan[];
+/** Returns the options with `count` set to the number of plans in each category. */
+export declare function withCategoryCounts<T extends PlanCategory | number>(options: CategoryOption<T>[], plans: Plan[]): CategoryOption<T>[];

package/ui/lib/utils/text.utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Turns a text into a URL-safe slug: "PLAN FLOR DE LOTTO 3" -> "plan-flor-de-lotto-3".
+ * Accents are removed, so "Jacuzzi Mágico" -> "jacuzzi-magico".
+ */
+export declare function slugify(text: string): string;
+/** "PLAN GARDENIA" -> "Plan Gardenia". */
+export declare function titleCase(text: string): string;
+/** Cuts a text at the last whole word that fits in `max` characters and adds "…". */
+export declare function truncateText(text: string, max?: number): string;
+/**
+ * Builds a WhatsApp chat link.
+ * @param phone Number with country code, with or without "+" and spaces: "57 310 494 8884".
+ * @param message Pre-filled message, optional.
+ */
+export declare function whatsappUrl(phone: string, message?: string): string;

package/ui/public-api.d.ts

@@ -0,0 +1,20 @@
+export * from './lib/models/plan.models';
+export * from './lib/models/ui.models';
+export * from './lib/utils/text.utils';
+export * from './lib/utils/plan.utils';
+export * from './lib/services/plan-catalog.service';
+export * from './lib/services/seo.service';
+export * from './lib/components/whatsapp-button/whatsapp-button.component';
+export * from './lib/components/promo-modal/promo-modal.component';
+export * from './lib/components/page-banner/page-banner.component';
+export * from './lib/components/info-item/info-item.component';
+export * from './lib/components/faq/faq.component';
+export * from './lib/components/social-links/social-links.component';
+export * from './lib/components/plan-card/plan-card.component';
+export * from './lib/components/category-menu/category-menu.component';
+export * from './lib/components/search-box/search-box.component';
+export * from './lib/components/plan-filter-form/plan-filter-form.component';
+export * from './lib/components/plan-catalog/plan-catalog.component';
+export * from './lib/components/plan-details/plan-details.component';
+export * from './lib/components/lightbox/lightbox.component';
+export * from './lib/components/gallery/gallery.component';

package/ui/theme/tokens.css

@@ -0,0 +1,45 @@
+/*
+ * Design tokens for @c-code/c-code-fw/ui.
+ *
+ * The components already fall back to these values, so this file is optional.
+ * To apply a site's palette, set the variables in its global styles:
+ *
+ *   :root {
+ *     --cc-primary: #4C6B4A;
+ *     --cc-secondary: #CEAB5D;
+ *   }
+ *
+ * The overrides work on any element, not just :root, so a section can use its own palette.
+ *
+ * ROLES (optional). By default each role follows a palette color. Set a role only
+ * when a site needs it to differ from its palette:
+ *
+ *   --cc-surface       cards, sidebar, detail panel  (default --cc-secondary-light)
+ *   --cc-text          text inside components        (default --cc-primary)
+ *   --cc-heading       titles and the price badge    (default --cc-primary)
+ *   --cc-accent        buttons and highlighted text  (default --cc-secondary)
+ *   --cc-accent-hover  button hover                  (default --cc-secondary-dark)
+ *   --cc-on-accent     text on buttons and badges    (default --cc-bg)
+ *
+ * Each component also has its own variables (for example --cc-plan-card-bg).
+ * They are listed in the README.
+ */
+:root {
+  /* Palette */
+  --cc-primary: #4c6b4a;
+  --cc-primary-light: #a0ba9e;
+  --cc-primary-dark: #022b04;
+  --cc-secondary: #ceab5d;
+  --cc-secondary-light: #f8f4ee;
+  --cc-secondary-dark: #9a7521;
+  --cc-bg: #f0ffef;
+
+  /* Typography */
+  --cc-font-body: inherit;
+  --cc-font-heading: inherit;
+
+  /* Shape */
+  --cc-radius: 0;
+  --cc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --cc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}