valtech-components 2.0.794 → 2.0.795

package/src/lib/components/atoms/fab/fab.stories.ts

@@ -0,0 +1,360 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FabComponent } from './fab.component';
+import { FabMetadata } from './types';
+
+const createFabProps = (overrides: Partial<FabMetadata> = {}): FabMetadata => ({
+  icon: 'add',
+  color: 'primary',
+  position: 'bottom-end',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createFabProps();
+const secondaryProps = createFabProps({ color: 'secondary' });
+const dangerProps = createFabProps({ icon: 'trash', color: 'danger' });
+const successProps = createFabProps({ icon: 'checkmark', color: 'success' });
+const smallProps = createFabProps({ size: 'small' });
+const translucentProps = createFabProps({ translucent: true });
+const disabledProps = createFabProps({ disabled: true });
+
+const withActionsProps = createFabProps({
+  icon: 'add',
+  iconActivated: 'close',
+  actions: [
+    { icon: 'camera', label: 'Photo', token: 'photo' },
+    { icon: 'mic', label: 'Audio', token: 'audio' },
+    { icon: 'create', label: 'Note', token: 'note' },
+  ],
+  side: 'top',
+});
+
+const speedDialProps = createFabProps({
+  icon: 'share',
+  iconActivated: 'close',
+  color: 'tertiary',
+  actions: [
+    { icon: 'heart', label: 'Like', token: 'like', color: 'danger' },
+    { icon: 'star', label: 'Favorite', token: 'favorite', color: 'warning' },
+    { icon: 'send', label: 'Send', token: 'send', color: 'primary' },
+  ],
+  side: 'top',
+});
+
+const horizontalActionsProps = createFabProps({
+  icon: 'add',
+  iconActivated: 'close',
+  position: 'bottom-start',
+  actions: [
+    { icon: 'camera', token: 'camera' },
+    { icon: 'mic', token: 'mic' },
+    { icon: 'create', token: 'create' },
+  ],
+  side: 'end',
+});
+
+const topPositionProps = createFabProps({
+  icon: 'add',
+  position: 'top-end',
+  color: 'warning',
+});
+
+const centerPositionProps = createFabProps({
+  icon: 'add',
+  position: 'center-end',
+  color: 'success',
+});
+
+// Showcase props
+const showcaseDefaultProps = createFabProps();
+const showcaseSecondaryProps = createFabProps({ color: 'secondary', icon: 'heart' });
+const showcaseDangerProps = createFabProps({ color: 'danger', icon: 'trash' });
+const showcaseSmallProps = createFabProps({ size: 'small', icon: 'add' });
+const showcaseWithActionsProps = createFabProps({
+  icon: 'add',
+  iconActivated: 'close',
+  actions: [
+    { icon: 'camera', token: 'camera' },
+    { icon: 'mic', token: 'mic' },
+    { icon: 'create', token: 'create' },
+  ],
+  side: 'top',
+});
+
+const meta: Meta<FabComponent> = {
+  title: 'Atoms/Fab',
+  component: FabComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, FabComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'FAB configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'FabMetadata',
+          detail: `{
+  icon: string;
+  iconActivated?: string;
+  color?: Color;
+  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'center-start' | 'center-end';
+  size?: 'small' | 'default';
+  actions?: FabActionMetadata[];
+  side?: 'start' | 'end' | 'top' | 'bottom';
+  disabled?: boolean;
+  translucent?: boolean;
+}`,
+        },
+      },
+    },
+    fabClick: {
+      action: 'fabClick',
+      description: 'Event emitted when FAB is clicked (without actions)',
+    },
+    actionClick: {
+      action: 'actionClick',
+      description: 'Event emitted when an action button is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-fab
+
+A Floating Action Button (FAB) component with optional speed dial actions.
+
+### Features
+
+- **Speed Dial**: Expandable actions menu
+- **Positions**: 6 corner/edge positions
+- **Sizes**: Default and small
+- **Colors**: All Ionic colors
+
+### Usage
+
+\`\`\`html
+<!-- Simple FAB -->
+<val-fab
+  [props]="{ icon: 'add', color: 'primary' }"
+  (fabClick)="onCreate()"
+></val-fab>
+
+<!-- Speed dial FAB -->
+<val-fab
+  [props]="{
+    icon: 'add',
+    iconActivated: 'close',
+    actions: [
+      { icon: 'camera', token: 'photo' },
+      { icon: 'mic', token: 'audio' }
+    ]
+  }"
+  (actionClick)="onAction($event)"
+></val-fab>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<FabComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: defaultProps },
+  }),
+};
+
+export const Secondary: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: secondaryProps },
+  }),
+};
+
+export const Danger: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: dangerProps },
+  }),
+};
+
+export const Success: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: successProps },
+  }),
+};
+
+export const Small: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: smallProps },
+  }),
+};
+
+export const Translucent: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: translucentProps },
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: disabledProps },
+  }),
+};
+
+export const WithActions: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 250px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: withActionsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'FAB with speed dial actions. Click to expand.',
+      },
+    },
+  },
+};
+
+export const SpeedDial: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 250px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: speedDialProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Speed dial with colored action buttons.',
+      },
+    },
+  },
+};
+
+export const HorizontalActions: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: horizontalActionsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Actions expand horizontally.',
+      },
+    },
+  },
+};
+
+export const TopPosition: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: topPositionProps },
+  }),
+};
+
+export const CenterPosition: Story = {
+  render: () => ({
+    template: `
+      <div style="position: relative; height: 150px; background: #f5f5f5; border-radius: 8px;">
+        <val-fab [props]="fabProps"></val-fab>
+      </div>
+    `,
+    props: { fabProps: centerPositionProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <h3 style="margin: 0; font-family: system-ui;">FAB Colors</h3>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+          <div style="position: relative; width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px;">
+            <val-fab [props]="primary"></val-fab>
+          </div>
+          <div style="position: relative; width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px;">
+            <val-fab [props]="secondary"></val-fab>
+          </div>
+          <div style="position: relative; width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px;">
+            <val-fab [props]="danger"></val-fab>
+          </div>
+        </div>
+
+        <h3 style="margin: 0; font-family: system-ui;">Small Size</h3>
+        <div style="position: relative; width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px;">
+          <val-fab [props]="small"></val-fab>
+        </div>
+
+        <h3 style="margin: 0; font-family: system-ui;">Speed Dial</h3>
+        <div style="position: relative; height: 200px; background: #f5f5f5; border-radius: 8px;">
+          <val-fab [props]="withActions"></val-fab>
+        </div>
+      </div>
+    `,
+    props: {
+      primary: showcaseDefaultProps,
+      secondary: showcaseSecondaryProps,
+      danger: showcaseDangerProps,
+      small: showcaseSmallProps,
+      withActions: showcaseWithActionsProps,
+    },
+  }),
+};

