valtech-components 2.0.777 → 2.0.779

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

@@ -0,0 +1,43 @@
+import { GlassMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-glass`
+ *
+ * Capa **glassmorphism** reusable. Frosted glass overlay con backdrop blur,
+ * tint semi-translúcido, border sutil y shadow. Acepta cualquier contenido via
+ * `<ng-content>` — desde un texto a un card entero.
+ *
+ * Ideal sobre backgrounds decorativos (val-pattern, gradients, imágenes) para
+ * mejorar legibilidad del contenido sin tapar la decoración.
+ *
+ * @example Pill sobre patrón:
+ * ```html
+ * <val-glass><h1>Buenos días</h1></val-glass>
+ * ```
+ *
+ * @example Card glass (block) con auto tint:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', display: 'block', radius: '20px', padding: '24px' }">
+ *   <p>Contenido del card</p>
+ * </val-glass>
+ * ```
+ */
+export declare class GlassComponent {
+    private readonly props_;
+    set props(value: GlassMetadata | undefined);
+    /** Snapshot reactivo de los props con defaults aplicados. */
+    readonly resolvedProps: import("@angular/core").Signal<GlassMetadata>;
+    /**
+     * Resuelve el background según `tint` + `tintAlpha`.
+     * - `'dark'` → rgba purple-dark
+     * - `'light'` → rgba blanco
+     * - `'auto'` → CSS var con fallback (resolved vía media/class del tema)
+     * - custom string → usado tal cual
+     */
+    readonly bgStyle: import("@angular/core").Signal<string>;
+    readonly filterStyle: import("@angular/core").Signal<string>;
+    readonly borderStyle: import("@angular/core").Signal<"none" | "1px solid rgba(0, 0, 0, 0.08)" | "1px solid rgba(255, 255, 255, 0.08)">;
+    readonly shadowStyle: import("@angular/core").Signal<"none" | "0 2px 8px rgba(0, 0, 0, 0.15)" | "0 12px 40px rgba(0, 0, 0, 0.35)" | "0 4px 24px rgba(0, 0, 0, 0.25)">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlassComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlassComponent, "val-glass", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,70 @@
+/**
+ * Configuración del componente `val-glass`.
+ *
+ * Capa glassmorphism (frosted glass) — backdrop blur + tint semi-translúcido +
+ * border sutil + shadow. Diseñada para usarse SOBRE backgrounds decorativos
+ * (patterns, gradients, hero images) para mejorar legibilidad del contenido
+ * sin tapar la decoración.
+ *
+ * @example Pill sobre patrón (greeting hero):
+ * ```html
+ * <val-glass>
+ *   <h1>Buenos días, Juan</h1>
+ * </val-glass>
+ * ```
+ *
+ * @example Card glass auto-tint según tema:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', radius: '20px', padding: '24px', display: 'block' }">
+ *   <p>Contenido</p>
+ * </val-glass>
+ * ```
+ *
+ * @example Light glass sobre dark bg:
+ * ```html
+ * <val-glass [props]="{ tint: 'light', tintAlpha: 0.15, blur: 16 }">
+ *   ...
+ * </val-glass>
+ * ```
+ */
+export interface GlassMetadata {
+    /**
+     * Tint del fondo. Built-in:
+     * - `'dark'` (default) — `rgba(14, 4, 32, alpha)` — combina con palette Valtech purple
+     * - `'light'` — `rgba(255, 255, 255, alpha)` — para usar sobre dark bg
+     * - `'auto'` — switch por tema activo (`body.dark` → dark, sino light)
+     *
+     * También acepta una string CSS color custom (`rgba(...)`, `hsl(...)`, hex).
+     * Si pasas custom, `tintAlpha` se ignora.
+     */
+    tint?: 'dark' | 'light' | 'auto' | string;
+    /** Alpha del tint (0..1). Default `0.55`. Ignorado si `tint` es custom string. */
+    tintAlpha?: number;
+    /** Blur radius en px. Default `10`. Subir a 16-24 para más frosting. */
+    blur?: number;
+    /** Saturate filter % (acompañando blur). Default `140`. */
+    saturate?: number;
+    /** Border radius. Cualquier CSS length. Default `'14px'`. */
+    radius?: string;
+    /** Padding interno. CSS shorthand. Default `'10px 18px'`. */
+    padding?: string;
+    /** Mostrar border sutil (1px rgba blanco). Default `true`. */
+    border?: boolean;
+    /**
+     * Elevación de shadow:
+     * - `'none'` — sin shadow
+     * - `'sm'` — `0 2px 8px rgba(0,0,0,0.15)`
+     * - `'md'` (default) — `0 4px 24px rgba(0,0,0,0.25)`
+     * - `'lg'` — `0 12px 40px rgba(0,0,0,0.35)`
+     */
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Display mode:
+     * - `'inline-block'` (default) — fit-content, ideal para pills/badges
+     * - `'block'` — fill parent width, ideal para cards
+     * - `'flex'` — flex column, ideal para layouts internos
+     */
+    display?: 'inline-block' | 'block' | 'flex';
+    /** Clase CSS extra. */
+    cssClass?: string;
+}

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.777";
+export declare const VERSION = "2.0.779";

package/package.json

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

package/public-api.d.ts

@@ -44,6 +44,8 @@ export * from './lib/components/atoms/rights-footer/types';
 export * from './lib/components/atoms/pattern/pattern.component';
 export * from './lib/components/atoms/pattern/types';
 export * from './lib/components/atoms/pattern/motifs';
+export * from './lib/components/atoms/glass/glass.component';
+export { GlassMetadata } from './lib/components/atoms/glass/types';
 export * from './lib/components/molecules/alert-box/alert-box.component';
 export * from './lib/components/molecules/alert-box/types';
 export * from './lib/components/molecules/button-group/button-group.component';