valtech-components 2.0.688 → 2.0.689

package/src/lib/components/atoms/qr-code/types.ts

@@ -0,0 +1,173 @@
+import { QrResult } from '../../../services/qr-generator/types';
+
+/**
+ * Theme presets for quick styling.
+ */
+export type QrDisplayTheme =
+  | 'default'
+  | 'minimal'
+  | 'gradient-purple'
+  | 'gradient-blue'
+  | 'gradient-sunset'
+  | 'gradient-mint'
+  | 'dark'
+  | 'neon';
+
+/**
+ * Label position options.
+ */
+export type QrLabelPosition = 'top' | 'bottom';
+
+/**
+ * Gradient direction options.
+ */
+export type QrGradientDirection =
+  | 'to-right'
+  | 'to-left'
+  | 'to-bottom'
+  | 'to-top'
+  | 'to-bottom-right'
+  | 'to-bottom-left'
+  | 'to-top-right'
+  | 'to-top-left';
+
+/**
+ * Gradient configuration for backgrounds.
+ */
+export interface QrDisplayGradient {
+  /** Start color */
+  from: string;
+  /** End color */
+  to: string;
+  /** Optional middle color */
+  via?: string;
+  /** Gradient direction */
+  direction?: QrGradientDirection;
+}
+
+/**
+ * Label configuration for QR display.
+ */
+export interface QrLabelConfig {
+  /** Label text */
+  text: string;
+  /** Position (top or bottom) */
+  position?: QrLabelPosition;
+  /** Text color */
+  color?: string;
+  /** Font size in pixels */
+  fontSize?: number;
+  /** Font weight */
+  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  /** Icon name (ionicon) to show with label */
+  icon?: string;
+  /** Icon position */
+  iconPosition?: 'start' | 'end';
+}
+
+/**
+ * Metadata for the QR code display component.
+ */
+export interface QrCodeMetadata {
+  /** QR result from QrGeneratorService */
+  qr: QrResult;
+
+  /** Alt text for accessibility */
+  alt?: string;
+
+  /** Whether to show download button */
+  showDownload?: boolean;
+  /** Download button label */
+  downloadLabel?: string;
+
+  /** Whether to show copy button */
+  showCopy?: boolean;
+  /** Copy button label */
+  copyLabel?: string;
+
+  /** Whether to show share button */
+  showShare?: boolean;
+  /** Share button label */
+  shareLabel?: string;
+
+  /** Custom CSS class */
+  cssClass?: string;
+
+  /** Size override (will scale the image) */
+  displaySize?: number;
+
+  /** Border radius for the container */
+  borderRadius?: number;
+
+  /** Show border around QR */
+  showBorder?: boolean;
+  /** Border color */
+  borderColor?: string;
+
+  /** Padding around the QR code */
+  padding?: number;
+
+  /** Background color for container */
+  containerBackground?: string;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** Custom filename for download (without extension) */
+  downloadFilename?: string;
+
+  /** Share title */
+  shareTitle?: string;
+
+  /** Share text/description */
+  shareText?: string;
+
+  /** Custom filename for share */
+  shareFilename?: string;
+
+  // === Visual Customization ===
+
+  /** Theme preset for quick styling */
+  theme?: QrDisplayTheme;
+
+  /** Label/caption configuration */
+  label?: QrLabelConfig;
+
+  /** Gradient background (overrides containerBackground) */
+  gradient?: QrDisplayGradient;
+
+  /** Box shadow (e.g., 'sm', 'md', 'lg', 'xl', or custom CSS) */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+
+  /** Glow effect color (for neon theme) */
+  glowColor?: string;
+
+  /** Enable pulse animation on hover */
+  pulseOnHover?: boolean;
+
+  /** Enable scale animation on hover */
+  scaleOnHover?: boolean;
+
+  /** QR image border radius (to round the QR itself) */
+  qrBorderRadius?: number;
+
+  /** Reactive content keys */
+  downloadLabelContentKey?: string;
+  copyLabelContentKey?: string;
+  shareLabelContentKey?: string;
+  contentClass?: string;
+}
+
+/**
+ * Event emitted after QR code action.
+ */
+export interface QrCodeActionEvent {
+  /** Action type */
+  action: 'download' | 'copy' | 'share';
+  /** Whether action was successful */
+  success: boolean;
+  /** QR result */
+  qr: QrResult;
+  /** Error if action failed */
+  error?: Error;
+}

package/src/lib/components/atoms/rights-footer/rights-footer.component.scss

@@ -0,0 +1,20 @@
+.rights-footer {
+  display: block;
+  margin-top: 24px;
+
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  &--with-margin {
+    margin-bottom: 8px;
+  }
+}

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