package/src/lib/components/atoms/fab/types.ts

@@ -0,0 +1,47 @@
+import { Color } from '@ionic/core';
+
+/**
+ * FAB action item configuration.
+ */
+export interface FabActionMetadata {
+  /** Action icon */
+  icon: string;
+  /** Action label (tooltip) */
+  label?: string;
+  /** Action color */
+  color?: Color;
+  /** Action identifier */
+  token?: string;
+  /** Whether action is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Metadata for the FAB component.
+ */
+export interface FabMetadata {
+  /** Main FAB icon */
+  icon: string;
+  /** Icon when FAB is activated (optional) */
+  iconActivated?: string;
+  /** FAB color */
+  color?: Color;
+  /** FAB position */
+  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'center-start' | 'center-end';
+  /** FAB size */
+  size?: 'small' | 'default';
+  /** FAB actions (mini buttons) */
+  actions?: FabActionMetadata[];
+  /** Actions list side */
+  side?: 'start' | 'end' | 'top' | 'bottom';
+  /** Whether FAB is disabled */
+  disabled?: boolean;
+  /** Translucent background */
+  translucent?: boolean;
+  /** Show labels on actions */
+  showLabels?: boolean;
+  /** Close on action click */
+  closeOnAction?: boolean;
+  /** Unique token identifier */
+  token?: string;
+}

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

@@ -0,0 +1,132 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, Input, signal } from '@angular/core';
+import { GlassMetadata } from './types';
+
+/**
+ * `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>
+ * ```
+ */
+@Component({
+  selector: 'val-glass',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      class="val-glass"
+      [class]="resolvedProps().cssClass || ''"
+      [style.background]="bgStyle()"
+      [style.backdrop-filter]="filterStyle()"
+      [style.-webkit-backdrop-filter]="filterStyle()"
+      [style.border-radius]="resolvedProps().radius || '14px'"
+      [style.padding]="resolvedProps().padding || '10px 18px'"
+      [style.border]="borderStyle()"
+      [style.box-shadow]="shadowStyle()"
+      [style.display]="resolvedProps().display || 'inline-block'"
+    >
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: contents;
+      }
+
+      .val-glass {
+        max-width: 100%;
+        box-sizing: border-box;
+        transition:
+          background 0.2s ease,
+          border-color 0.2s ease;
+      }
+
+      /* Fallback para browsers sin backdrop-filter — bumper alpha del tint
+       * para mantener legibilidad. Detectado vía @supports. */
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .val-glass {
+          background: rgba(14, 4, 32, 0.85) !important;
+        }
+      }
+    `,
+  ],
+})
+export class GlassComponent {
+  private readonly props_ = signal<GlassMetadata>({});
+
+  @Input() set props(value: GlassMetadata | undefined) {
+    this.props_.set(value ?? {});
+  }
+
+  /** Snapshot reactivo de los props con defaults aplicados. */
+  readonly resolvedProps = computed<GlassMetadata>(() => this.props_());
+
+  /**
+   * 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 = computed(() => {
+    const p = this.resolvedProps();
+    const tint = p.tint ?? 'dark';
+    const alpha = p.tintAlpha ?? 0.55;
+
+    if (tint === 'dark') return `rgba(14, 4, 32, ${alpha})`;
+    if (tint === 'light') return `rgba(255, 255, 255, ${alpha})`;
+    if (tint === 'auto') {
+      // CSS var — definida en :host vía host bindings de tema. Fallback dark.
+      return `var(--val-glass-auto-bg, rgba(14, 4, 32, ${alpha}))`;
+    }
+    return tint; // custom rgba/hsl/hex
+  });
+
+  readonly filterStyle = computed(() => {
+    const p = this.resolvedProps();
+    const blur = p.blur ?? 10;
+    const sat = p.saturate ?? 140;
+    return `blur(${blur}px) saturate(${sat}%)`;
+  });
+
+  readonly borderStyle = computed(() => {
+    const showBorder = this.resolvedProps().border ?? true;
+    if (!showBorder) return 'none';
+    const tint = this.resolvedProps().tint ?? 'dark';
+    // light tint → border más oscuro para visibilidad; dark tint → blanco.
+    if (tint === 'light') return '1px solid rgba(0, 0, 0, 0.08)';
+    return '1px solid rgba(255, 255, 255, 0.08)';
+  });
+
+  readonly shadowStyle = computed(() => {
+    const elevation = this.resolvedProps().elevation ?? 'md';
+    switch (elevation) {
+      case 'none':
+        return 'none';
+      case 'sm':
+        return '0 2px 8px rgba(0, 0, 0, 0.15)';
+      case 'lg':
+        return '0 12px 40px rgba(0, 0, 0, 0.35)';
+      case 'md':
+      default:
+        return '0 4px 24px rgba(0, 0, 0, 0.25)';
+    }
+  });
+}

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

@@ -0,0 +1,79 @@
+/**
+ * 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/src/lib/components/atoms/glow/glow.component.scss

@@ -0,0 +1,88 @@
+:host {
+  position: relative;
+  display: block;
+  isolation: isolate;
+  overflow: hidden;
+
+  --val-glow-color-rgb: var(--ion-color-primary-rgb);
+  --val-glow-color-secondary-rgb: var(--val-glow-color-rgb);
+  --val-glow-position: 50% 50%;
+  --val-glow-size: 800px;
+  --val-glow-intensity: 0.18;
+  --val-glow-angle: 180deg;
+  --val-glow-blend-mode: normal;
+}
+
+:host::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-blend-mode: var(--val-glow-blend-mode);
+  background-repeat: no-repeat;
+}
+
+// Radial — single color, single halo
+:host(.val-glow--radial)::before {
+  background-image: radial-gradient(
+    circle var(--val-glow-size) at var(--val-glow-position),
+    rgba(var(--val-glow-color-rgb), var(--val-glow-intensity)) 0%,
+    rgba(var(--val-glow-color-rgb), 0) 70%
+  );
+}
+
+// Radial — two-tone (color → secondary → transparent)
+:host(.val-glow--radial.val-glow--dual)::before {
+  background-image: radial-gradient(
+    circle var(--val-glow-size) at var(--val-glow-position),
+    rgba(var(--val-glow-color-rgb), var(--val-glow-intensity)) 0%,
+    rgba(var(--val-glow-color-secondary-rgb), calc(var(--val-glow-intensity) * 0.7)) 35%,
+    rgba(var(--val-glow-color-secondary-rgb), 0) 70%
+  );
+}
+
+// Linear — directional sweep
+:host(.val-glow--linear)::before {
+  background-image: linear-gradient(
+    var(--val-glow-angle),
+    rgba(var(--val-glow-color-rgb), var(--val-glow-intensity)) 0%,
+    rgba(var(--val-glow-color-rgb), 0) 100%
+  );
+}
+
+// Linear two-tone
+:host(.val-glow--linear.val-glow--dual)::before {
+  background-image: linear-gradient(
+    var(--val-glow-angle),
+    rgba(var(--val-glow-color-rgb), var(--val-glow-intensity)) 0%,
+    rgba(var(--val-glow-color-secondary-rgb), calc(var(--val-glow-intensity) * 0.8)) 50%,
+    rgba(var(--val-glow-color-secondary-rgb), 0) 100%
+  );
+}
+
+// Subtle drifting animation
+:host(.val-glow--animated)::before {
+  animation: val-glow-drift 16s ease-in-out infinite alternate;
+}
+
+@keyframes val-glow-drift {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate3d(-2%, 1.5%, 0) scale(1.05);
+    opacity: 0.95;
+  }
+  100% {
+    transform: translate3d(2%, -1.5%, 0) scale(1.02);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.val-glow--animated)::before {
+    animation: none;
+  }
+}