valtech-components 2.0.714 → 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/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.714";
+export declare const VERSION = "2.0.715";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.714",
+  "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';

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;