@@ -0,0 +1,98 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { TextComponent } from '../text/text.component';
+import { RightsFooterMetadata } from './types';
+import { I18nService } from '../../../services/i18n';
+
+/**
+ * val-rights-footer
+ *
+ * A simple component that displays copyright text with dynamic year.
+ * Useful for footers where you need to show "© 2024 Company. All rights reserved."
+ *
+ * @example
+ * <val-rights-footer></val-rights-footer>
+ *
+ * @example
+ * <val-rights-footer
+ *   [props]="{
+ *     companyName: 'My Company',
+ *     rightsText: 'All rights reserved.',
+ *     color: 'medium',
+ *     align: 'left'
+ *   }"
+ * ></val-rights-footer>
+ *
+ * @input props - Optional configuration (companyName, rightsText, color, align)
+ */
+@Component({
+  selector: 'val-rights-footer',
+  standalone: true,
+  imports: [CommonModule, TextComponent],
+  template: `
+    <div
+      class="rights-footer"
+      [class.rights-footer--left]="propsAlign() === 'left'"
+      [class.rights-footer--center]="propsAlign() === 'center' || !propsAlign()"
+      [class.rights-footer--right]="propsAlign() === 'right'"
+      [class.rights-footer--with-margin]="propsWithMargin()"
+    >
+      <val-text
+        [props]="{
+          content: copyrightText(),
+          color: propsColor(),
+          bold: false,
+          size: 'small'
+        }"
+      />
+    </div>
+  `,
+  styleUrls: ['./rights-footer.component.scss'],
+})
+export class RightsFooterComponent {
+  private i18n = inject(I18nService);
+
+  /**
+   * Optional configuration for the rights footer.
+   * Signal-based input for full reactivity with computed().
+   */
+  readonly props = input<RightsFooterMetadata>();
+
+  /**
+   * Current year for copyright.
+   */
+  currentYear = new Date().getFullYear();
+
+  /**
+   * Computed copyright text - reactive to both language AND props changes.
+   */
+  copyrightText = computed(() => {
+    this.i18n.lang(); // Track language changes
+    const p = this.props(); // Track props changes (now it's a signal!)
+
+    // If fullText is provided, use it with {year} replacement
+    if (p?.fullText) {
+      return p.fullText.replace('{year}', String(this.currentYear));
+    }
+
+    // Legacy format: © {year} {company}. {rights}
+    const company = p?.companyName || 'Valtech';
+    const rights = p?.rightsText || this.i18n.t('allRightsReserved');
+    return `© ${this.currentYear} ${company}. ${rights}`;
+  });
+
+  /**
+   * Computed helper for align prop in template.
+   */
+  propsAlign = computed(() => this.props()?.align);
+
+  /**
+   * Computed helper for color prop in template.
+   */
+  propsColor = computed(() => this.props()?.color || 'dark');
+
+  /**
+   * Computed helper for withMargin prop in template.
+   */
+  propsWithMargin = computed(() => this.props()?.withMargin ?? false);
+}

