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

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,25 @@
+/**
+ * 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;
+export interface PriceFormat {
+    /** BCP 47 locale. Defaults to "es-CO", which prints 259900 as "$ 259.900". */
+    locale?: string;
+    /** ISO 4217 code. Defaults to "COP". */
+    currency?: string;
+    /** Decimals to show. Defaults to 0. */
+    digits?: number;
+}
+/** Formats a price with `Intl.NumberFormat`: formatPrice(259900) -> "$ 259.900". */
+export declare function formatPrice(value: number, { locale, currency, digits }?: PriceFormat): string;

package/ui/public-api.d.ts

@@ -0,0 +1,24 @@
+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/button/button.component';
+export * from './lib/components/section-heading/section-heading.component';
+export * from './lib/components/notice/notice.component';
+export * from './lib/components/faq-item/faq-item.component';
+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/component-base.css

@@ -0,0 +1,136 @@
+/*
+ * Shared base for every @c-code/c-code-fw/ui component. Each component lists this file
+ * first in `styleUrls`, so the rules below are scoped to that component.
+ *
+ * The library does not own any brand. It reads a contract of semantic roles (--cc-*)
+ * that each site defines from its own palette and fonts, and resolves them into private
+ * --_* variables on the component host. Without a site theme, components render in
+ * neutral grays. Resolution happens on each host, so a role set on any ancestor element
+ * re-themes the components inside it.
+ *
+ * Structure (spacing, type scale, radii, shadows, motion) does belong to the library:
+ * those tokens have library defaults and components expose props to pick from them.
+ */
+:host {
+  /* ---- Color roles: defined by the site ---- */
+  --_canvas: var(--cc-canvas, #ffffff); /* page background behind components */
+  --_surface: var(--cc-surface, #f5f5f4); /* cards, panels */
+  --_surface-alt: var(--cc-surface-alt, #fafaf9); /* alternative band, image placeholders */
+  --_text: var(--cc-text, #292524);
+  --_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));
+  --_heading: var(--cc-heading, #1c1917);
+  --_accent: var(--cc-accent, #1c1917); /* primary buttons, active items */
+  --_accent-hover: var(--cc-accent-hover, #44403c);
+  --_accent-text: var(--cc-accent-text, var(--_heading)); /* accent used as text, ≥4.5:1 */
+  --_on-accent: var(--cc-on-accent, #ffffff);
+  --_inverse: var(--cc-inverse, #1c1917); /* dark blocks: price badge, dark buttons */
+  --_inverse-hover: var(--cc-inverse-hover, #000000);
+  --_on-inverse: var(--cc-on-inverse, #ffffff);
+  --_border: var(--cc-border, #d6d3d1);
+  --_border-strong: var(--cc-border-strong, #78716c); /* inputs, ≥3:1 on white */
+  --_focus-ring: var(--cc-focus-ring, var(--_heading));
+  --_overlay: var(--cc-overlay, rgb(0 0 0 / 0.7));
+  --_danger: var(--cc-danger, #b91c1c);
+  --_danger-surface: var(--cc-danger-surface, #fef2f2);
+  --_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);
+  --_whatsapp: var(--cc-whatsapp, #1faf38);
+  --_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);
+  --_on-whatsapp: var(--cc-on-whatsapp, #ffffff);
+
+  /* ---- Typography roles: defined by the site ---- */
+  --_font-body: var(--cc-font-body, inherit);
+  --_font-heading: var(--cc-font-heading, inherit);
+  --_heading-style: var(--cc-heading-style, normal); /* normal | italic */
+  --_heading-transform: var(--cc-heading-transform, none); /* none | uppercase */
+  --_heading-tracking: var(--cc-heading-tracking, normal);
+
+  /* ---- Structure: owned by the library ---- */
+  --_text-xs: var(--cc-text-xs, 0.75rem);
+  --_text-sm: var(--cc-text-sm, 0.875rem);
+  --_text-md: var(--cc-text-md, 1rem);
+  --_text-lg: var(--cc-text-lg, 1.125rem);
+  --_text-xl: var(--cc-text-xl, 1.25rem);
+  --_text-2xl: var(--cc-text-2xl, 1.5rem);
+  --_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));
+  --_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));
+  --_leading-tight: var(--cc-leading-tight, 1.2);
+  --_leading-snug: var(--cc-leading-snug, 1.4);
+  --_leading-body: var(--cc-leading-body, 1.6);
+  --_weight-regular: var(--cc-weight-regular, 400);
+  --_weight-medium: var(--cc-weight-medium, 500);
+  --_weight-semibold: var(--cc-weight-semibold, 600);
+  --_weight-bold: var(--cc-weight-bold, 700);
+  --_tracking-wide: var(--cc-tracking-wide, 0.04em);
+
+  --_space-1: var(--cc-space-1, 0.25rem);
+  --_space-2: var(--cc-space-2, 0.5rem);
+  --_space-3: var(--cc-space-3, 0.75rem);
+  --_space-4: var(--cc-space-4, 1rem);
+  --_space-5: var(--cc-space-5, 1.25rem);
+  --_space-6: var(--cc-space-6, 1.5rem);
+  --_space-8: var(--cc-space-8, 2rem);
+  --_space-10: var(--cc-space-10, 2.5rem);
+  --_space-12: var(--cc-space-12, 3rem);
+  --_space-16: var(--cc-space-16, 4rem);
+  --_space-20: var(--cc-space-20, 5rem);
+  --_space-24: var(--cc-space-24, 6rem);
+
+  --_radius: var(--cc-radius, 0);
+  --_radius-sm: var(--cc-radius-sm, 0.125rem);
+  --_radius-md: var(--cc-radius-md, 0.5rem);
+  --_radius-lg: var(--cc-radius-lg, 1rem);
+  --_radius-pill: var(--cc-radius-pill, 9999px);
+  --_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+  --_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
+  --_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+
+  --_focus-width: var(--cc-focus-width, 2px);
+  --_focus-offset: var(--cc-focus-offset, 2px);
+  --_control-height: var(--cc-control-height, 2.75rem);
+  --_control-height-sm: var(--cc-control-height-sm, 2.25rem);
+  --_control-height-lg: var(--cc-control-height-lg, 3.25rem);
+  --_duration-fast: var(--cc-duration-fast, 150ms);
+  --_duration: var(--cc-duration, 250ms);
+  --_ease: var(--cc-ease, cubic-bezier(0.2, 0, 0, 1));
+  --_z-float: var(--cc-z-float, 20);
+  --_z-sticky: var(--cc-z-sticky, 30);
+  --_z-overlay: var(--cc-z-overlay, 50);
+
+  box-sizing: border-box;
+  font-family: var(--_font-body);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:focus-visible {
+  outline: var(--_focus-width) solid var(--_focus-ring);
+  outline-offset: var(--_focus-offset);
+}
+
+/* Visually hidden text for screen readers. */
+.cc-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/ui/theme/tokens.css

@@ -0,0 +1,111 @@
+/*
+ * Structural tokens of @c-code/c-code-fw/ui: type scale, spacing, radii, shadows,
+ * controls, motion and layers.
+ *
+ * Every component already falls back to these values, so this file is optional. Load it
+ * (angular.json → styles) when the site wants to use the same scales in its own markup,
+ * for example by mapping Tailwind's font sizes and spacing to var(--cc-text-*) and
+ * var(--cc-space-*). Override any of them to change the rhythm of a whole site.
+ *
+ * COLORS AND FONTS ARE NOT HERE. They belong to each site. The components read this
+ * contract of roles, which the site sets from its own palette (with any variable names):
+ *
+ *   --cc-canvas            page background behind components
+ *   --cc-surface           cards, panels, sidebar
+ *   --cc-surface-alt       alternative band, image placeholders
+ *   --cc-text              body text
+ *   --cc-text-muted        counters, metadata (default: --cc-text at 72%)
+ *   --cc-heading           titles
+ *   --cc-accent            primary buttons, active items
+ *   --cc-accent-hover      primary button hover
+ *   --cc-accent-text       accent used as text; needs 4.5:1 on --cc-canvas and --cc-surface
+ *   --cc-on-accent         text on --cc-accent; needs 4.5:1
+ *   --cc-inverse           dark blocks: price badge, dark buttons
+ *   --cc-inverse-hover
+ *   --cc-on-inverse        text on --cc-inverse
+ *   --cc-border            dividers
+ *   --cc-border-strong     input borders, 3:1 on --cc-canvas
+ *   --cc-focus-ring        keyboard focus outline
+ *   --cc-overlay           modal and lightbox backdrop
+ *   --cc-danger, --cc-danger-surface, --cc-on-danger-surface   warnings
+ *   --cc-whatsapp, --cc-whatsapp-hover                         WhatsApp buttons
+ *   --cc-font-body, --cc-font-heading                          font families
+ *   --cc-heading-style (normal|italic), --cc-heading-transform, --cc-heading-tracking
+ *
+ * Example, in the site's styles.css:
+ *
+ *   :root {
+ *     --laurel-green: #4c6b4a;
+ *     --laurel-gold: #ceab5d;
+ *     --cc-heading: var(--laurel-green);
+ *     --cc-accent: var(--laurel-gold);
+ *     --cc-on-accent: #022b04;
+ *   }
+ *
+ * Without a site theme the components render in neutral grays.
+ *
+ * Breakpoints (media queries cannot use variables): sm 640px, md 768px, lg 1024px, xl 1280px.
+ */
+:root {
+  /* Type scale */
+  --cc-text-xs: 0.75rem;
+  --cc-text-sm: 0.875rem;
+  --cc-text-md: 1rem;
+  --cc-text-lg: 1.125rem;
+  --cc-text-xl: 1.25rem;
+  --cc-text-2xl: 1.5rem;
+  --cc-text-3xl: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
+  --cc-text-4xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
+  --cc-leading-tight: 1.2;
+  --cc-leading-snug: 1.4;
+  --cc-leading-body: 1.6;
+  --cc-weight-regular: 400;
+  --cc-weight-medium: 500;
+  --cc-weight-semibold: 600;
+  --cc-weight-bold: 700;
+  --cc-tracking-wide: 0.04em;
+
+  /* Spacing (4px base, same steps as Tailwind) */
+  --cc-space-1: 0.25rem;
+  --cc-space-2: 0.5rem;
+  --cc-space-3: 0.75rem;
+  --cc-space-4: 1rem;
+  --cc-space-5: 1.25rem;
+  --cc-space-6: 1.5rem;
+  --cc-space-8: 2rem;
+  --cc-space-10: 2.5rem;
+  --cc-space-12: 3rem;
+  --cc-space-16: 4rem;
+  --cc-space-20: 5rem;
+  --cc-space-24: 6rem;
+
+  /* Shape */
+  --cc-radius: 0; /* surfaces: cards, panels */
+  --cc-radius-sm: 0.125rem;
+  --cc-radius-md: 0.5rem;
+  --cc-radius-lg: 1rem;
+  --cc-radius-pill: 9999px;
+  --cc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --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);
+  --cc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Focus */
+  --cc-focus-width: 2px;
+  --cc-focus-offset: 2px;
+
+  /* Controls */
+  --cc-control-height: 2.75rem; /* 44px minimum tap target */
+  --cc-control-height-sm: 2.25rem;
+  --cc-control-height-lg: 3.25rem;
+
+  /* Motion */
+  --cc-duration-fast: 150ms;
+  --cc-duration: 250ms;
+  --cc-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layers */
+  --cc-z-float: 20;
+  --cc-z-sticky: 30;
+  --cc-z-overlay: 50;
+}