valtech-components 2.0.713 → 2.0.715

package/lib/components/atoms/container/container.component.d.ts

@@ -0,0 +1,30 @@
+import { ContainerAlign, ContainerMetadata, ContainerPadding, ContainerSize } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-container
+ *
+ * Layout primitive that caps content max-width using design tokens
+ * and centers it horizontally. Use to keep UX consistent on large
+ * screens without per-page CSS.
+ *
+ * @example
+ * <val-container size="xl">
+ *   <!-- page content -->
+ * </val-container>
+ *
+ * @example
+ * <val-container [props]="{ size: 'md', padding: 'compact' }">
+ *   <!-- narrower form -->
+ * </val-container>
+ */
+export declare class ContainerComponent {
+    readonly props: import("@angular/core").InputSignal<ContainerMetadata>;
+    readonly size: import("@angular/core").Signal<ContainerSize>;
+    readonly padding: import("@angular/core").Signal<ContainerPadding>;
+    readonly align: import("@angular/core").Signal<ContainerAlign>;
+    get sizeAttr(): ContainerSize;
+    get paddingAttr(): ContainerPadding;
+    get alignAttr(): ContainerAlign;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContainerComponent, "val-container", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/atoms/container/types.d.ts

@@ -0,0 +1,11 @@
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
+export type ContainerPadding = 'none' | 'compact' | 'comfortable';
+export type ContainerAlign = 'start' | 'center';
+export interface ContainerMetadata {
+    /** Max-width cap. fluid = no cap. Default: 'xl' (1100px) */
+    size?: ContainerSize;
+    /** Lateral padding. Default: 'comfortable' (16px) */
+    padding?: ContainerPadding;
+    /** Horizontal alignment. Default: 'center' */
+    align?: ContainerAlign;
+}

package/lib/components/atoms/rights-footer/rights-footer.component.d.ts

@@ -39,7 +39,7 @@ export declare class RightsFooterComponent {
     /**
      * Computed helper for align prop in template.
      */
-    propsAlign: import("@angular/core").Signal<"left" | "center" | "right">;
+    propsAlign: import("@angular/core").Signal<"center" | "left" | "right">;
     /**
      * Computed helper for color prop in template.
      */

package/lib/components/molecules/features-list/features-list.component.d.ts

@@ -49,7 +49,7 @@ export declare class FeaturesListComponent {
         iconSize: number;
         mode: "horizontal" | "vertical";
         gap: "small" | "medium" | "large";
-        alignment: "center" | "start";
+        alignment: "start" | "center";
     }>;
     /** Resolved icon color (handles Ionic colors and CSS colors) */
     iconColorStyle: import("@angular/core").Signal<string>;

package/lib/components/organisms/article/article.component.d.ts

@@ -57,7 +57,7 @@ export declare class ArticleComponent implements OnInit {
         linkConfig?: import("valtech-components").LinkProcessorConfig;
         allowPartialBold?: boolean;
         authorColor?: import("@ionic/core").Color;
-        alignment?: "left" | "center" | "right";
+        alignment?: "center" | "left" | "right";
         showQuoteMark?: boolean;
     };
     getHighlightTextProps(element: ArticleElement): {

package/lib/components/organisms/bottom-nav/bottom-nav.component.d.ts

@@ -63,7 +63,7 @@ export declare class BottomNavComponent implements OnInit, OnDestroy {
         i18nNamespace?: string;
         hideLabels: boolean;
         safeArea: boolean;
-        animation: "none" | "fade" | "slide" | "scale";
+        animation: "none" | "slide" | "fade" | "scale";
     }>;
     /** Computed tabs with FAB inserted if present */
     displayTabs: import("@angular/core").Signal<BottomNavTab[]>;

package/lib/components/organisms/cards-carousel/cards-carousel.component.d.ts

@@ -1,19 +1,19 @@
-import { CardsCarouselMetadata } from './types';
+import { CardsCarouselMetadata, CarouselCardShape } from './types';
 import * as i0 from "@angular/core";
 /**
  * val-cards-carousel
  *
- * A horizontal carousel of recap cards with optional action header.
- * Combines HorizontalScroll for smooth horizontal scrolling with RecapCard
- * components for consistent card styling.
+ * A horizontal carousel of cards with optional action header.
+ * Combines HorizontalScroll for smooth horizontal scrolling with inline
+ * card rendering for consistent card styling.
  *
  * @example
  * <val-cards-carousel
  *   [props]="{
  *     header: { title: 'Featured Items', actionType: 'link', actionLabel: 'View All' },
  *     cards: [
- *       { title: 'Card 1', description: 'Description', href: '/item/1' },
- *       { title: 'Card 2', description: 'Description', href: '/item/2' }
+ *       { title: { title: 'Card 1' }, link: { text: 'Learn more', url: '/item/1' } },
+ *       { title: { title: 'Card 2' }, link: { text: 'Learn more', url: '/item/2' } }
  *     ]
  *   }"
  * ></val-cards-carousel>
@@ -25,6 +25,12 @@ export declare class CardsCarouselComponent {
      * Carousel configuration with cards and optional header.
      */
     props: CardsCarouselMetadata;
+    /**
+     * Merges shape color with additional styles.
+     */
+    mergeShapeStyle(shape: CarouselCardShape): {
+        [key: string]: string | number;
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<CardsCarouselComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CardsCarouselComponent, "val-cards-carousel", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/organisms/cards-carousel/types.d.ts

@@ -1,11 +1,40 @@
 import { ActionHeaderMetadata } from '../../molecules/action-header/types';
-import { RecapCardMetadata } from '../../molecules/recap-card/types';
+import { LinkMetadata } from '../../molecules/link/types';
+import { TitleBlockMetada } from '../../molecules/title-block/types';
+/**
+ * Configuration for a decorative shape within a carousel card.
+ */
+export interface CarouselCardShape {
+    /** Background color of the shape */
+    color: string;
+    /** Additional CSS styles (position, size, etc.) */
+    style?: {
+        [key: string]: string | number;
+    };
+}
+/**
+ * Configuration for a single card inside the carousel.
+ */
+export interface CarouselCardMetadata {
+    /** Title block configuration */
+    title: TitleBlockMetada;
+    /** Link configuration */
+    link: LinkMetadata;
+    /** Decorative shapes to display behind content */
+    shapes?: CarouselCardShape[];
+    /** Background color of the card (Ionic color) */
+    color?: string;
+    /** Minimum height of the card. Default: '400px' */
+    minHeight?: string;
+    /** Width of the card. Default: '280px' */
+    width?: string;
+}
 /**
  * Configuration for the cards carousel component.
  */
 export interface CardsCarouselMetadata {
-    /** Array of recap cards to display */
-    cards: RecapCardMetadata[];
+    /** Array of cards to display */
+    cards: CarouselCardMetadata[];
     /** Optional action header configuration */
     header?: ActionHeaderMetadata;
 }

package/lib/components/templates/page-wrapper/page-wrapper.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { ViewWillEnter, ViewWillLeave } from '@ionic/angular/standalone';
+import { ContainerSize } from '../../atoms/container/types';
 import { PageWrapperMetadata } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -71,6 +72,7 @@ export declare class PageWrapperComponent implements ViewWillEnter, ViewWillLeav
     }>;
     contentId: import("@angular/core").Signal<string>;
     propsFooter: import("@angular/core").Signal<import("valtech-components").CompanyFooterMetadata>;
+    contentMaxWidth: import("@angular/core").Signal<ContainerSize>;
     background: import("@angular/core").Signal<string>;
     ngOnInit(): void;
     ngOnDestroy(): void;

package/lib/components/templates/page-wrapper/types.d.ts

@@ -1,5 +1,6 @@
 import { HeaderMetadata } from '../../organisms/header/types';
 import { CompanyFooterMetadata } from '../../organisms/company-footer/types';
+import { ContainerSize } from '../../atoms/container/types';
 /**
  * Configuration for the page wrapper component.
  */
@@ -16,4 +17,10 @@ export interface PageWrapperMetadata {
     contentId?: string;
     /** Enable scroll-to-top on route change */
     scrollToTopOnNavigate?: boolean;
+    /**
+     * Max-width cap for the routed content using design tokens.
+     * 'fluid' = no cap (default, backwards-compatible).
+     * Recommended: 'xl' for typical app pages.
+     */
+    contentMaxWidth?: ContainerSize;
 }

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.713";
+export declare const VERSION = "2.0.715";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.713",
+  "version": "2.0.715",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -3,6 +3,8 @@ export * from './lib/components/atoms/avatar/avatar.component';
 export * from './lib/components/atoms/avatar/types';
 export * from './lib/components/atoms/box/box.component';
 export * from './lib/components/atoms/box/types';
+export * from './lib/components/atoms/container/container.component';
+export * from './lib/components/atoms/container/types';
 export * from './lib/components/atoms/button/button.component';
 export * from './lib/components/atoms/button/factory';
 export * from './lib/components/atoms/display/display.component';
@@ -137,22 +139,12 @@ export * from './lib/components/molecules/date-range-input/date-range-input.comp
 export * from './lib/components/molecules/date-range-input/types';
 export * from './lib/components/molecules/number-stepper/number-stepper.component';
 export * from './lib/components/molecules/number-stepper/types';
-export * from './lib/components/molecules/ticket-grid/ticket-grid.component';
-export * from './lib/components/molecules/ticket-grid/types';
 export * from './lib/components/molecules/share-buttons/share-buttons.component';
 export * from './lib/components/molecules/share-buttons/types';
-export * from './lib/components/molecules/winner-display/winner-display.component';
-export * from './lib/components/molecules/winner-display/types';
-export * from './lib/components/molecules/raffle-status-card/raffle-status-card.component';
-export * from './lib/components/molecules/raffle-status-card/types';
-export * from './lib/components/molecules/participant-card/participant-card.component';
-export * from './lib/components/molecules/participant-card/types';
 export * from './lib/components/molecules/glow-card/glow-card.component';
 export * from './lib/components/molecules/glow-card/types';
 export * from './lib/components/molecules/swipe-carousel/swipe-carousel.component';
 export * from './lib/components/molecules/swipe-carousel/types';
-export * from './lib/components/molecules/recap-card/recap-card.component';
-export * from './lib/components/molecules/recap-card/types';
 export * from './lib/components/molecules/testimonial-card/testimonial-card.component';
 export * from './lib/components/molecules/testimonial-card/types';
 export * from './lib/components/molecules/features-list/features-list.component';
@@ -218,7 +210,6 @@ export * from './lib/components/organisms/bottom-nav/bottom-nav.component';
 export * from './lib/components/organisms/bottom-nav/types';
 export * from './lib/components/organisms/avatar-upload/avatar-upload.component';
 export * from './lib/components/organisms/avatar-upload/types';
-export * from './lib/components/templates/layout/layout.component';
 export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';
 export * from './lib/components/templates/page-template/page-template.component';

package/src/lib/components/styles/variables.scss

@@ -83,6 +83,13 @@ $color-default-shadow: #121954;
 $color-default-placeholder: #afbacc;
 
 :root {
+  /* CONTAINER WIDTHS — design tokens consumibles desde apps */
+  --val-container-sm: 540px;
+  --val-container-md: 720px;
+  --val-container-lg: 880px;
+  --val-container-xl: 1100px;
+  --val-container-padding: 16px;
+
   --ion-color-primary: #7026df;
   --ion-color-primary-rgb: 112, 38, 223;
   --ion-color-primary-contrast: #ffffff;