package/src/lib/components/atoms/rights-footer/rights-footer.stories.ts

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { RightsFooterComponent } from './rights-footer.component';
+
+const meta: Meta<RightsFooterComponent> = {
+  title: 'Atoms/RightsFooter',
+  component: RightsFooterComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, RightsFooterComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the rights footer',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-rights-footer
+
+A simple component that displays copyright text with a dynamic year.
+
+### Problem it solves
+
+Every website needs a copyright notice in the footer. This component:
+- Automatically updates the year (no manual updates needed)
+- Provides consistent styling across apps
+- Supports customization (company name, text, alignment)
+
+### Usage
+
+\`\`\`html
+<!-- Default: "© 2024 Valtech. Todos los derechos reservados." -->
+<val-rights-footer></val-rights-footer>
+
+<!-- Custom company and text -->
+<val-rights-footer
+  [props]="{
+    companyName: 'My Company',
+    rightsText: 'All rights reserved.',
+    color: 'medium',
+    align: 'center'
+  }"
+></val-rights-footer>
+\`\`\`
+
+### Features
+
+- Dynamic year (always current)
+- Customizable company name
+- Customizable rights text
+- Color options from Ionic palette
+- Text alignment options
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<RightsFooterComponent>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-rights-footer></val-rights-footer>
+    `,
+  }),
+};
+
+export const CustomCompany: Story = {
+  args: {
+    props: {
+      companyName: 'Acme Corporation',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-rights-footer [props]="props"></val-rights-footer>
+    `,
+  }),
+};
+
+export const EnglishText: Story = {
+  args: {
+    props: {
+      companyName: 'Valtech',
+      rightsText: 'All rights reserved.',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-rights-footer [props]="props"></val-rights-footer>
+    `,
+  }),
+};
+
+export const LeftAligned: Story = {
+  args: {
+    props: {
+      align: 'left',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="background: #f5f5f5; padding: 16px;">
+        <val-rights-footer [props]="props"></val-rights-footer>
+      </div>
+    `,
+  }),
+};
+
+export const RightAligned: Story = {
+  args: {
+    props: {
+      align: 'right',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="background: #f5f5f5; padding: 16px;">
+        <val-rights-footer [props]="props"></val-rights-footer>
+      </div>
+    `,
+  }),
+};
+
+export const LightColor: Story = {
+  args: {
+    props: {
+      color: 'light',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="background: #333; padding: 16px;">
+        <val-rights-footer [props]="props"></val-rights-footer>
+      </div>
+    `,
+  }),
+};
+
+export const MediumColor: Story = {
+  args: {
+    props: {
+      color: 'medium',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <val-rights-footer [props]="props"></val-rights-footer>
+    `,
+  }),
+};
+
+export const InFooterContext: Story = {
+  render: () => ({
+    template: `
+      <div style="
+        background: linear-gradient(to bottom, #1a1a2e, #16213e);
+        padding: 32px 16px 16px;
+        border-radius: 8px;
+      ">
+        <div style="
+          display: flex;
+          justify-content: center;
+          gap: 24px;
+          margin-bottom: 24px;
+        ">
+          <a href="#" style="color: #888; text-decoration: none; font-family: system-ui; font-size: 14px;">Privacy</a>
+          <a href="#" style="color: #888; text-decoration: none; font-family: system-ui; font-size: 14px;">Terms</a>
+          <a href="#" style="color: #888; text-decoration: none; font-family: system-ui; font-size: 14px;">Contact</a>
+        </div>
+        <val-rights-footer [props]="{ color: 'medium' }"></val-rights-footer>
+      </div>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <div>
+          <h4 style="font-family: system-ui; margin: 0 0 8px;">Default (Spanish)</h4>
+          <val-rights-footer></val-rights-footer>
+        </div>
+
+        <div>
+          <h4 style="font-family: system-ui; margin: 0 0 8px;">English</h4>
+          <val-rights-footer [props]="{ rightsText: 'All rights reserved.' }"></val-rights-footer>
+        </div>
+
+        <div>
+          <h4 style="font-family: system-ui; margin: 0 0 8px;">Custom Company</h4>
+          <val-rights-footer [props]="{ companyName: 'Tech Corp' }"></val-rights-footer>
+        </div>
+
+        <div>
+          <h4 style="font-family: system-ui; margin: 0 0 8px;">Alignments</h4>
+          <div style="background: #f5f5f5; padding: 16px; display: flex; flex-direction: column; gap: 8px;">
+            <val-rights-footer [props]="{ align: 'left' }"></val-rights-footer>
+            <val-rights-footer [props]="{ align: 'center' }"></val-rights-footer>
+            <val-rights-footer [props]="{ align: 'right' }"></val-rights-footer>
+          </div>
+        </div>
+
+        <div style="background: #222; padding: 16px; border-radius: 8px;">
+          <h4 style="font-family: system-ui; margin: 0 0 8px; color: white;">Dark Background</h4>
+          <val-rights-footer [props]="{ color: 'light' }"></val-rights-footer>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/atoms/rights-footer/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Configuration for the rights footer component.
+ */
+export interface RightsFooterMetadata {
+  /**
+   * Full custom text with {year} placeholder for dynamic year.
+   * When set, companyName and rightsText are ignored.
+   * @example "© {year}, Soluciones Valtech Ltda. Todos los derechos reservados."
+   */
+  fullText?: string;
+  /** Company name to display. Default: 'Valtech' */
+  companyName?: string;
+  /** Rights text. Default: 'Todos los derechos reservados.' */
+  rightsText?: string;
+  /** Text color. Default: 'dark' */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+  /** Text alignment. Default: 'center' */
+  align?: 'left' | 'center' | 'right';
+  /** Apply margin-bottom spacing. Default: false */
+  withMargin?: boolean;
+}

package/src/lib/components/atoms/skeleton/skeleton.component.scss

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+ion-skeleton-text {
+  margin: 0;
+  display: block;
+
+  &.circle {
+    border-radius: 50%;
+  }
+}
+
+.skeleton-paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+
+  .skeleton-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .skeleton-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+}
+
+.skeleton-card {
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--ion-color-light);
+
+  .skeleton-card-image {
+    width: 100%;
+    height: 120px;
+    border-radius: 0;
+  }
+
+  .skeleton-card-content {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}